/* assets/site/estilo.css
 *
 * Sistema visual do site.
 *
 * Referência: encarte de ofertas impresso. Anton condensado no que é número
 * (preço, desconto, contagem), Inter no que é leitura, régua de 1px no lugar
 * de sombra, e papel quente em vez de branco puro. As mesmas duas fontes das
 * artes publicadas no Telegram, para post e site lerem como a mesma marca.
 *
 * O arquivo é copiado inteiro para o site gerado e servido com hash na URL,
 * então pode ser cacheado para sempre — ver `gerador_site.py`.
 */

/* ---------------------------------------------------------------- fontes */

@font-face {
  font-family: 'Anton';
  src: url('/estatico/fontes/anton.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterSite';
  src: url('/estatico/fontes/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterSite';
  src: url('/estatico/fontes/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'InterSite';
  src: url('/estatico/fontes/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

/* A paleta sai do logo: creme #FBF6EC de fundo, azul-marinho da etiqueta e
 * dourado da lupa. O vermelho não está no logo e entra por função, não por
 * enfeite — preço e desconto precisam gritar, e marinho não grita. Vermelho
 * sobre creme com marinho ao lado é a combinação clássica de encarte de
 * liquidação, que é exatamente o que esta página é. */
:root {
  --papel:      #FBF6EC;
  --papel-2:    #F3EBDC;
  --papel-3:    #FFFFFF;
  --tinta:      #1B2440;
  --tinta-2:    #5C6478;
  --tinta-3:    #8A90A0;
  --linha:      #E0D8C8;
  --linha-2:    #C8BEA9;
  --brasa:      #C9391B;
  --brasa-2:    #A62B12;
  --azulejo:    #2E7C8A;
  --verde:      #146B45;
  --ouro:       #9A7118;
  --sobre-cor:  #FFFFFF;

  --display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --texto: 'InterSite', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --folga: clamp(1rem, 3vw, 2.25rem);
  --raio: 4px;
}

/* O padrão do sistema é "sem escolha explícita": nesse caso só o
 * prefers-color-scheme separa claro de escuro. O [data-tema] existe para o
 * botão do cabeçalho ganhar dos dois lados. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --papel:     #0E1220;
    --papel-2:   #151B2E;
    --papel-3:   #1D2439;
    --tinta:     #F1EDE3;
    --tinta-2:   #9AA3BA;
    --tinta-3:   #7B8399;
    --linha:     #262E45;
    --linha-2:   #38415C;
    --brasa:     #FF6A45;
    --brasa-2:   #FF8767;
    --azulejo:   #6FC3D2;
    --verde:     #4FC08A;
    --ouro:      #DDB258;
    --sobre-cor: #1A0A05;
  }
}
:root[data-tema='escuro'] {
  --papel:     #0E1220;
  --papel-2:   #151B2E;
  --papel-3:   #1D2439;
  --tinta:     #F1EDE3;
  --tinta-2:   #9AA3BA;
  --tinta-3:   #7B8399;
  --linha:     #262E45;
  --linha-2:   #38415C;
  --brasa:     #FF6A45;
  --brasa-2:   #FF8767;
  --azulejo:   #6FC3D2;
  --verde:     #4FC08A;
  --ouro:      #DDB258;
  --sobre-cor: #1A0A05;
}

/* ---------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.62 var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--brasa); color: var(--sobre-cor); }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sem teto de largura: o site ocupa a tela inteira, com uma folga lateral
 * que so existe para o conteudo nao encostar na borda. Os blocos de leitura
 * (`.prosa`, `.chamada`) mantem limite proprio em ch, senao a linha de texto
 * passaria de 200 caracteres num monitor ultralargo. */
.env {
  width: 100%;
  padding-inline: clamp(.9rem, 2vw, 2.25rem);
  margin-inline: auto;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; top: 0; }

.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- tipografia */

h1, h2, h3, h4 { margin: 0; line-height: 1.14; text-wrap: balance; }

.titulao {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .96;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
}

.titulo-secao {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.02;
  font-weight: 400;
}

/* Rótulo de seção: régua curta + texto pequeno em caixa alta. É o que dá
 * ritmo à página sem precisar de mais uma caixa colorida. */
.rotulo {
  display: flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brasa);
  margin-bottom: .55rem;
}
.rotulo::before {
  content: ''; width: 1.7rem; height: 2px; background: var(--brasa); flex: none;
}
.rotulo.azul { color: var(--azulejo); }
.rotulo.azul::before { background: var(--azulejo); }

.chamada {
  color: var(--tinta-2);
  max-width: 62ch;
  font-size: 1.02rem;
  margin: .7rem 0 0;
}

.num { font-variant-numeric: tabular-nums; }

.prosa { max-width: 68ch; }
.prosa h2 {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: 1.5rem; margin: 2.4rem 0 .7rem; letter-spacing: -.005em;
}
.prosa h3 { font-size: 1.02rem; font-weight: 700; margin: 1.7rem 0 .4rem; }
.prosa p, .prosa li { color: var(--tinta-2); }
.prosa p { margin: 0 0 1rem; }
.prosa ul, .prosa ol { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.prosa li { margin-bottom: .45rem; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa a { color: var(--brasa); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo .env {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
  min-height: 4.1rem;
}

/* A marca e imagem, nao tipo: o logo tem etiqueta, lupa e degrade dourado
 * que nenhuma fonte reproduz. Sao duas variantes do mesmo arquivo, porque o
 * marinho do original desaparece sobre fundo escuro -- ver
 * assets/logos/gerar_web.py. */
.marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.marca img { height: 2.5rem; width: auto; }
.marca .clara { display: none; }
:root[data-tema='escuro'] .marca .escura { display: none; }
:root[data-tema='escuro'] .marca .clara { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .marca .escura { display: none; }
  :root:not([data-tema='claro']) .marca .clara { display: block; }
}
.rodape .marca img { height: 3rem; }
@media (max-width: 34rem) { .marca img { height: 2.1rem; } }

.menu { display: flex; gap: clamp(.7rem, 1.6vw, 1.5rem); margin-right: auto; }
.menu a {
  text-decoration: none; color: var(--tinta-2); font-size: .92rem; font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--tinta); }
.menu a[aria-current] { color: var(--tinta); border-bottom-color: var(--brasa); font-weight: 600; }

.acoes-topo { display: flex; align-items: center; gap: .45rem; flex: none; }

.botao-icone {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: transparent; cursor: pointer; position: relative;
}
.botao-icone:hover { border-color: var(--linha-2); background: var(--papel-2); }
.botao-icone svg { width: 1.12rem; height: 1.12rem; }

.contador-fav {
  position: absolute; top: -.4rem; right: -.4rem; min-width: 1.15rem; height: 1.15rem;
  background: var(--brasa); color: var(--sobre-cor); border-radius: 99px;
  font-size: .68rem; font-weight: 700; display: grid; place-items: center; padding: 0 .25rem;
}

/* No tema claro o sol; no escuro a lua. Só um dos dois é exibido. */
:root:not([data-tema='escuro']) .icone-lua { display: none; }
:root[data-tema='escuro'] .icone-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .icone-sol { display: none; }
  :root:not([data-tema='claro']) .icone-lua { display: block; }
}

.busca-topo { position: relative; flex: 0 1 20rem; display: none; }
.js .busca-topo { display: block; }
.busca-topo input {
  width: 100%; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); color: var(--tinta);
  padding: .5rem .75rem .5rem 2.1rem; font: inherit; font-size: .9rem;
}
.busca-topo input::placeholder { color: var(--tinta-3); }
.busca-topo input:focus { border-color: var(--brasa); background: var(--papel-3); outline: none; }
.busca-topo svg {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--tinta-3); pointer-events: none;
}

.resultados-busca {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
  background: var(--papel-3); border: 1px solid var(--linha-2); border-radius: var(--raio);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
  max-height: min(28rem, 70vh); overflow-y: auto; padding: .3rem;
}
.resultados-busca a {
  display: flex; gap: .6rem; align-items: center; padding: .45rem;
  text-decoration: none; border-radius: 3px;
}
.resultados-busca a:hover, .resultados-busca a:focus { background: var(--papel-2); }
.resultados-busca img { width: 2.6rem; height: 2.6rem; object-fit: contain; flex: none; background: #fff; border-radius: 3px; }
.resultados-busca .rb-nome { font-size: .84rem; line-height: 1.35; }
.resultados-busca .rb-preco { font-family: var(--display); color: var(--brasa); font-size: .95rem; }
.resultados-busca p { margin: 0; padding: .9rem; font-size: .88rem; color: var(--tinta-2); }

/* ---------------------------------------------------------------- gaveta do topo */

/* O menu em linha não cabe com seis abas mais a busca abaixo de ~68rem, e
 * some. Sumir sem substituto era o defeito da versão anterior: no celular o
 * site ficava literalmente sem navegação, e as únicas saídas eram o rodapé e
 * o botão de voltar.
 *
 * É `<details>` e não um botão com JavaScript de propósito: abre e fecha
 * sozinho, com estado anunciado pelo leitor de tela, mesmo antes de o script
 * carregar. O `app.js` só acrescenta o que o elemento não faz — fechar ao
 * clicar fora e no Esc. */
.menu-movel { display: none; }
.menu-movel > summary {
  list-style: none;
  cursor: pointer;
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel > summary::marker { content: ''; }
.menu-movel .icone-fechar { display: none; }
.menu-movel[open] > summary .icone-menu { display: none; }
.menu-movel[open] > summary .icone-fechar { display: block; }

/* Ancorada no `.topo`, que é sticky e portanto posicionado. Sangra de ponta
 * a ponta porque no celular meia largura de gaveta é desperdício de tela. */
.gaveta {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel);
  border-bottom: 1px solid var(--linha-2);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .45);
  padding: 1rem clamp(.9rem, 2vw, 2.25rem) 1.35rem;
  max-height: calc(100dvh - 4.1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gaveta-lista, .gaveta-categorias { list-style: none; margin: 0; padding: 0; }
.gaveta-lista a {
  display: flex; align-items: center; gap: .5rem;
  padding: .78rem .2rem; text-decoration: none; font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid var(--linha);
}
.gaveta-lista a[aria-current] { color: var(--brasa); font-weight: 700; }
.gaveta-titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-3); font-weight: 700; margin: 1.2rem 0 .6rem;
}
.gaveta-categorias { display: flex; flex-wrap: wrap; gap: .4rem; }
.gaveta-categorias a {
  display: block; border: 1px solid var(--linha); border-radius: 99px;
  padding: .42rem .85rem; font-size: .84rem; text-decoration: none; color: var(--tinta-2);
}
.gaveta .cta { margin-top: 1.2rem; }

.selo-contagem {
  margin-left: auto; background: var(--brasa); color: var(--sobre-cor);
  border-radius: 99px; font-size: .7rem; font-weight: 700; padding: .1rem .45rem;
}

@media (max-width: 68rem) {
  .menu { display: none; }
  .menu-movel { display: block; }
  .busca-topo { flex: 1; }
}

/* Duas fileiras no celular: marca e botões em cima, busca ocupando a linha
 * inteira embaixo. Com tudo numa fileira só, a 390px, o campo de busca fica
 * com menos de 8rem e o placeholder some no meio da palavra. */
@media (max-width: 40rem) {
  .topo .env { flex-wrap: wrap; row-gap: .5rem; min-height: 0; padding-block: .5rem; }
  .busca-topo { order: 3; flex: 1 0 100%; }
  .acoes-topo { margin-left: auto; }
  .gaveta { max-height: calc(100dvh - 8rem); }
}

/* ---------------------------------------------------------------- faixas */

.faixa { border-block: 1px solid var(--linha); background: var(--papel-2); }
.faixa + .faixa { border-top: none; }
.faixa.papel { background: var(--papel); }
.faixa.tinta {
  background: var(--tinta); color: var(--papel);
  border-color: var(--tinta);
}
.faixa.tinta .chamada { color: color-mix(in srgb, var(--papel) 72%, transparent); }

section.bloco { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
section.bloco.curto { padding-block: clamp(1.75rem, 3vw, 2.5rem); }

.cabeca-secao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.link-mais {
  text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--brasa);
  white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
}
.link-mais:hover { gap: .5rem; }
.link-mais::after { content: '→'; transition: none; }

/* ---------------------------------------------------------------- placar */

/* Números do catálogo em Anton, separados por régua vertical. */
.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.placar div { padding: 1.05rem 0 1.05rem 1.1rem; border-left: 1px solid var(--linha); }
.placar div:first-child { border-left: none; padding-left: 0; }
.placar b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1; letter-spacing: -.01em;
}
.placar span {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-2); margin-top: .35rem; font-weight: 600;
}
.placar .destaque b { color: var(--brasa); }

/* Em duas colunas, o item que abre cada linha ficava com uma régua vertical
 * solta à esquerda — o `:first-child` só resolve a primeira. */
@media (max-width: 34rem) {
  .placar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .placar div:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* ---------------------------------------------------------------- manchete */

.manchete { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .manchete { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

/* Fundo branco fixo, e não `--papel-3`: a foto do produto já vem recortada
 * sobre branco, e um painel escuro atrás dela cria um retângulo branco
 * acidental no tema escuro. */
.manchete-foto {
  position: relative; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
/* Teto de altura: sem ele, `aspect-ratio: 1` numa coluna de 700px empurra
 * todo o resto da home para fora da primeira tela. */
.manchete-foto img {
  width: 100%; aspect-ratio: 1; max-height: 31rem; object-fit: contain;
  padding: clamp(1rem, 2.5vw, 2rem);
}
.manchete-foto .etiqueta { position: absolute; top: 1rem; left: 0; z-index: 2; }

.preco-gigante {
  font-family: var(--display); font-weight: 400; color: var(--brasa);
  font-size: clamp(3rem, 8vw, 5.5rem); line-height: .88; letter-spacing: -.02em;
  display: flex; align-items: flex-start; gap: .2em;
}
.preco-gigante sup { font-size: .34em; line-height: 1.5; font-weight: 400; }

.linha-preco { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: .9rem 0; }
.antes { color: var(--tinta-3); text-decoration: line-through; font-size: 1.05rem; }
.economia {
  color: var(--verde); font-weight: 600; font-size: .95rem;
  background: color-mix(in srgb, var(--verde) 12%, transparent);
  padding: .15rem .5rem; border-radius: 3px;
}

/* ---------------------------------------------------------------- etiqueta */

/* Etiqueta de preço com o bico recortado. É o detalhe que mais afasta o
 * layout do cartão genérico de framework. */
.etiqueta {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--brasa); color: var(--sobre-cor);
  font-family: var(--display); font-weight: 400; letter-spacing: .01em;
  font-size: 1.05rem; line-height: 1; padding: .42rem 1.15rem .42rem .7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 50%, 100% 100%, 0 100%);
}
.etiqueta.grande { font-size: 1.55rem; padding: .55rem 1.5rem .55rem .95rem; }
.etiqueta.pequena { font-size: .86rem; padding: .3rem .85rem .3rem .5rem; }

/* Carimbo de "menor preço": inclinado, com borda dupla. */
.carimbo {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 2px solid var(--verde); color: var(--verde);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .6rem; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--papel);
}
.carimbo svg { width: .85rem; height: .85rem; }

.selo-loja {
  font-size: .78rem; color: var(--tinta-2);
  display: inline-flex; align-items: center; gap: .35rem;
}

/* ---------------------------------------------------------------- vitrine */

.vitrine {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.vitrine.larga { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }

/* Duas colunas no celular, e não uma. Um cartão por linha dá uma foto de
 * 340px de altura e obriga a rolar meia tela por oferta — quem procura
 * achadinho está varrendo, não lendo. */
@media (max-width: 34rem) {
  .vitrine, .vitrine.larga { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .oferta-corpo { padding: .6rem .6rem .7rem; gap: .4rem; }
  .oferta h3 { font-size: .81rem; line-height: 1.35; }
  .oferta .preco { font-size: 1.32rem; }
  .oferta .antes { font-size: .76rem; }
  .meta-oferta { font-size: .71rem; gap: .35rem; }
  .acoes-oferta .cta { font-size: .78rem; padding: .5rem .3rem; }
  .favoritar { width: 1.95rem; }
  .etiqueta { font-size: .88rem; padding: .3rem .85rem .3rem .5rem; }
}

.oferta {
  display: flex; flex-direction: column; position: relative;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.oferta:hover { border-color: var(--linha-2); }
.oferta:hover .oferta-foto img { transform: scale(1.045); }

.oferta-foto {
  position: relative; background: #fff; aspect-ratio: 1;
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--linha);
}
.oferta-foto img {
  width: 100%; height: 100%; object-fit: contain; padding: .55rem;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.oferta-foto .etiqueta { position: absolute; top: .55rem; left: 0; }
.oferta-foto .carimbo { position: absolute; bottom: .55rem; left: .55rem; background: var(--papel); }

/* Foto que o CDN da Shopee deixou de servir: em vez do ícone de imagem
 * quebrada, uma área neutra com a marca d'água. */
.oferta.sem-foto .oferta-foto, .foto-produto.sem-foto {
  background: var(--papel-2);
}
.oferta.sem-foto .oferta-foto::after, .foto-produto.sem-foto::after {
  content: 'foto indisponível';
  font-size: .74rem; color: var(--tinta-3); letter-spacing: .06em; text-transform: uppercase;
}
.foto-produto.sem-foto { min-height: 18rem; display: grid; place-items: center; }

.oferta-corpo { padding: .8rem .85rem .9rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.oferta h3 { font-size: .89rem; font-weight: 500; line-height: 1.42; }
.oferta h3 a { text-decoration: none; }
.oferta h3 a::after { content: ''; position: absolute; inset: 0; }
.oferta h3 a:hover { color: var(--brasa); }

.oferta .preco {
  font-family: var(--display); color: var(--brasa); font-size: 1.62rem;
  line-height: 1; display: flex; align-items: flex-start; gap: .15em;
}
.oferta .preco sup { font-size: .42em; line-height: 1.55; }
.oferta .antes { font-size: .82rem; }

.meta-oferta {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .77rem; color: var(--tinta-2); margin-top: auto; padding-top: .2rem;
}
.meta-oferta .nota { color: var(--ouro); font-weight: 600; white-space: nowrap; }
.meta-oferta .pontinho { width: 3px; height: 3px; border-radius: 50%; background: var(--linha-2); }

.acoes-oferta { display: flex; gap: .4rem; }
.acoes-oferta .cta { flex: 1; }

/* O coração precisa ficar acima do link que cobre o cartão inteiro. */
/* `min-height` e não só largura: dentro de `.acoes-oferta` o botão estica
 * junto com o irmão, mas em `.feed-acoes`, que quebra linha, ele ficava com
 * 21px de altura — metade de um alvo de toque decente. */
.favoritar {
  position: relative; z-index: 2; flex: none;
  width: 2.3rem; min-height: 2.3rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: transparent; cursor: pointer; display: grid; place-items: center;
  color: var(--tinta-3);
}
.favoritar:hover { border-color: var(--brasa); color: var(--brasa); }
.favoritar svg { width: 1.05rem; height: 1.05rem; }
.favoritar[aria-pressed='true'] { color: var(--brasa); border-color: var(--brasa); }
.favoritar[aria-pressed='true'] svg { fill: var(--brasa); }

/* O botão padrão é tinta, não laranja. Numa grade de vinte cartões, vinte
 * botões laranja embaixo de vinte preços laranja apagam a hierarquia e é o
 * que faz a página parecer template. O laranja fica reservado para preço,
 * desconto e para a chamada principal de cada página — `.cta.quente`. */
.cta {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--tinta); color: var(--papel); text-decoration: none;
  font-weight: 600; font-size: .88rem; padding: .58rem .9rem; border-radius: var(--raio);
  border: 1px solid var(--tinta); cursor: pointer; text-align: center;
}
.cta:hover { background: var(--brasa); border-color: var(--brasa); color: var(--sobre-cor); }
.cta.quente { background: var(--brasa); border-color: var(--brasa); color: var(--sobre-cor); }
.cta.quente:hover { background: var(--brasa-2); border-color: var(--brasa-2); }
.cta.vazado { background: transparent; color: var(--tinta); border-color: var(--linha-2); }
.cta.vazado:hover { background: var(--papel-2); border-color: var(--tinta); }
.cta.grande { font-size: 1rem; padding: .85rem 1.6rem; }
.cta.bloco { display: flex; width: 100%; }

/* ---------------------------------------------------------------- lista ranqueada */

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { border-top: 1px solid var(--linha); }
.ranking li:first-child { border-top: none; }
.ranking a {
  display: grid; grid-template-columns: 1.6rem 3rem minmax(0,1fr) auto;
  gap: .75rem; align-items: center; padding: .7rem 0; text-decoration: none;
}
.ranking a:hover .rk-nome { color: var(--brasa); }
.ranking .rk-pos {
  font-family: var(--display); font-size: 1.15rem; color: var(--tinta-3); text-align: center;
}
.ranking img { width: 3rem; height: 3rem; object-fit: contain; background: #fff; border-radius: 3px; }
.ranking .rk-nome {
  font-size: .84rem; line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ranking .rk-preco { font-family: var(--display); color: var(--brasa); font-size: 1.08rem; text-align: right; }
.ranking .rk-preco small { display: block; font-family: var(--texto); font-size: .68rem; color: var(--tinta-2); font-weight: 600; }

.colunas-3 { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

/* ---------------------------------------------------------------- categorias */

.grade-categorias {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  list-style: none; padding: 0; margin: 0;
}
.grade-categorias a {
  display: block; padding: 1rem 1.1rem; text-decoration: none; height: 100%;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
}
.grade-categorias a:hover { border-color: var(--brasa); background: var(--papel-2); }
.grade-categorias b { display: block; font-size: .96rem; font-weight: 600; }
.grade-categorias span { display: block; font-size: .78rem; color: var(--tinta-2); margin-top: .25rem; }
.grade-categorias em {
  font-style: normal; font-family: var(--display); font-size: 1.5rem;
  color: var(--brasa); line-height: 1; display: block; margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- filtros */

.painel-filtros { display: none; }
.js .painel-filtros { display: block; }

.barra-filtros {
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: center;
  padding: .85rem 0; border-block: 1px solid var(--linha); margin-bottom: 1.5rem;
}
.barra-filtros select, .barra-filtros input[type='search'] {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel-3);
  color: var(--tinta); padding: .45rem .6rem; font: inherit; font-size: .87rem;
}
.barra-filtros input[type='search'] { flex: 1 1 14rem; min-width: 0; }
.barra-filtros label { font-size: .8rem; color: var(--tinta-2); font-weight: 600; }

.fichas { display: flex; gap: .4rem; flex-wrap: wrap; }
.ficha {
  border: 1px solid var(--linha); border-radius: 99px; background: transparent;
  padding: .32rem .8rem; font-size: .82rem; cursor: pointer; color: var(--tinta-2);
}
.ficha:hover { border-color: var(--linha-2); color: var(--tinta); }
.ficha[aria-pressed='true'] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600;
}

.contagem-filtro { font-size: .87rem; color: var(--tinta-2); margin: 0 0 1rem; }
.contagem-filtro b { color: var(--tinta); font-weight: 600; }

.vazio {
  border: 1px dashed var(--linha-2); border-radius: var(--raio);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--tinta-2);
}
.vazio b { display: block; color: var(--tinta); font-size: 1.05rem; margin-bottom: .35rem; }

/* ---------------------------------------------------------------- paginação */

.paginacao { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 2.5rem; align-items: center; }
.paginacao a, .paginacao span {
  min-width: 2.4rem; text-align: center; padding: .45rem .7rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  text-decoration: none; font-size: .88rem; font-variant-numeric: tabular-nums;
}
.paginacao a:hover { border-color: var(--tinta); }
.paginacao span[aria-current] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 700; }
.paginacao .reticencias { border: none; color: var(--tinta-3); min-width: auto; padding-inline: .2rem; }

/* ---------------------------------------------------------------- migalhas */

.migalhas { font-size: .8rem; color: var(--tinta-2); margin: 0 0 1.35rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--brasa); }
.migalhas span[aria-current] { color: var(--tinta-3); }

/* ---------------------------------------------------------------- ficha do produto */

.ficha-produto { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .ficha-produto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 90rem) { .ficha-produto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20rem; } }

.foto-produto {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  position: relative; overflow: hidden;
}
.foto-produto img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: clamp(1rem, 3vw, 2rem); }
.foto-produto .etiqueta { position: absolute; top: 1rem; left: 0; }

.painel-compra {
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-2); padding: 1.15rem;
}
.painel-compra .cta { width: 100%; }

.confianca { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.confianca li { display: flex; gap: .5rem; font-size: .82rem; color: var(--tinta-2); line-height: 1.45; }
.confianca svg { width: .95rem; height: .95rem; flex: none; margin-top: .18rem; color: var(--verde); }

.dados-produto {
  display: grid; grid-template-columns: auto 1fr; gap: 0;
  margin: 1.5rem 0 0; font-size: .89rem;
}
.dados-produto dt {
  color: var(--tinta-2); padding: .55rem 1.5rem .55rem 0; border-top: 1px solid var(--linha);
}
.dados-produto dd {
  margin: 0; padding: .55rem 0; border-top: 1px solid var(--linha);
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 500;
}

/* ---------------------------------------------------------------- nota do achado */

.nota-achado { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.15rem; background: var(--papel); }
.nota-achado header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.nota-achado header b {
  font-family: var(--display); font-size: 2.4rem; line-height: .9; color: var(--brasa);
}
.nota-achado header span { font-size: .8rem; color: var(--tinta-2); line-height: 1.35; }

.fatores { display: grid; gap: .7rem; margin: 0; }
.fator { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .7rem; align-items: center; font-size: .82rem; }
.fator .trilho { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--linha); }
.fator .barra { height: 100%; background: var(--brasa); border-radius: 99px; }
.fator .valor { color: var(--tinta-2); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.fator .rotulo-fator { color: var(--tinta-2); }
@media (max-width: 30rem) { .fator { grid-template-columns: 6.5rem 1fr auto; } }

/* ---------------------------------------------------------------- histórico */

.historico { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.15rem; }
.grafico { width: 100%; height: auto; display: block; margin: .9rem 0 .4rem; overflow: visible; }
.grafico .linha-preco-svg { fill: none; stroke: var(--brasa); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area-preco { fill: color-mix(in srgb, var(--brasa) 12%, transparent); }
.grafico .ponto { fill: var(--brasa); }
.grafico .base { stroke: var(--linha); stroke-width: 1; }
.grafico text { font-size: 10px; fill: var(--tinta-2); font-family: var(--texto); }

.tabela-historico { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: .8rem; }
.tabela-historico th { text-align: left; color: var(--tinta-2); font-weight: 600; padding: .35rem 0; border-bottom: 1px solid var(--linha); }
.tabela-historico td { padding: .35rem 0; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.tabela-historico td:last-child, .tabela-historico th:last-child { text-align: right; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  border: 1px solid var(--linha); border-left: 3px solid var(--brasa);
  background: var(--papel-2); border-radius: 0 var(--raio) var(--raio) 0;
  padding: .9rem 1.1rem; font-size: .87rem; color: var(--tinta-2);
}
.aviso b { color: var(--tinta); }
.aviso.calma { border-left-color: var(--azulejo); }
.aviso.boa { border-left-color: var(--verde); }

/* ---------------------------------------------------------------- método */

.passos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); counter-reset: passo; list-style: none; margin: 0; padding: 0; }
.passos li { counter-increment: passo; }
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--display); font-size: 1.85rem; color: var(--brasa);
  display: block; line-height: 1; margin-bottom: .5rem;
}
.passos b { display: block; font-size: 1.02rem; margin-bottom: .3rem; }
.passos p { margin: 0; font-size: .89rem; color: var(--tinta-2); }
.faixa.tinta .passos p { color: color-mix(in srgb, var(--papel) 68%, transparent); }

/* ---------------------------------------------------------------- telegram */

.convite {
  display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .convite { grid-template-columns: minmax(0, 1fr) auto; } }
.convite h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.3rem); }

/* ---------------------------------------------------------------- espelho do feed */

/* A lista que a bio do Instagram aponta. Quem chega aqui está no celular,
 * viu uma foto quadrada há poucos segundos e quer reencontrar aquele item.
 * Por isso linhas largas em vez da grade do resto do site: a foto fica
 * grande o bastante para ser reconhecida de relance e o botão cabe no
 * polegar sem concorrer com mais nada na linha. */
.cabeca-feed { max-width: 62ch; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.lista-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.item-feed {
  display: grid; grid-template-columns: clamp(5.5rem, 22vw, 9rem) minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.35rem); align-items: center;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-3); padding: .7rem;
}
/* O primeiro é quase sempre o post que a pessoa acabou de ver. */
.item-feed.recente { border-color: var(--brasa); }

.feed-foto { position: relative; background: #fff; border-radius: 3px; overflow: hidden; }
.feed-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.feed-foto .etiqueta { position: absolute; top: .4rem; left: 0; }

.feed-corpo { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.feed-quando {
  margin: 0; font-size: .72rem; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.feed-quando b { color: var(--brasa); font-weight: 700; }
.item-feed h2 { font-size: .96rem; font-weight: 500; line-height: 1.4; }
.item-feed h2 a { text-decoration: none; }
.item-feed h2 a:hover { color: var(--brasa); }

.feed-precos { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.feed-precos .preco {
  font-family: var(--display); color: var(--brasa); font-size: 1.7rem;
  line-height: 1; display: flex; align-items: flex-start; gap: .15em;
}
.feed-precos .preco sup { font-size: .42em; line-height: 1.55; }
.feed-precos .antes { font-size: .84rem; }

.feed-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.feed-acoes .cta { flex: 1 1 12rem; }

.nota-feed { font-size: .8rem; color: var(--tinta-3); margin: 1.4rem 0 0; max-width: 76ch; }

/* No celular a foto vira uma faixa cheia: com 320px de largura, dividir a
 * linha em duas colunas deixa a foto pequena demais para reconhecer o
 * produto — que é a única coisa que esta página precisa fazer bem. */
@media (max-width: 30rem) {
  .item-feed { grid-template-columns: 1fr; gap: .7rem; }
  .feed-foto img { aspect-ratio: 4 / 3; }
  .feed-acoes .cta { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- rodapé */

.rodape { border-top: 1px solid var(--linha); background: var(--papel-2); padding-block: 3rem 2rem; margin-top: 0; }
.rodape-grade {
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.rodape-grade > div:first-child { grid-column: span 2; min-width: 0; }
@media (max-width: 40rem) { .rodape-grade > div:first-child { grid-column: auto; } }
.rodape h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-3); margin-bottom: .8rem; font-weight: 700;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rodape a { color: var(--tinta-2); text-decoration: none; font-size: .89rem; }
.rodape a:hover { color: var(--brasa); }
.rodape p { color: var(--tinta-2); font-size: .89rem; margin: 0 0 .9rem; max-width: 42ch; }

.transparencia-rodape {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha);
  display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: baseline;
  font-size: .8rem; color: var(--tinta-3);
}
.transparencia-rodape p { font-size: .8rem; color: var(--tinta-3); margin: 0; max-width: 78ch; }
.transparencia-rodape a { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.transparencia-rodape .assinatura { margin-left: auto; white-space: nowrap; }

/* ---------------------------------------------------------------- perguntas */

/* Acordeão de perguntas frequentes. O texto da resposta está no HTML desde o
 * primeiro byte, mesmo fechado — quem lê por máquina lê o documento, não a
 * tela, e é justamente esse bloco que buscador generativo costuma citar. */
.lista-perguntas { max-width: 84ch; border-top: 1px solid var(--linha); }
.lista-perguntas details { border-bottom: 1px solid var(--linha); }
.lista-perguntas summary {
  cursor: pointer; padding: .95rem 2.2rem .95rem 0; position: relative; list-style: none;
}
.lista-perguntas summary::-webkit-details-marker { display: none; }
.lista-perguntas summary::marker { content: ''; }
.lista-perguntas summary h3 { display: inline; font-size: 1rem; font-weight: 600; }
.lista-perguntas summary:hover h3 { color: var(--brasa); }
.lista-perguntas summary::after {
  content: '+'; position: absolute; right: .35rem; top: .62rem;
  font-family: var(--display); font-size: 1.45rem; line-height: 1; color: var(--brasa);
}
.lista-perguntas details[open] summary::after { content: '\2013'; }
.lista-perguntas details p {
  margin: 0 0 1.15rem; color: var(--tinta-2); font-size: .95rem; max-width: 78ch;
}

/* Parágrafo de resposta direta, no topo da página. Curto, datado e com os
 * números dentro — é o formato que sobrevive a ser citado fora daqui. */
.resposta-curta {
  border: 1px solid var(--linha); border-left: 3px solid var(--azulejo);
  background: var(--papel-2); border-radius: 0 var(--raio) var(--raio) 0;
  padding: 1.05rem 1.25rem; max-width: 84ch;
}
.resposta-curta p { margin: 0; font-size: .95rem; color: var(--tinta-2); line-height: 1.6; }
.resposta-curta b { color: var(--tinta); }

/* ---------------------------------------------------------------- bugs de preço */

.lista-bugs { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 80rem) { .lista-bugs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.item-bug {
  display: grid; grid-template-columns: clamp(6rem, 24vw, 10rem) minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem); align-items: start;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel-3); padding: .75rem; position: relative;
}
/* Borda verde só em quem tem evidência medida por nós. É o único sinal
 * visual que separa "medimos" de "a loja disse", e ele precisa ser lido de
 * relance numa lista de vinte itens. */
.item-bug.confirmado { border-color: color-mix(in srgb, var(--verde) 55%, var(--linha)); }

.bug-foto { position: relative; background: #fff; border-radius: 3px; overflow: hidden; }
.bug-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bug-foto .etiqueta { position: absolute; top: .4rem; left: 0; }

.bug-corpo { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.bug-grau { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bug-grau b {
  font-family: var(--display); font-size: 1.85rem; line-height: .85; color: var(--brasa);
}
.bug-grau > span:first-of-type {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3); font-weight: 700; line-height: 1.15;
}
.marca-evidencia {
  font-size: .71rem; font-weight: 600; color: var(--tinta-2);
  border: 1px solid var(--linha-2); border-radius: 99px; padding: .18rem .55rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.marca-evidencia.boa { color: var(--verde); border-color: var(--verde); }
.marca-evidencia svg { width: .75rem; height: .75rem; }

.item-bug h2 { font-size: .98rem; font-weight: 500; line-height: 1.4; }
.item-bug h2 a { text-decoration: none; }
.item-bug h2 a:hover { color: var(--brasa); }

.evidencias { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.evidencia {
  font-size: .8rem; line-height: 1.45; color: var(--tinta-2);
  padding-left: .7rem; border-left: 2px solid var(--linha-2);
}
.evidencia b { color: var(--tinta); font-weight: 600; }
.evidencia.historico, .evidencia.familia { border-left-color: var(--verde); }
.evidencia.desconto { border-left-color: var(--ouro); }

.item-bug .feed-precos .economia { font-size: .82rem; }

@media (max-width: 30rem) {
  .item-bug { grid-template-columns: 1fr; }
  .bug-foto img { aspect-ratio: 4 / 3; }
  .item-bug .feed-acoes .cta { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- cupons */

.lista-cupons {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.cupom {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel-3);
  padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem;
}
.cupom.destaque { border-color: var(--brasa); }
.cupom-cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cupom-loja {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--tinta-2);
}
.cupom-desconto { font-family: var(--display); color: var(--brasa); font-size: 1.5rem; line-height: 1; }
.cupom h2 { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.cupom-texto { margin: 0; font-size: .87rem; color: var(--tinta-2); }

/* Borda tracejada no código: é a convenção visual de cupom recortado, e
 * distingue à primeira vista o que se copia do que se clica. */
.cupom-codigo { display: flex; gap: .5rem; flex-wrap: wrap; }
.cupom-codigo code {
  flex: 1 1 9rem; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--linha-2); border-radius: var(--raio); background: var(--papel-2);
  padding: .5rem .7rem; font-size: 1rem; letter-spacing: .08em; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cupom-sem-codigo {
  margin: 0; font-size: .84rem; color: var(--verde); font-weight: 600;
}
.cupom-dados { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: .84rem; }
.cupom-dados dt { color: var(--tinta-2); padding: .32rem 1.2rem .32rem 0; border-top: 1px solid var(--linha); }
.cupom-dados dd { margin: 0; padding: .32rem 0; border-top: 1px solid var(--linha); text-align: right; font-weight: 500; }
.cupom-dados .expira { color: var(--brasa); font-weight: 700; margin-left: .35rem; }
.cupom .cta.bloco { margin-top: auto; }

/* ---------------------------------------------------------------- presentes */

.buscador {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel-2);
  padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 1.15rem;
}
.campo-presente { border: none; padding: 0; margin: 0; min-width: 0; }
.campo-presente legend {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-2); padding: 0; margin-bottom: .55rem;
}
.campo-presente legend small {
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tinta-3);
}

/* Ficha com input de verdade por baixo: o rádio nativo dá navegação por
 * teclado, agrupamento anunciado pelo leitor de tela e estado que sobrevive
 * ao "voltar" do navegador — coisas que um <button> com aria-pressed só
 * imita. */
.ficha-escolha { position: relative; display: inline-flex; }
.ficha-escolha input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.ficha-escolha span {
  border: 1px solid var(--linha); border-radius: 99px; background: var(--papel);
  padding: .45rem .9rem; font-size: .87rem; color: var(--tinta-2); cursor: pointer;
  display: block;
}
.ficha-escolha span:hover { border-color: var(--linha-2); color: var(--tinta); }
.ficha-escolha input:checked + span {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600;
}
.ficha-escolha input:focus-visible + span { outline: 2px solid var(--brasa); outline-offset: 2px; }

.acoes-buscador {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--linha);
}
.nota-privacidade { font-size: .78rem; color: var(--tinta-3); max-width: 40ch; }

.resultado-presente { margin-top: 2.75rem; scroll-margin-top: 6rem; }
.resultado-presente:focus { outline: none; }

.motivo-presente {
  font-size: .74rem; color: var(--verde); font-weight: 600; line-height: 1.35;
}

.cartao-atalho {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
  padding: 1.2rem; display: flex; flex-direction: column; gap: .65rem; align-items: flex-start;
  height: 100%;
}
.cartao-atalho h3 { font-size: 1.08rem; font-weight: 700; }
.cartao-atalho p { margin: 0; font-size: .89rem; color: var(--tinta-2); }
.cartao-atalho .cta { margin-top: auto; }

/* ---------------------------------------------------------------- toque */

/* Alvo de toque no celular. As fichas de filtro tinham 24px de altura, metade
 * do mínimo recomendado — no dedo, errar a ficha ao lado é regra, não
 * exceção. Só vale para ponteiro grosso: no mouse o tamanho menor é melhor. */
@media (pointer: coarse) {
  .ficha { padding: .55rem 1rem; }
  .ficha-escolha span { padding: .58rem 1rem; }
  .botao-icone { width: 2.7rem; height: 2.7rem; }
  .favoritar { width: 2.7rem; min-height: 2.7rem; }
  .paginacao a, .paginacao span { padding: .6rem .85rem; }
  .menu-movel > summary { min-width: 2.7rem; min-height: 2.7rem; }
  .cta { padding-block: .68rem; }
  /* O botão do cartão fica de fora: com dois cartões por linha, engordá-lo
   * empurra o preço para fora da primeira dobra. */
  .acoes-oferta .cta { padding-block: .55rem; }
}

/* ---------------------------------------------------------------- misc */

.aviso-js { border: 1px solid var(--linha-2); border-radius: var(--raio); padding: .8rem 1rem; font-size: .85rem; color: var(--tinta-2); margin-bottom: 1.5rem; }
.js .aviso-js { display: none; }

.erro-404 { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.erro-404 .codigo { font-family: var(--display); font-size: clamp(5rem, 20vw, 12rem); line-height: .85; color: var(--brasa); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .oferta:hover .oferta-foto img { transform: none; }
}

@media print {
  .topo, .rodape, .acoes-oferta, .painel-filtros, .paginacao { display: none; }
  body { background: #fff; color: #000; }
}