* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f7;
  color: #1d1d1f;
  line-height: 1.5;
}

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { background: #faf9f6; color: #20241f; }
.topo { max-width: 1200px; margin: auto; padding: 1.3rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .35rem; color: #20241f; text-decoration: none; font-size: 1.2rem; letter-spacing: -.6px; }
.marca strong { color: #ce4a18; }
.marca-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-right: .35rem; background: #e85522; color: white; font-weight: 800; }
nav { display: flex; gap: 1.5rem; }
nav a { color: #555d55; text-decoration: none; font-size: .85rem; }
nav a:hover { color: #ce4a18; }
.cabecalho { background: inherit; }
.campanha { max-width: 1152px; margin: 0 auto 1.5rem; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px #a6491712; }
.campanha-conteudo { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 3.5rem; color: #fff; background: linear-gradient(115deg, #c83f13 0%, #e85522 55%, #f77932 100%); }
.campanha-conteudo::before, .campanha-conteudo::after { content: ""; position: absolute; z-index: -1; width: 310px; height: 310px; border: 1px solid #ffffff24; border-radius: 50%; right: -100px; top: -170px; pointer-events: none; }
.campanha-conteudo::after { right: -45px; top: -205px; width: 420px; height: 420px; border-width: 28px; border-color: #ffffff0a; }
.campanha-selo { display: block; font-size: .65rem; font-weight: 750; letter-spacing: 2.4px; margin-bottom: .6rem; color: #ffebd7; }
.campanha-titulo .campanha-chamada { font-size: clamp(2.7rem, 5vw, 4.5rem); font-weight: 900; line-height: .95; letter-spacing: -3px; }
.campanha-titulo strong { display: block; width: fit-content; margin: .5rem 0 .75rem; padding: .4rem .75rem .5rem; border-radius: 9px; background: #fff4e5; color: #bb3811; font-size: .61em; line-height: 1; letter-spacing: -1.2px; transform: rotate(-2deg); box-shadow: 0 4px 0 #9d2a1226; }
.campanha-legenda { font-size: .8rem; color: #fff4e5; }
.campanha-convite { display: flex; align-items: center; gap: 2rem; }
.campanha-texto > p { font-size: clamp(.95rem, 1.7vw, 1.3rem); font-weight: 800; line-height: 1.4; letter-spacing: -.3px; }
.campanha-texto > p strong { color: #fff0bd; }
.campanha-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: .7rem 1rem; border-radius: 8px; background: white; color: #ac3510; text-decoration: none; font-size: .8rem; font-weight: 750; box-shadow: 0 3px 10px #92250014; transition: background .2s; }
.campanha-botao:hover { background: #fff0dc; }
.campanha-celular { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: .45rem; width: 90px; height: 151px; border: 5px solid #fff4e5; outline: 1px solid #ffffff55; border-radius: 19px; background: #bc3d18; transform: rotate(8deg); box-shadow: 10px 12px 0 #aa34152b; }
.celular-camera { position: absolute; top: 6px; width: 24px; height: 4px; border-radius: 6px; background: #fff4e5; }
.celular-desconto { font-size: 2.8rem; font-weight: 900; line-height: 1; color: #ffe5ae; }
.celular-legenda { font-size: .6rem; font-weight: 800; line-height: 1.3; text-align: center; letter-spacing: 1px; }
.celular-barra { position: absolute; bottom: 6px; width: 23px; height: 3px; border-radius: 6px; background: #fff4e5; }
.campanha-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 3.5rem; background: #fff4e5; color: #934021; font-size: .75rem; }
.campanha-pill { padding: .3rem .7rem; border-radius: 5px; color: white; background: #b63b16; font-size: .6rem; font-weight: 800; letter-spacing: .6px; }
@media (max-width: 1200px) { .campanha { margin-inline: 1.5rem; } }
@media (max-width: 700px) {
  .campanha { margin: 0 1rem 1rem; border-radius: 12px; }
  .campanha-conteudo { padding: 1.5rem; gap: 1rem; }
  .campanha-convite { gap: .75rem; }
  .campanha-celular { display: none; }
  .campanha-rodape { padding: .65rem 1.5rem; }
  .campanha-rodape > span:first-child { font-size: .65rem; }
}
@media (max-width: 440px) {
  .campanha-conteudo { padding: 1.3rem 1rem; gap: .9rem; align-items: center; }
  .campanha-selo { font-size: .5rem; letter-spacing: 1.2px; }
  .campanha-titulo .campanha-chamada { font-size: 2.8rem; }
  .campanha-titulo strong { font-size: .45em; padding: .4rem .5rem; letter-spacing: -.5px; }
  .campanha-legenda { display: block; max-width: 125px; font-size: .65rem; }
  .campanha-texto > p { font-size: .72rem; }
  .campanha-botao { gap: .4rem; padding: .65rem .6rem; font-size: .65rem; }
  .campanha-rodape { padding: .6rem 1rem; }
  .campanha-rodape > span:first-child { max-width: 95px; }
  .campanha-pill { font-size: .48rem; padding: .3rem .4rem; letter-spacing: 0; }
}
.etiqueta { display: block; font-size: .65rem; font-weight: 750; letter-spacing: 1.7px; color: #a64a27; margin-bottom: .7rem; }
.secao { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.secao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.secao h1, .secao h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); letter-spacing: -.6px; }
.secao-descricao, #atualizacao { color: #6b7067; font-size: .85rem; margin-top: .5rem; }
.parceiras { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.parceiras-painel { padding: 1.5rem 1.75rem 1.1rem; border: 1px solid #eee5d9; border-radius: 22px; background: linear-gradient(110deg, #fff8ee, #f7f4ee); }
.parceiras .etiqueta { font-size: .6rem; letter-spacing: 1.6px; margin-bottom: .35rem; color: #9b5436; }
.parceiras h2 { font-size: 1.4rem; font-weight: 700; }
.lista-parceiras { --logo-tamanho: clamp(72px, 8vw, 88px); display: flex; gap: clamp(12px, 2vw, 24px); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; margin-top: 1.1rem; padding: 4px 4px 10px; scrollbar-width: none; }
.lista-parceiras::-webkit-scrollbar { display: none; }
.lista-parceiras:focus-visible { outline: 2px solid #b6502b; outline-offset: 3px; border-radius: 14px; }
.lista-parceiras li { flex: 0 0 var(--logo-tamanho); scroll-snap-align: start; }
.lista-parceiras li:first-child { margin-left: auto; }
.lista-parceiras li:last-child { margin-right: auto; }
.parceira-card { display: grid; place-items: center; width: var(--logo-tamanho); height: var(--logo-tamanho); border-radius: 50%; background: #f0f0f0; border: 1px solid #e5e5e5; color: #30352e; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.parceira-card:hover, a.parceira-card:focus-visible { border-color: #dfaa8b; box-shadow: 0 6px 16px #764d2010; transform: translateY(-2px); }
.loja-simbolo { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 14px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 1.35rem; font-weight: 800; letter-spacing: -1px; }
.parceira-card .loja-simbolo { background: transparent; }
.loja-logo { position: absolute; top: 14px; left: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.parceiras-aviso { margin: .5rem .25rem 0; color: #7c7368; font-size: .7rem; line-height: 1.6; }
[data-tema="amazon"] { background: #fff1d7; color: #292929; }
[data-tema="mercadolivre"] { background: #fff19a; color: #254182; }
[data-tema="shopee"] { background: #ffebe4; color: #c33c1a; }
[data-tema="magalu"] { background: #e2f3ff; color: #006dcb; }
[data-tema="aliexpress"] { background: #ffe7e7; color: #c83232; }
[data-tema="kabum"] { background: #eaf0ff; color: #2458a1; }
[data-tema="casasbahia"] { background: #e7eeff; color: #2551b8; }
[data-tema="netshoes"] { background: #f0e8ff; color: #7227ba; }
.carrossel-controles { display: flex; gap: .5rem; }
.carrossel-controles button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e7d9c8; background: #fffcf8; color: #80543b; font-size: 1.1rem; cursor: pointer; }
.carrossel-controles button:hover:not(:disabled) { background: #ffead8; border-color: #dcb89b; }
.carrossel-controles button:disabled { opacity: .35; cursor: default; }
.filtros-nota { font-size: .75rem; color: #71766e; margin-top: 1rem; }
.rodape-marca { font-size: 1.15rem; color: #454d42; margin-bottom: .5rem; }
.pular { position: absolute; top: -100px; left: 1rem; background: white; padding: 1rem; z-index: 10; }
.pular:focus { top: 1rem; }

.filtros {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.filtros a,
.filtros button {
  background: white;
  border: 1px solid #dcded6;
  color: #51594d;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.filtros a { text-decoration: none; }
.filtros a[aria-current="page"],
.filtros a:hover,
.filtros button.ativo,
.filtros button:hover {
  background: #253c2e;
  border-color: #253c2e;
  color: white;
}




#grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

@media (max-width: 600px) {
  .topo { padding: 1rem; flex-wrap: wrap; }
  .marca { font-size: 1.05rem; }
  nav { gap: 1rem; }
  .secao { padding: 2rem 1rem; }
  .parceiras.secao { padding-top: 1rem; padding-bottom: 1.25rem; }
  .parceiras-painel { padding: 1rem .85rem .85rem; border-radius: 18px; }
  .parceiras h2 { font-size: 1.1rem; }
  .parceiras .etiqueta { font-size: .5rem; letter-spacing: .7px; }
  .parceiras .carrossel-controles { gap: .3rem; }
  .parceiras .carrossel-controles button { width: 32px; height: 32px; }
  .secao-cabecalho { gap: .5rem; }
  .etiqueta { font-size: .6rem; letter-spacing: 1px; }

  #grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card .imagem {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fafafa;
  padding: 1rem;
}

.card .conteudo {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card .loja {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
}

.card h3 {
  font-size: 0.9rem;
  margin: 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.card .precos {
  margin: 0.5rem 0;
}

.card .preco-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.8rem;
}

.card .preco-atual {
  font-size: 1.3rem;
  font-weight: 700;
  color: #d63031;
}

.card .desconto {
  display: inline-block;
  background: #d63031;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.card a.botao {
  margin-top: auto;
  background: #ff6b35;
  color: white;
  text-align: center;
  padding: 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.card a.botao:hover { background: #e55a2b; }

.card .botao-copiar {
  margin-top: 0.4rem;
  background: white;
  color: #1c9d4f;
  border: 1.5px solid #1c9d4f;
  padding: 0.5rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.card .botao-copiar:hover { background: #eaf7ef; }
.card .botao-copiar.copiado { background: #1c9d4f; color: white; }

[hidden] { display: none !important; }
.card .descricao { font-size: .8rem; color: #666; margin-bottom: .5rem; overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible { outline: 3px solid #1659c7; outline-offset: 3px; }

footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #888;
  font-size: 0.8rem;
}

.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trilha { font-size: .8rem; color: #6b7067; margin-bottom: .75rem; }
.trilha a { color: #a64a27; }
.ofertas h1 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing: -.6px; line-height: 1.2; }
.vitrine-categoria { margin-top: 2.5rem; }
.vitrine-categoria #grid { margin-top: 1rem; }
.ver-todas { color: #ce4a18; font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.ver-todas:hover { text-decoration: underline; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-bottom: .75rem; }
.rodape-links a, footer p a { color: #6b7067; }
.texto-sobre { max-width: 720px; margin-top: 1.5rem; }
.texto-sobre h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.texto-sobre p, .texto-sobre li { color: #454d42; margin-bottom: .5rem; }
.texto-sobre ul { padding-left: 1.25rem; }

.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: #888;
}

/* Grupo do WhatsApp: menu, botão flutuante e rodapé. */
.icone-whatsapp { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.campanha-botao .icone-whatsapp { color: #1c9d4f; margin-right: -.9rem; }
nav a.nav-whatsapp { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; background: #1c9d4f; color: #fff; font-weight: 700; }
nav a.nav-whatsapp:hover { background: #168043; color: #fff; }
.whatsapp-flutuante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-radius: 999px; background: #1c9d4f; color: #fff; text-decoration: none; font-weight: 750; font-size: .9rem; box-shadow: 0 6px 20px #0b4a2640; transition: background .2s; }
.whatsapp-flutuante:hover { background: #168043; }
.whatsapp-flutuante .icone-whatsapp { width: 1.5rem; height: 1.5rem; }
.rodape-whatsapp { margin-bottom: 1rem; }
.rodape-whatsapp a { display: inline-flex; align-items: center; gap: .45rem; color: #168043 !important; font-weight: 700; font-size: .9rem; }
footer { padding-bottom: 5.5rem; }
nav a { white-space: nowrap; }
@media (max-width: 440px) {
  nav { gap: .8rem; }
  .nav-whatsapp-extra { display: none; }
  .campanha-botao .icone-whatsapp { margin-right: 0; }
  .whatsapp-flutuante { right: 1rem; bottom: 1rem; padding: .85rem; }
  .whatsapp-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}