/* ofertacupom.com.br — vitrine de ofertas.
   Sem fonte/CSS de terceiros de propósito: o CDN da Hostinger (hcdn) responde
   403 a requisição sem headers, e depender de host externo só adiciona um
   ponto de falha numa página que precisa abrir rápido no celular. */

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

:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --linha: #e4e6ea;
  --txt: #191a1c;
  --txt2: #6b6f76;
  --verde: #0a8f30;
  --verde-esc: #08782a;
  --vermelho: #d62828;
  --azul: #1252a8;
  --marca: #e8590c;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ── Cabeçalho ─────────────────────────────────────────── */
.topo {
  background: var(--card);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.topo-lin { display: flex; align-items: center; gap: 12px; padding: 13px 0 11px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; }
.marca-img { display: block; height: 52px; width: auto; }

/* ── Busca ─────────────────────────────────────────────── */
/* No celular ocupa a linha inteira (quebra por baixo da marca via flex-wrap);
   no desktop encolhe e fica ao lado. Sem JS: é um GET simples para a própria
   página, que relê ?q= — funciona com o site inteiro estático/cacheável. */
.busca {
  position: relative;                 /* âncora do dropdown de sugestões */
  display: flex; align-items: center; gap: 0;
  flex: 1 1 100%; order: 3;
  background: var(--bg); border: 1px solid var(--linha); border-radius: 999px;
  padding: 2px 2px 2px 12px; min-width: 0;
}
.busca:focus-within { border-color: var(--marca); }
.busca-lupa { flex: 0 0 auto; color: var(--txt2); }
.busca-in {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  padding: 9px 8px; font-size: .9rem; color: var(--txt); outline: none;
  -webkit-appearance: none; appearance: none;
}
.busca-in::placeholder { color: var(--txt2); }
.busca-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca-bt {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--marca); color: #fff; font-weight: 700; font-size: .8rem;
  padding: 8px 15px; border-radius: 999px;
}
.busca-bt:hover { filter: brightness(1.06); }
@media (min-width: 620px) {
  .busca { flex: 0 1 340px; order: 0; margin-left: auto; }
}

.limpar { color: var(--marca); font-weight: 700; }
.limpar:hover { text-decoration: underline; }

/* Dropdown da auto-sugestão. Fica sobre o conteúdo (z-index acima do cabeçalho
   grudento) e rola sozinho no celular quando a lista passa da tela. */
.sug {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 40;
  background: var(--card); border: 1px solid var(--linha); border-radius: 13px;
  box-shadow: 0 14px 34px rgba(20,22,26,.17);
  overflow: hidden auto; max-height: 62vh;
}
.sug[hidden] { display: none; }
.sug-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; }
.sug-item + .sug-item { border-top: 1px solid var(--linha); }
.sug-item:hover, .sug-item.ativo { background: rgba(232,89,12,.09); }
.sug-img {
  flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain;
  background: #fff; border-radius: 7px; padding: 2px;
}
.sug-txt { flex: 1 1 auto; min-width: 0; }
.sug-nome {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
}
.sug-meta { display: block; margin-top: 2px; font-size: .71rem; color: var(--txt2); }
.sug-preco { color: var(--verde); font-weight: 800; }
.sug-vazio { padding: 14px 12px; text-align: center; font-size: .78rem; color: var(--txt2); }

/* ── Canais (redes sociais + WhatsApp) ─────────────────── */
/* Dentro do .topo-lin, à direita da logo (2026-08-02 — antes ficava numa
   linha própria abaixo, ocupando a largura toda à toa). No celular não cabe
   do lado da logo+busca: como não tem order/flex-basis próprios aqui, o
   flex-wrap do .topo-lin empurra pra sua própria linha sozinho, exatamente
   como já fazia antes — só muda o desktop, onde sobra espaço ao lado da logo. */
.redes {
  display: flex; align-items: center; gap: 7px;
  overflow-x: auto; padding: 0 0 10px; scrollbar-width: none;
}
.redes::-webkit-scrollbar { display: none; }
.redes-cta {
  flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--txt2);
  padding-right: 2px;
}
.rede {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-size: .76rem; font-weight: 700; color: #fff;
  transition: filter .15s ease, transform .15s ease;
}
.rede:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rede svg { flex: 0 0 auto; }
.rede--whatsapp  { background: #25d366; color: #06331a; }
.rede--instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.rede--facebook  { background: #1877f2; }
.rede--youtube   { background: #ff0000; }
.rede--tiktok    { background: #111114; }

/* Canal guarda-chuva do WhatsApp (2026-08-04): recebe TODA oferta, então é o
   convite mais valioso da barra e ganha destaque sobre Instagram/Facebook —
   um pouco maior, com anel e brilho verdes, e um pulso lento. O pulso mexe só
   na sombra (não em width/height/transform), que o navegador compõe na GPU
   sem reflow: animar a barra do topo inteira a cada frame seria caro à toa. */
.rede--destaque {
  padding: 8px 16px; font-size: .8rem;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, .38), 0 3px 10px rgba(37, 211, 102, .30);
  animation: redePulso 2.8s ease-in-out infinite;
}
@keyframes redePulso {
  0%, 100% { box-shadow: 0 0 0 2px rgba(37, 211, 102, .38), 0 3px 10px rgba(37, 211, 102, .30); }
  50%      { box-shadow: 0 0 0 5px rgba(37, 211, 102, .16), 0 5px 16px rgba(37, 211, 102, .42); }
}
/* Quem pediu menos movimento no sistema não recebe o pulso — o anel fixo já
   dá o destaque sozinho. */
@media (prefers-reduced-motion: reduce) {
  .rede--destaque { animation: none; }
}
/* No celular a barra de canais não cabe inteira e vira rolagem horizontal:
   em terceiro lugar o destaque nascia FORA da tela (medido: 527px de conteúdo
   em 358px visíveis), justamente o botão que mais interessa. Aqui ele passa
   pra frente do Instagram; no desktop, onde tudo cabe, fica depois do
   Facebook como pedido. O rótulo vai junto pra continuar abrindo a linha. */
@media (max-width: 720px) {
  .redes-cta      { order: -2; }
  .rede--destaque { order: -1; }
}

/* ── Mais vistos (2026-08-02) ──────────────────────────── */
/* Fora do <header> (mesma razão das abas: sticky não pode crescer) e ANTES
   das categorias — é a faixa de destaque, quer aparecer antes do filtro.
   Reaproveita o MESMO .card da grade principal (cardOferta() em helpers.php),
   só que numa faixa de 6 colunas: no celular vira carrossel horizontal (6
   colunas de largura real não cabem numa tela de 400px); a partir de 900px
   (mesmo ponto de corte do resto do site) vira grade fixa de 6, sem scroll. */
.destaques { padding: 18px 0 4px; }
.destaques-titulo { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: -.01em; }
.destaques-grade {
  display: grid; grid-auto-flow: column; grid-auto-columns: 150px;
  gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.destaques-grade::-webkit-scrollbar { display: none; }
.destaques-grade .card { scroll-snap-align: start; }
@media (min-width: 900px) {
  .destaques-grade {
    grid-auto-flow: unset; grid-auto-columns: unset;
    grid-template-columns: repeat(6, 1fr); overflow-x: visible; gap: 15px;
  }
}

/* Fora do <header> de propósito (2026-07-30): com muitas categorias (e mais
   vindo por aí) as abas quebram em várias linhas — se ficassem dentro do
   cabeçalho STICKY, tomariam a tela toda ao rolar. Aqui rolam com o resto da
   página; só logo/busca/redes continuam fixos no topo. */
.abas { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 11px; }
.aba-grupo { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.aba {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  background: #eef0f3; color: #43474e; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.aba:hover { background: #e5e8ec; }
.aba.on { background: var(--txt); color: #fff; }

/* Canal de WhatsApp DA categoria, ao lado da aba — cada categoria tem o seu
   próprio canal (2026-07-27); antes só cabia 1 no botão único do topo. */
.aba-wa {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: #25d366; color: #06331a;
  transition: filter .15s ease, transform .15s ease;
}
.aba-wa:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Chamada ───────────────────────────────────────────── */
.hero { padding: 18px 0 4px; }
.hero h1 { margin: 0 0 4px; font-size: 1.34rem; letter-spacing: -.022em; }
.hero p { margin: 0; color: var(--txt2); font-size: .85rem; line-height: 1.5; }

/* ── Layout de 2 colunas (ofertas + cupons) ───────────────── */
/* Empilhado no celular (col-principal em cima, lateral embaixo — é onde está
   a maior parte do tráfego, e a grade de ofertas é o conteúdo principal).
   Em telas maiores, 2fr/1fr = a mesma proporção de um col8/col4. */
.conteudo { display: block; padding-bottom: 40px; }
@media (min-width: 900px) {
  /* Sem cupom nenhum ativo (tabela vazia), col-principal ocupa a largura
     inteira — só vira 2fr/1fr quando .lateral existe de verdade (classe
     "tem-cupons" via PHP), senão sobra buraco em branco à direita. */
  .conteudo { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .conteudo.tem-cupons { grid-template-columns: 2fr 1fr; }
}

.lateral {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 16px; margin: 0 0 20px;
}
@media (min-width: 900px) {
  .lateral { margin: 16px 0 0; }
}
.lateral-titulo { margin: 0 0 12px; font-size: 1rem; letter-spacing: -.01em; }
.cupons-lista { list-style: none; margin: 0; padding: 0; }
.cupom-item { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linha); }
.cupom-item:first-child { border-top: 0; padding-top: 0; }
.cupom-logo {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px;
  background: #fff; object-fit: contain; padding: 4px;
}
.cupom-logo--vazio {
  display: flex; align-items: center; justify-content: center;
  color: var(--marca); font-weight: 800; font-size: 1.1rem;
}
.cupom-corpo { flex: 1 1 auto; min-width: 0; }
.cupom-loja { margin: 0; font-size: .66rem; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; }
.cupom-titulo { margin: 2px 0 4px; font-size: .84rem; font-weight: 700; line-height: 1.3; }
.cupom-desc { margin: 0 0 8px; font-size: .74rem; color: var(--txt2); line-height: 1.4; }
.cupom-bt {
  display: inline-flex; align-items: center; gap: 7px; background: var(--verde); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 6px 12px; border-radius: 7px;
}
.cupom-bt:hover { background: var(--verde-esc); }
.cupom-codigo {
  font-family: ui-monospace, Consolas, monospace; background: rgba(255,255,255,.22);
  padding: 1px 6px; border-radius: 5px; letter-spacing: .03em;
}

/* Busca da coluna de cupons — filtra client-side (a lista já veio pronta no
   HTML, sem round-trip). */
.cupom-busca { margin: 0 0 12px; }
.cupom-busca input {
  width: 100%; border: 1px solid var(--linha); border-radius: 9px; background: var(--bg);
  color: var(--txt); font-size: .8rem; padding: 8px 10px; outline: none;
}
.cupom-busca input:focus { border-color: var(--marca); }

/* Agrupado por loja: só o 1º cupom de cada loja fica visível (.cupom-oculto
   esconde os demais); "Ver mais" revela o resto do MESMO grupo. Durante uma
   busca ativa o JS ignora .cupom-oculto e mostra qualquer item que bater. */
.cupom-grupo + .cupom-grupo { margin-top: 4px; }
.cupom-oculto { display: none; }
.cupom-vermais {
  display: block; width: 100%; margin: 6px 0 4px; padding: 7px; border: 0;
  border-radius: 8px; background: var(--bg); color: var(--marca);
  font-size: .72rem; font-weight: 700; cursor: pointer;
}
.cupom-vermais:hover { background: var(--linha); }
.cupom-semresultado { font-size: .78rem; color: var(--txt2); text-align: center; padding: 10px 0 0; }

/* ── Grade ─────────────────────────────────────────────── */
/* minmax baixo de propósito: no celular (a maior parte do tráfego chega do
   WhatsApp/Instagram) dá duas colunas, e comparar ofertas lado a lado vale
   mais que foto grande. */
.grade {
  display: grid; gap: 12px; padding: 16px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width: 700px) {
  .grade { gap: 15px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
}

.card {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: 0 8px 22px rgba(20,22,26,.10); transform: translateY(-2px); }

/* min-height:0 é o que trava a altura de verdade: .foto é item de um flex
   column (.card) e, sem isso, o "tamanho mínimo automático" do flexbox deixa
   foto de produto RETRATO (mais alta que larga) estourar o aspect-ratio
   1/1 — o <img height:100%> acaba resolvendo pela proporção intrínseca da
   imagem em vez do quadrado do container, esticando o card inteiro (e a
   LINHA inteira da grade, já que fica no card mais alto da fileira).
   overflow:hidden é o cinto e suspensório: nada escapa do quadrado mesmo se
   a conta de layout falhar de novo por outro motivo. */
.foto {
  position: relative; display: block; background: #fff; aspect-ratio: 1 / 1;
  min-height: 0; overflow: hidden;
}
.foto > a { display: block; width: 100%; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: contain; padding: 11px; display: block; }
.compartilhar {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,22,26,.55); color: #fff; backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.compartilhar:hover { background: rgba(20,22,26,.75); transform: translateY(-1px); }
.loja {
  position: absolute; top: 9px; left: 9px; padding: 3px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.off {
  position: absolute; top: 9px; right: 9px; background: var(--vermelho); color: #fff;
  padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800;
}

.corpo { padding: 10px 11px 12px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.nome {
  margin: 0; font-size: .8rem; line-height: 1.33; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Selo do histórico de preço — o diferencial do produto. Azul para não
   competir com o verde do preço nem com o vermelho do desconto. */
.hist {
  align-self: flex-start; background: var(--azul); color: #fff;
  padding: 4px 9px; border-radius: 6px; font-size: .64rem; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.25;
}
.cupom {
  align-self: flex-start; background: #111114; color: #ffd54a;
  padding: 4px 9px; border-radius: 6px; font-size: .66rem; font-weight: 800;
}

.precos { margin-top: auto; padding-top: 4px; }
.de { color: #8a8e95; font-size: .72rem; text-decoration: line-through; }
.por { color: var(--verde); font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }

.cta {
  display: block; text-align: center; background: var(--verde); color: #fff;
  padding: 9px; border-radius: 9px; font-weight: 800; font-size: .78rem; letter-spacing: .02em;
}
.cta:hover { background: var(--verde-esc); }

/* Botão-preço da faixa "Mais vistos" (2026-08-02): troca "VER NA LOJA" pelo
   PREÇO — cor laranja-avermelhada (marca) pra não confundir com o verde do
   preço da grade principal, que continua mostrando "de/por" por extenso. */
.cta--preco { background: var(--marca); margin-top: auto; font-size: .92rem; }
.cta--preco:hover { background: #c94d0a; }

/* Linha do NOSSO histórico de preço, logo abaixo do botão. Discreta (não
   compete com o preço nem com o selo), mas é o diferencial: número que a
   gente mesmo leu. Azul do histórico, como o selo, para o olho associar. */
.histlinha {
  display: block; text-align: center; font-size: .62rem; line-height: 1.3; font-weight: 700;
  color: var(--azul); background: rgba(18,82,168,.07);
  border-radius: 6px; padding: 4px 6px;
}
/* Na página /{codigo} vira âncora pro gráfico logo abaixo (2026-08-02; até
   2026-08-01 apontava pra uma tela separada) — no card da grade continua
   sendo só um <div> informativo, sem hover. */
a.histlinha:hover { background: rgba(18,82,168,.14); text-decoration: underline; }

.verif { color: #8a8e95; font-size: .63rem; text-align: center; }

/* Gráfico pequeno da grade principal (2026-08-02): substitui a linha de
   texto "Histórico 30d..." — sparklineSvg() em helpers.php. Fica dentro de
   um <a> que leva a /{codigo} (a oferta inteira, com o gráfico grande logo
   abaixo dela). */
.card-grafico {
  display: block; margin-top: 6px; border-radius: 8px; overflow: hidden;
  background: rgba(18,82,168,.05);
}
.card-grafico:hover { background: rgba(18,82,168,.10); }
.sprk { display: block; width: 100%; height: auto; }
.sprk-grade { stroke: var(--linha); stroke-width: 1; }
.sprk-eixo { font-size: 13px; font-weight: 700; fill: var(--txt2); font-family: inherit; }
.sprk-area { stroke: none; }
.sprk-linha { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sprk-ponto { fill: var(--azul); stroke: var(--card); stroke-width: 1.5; }

@media (min-width: 700px) {
  .corpo { padding: 12px 14px 14px; gap: 8px; }
  .nome { font-size: .87rem; }
  .de { font-size: .76rem; }
  .por { font-size: 1.32rem; }
  .cta { padding: 10px; font-size: .84rem; }
  .verif { font-size: .68rem; }
  .hist { font-size: .68rem; }
}

/* ── Página de uma oferta (/oferta/{id}, destino do "Compartilhar") ────── */
/* Sem margem inferior: o histórico embutido (.historico--embutido) vem logo
   abaixo e traz o próprio respiro. Somar os dois abria um buraco de quase
   90px entre o card e o gráfico, que fazia a seção parecer outra página —
   exatamente o que a fusão das duas telas veio desfazer. */
.oferta-unica {
  max-width: 560px; margin: 20px auto 0; background: var(--card);
  border: 1px solid var(--linha); border-radius: 16px; overflow: hidden;
}
.oferta-unica-foto { position: relative; display: block; background: #fff; aspect-ratio: 1 / 1; }
.oferta-unica-foto img { width: 100%; height: 100%; object-fit: contain; padding: 24px; display: block; }
.oferta-unica-corpo { padding: 20px 22px 28px; text-align: center; }
.oferta-unica-titulo { font-size: 1.15rem; line-height: 1.35; margin: 0 0 10px; }
.oferta-unica-corpo .precos { margin: 12px 0; }
.oferta-unica-corpo .por { font-size: 1.6rem; }
.oferta-unica-corpo .cta { max-width: 320px; margin: 14px auto 0; padding: 12px; font-size: .86rem; }
.oferta-unica-corpo .histlinha { max-width: 320px; margin: 10px auto 0; }
.oferta-unica-voltar { margin: 18px 0 0; font-size: .8rem; }
.oferta-unica-voltar a { color: var(--marca); font-weight: 700; }

/* ── Histórico de preços — seção da página /{codigo} ─────────────────────
   Era uma tela separada (/{codigo}/historico) até 2026-08-02; hoje vem logo
   abaixo do card da oferta, na mesma página. O modificador --embutido alinha
   a largura com a do card (.oferta-unica, 560px): centralizado mas mais
   largo que o card acima ficaria visivelmente torto. */
.historico { max-width: 760px; margin: 20px auto 60px; }
.historico--embutido { max-width: 560px; margin-top: 26px; }
.historico--embutido .historico-titulo { font-size: 1.05rem; margin-bottom: 10px; }
.historico-voltar { margin: 0 0 14px; font-size: .82rem; }
.historico-voltar a { color: var(--marca); font-weight: 700; }
.historico-titulo { margin: 0 0 2px; font-size: 1.3rem; letter-spacing: -.02em; }
.historico-produto { margin: 0 0 16px; color: var(--txt2); font-size: .9rem; font-weight: 600; }
.historico-desc { margin: 0 0 16px; color: var(--txt2); font-size: .82rem; line-height: 1.5; }

.historico-vazio {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 22px; text-align: center; color: var(--txt2); font-size: .88rem; line-height: 1.5;
}
.historico-vazio-preco { margin-top: 10px; color: var(--txt); }

.historico-tabs { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.historico-tab {
  padding: 7px 14px; border-radius: 999px; background: #eef0f3; color: #43474e;
  font-size: .8rem; font-weight: 600;
}
.historico-tab:hover { background: #e5e8ec; }
.historico-tab.on { background: var(--marca); color: #fff; }

.historico-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px;
}
@media (min-width: 620px) {
  .historico-tiles { grid-template-columns: repeat(4, 1fr); }
}
.htile {
  background: var(--card); border: 1px solid var(--linha); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.htile--atual { border-color: var(--verde); }
.htile-rot { font-size: .66rem; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: .03em; }
.htile-val { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.htile--atual .htile-val { color: var(--verde); }
.htile-val--queda { color: var(--verde); }
.htile-val--alta { color: var(--vermelho); }
.htile-sub { font-size: .68rem; color: var(--txt2); }

.historico-narrativa {
  font-size: .84rem; line-height: 1.6; color: var(--txt2); margin: 0 0 20px;
}
.historico-narrativa strong { color: var(--txt); }

.historico-grafico {
  position: relative;
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 14px 10px 6px; margin: 0 0 20px;
}
.hgrf { display: block; width: 100%; height: auto; }
.hgrf-grade { stroke: var(--linha); stroke-width: 1; }
.hgrf-eixo { font-size: 11px; fill: var(--txt2); font-family: inherit; }
.hgrf-area { fill: url(#hgrfArea); stroke: none; }
.hgrf-linha { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hgrf-ponto { fill: var(--verde); stroke: var(--card); stroke-width: 2; }

/* Interação do gráfico (2026-08-02): alvo invisível maior que o ponto
   desenhado — mira mais fácil, sobretudo no celular. Guia+marcador ficam
   escondidos (opacity 0) até o JS mover e mostrar no hover/toque. */
.hgrf-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.hgrf-guia { stroke: var(--txt2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.hgrf-marcador { fill: var(--marca); stroke: var(--card); stroke-width: 2; opacity: 0; pointer-events: none; }
.hgrf-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  background: #17181b; color: #fff; font-size: .72rem; line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); z-index: 5;
}
.hgrf-tip b { font-size: .74rem; }
.hgrf-tip[hidden] { display: none; }

.historico-cta { max-width: 320px; margin: 0 auto; }

/* ── Produtos semelhantes em outras lojas (2026-08-04) ────
   Mesma largura do card da oferta (560px, .oferta-unica): fica visualmente
   como continuação da mesma coluna, não uma seção larga solta. */
.similares { max-width: 560px; margin: 26px auto 60px; }
.similares-titulo { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: -.02em; }
.similares-desc { margin: 0 0 14px; color: var(--txt2); font-size: .78rem; line-height: 1.5; }
.similares-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.similar-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--linha); border-radius: 12px;
  padding: 10px; text-decoration: none; color: var(--txt);
  transition: border-color .15s;
}
.similar-card:hover { border-color: var(--marca); }
.similar-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff;
  border-radius: 8px; padding: 6px;
}
.similar-loja {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
}
.similar-nome {
  font-size: .78rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.similar-preco { color: var(--verde); font-weight: 800; font-size: .92rem; margin-top: auto; }

/* ── Vazio e rodapé ────────────────────────────────────── */
.vazio { padding: 62px 0; text-align: center; color: var(--txt2); }
.vazio h2 { color: #34373c; font-size: 1.05rem; margin: 0 0 6px; }

.rodape {
  border-top: 1px solid var(--linha); background: var(--card);
  padding: 24px 0 36px; color: var(--txt2); font-size: .76rem; line-height: 1.65;
}
.rodape p { margin: 0 0 10px; }
.redes--rodape { padding: 0 0 16px; }
.rodape strong { color: #4a4e55; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316; --card: #191b1f; --linha: #2a2d33;
    --txt: #e9eaec; --txt2: #8f959d;
  }
  .foto { background: #fff; }         /* foto de produto tem fundo branco */
  .aba { background: #24272d; color: #c2c6cc; }
  .aba:hover { background: #2c3037; }
  .aba.on { background: #e9eaec; color: #17181b; }
  .marca .m2 { color: var(--txt); }
  .vazio h2 { color: #d6d9dd; }
  .rodape strong { color: #b9bec5; }
  .card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.42); }
  .busca { background: #101216; }
  .histlinha { color: #7db0ff; background: rgba(125,176,255,.10); }
}