/* =========================================================
   Achados a Dedo — camada de efeitos visuais (v2)
   Degradês, retroiluminação, brilho e hover por plataforma.
   Para desligar tudo: remova a linha effects.css dos HTML.
   ========================================================= */
:root{
  --g-violet: linear-gradient(180deg,#9466FF 0%,#7C3AED 48%,#5B21B6 100%);
  --g-violet-hover: linear-gradient(180deg,#A47BFF 0%,#8B4DF5 48%,#6528C9 100%);
  --g-navy: linear-gradient(180deg,#1E1A3F 0%,#15122B 60%,#110E24 100%);
  --g-brand: linear-gradient(90deg,#7C3AED 0%,#B05CF0 45%,#FF6B57 100%);
  /* cores de cada plataforma (acendem no hover) */
  --g-ml: linear-gradient(180deg,#FFF57A 0%,#FFE600 55%,#F2C500 100%);
  --g-amz: linear-gradient(180deg,#FFC266 0%,#FF9900 55%,#E07B00 100%);
  --g-shp: linear-gradient(180deg,#FF7A52 0%,#EE4D2D 55%,#C93A1E 100%);
  --glow-violet: 0 10px 26px -10px rgba(124,58,237,.85), 0 0 0 1px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.35) inset;
}

/* ---------- Fundo da página: luz ambiente suave ---------- */
body{
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(760px 480px at 100% 12%, rgba(255,107,87,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(124,58,237,.10), transparent 60%),
    #F3F0FB;
  background-attachment: fixed;
}

/* ---------- Cabeçalho ---------- */
.top{background:var(--g-navy);box-shadow:0 8px 28px -14px rgba(10,6,40,.8)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g-brand);opacity:.9}
.brand img{filter:drop-shadow(0 4px 10px rgba(124,58,237,.55))}
.search .field{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px -10px rgba(0,0,0,.6)}
.search:focus-within .field{box-shadow:0 0 0 3px rgba(139,92,246,.45)}
.search button{background:var(--g-violet);box-shadow:var(--glow-violet);transition:filter .2s, box-shadow .2s}
.search button:hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(139,92,246,.75), 0 1px 0 rgba(255,255,255,.35) inset}
.nav a{transition:color .2s, text-shadow .2s}
.nav a:hover,.nav a[aria-current=page]{text-shadow:0 0 14px rgba(167,139,250,.75);border-image:var(--g-brand) 1}

/* ---------- Banner ---------- */
.hero{box-shadow:0 26px 60px -28px rgba(76,29,149,.65), 0 0 0 1px rgba(255,255,255,.06) inset}
.hero h1{text-shadow:0 4px 24px rgba(20,8,70,.45)}
.btn-hero{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#F2EDFF 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 10px 28px -8px rgba(255,255,255,.55), 0 0 34px rgba(167,139,250,.55);
  transition:transform .2s, box-shadow .2s;
  animation:heroGlow 3.2s ease-in-out infinite;
}
.btn-hero svg{transition:transform .2s}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #fff inset, 0 14px 34px -8px rgba(255,255,255,.7), 0 0 46px rgba(196,181,253,.9)}
.btn-hero:hover svg{transform:translate(2px,-2px)}
@keyframes heroGlow{50%{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 10px 28px -8px rgba(255,255,255,.55), 0 0 48px rgba(196,181,253,.85)}}

/* ---------- Chips de categoria ---------- */
.chip{transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;box-shadow:0 2px 8px -4px rgba(40,20,110,.18)}
.chip svg{transition:color .18s, filter .18s}
.chip[aria-pressed=true]{background:var(--g-violet);border-color:#7C3AED;box-shadow:var(--glow-violet)}
.chip[aria-pressed=true] svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}

/* ---------- Painel de filtros ---------- */
.filters{box-shadow:0 14px 40px -24px rgba(40,20,110,.45)}
.filters h2 svg{color:#7C3AED;filter:drop-shadow(0 0 6px rgba(139,92,246,.5))}
.check{transition:color .15s}
.check:hover{color:#5B21B6}
.sw{box-shadow:0 0 8px currentColor}
.sw.ml{color:rgba(255,230,0,.8)}.sw.amazon{color:rgba(255,153,0,.7)}.sw.shopee{color:rgba(238,77,45,.7)}
.btn-ghost{transition:box-shadow .18s, border-color .18s, color .18s}
.btn-ghost:hover{border-color:#8B5CF6;color:#5B21B6;box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.btn-apply{background:var(--g-violet);box-shadow:var(--glow-violet)}
.btn-filter{transition:box-shadow .18s, border-color .18s}
.btn-filter .badge{background:var(--g-violet);box-shadow:0 0 10px rgba(139,92,246,.7)}
.sort select{transition:box-shadow .18s, border-color .18s}
.sort select:focus,.range input:focus{outline:0;border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.2)}

/* ---------- Títulos ---------- */
.toolbar h2,.section-head h3{position:relative}
.section-head h3::after{content:"";display:block;width:56px;height:4px;margin-top:6px;border-radius:4px;background:var(--g-brand);box-shadow:0 0 12px rgba(176,92,240,.55)}

/* ---------- Cards ---------- */
.card{position:relative;transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;box-shadow:0 4px 16px -10px rgba(40,20,110,.25)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--g-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .22s;pointer-events:none}
.card-media{background:radial-gradient(120% 90% at 50% 40%,#FFFFFF 55%,#F3EEFF 100%)}
.card-media img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.badge-rank{box-shadow:0 6px 14px -6px rgba(10,6,40,.6);background:linear-gradient(180deg,#2A2452,#15122B)}
.badge-rank.top{background:var(--g-violet);box-shadow:0 6px 16px -6px rgba(124,58,237,.9)}
.badge-rank.gold{background:linear-gradient(180deg,#2A2452,#15122B)}
.badge-rank .trophy{color:#FACC15;filter:drop-shadow(0 0 4px rgba(250,204,21,.7))}
.round{transition:transform .18s, box-shadow .18s, border-color .18s, color .18s, background .18s;box-shadow:0 4px 10px -6px rgba(40,20,110,.35)}
.fav[aria-pressed=true]{background:linear-gradient(180deg,#FFF5F3,#FFE4DF);box-shadow:0 0 14px rgba(255,107,87,.55)}
.price{background:linear-gradient(180deg,#221D45,#17142E);-webkit-background-clip:text;background-clip:text;color:transparent}
.off{background:#E8F7EE;border-radius:999px;padding:1px 7px}

/* ---------- Botões das lojas: violeta com retroiluminação; acendem na cor da plataforma ---------- */
.btn-store{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--g-violet)!important;color:#fff!important;
  box-shadow:var(--glow-violet);
  transition:transform .18s ease, box-shadow .25s ease, color .2s ease;
  text-shadow:0 1px 0 rgba(40,10,90,.35);
}
.btn-store::before{ /* cor da plataforma */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s ease;
}
.btn-store::after{ /* reflexo que atravessa o botão */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);
}
.btn-store svg{position:relative;z-index:1;transition:transform .2s}
.btn-store.mercadolivre::before{background:var(--g-ml)}
.btn-store.amazon::before{background:var(--g-amz)}
.btn-store.shopee::before{background:var(--g-shp)}
.btn-store .lg{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}

/* Mercado Livre e Amazon acendem com texto escuro (contraste); Shopee com texto branco */
@media (hover:hover){
  .btn-store:hover{transform:translateY(-2px)}
  .btn-store:hover::before{opacity:1}
  .btn-store:hover::after{animation:sheen .7s ease}
  .btn-store:hover svg{transform:translate(2px,-2px)}
  .btn-store.mercadolivre:hover{color:#1F235C!important;text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset, 0 10px 26px -8px rgba(255,214,0,.95), 0 0 28px rgba(255,230,0,.65)}
  .btn-store.amazon:hover{color:#1A1206!important;text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.45) inset, 0 10px 26px -8px rgba(255,153,0,.95), 0 0 28px rgba(255,153,0,.6)}
  .btn-store.shopee:hover{color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 10px 26px -8px rgba(238,77,45,.95), 0 0 28px rgba(238,77,45,.6)}

  .card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 44px -22px rgba(76,29,149,.55), 0 0 0 1px rgba(139,92,246,.15)}
  .card:hover::before{opacity:1}
  .card:hover .card-media img{transform:scale(1.05)}

  .chip:hover{transform:translateY(-2px);border-color:#A78BFA;box-shadow:0 10px 22px -12px rgba(124,58,237,.7)}
  .chip:hover svg{color:#7C3AED;filter:drop-shadow(0 0 5px rgba(139,92,246,.6))}
  .chip[aria-pressed=true]:hover svg{color:#fff}

  .round:hover{transform:scale(1.08)}
  .fav:hover{color:#FF6B57;border-color:#FFC9C0;box-shadow:0 0 16px rgba(255,107,87,.55)}
  .round.wa:hover{color:#fff;background:linear-gradient(180deg,#3BE07A,#1FAF55);border-color:#1FAF55;box-shadow:0 0 18px rgba(37,211,102,.7)}
}
/* No toque (celular) a cor da plataforma acende ao pressionar */
.btn-store:active::before,.btn-store:focus-visible::before{opacity:1}
.btn-store.mercadolivre:active,.btn-store.mercadolivre:focus-visible{color:#1F235C!important;text-shadow:none;box-shadow:0 0 26px rgba(255,230,0,.75)}
.btn-store.amazon:active,.btn-store.amazon:focus-visible{color:#1A1206!important;text-shadow:none;box-shadow:0 0 26px rgba(255,153,0,.7)}
.btn-store.shopee:active,.btn-store.shopee:focus-visible{box-shadow:0 0 26px rgba(238,77,45,.7)}
.btn-store:active{transform:scale(.98)}
@keyframes sheen{from{left:-60%}to{left:120%}}

/* Selo de loja à esquerda de cada preço com leve luz */
.offer-row .store{display:inline-flex;align-items:center;gap:0}

/* ---------- Voltar ao topo ---------- */
.to-top{background:var(--g-violet);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset, 0 10px 26px -6px rgba(124,58,237,.9), 0 0 24px rgba(139,92,246,.55)}

/* ---------- Gaveta (celular) ---------- */
.drawer-head{background:var(--g-navy);position:relative}
.drawer-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--g-brand)}
.drawer nav a{transition:background .15s, color .15s}
.drawer nav a:hover{background:linear-gradient(90deg,rgba(139,92,246,.12),transparent);color:#5B21B6}

/* ---------- Rodapé ---------- */
.foot{background:var(--g-navy);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--g-brand)}
.seal svg{padding:7px;width:42px;height:42px;border-radius:12px;background:linear-gradient(180deg,rgba(139,92,246,.35),rgba(124,58,237,.12));box-shadow:0 0 18px rgba(139,92,246,.35), 0 0 0 1px rgba(167,139,250,.25) inset;color:#E9E3FF}
.foot nav a{transition:color .15s, text-shadow .15s}
.foot nav a:hover{text-decoration:none;color:#D8CCFF;text-shadow:0 0 12px rgba(167,139,250,.8)}

/* ---------- Páginas de texto ---------- */
.page{box-shadow:0 22px 50px -30px rgba(76,29,149,.45)}
.page h1{background:linear-gradient(90deg,#3B0E8C,#7C3AED 60%,#C2410C);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Acessibilidade: sem animação para quem pediu ---------- */
@media (prefers-reduced-motion:reduce){
  .btn-hero{animation:none}
  .btn-store:hover::after{animation:none}
  .card:hover,.chip:hover,.btn-store:hover{transform:none}
}