/* ============================================================
   Dicas Ofertas — Tema (design Claude / roxo)
   Fonts: Sora (títulos), Inter (texto), JetBrains Mono (preços/códigos)
   ============================================================ */

:root{
  --brand:#6C47FF; --brand-dark:#5A38E0; --brand-d:#5A38E0; --brand-light:#F0EFFF;
  --ink:#12111A; --ink-2:#5A5A6E; --ink-3:#9B9BAD;
  --green:#00A86B; --green-bg:#E8F5E9;
  --bg:#F8F7FF; --card:#FFFFFF; --line:#E8E7F5; --line-2:#EBEBF5;
  --pill:#F0EFFF; --pill-line:#D9CCFF;
  --dark:#12111A; --dark-2:#1E1D2E; --dark-3:#2E2D45; --dark-ink:#A8A8C0; --dark-mut:#6E6D85;
  --radius:16px;
  --font-head:'Sora',system-ui,sans-serif;
  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%}
body{margin:0; background:var(--bg); color:var(--ink); max-width:100%;
  font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}

/* ── Header ─────────────────────────────────────────────── */
.hd{background:#fff; border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:50}
.hd-in{height:78px; display:flex; align-items:center; gap:28px}
.logo{display:flex; align-items:center; flex-shrink:0}
.logo img{height:54px; width:auto; display:block}
.logo .fire{width:32px; height:32px; border-radius:9px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1}
.search{flex:1; display:flex; align-items:center; gap:10px; background:var(--pill); border-radius:999px;
  padding:11px 18px; max-width:480px; margin:0 auto}
.search button{background:none; border:0; font-size:14px; opacity:.6; padding:0; line-height:1; color:var(--ink)}
.search input{flex:1; min-width:0; background:none; border:0; outline:none;
  font-family:var(--font); font-size:14px; color:var(--ink)}
.search input::placeholder{color:#8A8A9E}
.hd-links-search{display:none}
.hd-links{display:flex; align-items:center; gap:24px; flex-shrink:0}
.hd-links a{font-size:14px; font-weight:600; color:var(--ink)}
.hd-links a:hover{color:var(--brand)}
.hd-links-cupom .ico{display:none}
.hd-links-cats, .hd-links-lbl{display:none}
.hd-monitor{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  background:var(--pill); color:var(--brand); border:0; flex-shrink:0; white-space:nowrap;
  font-size:13.5px; font-weight:700; font-family:inherit; transition:background .15s ease, color .15s ease}
.hd-monitor:hover{background:var(--brand); color:#fff}
@media(max-width:820px){
  .hd-monitor span{display:none}
  .hd-monitor{width:40px; height:40px; padding:0; justify-content:center; border-radius:10px}
}
.burger{display:none; background:none; border:0; color:var(--ink); width:40px; height:40px;
  border-radius:10px; align-items:center; justify-content:center; flex-shrink:0}
.burger:hover{background:var(--pill)}
.burger-ic-x{display:none}
.burger.open .burger-ic-menu{display:none}
.burger.open .burger-ic-x{display:flex}

/* ── Barra de categorias ────────────────────────────────── */
.catbar{background:linear-gradient(180deg,#FFFFFF 0%, #FBFAFF 100%); border-bottom:1px solid var(--line-2);
  position:relative; box-shadow:0 4px 18px rgba(18,17,26,.04)}
/* Desktop/tablet: QUEBRA em linhas → mostra TODAS as categorias, nada cortado */
.catbar-in{display:flex; flex-wrap:wrap; gap:10px; padding:16px 24px}
.catbar-in::-webkit-scrollbar{height:0}
.catpill{flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
  border-radius:999px; background:#fff; color:var(--ink-2); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease}
.catpill .ci{width:16px; height:16px; flex-shrink:0; display:inline-block; color:var(--ink-3);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease}
.catpill:hover{color:var(--brand); border-color:transparent; background:var(--pill);
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(108,71,255,.16)}
.catpill:hover .ci{color:var(--brand); transform:scale(1.15) rotate(-6deg)}
.catpill:active{transform:translateY(0)}
.catpill.active{background:linear-gradient(135deg,#7C5AFF 0%, #6C47FF 55%, #5A38E0 100%); color:#fff;
  border-color:transparent; box-shadow:0 6px 18px rgba(108,71,255,.42)}
.catpill.active:hover{color:#fff; transform:translateY(-2px); box-shadow:0 9px 24px rgba(108,71,255,.5)}
.catpill.active .ci,.catpill.active:hover .ci{color:#fff; transform:none}

/* ── Ícones SVG inline ──────────────────────────────────── */
.ico{display:inline-block; vertical-align:middle; flex-shrink:0}
.hero-eyebrow{display:inline-flex; align-items:center; gap:7px}
.hero-feat .lbl{display:inline-flex; align-items:center; gap:6px}
.badge-hot{display:inline-flex; align-items:center; gap:4px}
.card-clicks{display:inline-flex; align-items:center; gap:5px}
.search button, .hero-search button{display:inline-flex; align-items:center; justify-content:center}
.vazio .em{color:var(--ink-3); line-height:0}
.vazio .em .ico{width:40px; height:40px}

main.wrap{padding-bottom:8px}

/* ── Hero da home (escuro) ──────────────────────────────── */
.hero-home{width:100%; background:var(--dark)}
.hero-home-in{max-width:1200px; margin:0 auto; padding:72px 24px 68px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center}
.hero-eyebrow{font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand); margin-bottom:18px}
.hero-home h1{font-family:var(--font-head); font-size:52px; font-weight:800; line-height:1.1;
  color:#fff; letter-spacing:-.02em; margin:0}
.hero-home .sub{font-size:18px; color:var(--dark-ink); margin-top:20px; max-width:520px; line-height:1.5}
.hero-checks{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px;
  font-size:12px; color:var(--dark-ink)}
.hero-checks .dot{color:#4A4860}
.hero-search{display:flex; align-items:center; gap:10px; margin-top:24px; background:var(--dark-2);
  border:1px solid var(--dark-3); border-radius:999px; padding:14px 20px; max-width:440px}
.hero-search input{flex:1; min-width:0; background:none; border:0; outline:none;
  font-family:var(--font); font-size:14.5px; color:#fff}
.hero-search input::placeholder{color:var(--dark-mut)}
.hero-search button{background:none; border:0; font-size:15px; opacity:.6; padding:0; color:#fff}

.hero-feat-wrap{position:relative}
.hero-feat{background:var(--dark-2); border:1px solid var(--dark-3); border-top:3px solid var(--brand);
  border-radius:24px; padding:20px}
.hero-slide{display:none}
.hero-slide.active{display:block; animation:heroFade .35s ease}
@keyframes heroFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* Antes as setas ficavam sobrepostas à foto do produto (top:78px, coladas nas laterais).
   Agora dividem a linha com os pontinhos, abaixo do card, sem cobrir nada. */
.hero-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px}
.hero-arrow{width:34px; height:34px; border-radius:999px; flex-shrink:0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
  transition:background .15s ease, transform .15s ease}
.hero-arrow:hover{background:rgba(255,255,255,.24); transform:scale(1.06)}
.hero-arrow.prev .ico{transform:rotate(180deg)}
.hero-dots{display:flex; gap:7px; justify-content:center}
.hero-dot{width:7px; height:7px; padding:0; border-radius:999px; background:var(--dark-3); border:0;
  transition:background .2s ease, width .2s ease}
.hero-dot.active{background:var(--brand); width:22px}
@media(max-width:820px){.hero-arrow{display:none}}
.hero-feat .ph{position:relative; width:100%; aspect-ratio:16/9; background:#F5F4FB; border-radius:14px; overflow:hidden}
.hero-feat .ph img{width:100%; height:100%; object-fit:contain}
.hero-feat .ph .disc{position:absolute; top:12px; right:12px; background:var(--brand); color:#fff;
  padding:5px 10px; border-radius:6px; font-family:var(--mono); font-size:13px; font-weight:700}
.hero-feat .lbl{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand); margin:18px 0 8px}
.hero-feat .loja{font-size:12px; font-weight:700; color:var(--brand); margin-bottom:8px}
.hero-feat .tit{font-family:var(--font-head); font-size:19px; font-weight:700; color:#fff; line-height:1.3}
.hero-feat .old{font-size:13px; color:var(--dark-mut); text-decoration:line-through; margin-top:12px}
.hero-feat .now{font-family:var(--font-head); font-size:32px; font-weight:800; color:var(--green); margin-top:2px; display:flex; align-items:center; gap:8px}
.hero-feat .now .ico{color:var(--green); flex-shrink:0}
.hero-cartao{font-size:12.5px; color:var(--dark-ink); margin-top:2px}
.hero-feat .cta{display:block; width:100%; text-align:center; background:var(--brand); color:#fff;
  font-weight:700; font-size:15px; padding:14px; border-radius:12px; margin-top:16px; transition:background .15s ease}
.hero-feat .cta:hover{background:var(--brand-d)}

/* ── Cabeçalho de seção ─────────────────────────────────── */
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:48px 0 24px}
.sec-head .eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px}
.sec-head h2{font-family:var(--font-head); font-size:30px; font-weight:800; color:var(--ink); margin:0}
.sec-head .more{font-size:14px; font-weight:600; color:var(--brand); white-space:nowrap}
.sec-head .more:hover{text-decoration:underline}
.sec-head h2{display:flex; align-items:center; gap:10px}
.sec-head h2 .ico, .sec-head h2 .ci{color:var(--brand); flex-shrink:0; width:26px; height:26px}
.sec-head h2.h2-verde .ico, .sec-head h2.h2-verde .ci{color:var(--green)}
/* compat páginas internas */
.sec-title{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:36px 0 20px}
.sec-title h2{font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--ink)}
.sec-title a{color:var(--brand); font-weight:600; font-size:14px}

/* Hero de páginas internas (claro) */
.hero{padding:48px 0 8px}
.hero h1{font-family:var(--font-head); font-size:32px; font-weight:800; color:var(--ink); margin:0; display:flex; align-items:center; gap:10px}
.hero h1 .ci{width:30px; height:30px; flex-shrink:0; color:var(--brand)}
.hero p{font-size:15px; color:var(--ink-2); margin:8px 0 0}

/* ── Carrossel horizontal (vitrines da home) ───────────────────────────────────────── */
.carrossel{position:relative}
.carr-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none}
.carr-track::-webkit-scrollbar{display:none}
.carr-item{flex:0 0 264px; scroll-snap-align:start; display:flex}
.carr-item .card{width:100%}
/* Setas ficam no cabeçalho da vitrine (ao lado do "Ver todas"), não flutuando por cima
   da fileira: sobrepostas, elas cobriam o começo do título do primeiro card e o botão do
   último — e não havia margem lateral pra jogá-las pra fora sem cortar em telas de 1200px. */
.sec-head-nav{display:flex; align-items:center; gap:16px; flex-shrink:0}
.carr-nav{display:flex; gap:8px}
/* No celular/tablet a fileira já rola com o dedo e o título ocupa a linha inteira —
   as setas só espremiam o cabeçalho (chegavam a ficar com 0px de largura). */
@media(max-width:900px){.carr-nav{display:none}}
.carr-arrow{width:36px; height:36px; flex-shrink:0; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); box-shadow:0 2px 8px rgba(18,17,26,.06);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease}
.carr-arrow:hover{transform:scale(1.07); box-shadow:0 6px 18px rgba(108,71,255,.18); color:var(--brand); border-color:var(--brand)}
.carr-arrow.prev .ico{transform:rotate(180deg)}
@media(max-width:820px){.carr-arrow{display:none}}
@media(max-width:560px){.carr-item{flex:0 0 72%}}

/* ── Grid + Cards ───────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

.card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 8px 32px rgba(108,71,255,.12)}
.card.dest{border:2px solid var(--brand)}
.card-img{position:relative; width:100%; aspect-ratio:16/9; background:#F5F4FB; flex-shrink:0; min-height:0; display:block; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:contain}
.badge-disc{position:absolute; top:12px; right:12px; background:var(--brand); color:#fff;
  padding:4px 8px; border-radius:6px; font-family:var(--mono); font-size:13px; font-weight:700}
.badge-hot{position:absolute; top:0; left:0; background:var(--brand); color:#fff; font-size:10px;
  font-weight:700; padding:4px 10px; border-radius:0 0 8px 0; letter-spacing:.06em; text-transform:uppercase}
.badge-queda{position:absolute; bottom:10px; left:10px; display:inline-flex; align-items:center; gap:4px;
  background:var(--green); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
  box-shadow:0 4px 12px rgba(0,168,107,.35)}

.of-gallery-video{position:relative; width:100%; max-width:420px; margin:0 auto; padding-top:56.25%;
  border-radius:10px; overflow:hidden; background:#000}
.of-gallery-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.of-gallery-thumbs{display:flex; gap:10px; justify-content:center; margin-top:14px}
.of-thumb{position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; padding:0; cursor:pointer; background:var(--bg); flex-shrink:0}
.of-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.of-thumb.active{border-color:var(--brand)}
.of-thumb-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); color:#fff}

.card-body{display:flex; flex-direction:column; gap:8px; padding:16px; flex:1}
.card-loja{align-self:flex-start; display:inline-flex; background:var(--pill); color:var(--brand);
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700}
/* Cor de marca por loja (sem usar o logo de verdade) — ver lojaSlug() em functions.php */
.card-loja--mercadolivre{background:#FFE600; color:#2D3277}
.card-loja--amazon{background:#131921; color:#FF9900}
.card-loja--magalu{background:#0086FF; color:#fff}
.card-loja--shopee{background:#EE4D2D; color:#fff}
.card-loja--aliexpress{background:#FF4747; color:#fff}
.card-loja--americanas{background:#E60014; color:#fff}
.card-loja--casasbahia{background:#004B93; color:#fff}
.card-tit{font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--ink); line-height:1.35;
  margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-tit:hover{color:var(--brand)}
.card-preco{margin-top:8px}
.preco-antigo{font-size:13px; color:var(--ink-3); text-decoration:line-through}
.card-save{font-size:12px; color:var(--green); font-weight:600}
.preco-atual{font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--ink); margin-top:2px; display:block}
.preco-pix{color:var(--green); display:inline-flex; align-items:center; gap:6px}
.preco-pix .ico{color:var(--green); flex-shrink:0}
.card-cartao{font-size:12px; color:var(--ink-3); margin-top:2px}
.card-cupom{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:#FFF3E0;
  color:#E65100; border:1px dashed #FFB74D; padding:5px 10px; border-radius:8px;
  font-family:var(--mono); font-size:12px; font-weight:700}
/* O rodapé do card não cabia numa linha só: "N foram ver" (83px) + sino (36) + "Ver oferta"
   (112) + gaps passa dos ~232px úteis do card, e como nada podia encolher o botão vazava ~17px
   pra fora da borda direita (parecia cortado/desalinhado). Com flex-wrap, quando não cabe, a
   dupla sino+botão desce pra própria linha e ocupa a largura toda — mesmo arranjo que o celular
   já usava — em vez de estourar. */
.card-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:14px}
.card-clicks{font-size:12px; color:var(--ink-3); flex-shrink:0}
.card-actions{display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 160px; justify-content:flex-end}
.card-actions .card-cta{flex:1 1 auto; text-align:center}
.card-monitor{width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--pill); color:var(--brand); border:0; border-radius:10px; transition:background .15s ease, color .15s ease}
.card-monitor:hover{background:var(--brand); color:#fff}

/* ── Comparador de preços ───────────────────────────────── */
.comp-badge{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:var(--pill);
  color:var(--brand); padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; margin-top:6px}
.comp-list{display:flex; flex-direction:column; gap:14px; margin-bottom:40px}
.comp-row{position:relative; display:grid; grid-template-columns:96px 1fr auto auto; gap:18px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px}
.comp-row.best{border:2px solid var(--green)}
.comp-best-tag{position:absolute; top:-11px; left:16px; background:var(--green); color:#fff; font-size:11px;
  font-weight:700; padding:3px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px}
.comp-img{width:96px; height:96px; border-radius:10px; overflow:hidden; background:#F5F4FB; flex-shrink:0; display:block}
.comp-img img{width:100%; height:100%; object-fit:contain}
.comp-info{display:flex; flex-direction:column; gap:6px; min-width:0}
.comp-tit{font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.35}
.comp-tit:hover{color:var(--brand)}
.comp-preco{text-align:right; white-space:nowrap}
.comp-cta{white-space:nowrap}
@media(max-width:760px){
  .comp-row{grid-template-columns:72px 1fr; grid-template-areas:"img info" "preco preco" "cta cta"}
  .comp-img{width:72px; height:72px}
  .comp-preco{text-align:left; grid-area:preco; margin-top:8px}
  .comp-cta{grid-area:cta; text-align:center; margin-top:10px}
}

/* ── Alerta de preço (monitoramento por e-mail) ─────────── */
.alerta-form{margin-top:16px; background:var(--pill); border:1px dashed var(--brand); border-radius:12px; padding:16px}
.alerta-lbl{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--brand); margin-bottom:10px}
.alerta-lbl .ico{color:var(--brand)}
.alerta-inputs{display:flex; gap:8px}
.alerta-inputs input{flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:16px; font-family:inherit}
.alerta-btn{background:var(--brand); color:#fff; border:0; font-weight:700; font-size:13px; padding:10px 16px;
  border-radius:8px; white-space:nowrap; cursor:pointer; transition:background .15s ease}
.alerta-btn:hover{background:var(--brand-d)}
.alerta-flash{margin-top:16px; display:flex; align-items:center; gap:8px; background:var(--green-bg); color:var(--green);
  border-radius:10px; padding:12px 16px; font-size:13px; font-weight:600}
.alerta-flash .ico{color:var(--green)}
.alerta-flash.erro{background:#FDECEC; color:#D32F2F}
.alerta-flash.erro .ico{color:#D32F2F}
@media(max-width:480px){.alerta-inputs{flex-direction:column}}

/* ── Popup geral de captação (e-mail + WhatsApp) ─────────── */
.pop-overlay{position:fixed; inset:0; background:rgba(18,17,26,.6); display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:16px; opacity:0; pointer-events:none; transition:opacity .25s ease}
.pop-overlay.show{opacity:1; pointer-events:auto}
.pop-card{position:relative; background:#fff; border-radius:18px; padding:32px 28px; max-width:380px; width:100%;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35); transform:scale(.94); transition:transform .25s ease}
.pop-overlay.show .pop-card{transform:scale(1)}
.pop-close{position:absolute; top:10px; right:14px; background:none; border:0; font-size:26px; line-height:1;
  color:var(--ink-3); cursor:pointer}
.pop-close:hover{color:var(--ink)}
.pop-emoji{color:var(--brand); display:flex; justify-content:center; margin-bottom:6px}
.pop-card h3{font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--ink); margin:0 0 8px}
.pop-card p{font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:0 0 18px}
.pop-card .ico{vertical-align:-2px}
#popNewsForm{display:flex; flex-direction:column; gap:10px}
#popNewsForm input{padding:11px 14px; border:1px solid var(--line); border-radius:9px; font-size:16px; font-family:inherit}
#popNewsForm button{background:var(--brand); color:#fff; border:0; font-weight:700; font-size:14px; padding:12px;
  border-radius:9px; cursor:pointer; transition:background .15s ease}
#popNewsForm button:hover{background:var(--brand-d)}
#popNewsForm button:disabled{opacity:.7; cursor:default}
.pop-erro{color:#D32F2F; font-size:12.5px; min-height:14px}
.pop-privacidade{display:block; font-size:11px; color:var(--ink-3); margin-top:12px}
.card-cta{background:var(--brand); color:#fff; font-weight:700; font-size:13px; padding:10px 16px;
  border-radius:10px; transition:background .15s ease, transform .15s ease; white-space:nowrap}
.card-cta:hover{background:var(--brand-d); transform:scale(1.03)}

#popMonForm{display:flex; flex-direction:column; gap:10px; text-align:left}
#popMonForm input{padding:11px 14px; border:1px solid var(--line); border-radius:9px; font-size:16px; font-family:inherit}
#popMonForm button{background:var(--brand); color:#fff; border:0; font-weight:700; font-size:14px; padding:12px;
  border-radius:9px; cursor:pointer; transition:background .15s ease}
#popMonForm button:hover{background:var(--brand-d)}
#popMonForm button:disabled{opacity:.7; cursor:default}

.pop-alerta-tit{font-size:13px; color:var(--ink-2); font-weight:600; margin:-4px 0 4px; line-height:1.4}
#popAlertaOfertaForm{display:flex; flex-direction:column; gap:10px; text-align:left}
#popAlertaOfertaForm input{padding:11px 14px; border:1px solid var(--line); border-radius:9px; font-size:16px; font-family:inherit}
#popAlertaOfertaForm button{background:var(--brand); color:#fff; border:0; font-weight:700; font-size:14px; padding:12px;
  border-radius:9px; cursor:pointer; transition:background .15s ease}
#popAlertaOfertaForm button:hover{background:var(--brand-d)}
#popAlertaOfertaForm button:disabled{opacity:.7; cursor:default}

/* ── Faixa "monitore qualquer produto" ─────────── */
.mon-band{width:100%; margin-top:40px; background:linear-gradient(120deg,var(--brand) 0%,var(--brand-dark) 100%)}
.mon-band-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 24px; flex-wrap:wrap}
.mon-band-eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#fff; opacity:.85; margin-bottom:10px}
.mon-band-txt h3{font-family:var(--font-head); font-size:22px; font-weight:800; color:#fff; margin:0 0 8px; line-height:1.3}
.mon-band-txt h3 u{text-decoration-color:rgba(255,255,255,.5); text-underline-offset:3px}
.mon-band-txt p{font-size:13.5px; color:rgba(255,255,255,.85); margin:0; line-height:1.5}
.mon-band-btn{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--brand);
  font-weight:800; font-size:14.5px; padding:14px 22px; border:0; border-radius:12px; white-space:nowrap;
  cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .15s ease; flex-shrink:0}
.mon-band-btn:hover{transform:scale(1.04)}
@media(max-width:820px){
  .mon-band{margin-top:36px; border-radius:20px 20px 0 0}
  .mon-band-in{flex-direction:column; align-items:center; text-align:center; padding:34px 32px; gap:22px}
  .mon-band-txt{display:flex; flex-direction:column; align-items:center}
  .mon-band-eyebrow{justify-content:center}
  .mon-band-txt h3{font-size:19px; max-width:280px}
  .mon-band-txt p{font-size:13.5px; max-width:280px}
  .mon-band-btn{justify-content:center; width:100%; padding:15px}
}

/* ── Cupons ─────────────────────────────────────────────── */
.grid-cupons{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:1000px){.grid-cupons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-cupons{grid-template-columns:1fr; gap:16px}}
.cupom{position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:11px; transition:transform .2s ease, box-shadow .2s ease}
.cupom:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(108,71,255,.12)}
.cupom-tag{position:absolute; top:-1px; right:16px; max-width:calc(100% - 32px); background:var(--brand); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:0 0 8px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cupom-loja{align-self:flex-start; display:inline-flex; background:var(--pill); color:var(--brand);
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700}
.cupom-tit{font-family:var(--font-head); font-weight:700; font-size:16.5px; color:var(--ink); line-height:1.3}
.cupom-desc{font-size:13px; color:var(--ink-2); line-height:1.5}
.cupom-code{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg);
  border:1px dashed var(--pill-line); border-radius:10px; padding:10px 14px}
.cupom-code code{font-family:var(--mono); font-weight:700; font-size:15px; color:var(--brand); letter-spacing:.04em}
.cupom-copy{background:none; border:0; color:var(--brand); font-weight:700; font-size:12.5px; padding:4px 8px;
  border-radius:6px; cursor:pointer; transition:background .15s ease; white-space:nowrap}
.cupom-copy:hover{background:var(--pill-line)}
.cupom-chips{display:flex; flex-wrap:wrap; gap:8px}
.cupom-chip{display:flex; align-items:center; gap:7px; background:var(--bg); border:1px dashed var(--pill-line);
  border-radius:9px; padding:7px 11px; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease}
.cupom-chip:hover{background:var(--pill); border-color:var(--brand); transform:translateY(-1px)}
.cupom-chip-cod{font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--brand); letter-spacing:.03em}
.cupom-chip-off{font-size:11px; color:var(--ink-3); font-weight:600}
.cupom-cta{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--brand); color:#fff; font-weight:700; font-size:14px; padding:12px; border-radius:10px;
  transition:background .15s ease, transform .15s ease}
.cupom-cta:hover{background:var(--brand-d); transform:scale(1.02)}
.cupom-cta .ico{flex-shrink:0}
.cupom-val{font-size:11px; color:var(--ink-3)}
.btn{background:var(--pill); color:var(--brand); border:0; font-weight:700; font-size:13px;
  padding:9px 14px; border-radius:8px; transition:background .15s ease}
.btn:hover{background:#E4E1FB}
.btn-block{display:block; width:100%; text-align:center}

/* ── Estado vazio ───────────────────────────────────────── */
.vazio{background:#fff; border:1px dashed var(--line); border-radius:20px; padding:64px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin:24px 0 40px}
.vazio .em{font-size:38px}
.vazio h3{font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--ink); margin:0}
.vazio p{font-size:14.5px; color:var(--ink-3); max-width:380px; margin:0}

/* ── Footer ─────────────────────────────────────────────── */
.ft{width:100%; background:var(--dark); margin-top:56px; padding:64px 0 32px}
.ft-in{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px}
.ft h4{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6B6B85; margin:0 0 16px}
.ft-logo{height:58px; width:auto; display:block; margin-bottom:16px}
.ft-desc{font-size:14px; color:var(--dark-ink); line-height:1.6; max-width:280px}
.ft-col > a, .ft-col > span{display:flex; align-items:center; gap:9px; font-size:14px; color:#C7C7D6; margin-bottom:11px; transition:color .15s ease}
.ft-col > a:hover{color:#fff}
.ft-col > a:hover .ci,.ft-col > a:hover .ico{color:#fff}
.ft-col .ci, .ft-col .ico{width:16px; height:16px; flex-shrink:0; color:var(--brand)}
.ft-col > a > span, .ft-col > span > span{margin:0; display:inline}
.ft-social{display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--dark-3); padding-top:24px; margin-top:32px}
.ft-social a{display:inline-flex; align-items:center; gap:7px; background:var(--dark-2); border:1px solid var(--dark-3); color:#C7C7D6; padding:8px 16px; border-radius:999px; font-size:13px; transition:color .15s ease, border-color .15s ease}
.ft-social a:hover{color:#fff; border-color:var(--brand)}
.ft-social .ico{width:15px; height:15px; flex-shrink:0}
.ft-bottom{border-top:1px solid var(--dark-3); padding-top:24px; margin-top:32px; font-size:12px; color:#6B6B85; line-height:1.6}

/* ── Responsivo ─────────────────────────────────────────── */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero-home h1{font-size:44px}
}
@media(max-width:820px){
  .hero-home-in{grid-template-columns:1fr; gap:32px; padding:48px 24px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:1fr 1fr; gap:32px}
  .hd .search{display:none}
  .hd-in{gap:14px}

  .hd-links{position:fixed; top:78px; left:0; right:0; z-index:49; display:flex;
    flex-direction:column; align-items:stretch; gap:0; background:#fff;
    border-top:1px solid var(--line-2); box-shadow:0 16px 32px rgba(18,17,26,.12);
    padding:16px 20px 20px; max-height:calc(100vh - 78px); overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease}
  .hd-links.show{opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible}

  .hd-links-search{display:flex; align-items:center; gap:10px; background:var(--pill);
    border-radius:12px; padding:12px 16px; margin-bottom:14px}
  .hd-links-search button{background:none; border:0; font-size:14px; opacity:.6; padding:0; line-height:1; color:var(--ink)}
  .hd-links-search input{flex:1; min-width:0; background:none; border:0; outline:none;
    font-family:var(--font); font-size:16px; color:var(--ink)}
  .hd-links-search input::placeholder{color:#8A8A9E}

  .hd-links-cupom{display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--brand); color:#fff!important; font-size:14.5px; font-weight:700;
    padding:13px; border-radius:12px; margin-bottom:18px}
  .hd-links-cupom:hover{background:var(--brand-d)}
  .hd-links-cupom .ico{display:inline-flex}

  .hd-links-lbl{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-3); padding-bottom:10px}
  .hd-links-cats{display:flex; flex-direction:column}
  .hd-links-cats-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px}
  .hd-links-cats-grid a{display:flex; align-items:center; gap:9px; padding:10px 6px; border-radius:10px;
    font-size:13.5px}
  .hd-links-cats-grid a:hover, .hd-links-cats-grid a:active{background:var(--bg)}
  .hd-links-cats-grid .ci{width:17px; height:17px; flex-shrink:0; color:var(--ink-3)}
  .hd-links-cats-grid a:hover .ci{color:var(--brand)}

  .burger{display:flex; margin-left:auto}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hero-home h1{font-size:34px}
  .hero-home .sub{font-size:16px}
  .sec-head h2{font-size:24px}
  .grid{grid-template-columns:1fr 1fr; gap:12px}
  .card-body{padding:12px}
  .card-tit{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; line-height:1.4}
  .preco-atual{font-size:20px}
  .hd-links-cats-grid{grid-template-columns:1fr}
  .pop-card{padding:26px 20px; border-radius:16px}
  .pop-card h3{font-size:18px}
  .ft{padding:48px 0 28px}
  .ft-in{grid-template-columns:1fr; gap:28px}
  /* Celular: card estreito não cabe clicks + ações numa linha só — empilha e a CTA ganha o espaço todo */
  .card-foot{flex-direction:column; align-items:stretch; gap:8px}
  .card-actions{width:100%}
  .card-cta{flex:1; text-align:center}
  /* Celular: barra de categorias vira scroll horizontal compacto c/ fade */
  .catbar-in{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; padding:12px 40px 12px 16px}
  .catpill{scroll-snap-align:start}
  .catbar::after{content:''; position:absolute; top:0; right:0; bottom:0; width:44px;
    background:linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events:none}
}