@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ouro: #ffd21f;
  --ouro-claro: #fff1b0;
  --tinta: #2b1a05;
  --tinta-suave: #6b5a40;
  --vermelho: #e0141e;
  --papel: #ffffff;
  --areia: #fbf7ec;
  --linha: #e8dfc8;
  --whats: #0f9d58;
  --tele: #2481cc;
  --ml: #ffe600;
  --sh: #ee4d2d;
  --ali: #e8133f;
  --cartaz: "Archivo", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ---------- botões de grupo ---------- */
.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 18px; border-radius: 12px;
  font-weight: 800; font-stretch: 90%; font-size: 1.020rem; color: #fff; text-align: center;
  border: 2px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta);
  transition: transform .08s, box-shadow .08s;
}
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.botao svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.200; stroke-linecap: round; stroke-linejoin: round; }
.botao.whats { background: var(--whats); }
.botao.tele { background: var(--tele); }

/* ---------- capa: papel de encarte ---------- */
.capa {
  background-color: var(--ouro);
  background-image: radial-gradient(rgba(43, 26, 5, .110) 1.200px, transparent 1.400px);
  background-size: 14px 14px;
  padding: 18px 18px 30px;
  text-align: center;
  border-bottom: 3px solid var(--tinta);
}
.marca { display: block; width: min(330px, 86%); margin: 0 auto; }
.marca img { width: 100%; height: auto; }

.manchete {
  font-family: var(--cartaz);
  font-weight: 900; font-stretch: 68%;
  font-size: clamp(2.300rem, 11vw, 3.900rem);
  line-height: .960; letter-spacing: -.5px;
  text-transform: uppercase;
  max-width: 13ch; margin: 22px auto 0;
  text-wrap: balance;
}
.manchete .num {
  display: inline-block; color: #fff; background: var(--vermelho);
  padding: 0 .120em; margin: .040em .040em; border-radius: 6px;
  transform: rotate(-2deg); border: 2px solid var(--tinta);
}
.capa-texto { max-width: 34ch; margin: 12px auto 0; font-size: 1.020rem; font-weight: 500; }

.convite {
  max-width: 440px; margin: 22px auto 0; padding: 16px;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 16px;
  box-shadow: 0 6px 0 var(--tinta); text-align: center;
}
.convite-chamada { font-weight: 800; font-size: 1.050rem; line-height: 1.250; text-wrap: balance; }
.convite-botoes { display: grid; gap: 10px; margin-top: 14px; }
.convite-botoes.botao-unico, .fecho-botoes.botao-unico { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.convite-botoes.botao-unico .botao, .fecho-botoes.botao-unico .botao { width: min(100%, 300px); }
.convite-nota { margin-top: 10px; font-size: .820rem; color: var(--tinta-suave); }

/* ---------- filtro de lojas ---------- */
.lojas {
  position: sticky; top: 0; z-index: 20;
  background: var(--areia); border-bottom: 1px solid var(--linha);
}
.lojas-trilho { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; max-width: 1100px; margin: 0 auto; }
.lojas-trilho::-webkit-scrollbar { display: none; }
.loja {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--papel); border: 2px solid var(--tinta);
  font-weight: 700; font-stretch: 92%; font-size: .950rem;
}
.loja.ativa { background: var(--tinta); color: var(--ouro); }
.cor { width: 12px; height: 12px; border-radius: 50%; border: 1.500px solid var(--tinta); }
.cor.ml { background: var(--ml); }
.cor.sh { background: var(--sh); }
.cor.ali { background: var(--ali); }
.loja.ativa .cor { border-color: var(--ouro); }
.pagina-cupons #promocoes, .pagina-cupons #grupos,
.pagina-promocoes #cupons, .pagina-promocoes .chamada-grupo, .pagina-promocoes #grupos,
.pagina-grupos #cupons, .pagina-grupos .chamada-grupo, .pagina-grupos #promocoes { display: none !important; }
.pagina-grupos .lojas { display: none; }
.pagina-grupos .grupo-vazio:not([hidden]) { display: block; max-width: 1100px; margin: 24px auto; padding: 24px; text-align: center; }
.barra a[aria-current="page"] { color: var(--ouro); }

/* ---------- seções ---------- */
main { max-width: 1100px; margin: 0 auto; }
.secao { padding: 26px 16px 4px; scroll-margin-top: 70px; }
.secao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 14px; }
.secao h2 {
  font-family: var(--cartaz); font-weight: 900; font-stretch: 70%;
  font-size: 2.100rem; line-height: 1; text-transform: uppercase; letter-spacing: -.3px; white-space: nowrap;
}
.secao-dica { font-size: .850rem; color: var(--tinta-suave); text-align: right; }

/* ---------- cupom: ticket picotado ---------- */
.cupons { display: grid; gap: 14px; align-items: start; }
.ticket {
  --cor: var(--ouro);
  position: relative; display: grid; grid-template-columns: 30px 1fr;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 14px;
  box-shadow: 0 4px 0 var(--tinta);
}
.ticket.mercadolivre { --cor: var(--ml); }
.ticket.shopee { --cor: var(--sh); }
.ticket.aliexpress { --cor: var(--ali); }
.ticket-canhoto {
  background: var(--cor); border-right: 2px dashed var(--tinta); border-radius: 12px 0 0 12px;
  display: flex; align-items: center; justify-content: center;
}
.ticket-canhoto span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 800; font-stretch: 80%; font-size: .760rem; letter-spacing: .5px; white-space: nowrap;
}
.ticket.shopee .ticket-canhoto span, .ticket.aliexpress .ticket-canhoto span { color: #fff; }
/* furos do picote */
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 20px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--areia); border: 2px solid var(--tinta);
}
.ticket::before { top: -10px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -10px; clip-path: inset(0 0 50% 0); }

.ticket-corpo { padding: 14px 14px 14px 16px; min-width: 0; }
.ticket-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ticket-desconto {
  font-family: var(--cartaz); font-weight: 900; font-stretch: 66%;
  font-size: 2.500rem; line-height: .950; color: var(--vermelho); text-transform: uppercase;
}
.ticket-validade { font-size: .780rem; color: var(--tinta-suave); white-space: nowrap; }
.ticket-validade.hoje { color: #fff; background: var(--vermelho); font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.ticket-titulo { font-weight: 700; font-size: 1rem; line-height: 1.250; margin-top: 6px; }
.ticket-regra { font-size: .860rem; color: var(--tinta-suave); margin-top: 3px; }
.ticket-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.codigo {
  position: relative; flex: 1 1 100%; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px; padding: 0 14px; cursor: pointer;
  background: var(--ouro-claro); border: 2px dashed var(--tinta); border-radius: 10px;
  overflow: hidden;
}
.codigo b {
  font-family: var(--cartaz); font-weight: 800; font-stretch: 100%;
  font-size: 1.150rem; letter-spacing: 1.500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.codigo-acao { flex: 0 0 auto; font-size: .820rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* carimbo "Copiado" ao tocar */
.carimbo {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--cartaz); font-weight: 900; font-stretch: 75%; font-size: 1.300rem; text-transform: uppercase;
  color: var(--whats); background: rgba(255, 255, 255, .880);
  opacity: 0;
}
.carimbo span { border: 3px solid currentColor; border-radius: 6px; padding: 0 10px; transform: rotate(-6deg); }
.codigo.copiado .carimbo { animation: carimbar 1.100s ease-out; }
@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.600); }
  15% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.link-loja {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px; border-radius: 10px;
  background: var(--tinta); color: #fff; font-weight: 800; font-stretch: 92%; font-size: .950rem;
}

/* ---------- chamada no meio ---------- */
.chamada-grupo {
  margin: 26px 16px 0; padding: 16px; border-radius: 16px;
  background: var(--tinta); color: #fff; display: grid; gap: 14px;
}
.chamada-grupo p { font-size: 1.020rem; line-height: 1.350; }
.chamada-grupo b { color: var(--ouro); }
.chamada-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.chamada-botoes .botao { min-height: 48px; border-color: #fff; box-shadow: 0 3px 0 #000; }

/* ---------- busca ---------- */
.busca {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 14px;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 12px;
}
.busca svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--tinta); stroke-width: 2.400; stroke-linecap: round; }
.busca input { flex: 1; min-width: 0; height: 50px; background: none; border: 0; outline: 0; font-size: 1rem; }
.busca input::placeholder { color: var(--tinta-suave); }
.busca:focus-within { box-shadow: 0 0 0 3px var(--ouro); }
.categorias { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 16px; scrollbar-width: thin; }
.categorias[hidden] { display: none; }
.categoria { flex: 0 0 auto; padding: 9px 14px; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--papel); color: var(--tinta); font-weight: 700; cursor: pointer; }
.categoria.ativa { background: var(--tinta); color: var(--ouro); }

/* ---------- oferta: etiqueta de preço ---------- */
.ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oferta {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 14px; overflow: hidden;
}
.oferta-foto { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 2px solid var(--tinta); }
.oferta-foto img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.oferta-loja {
  position: absolute; left: 0; top: 10px; padding: 3px 9px 3px 8px; border-radius: 0 8px 8px 0;
  font-size: .700rem; font-weight: 800; font-stretch: 85%;
  border: 2px solid var(--tinta); border-left: 0;
}
.oferta-loja.mercadolivre { background: var(--ml); }
.oferta-loja.shopee { background: var(--sh); color: #fff; }
.oferta-loja.aliexpress { background: var(--ali); color: #fff; }
.oferta-off {
  position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; transform: rotate(-10deg);
  background: var(--vermelho); color: #fff; border: 2px solid var(--tinta);
  font-family: var(--cartaz); font-weight: 900; font-stretch: 70%; font-size: 1.150rem; line-height: 1;
}

.oferta-corpo { display: flex; flex-direction: column; flex: 1; padding: 10px 10px 12px; }
.oferta-titulo {
  font-size: .880rem; font-weight: 600; line-height: 1.300;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.oferta-corpo .vao { flex: 1; min-height: 6px; }
.oferta-de { font-size: .800rem; color: var(--tinta-suave); margin-top: 6px; }
.oferta-de s { text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }

.oferta-vendidos { font-size: .740rem; color: var(--tinta-suave); margin-top: 4px; }
.mais {
  grid-column: 1 / -1; min-height: 52px; margin-top: 4px; cursor: pointer;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 12px; box-shadow: 0 3px 0 var(--tinta);
  font-weight: 800; font-stretch: 92%; font-size: 1rem;
}
.mais:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }

/* preço no estilo cartaz de oferta */
.preco {
  display: flex; align-items: flex-start; color: var(--vermelho);
  font-family: var(--cartaz); font-weight: 900; font-stretch: 64%; line-height: .860;
  margin-top: 2px;
}
.preco-rs { font-size: .950rem; font-stretch: 80%; margin: .250rem .150rem 0 0; }
.preco-inteiro { font-size: 2.700rem; letter-spacing: -1px; }
.preco-cent { font-size: 1.250rem; margin: .150rem 0 0 .060rem; }
.oferta-parcelas { font-size: .760rem; color: var(--tinta-suave); margin-top: 4px; }
.oferta-cupom {
  align-self: flex-start; margin-top: 8px; max-width: 100%; cursor: pointer;
  padding: 5px 8px; border-radius: 6px; border: 1.500px dashed var(--tinta); background: var(--ouro-claro);
  font-size: .760rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oferta-botao {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 10px; background: var(--ouro);
  border: 2px solid var(--tinta); box-shadow: 0 3px 0 var(--tinta);
  font-weight: 800; font-stretch: 92%; font-size: .950rem;
}
.oferta-botao:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }

/* ---------- vazio e carregando ---------- */
.vazio {
  grid-column: 1 / -1; padding: 26px 18px; text-align: center; color: var(--tinta-suave);
  border: 2px dashed var(--linha); border-radius: 14px; background: var(--papel);
}
.vazio b { display: block; color: var(--tinta); font-size: 1.050rem; margin-bottom: 4px; }
.carregando { border-radius: 14px; background: linear-gradient(90deg, #efe7d2 25%, #f8f3e5 50%, #efe7d2 75%); background-size: 200% 100%; animation: brilho 1.300s infinite linear; }
.ticket-c { height: 160px; }
.oferta-c { aspect-ratio: 1 / 1.700; }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- fecho ---------- */
.fecho {
  margin: 34px 16px 0; padding: 28px 18px; text-align: center; border-radius: 18px;
  background-color: var(--ouro);
  background-image: radial-gradient(rgba(43, 26, 5, .110) 1.200px, transparent 1.400px);
  background-size: 14px 14px;
  border: 2px solid var(--tinta); scroll-margin-top: 80px;
}
.fecho h2 {
  font-family: var(--cartaz); font-weight: 900; font-stretch: 68%;
  font-size: 2.200rem; line-height: .950; text-transform: uppercase; max-width: 18ch; margin: 0 auto; text-wrap: balance;
}
.fecho p { max-width: 38ch; margin: 12px auto 18px; }
.fecho-botoes { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }

/* ---------- rodapé ---------- */
.rodape { max-width: 640px; margin: 0 auto; padding: 30px 20px 26px; font-size: .780rem; color: var(--tinta-suave); text-align: center; }
.rodape p + p { margin-top: 8px; }
.atualizado { font-weight: 700; color: var(--tinta); }

/* ---------- barra inferior (celular) ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  background: var(--papel); border-top: 2px solid var(--tinta);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; font-size: .740rem; font-weight: 700;
}
.barra svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.900; stroke-linecap: round; stroke-linejoin: round; }
.barra .barra-grupo {
  flex-direction: row; min-height: 46px; margin: 0 4px; border-radius: 999px;
  background: var(--whats); color: #fff; font-size: .880rem; font-weight: 800; font-stretch: 90%;
  border: 2px solid var(--tinta); white-space: nowrap;
}

/* ---------- aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: .900rem;
  padding: 11px 18px; border-radius: 999px; max-width: 90vw; width: max-content; text-align: center;
  transition: opacity .2s, transform .2s;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- telas maiores ---------- */
@media (min-width: 680px) {
  .capa { padding: 26px 24px 40px; }
  .marca { width: 380px; }
  .convite { max-width: 560px; }
  .convite-botoes { grid-template-columns: 1fr 1fr; }
  .convite-botoes.botao-unico, .fecho-botoes.botao-unico { grid-template-columns: minmax(0, 1fr); }
  .cupons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .chamada-grupo { grid-template-columns: 1fr auto; align-items: center; padding: 18px 22px; }
  .chamada-botoes { grid-template-columns: repeat(2, 150px); }
  .fecho-botoes { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .secao h2 { font-size: 2.600rem; }
}
@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .barra { display: none; }
  .aviso { bottom: 28px; }
  .cupons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ofertas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carregando { animation: none; }
  .codigo.copiado .carimbo { animation: none; opacity: 1; }
  .botao, .oferta-botao { transition: none; }
}