/* Visual inspirado em varejo de tecnologia (cabecalho escuro, busca grande, laranja, cards brancos). Carrega depois de style.css. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
html:root:not(#a){--paper:#F2F3F4;--paper2:#fff;--ink:#0E1116;--muted:#5B6068;--rule:#E3E5E8;--accent:#FF6500;--accent-ink:#fff;--good:#0F9D58;--on-good:#fff;--card:#fff;--text2:#2B3038;--line2:#E3E5E8;--hov:#ECEEF0;--minbg:#FFE9DB;--ctl:#fff;--foot:#0E1116;--foot-t:#AEB4BC;--markbg:#FFE1CC;--mark-t:#0E1116;--ease:cubic-bezier(.2,.7,.2,1);--navy:#0B3C8C;color-scheme:light}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--paper);letter-spacing:0}
h1,h2,h3,.logo,.preco,.btn,.badge{font-family:'Poppins',system-ui,sans-serif}

/* topo escuro com busca */
.top{background:#0E1116;border-bottom:0;color:#fff}
.top .wrap{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px;gap:18px;flex-wrap:wrap}
.logo{color:#fff;font-weight:800;font-size:26px;letter-spacing:-.03em;font-style:italic}
.logo i{color:var(--accent)}
.hsearch{flex:1 1 360px;display:flex;gap:10px;min-width:0;order:2}
.hsearch #q{flex:1;min-width:0;height:46px;border:0;border-radius:6px;padding:0 18px;font:inherit;font-size:15px;background:#fff;color:#0E1116}
.hsearch #q::placeholder{color:#8A9099}
.hsearch .salvos{height:46px;border:1.5px solid #3A4048;background:transparent;color:#fff;border-radius:6px;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.hsearch .salvos:hover{border-color:var(--accent);color:var(--accent)}
.hsearch .salvos[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.top .sp{display:none}
.top small{order:3;color:#AEB4BC;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:12px}
@media(max-width:720px){.logo{order:1}.top small{order:1;margin-left:auto}.hsearch{order:3;flex-basis:100%}}

/* faixa de selos */
.ticker{background:var(--accent);color:#fff;padding:9px 0;letter-spacing:.06em;font-weight:700;font-size:12px}
.ticker span::after{color:#fff;opacity:.7}

/* banner */
.hero{padding:20px 0 6px}
.hero .wrap{position:relative;background:radial-gradient(900px 420px at 88% 20%,rgba(255,101,0,.55),transparent 60%),linear-gradient(120deg,#0E1116 0%,#1A1F27 70%);color:#fff;border-radius:18px;padding:40px 44px;overflow:hidden;max-width:1240px;width:calc(100% - 48px)}
@media(max-width:720px){.hero .wrap{padding:26px 20px;width:calc(100% - 24px);border-radius:14px}}
.kicker{color:#FFB98A;font-size:12px;letter-spacing:.14em;font-weight:700;margin-bottom:12px}
.kicker span+span::before{color:#5B6068}
h1{font-weight:800;font-size:clamp(34px,6vw,72px);line-height:1;letter-spacing:-.04em}
h1 em{color:var(--accent)}
.lead{color:#D5D9DE;font-size:clamp(14px,1.8vw,18px);font-weight:400;margin-top:16px}
.lead b{border-bottom:0;color:#fff;font-weight:700}
.stats{border-color:rgba(255,255,255,.18);margin-top:26px}
.stat{border-color:rgba(255,255,255,.18)}
.stat b{color:#fff}.stat span{color:#AEB4BC}

/* faixa de economias: painel branco */
.deals{background:transparent;border:0;padding:16px 0 4px}
.deals .wrap{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(14,17,22,.06)}
.deals h2{font-size:18px;font-weight:700;letter-spacing:0;color:#42464D;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.deals h2::before{content:"";width:14px;height:14px;background:var(--accent);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.deal{border:1px solid var(--rule);border-radius:10px;box-shadow:none}
.deal:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(14,17,22,.12)}
.deal .t{border:0}
.deal .e{background:transparent;color:var(--good);padding:0;font-size:12px;font-weight:700}
.deal .p{font-weight:700;letter-spacing:-.02em}

/* barra de abas e filtros */
.controls{background:#fff;border-bottom:1px solid var(--rule);backdrop-filter:none;box-shadow:0 2px 8px rgba(14,17,22,.05)}
.tabs button{font-weight:600;font-size:14px;color:#42464D;padding:12px 16px}
.tabs button[aria-selected=true]{color:var(--accent)}
.tabs .bar{height:3px;background:var(--accent);border-radius:3px}
.search select{border:1.5px solid var(--rule);border-radius:8px;background:#fff;height:42px;font-family:inherit;font-weight:500;font-size:13px}
.chips button{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px}
.chips button:hover{transform:none;background:#0A3377}
.chips button.on{background:var(--accent);color:#fff}
.faixas span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.faixas button,.vistas button{border:1.5px solid var(--rule);border-radius:999px;background:#fff;font-weight:600;font-size:13px}
.faixas button:hover{border-color:var(--accent)}
.faixas button[aria-pressed=true],.vistas button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* cards */
.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{border:0;border-radius:12px;box-shadow:0 1px 2px rgba(14,17,22,.06)}
.card.in:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(14,17,22,.14)}
.card .img{border-bottom:0;border-radius:12px 12px 0 0}
.badge{top:10px;left:10px;border-radius:4px;background:var(--accent);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;padding:4px 8px}
.badge.alt{background:var(--navy)}
.card h3{font-weight:500;font-size:13.5px;color:#2B3038;letter-spacing:0;line-height:1.35}
.loja{border-radius:4px;font-weight:700;letter-spacing:.02em;text-transform:none;font-size:11px}
.preco{font-weight:700;letter-spacing:-.03em;color:#0E1116}
.preco .i{font-size:30px}.preco .r{font-size:14px}.preco .c{font-size:15px}
.eco{background:transparent;color:var(--good);padding:0;border-radius:0;font-weight:700;font-size:12.5px}
.btn{background:var(--accent);color:#fff;border-radius:8px;font-weight:600;letter-spacing:0;text-transform:none;font-size:14px}
.btn:hover{background:#E65A00}
.outras{border-top:1px solid var(--rule)}
.outras em{color:#C0261B}
.more,.up{border-radius:999px;border:2px solid var(--accent);color:var(--accent);font-weight:700;background:#fff}
.more:hover{background:var(--accent);color:#fff;transform:none}
.up{background:var(--accent);color:#fff;border:0}

/* secoes inferiores */
.como{border-top:0;background:#fff;margin-top:34px}
.como h2{font-size:clamp(24px,3.4vw,38px);font-weight:700;letter-spacing:-.03em}
.passo{border-radius:12px;border:1px solid var(--rule);background:#fff}
details{border-color:var(--rule)}
footer{background:#0E1116}

/* ajustes */
#ord,#loja,.search select{border:1.5px solid var(--rule);border-radius:8px;height:42px;font-family:inherit;font-weight:500;font-size:13px;background:#fff;color:var(--ink)}
.hsearch #q{flex:1 1 0;width:auto;min-width:0}
.hsearch .salvos{flex:0 0 auto;width:auto}
h1{font-size:clamp(30px,4.6vw,58px)}
.hero .wrap{padding:30px 38px}
.hero{padding-top:16px}
.stat b{font-size:clamp(26px,3.4vw,40px)}
@media(max-width:720px){.hero .wrap{padding:22px 18px}h1{font-size:30px}.stats{margin-top:18px}}

/* ===== animacoes (rodada 1) ===== */
#prog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#FF6500,#FFA45C);transform-origin:0 50%;transform:scaleX(0);z-index:99;pointer-events:none}
.top{position:sticky;top:0;z-index:30;transition:box-shadow .3s var(--ease)}
.top .wrap{transition:padding .3s var(--ease),min-height .3s var(--ease)}
.top.mini{box-shadow:0 6px 18px rgba(14,17,22,.28)}
.top.mini .wrap{padding-top:6px;padding-bottom:6px;min-height:52px}
.top .logo{transition:font-size .3s var(--ease)}
.top.mini .logo{font-size:21px}
.controls{top:var(--toph,0);transition:top .3s var(--ease)}
@keyframes swapin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#lista.swap .card.in{animation:swapin .5s var(--ease) both;animation-delay:calc(var(--i,0)*35ms)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);z-index:-1}
.btn:hover::after{left:130%}
.btn{transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{box-shadow:0 8px 18px rgba(255,101,0,.35)}.btn:active{transform:scale(.98)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,101,0,.55)}60%{box-shadow:0 0 0 8px rgba(255,101,0,0)}}
.badge:not(.alt){animation:pulse 2.4s ease-out infinite}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .65s ease-out forwards;pointer-events:none}
.more .rip,.chips .rip,.tabs .rip{background:rgba(255,101,0,.25)}
.chips button,.tabs button,.more{position:relative;overflow:hidden}
@keyframes rip{to{transform:scale(1);opacity:0}}
.card .img img{transition:transform .6s var(--ease)}
.card:hover .img img{transform:scale(1.08) translateY(-2px)}
.deal{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.deal .t img{transition:transform .5s var(--ease)}.deal:hover .t img{transform:scale(1.1)}
.stat b{transition:color .3s}
@media(prefers-reduced-motion:reduce){#prog{display:none}.badge{animation:none!important}.btn::after,.rip{display:none}}

/* microinteracao: zoom da foto + brilho no botao */
.card .img{overflow:hidden}
.card .img img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .img img{transform:scale(1.07)}
.card .btn{position:relative;overflow:hidden;isolation:isolate}
.card .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:-1}
.card .btn:hover::after,.card .btn:focus-visible::after{left:130%}
@media (hover:none){.card:hover .img img{transform:none}}
@media (prefers-reduced-motion:reduce){.card .img img,.card .btn::after{transition:none}.card:hover .img img{transform:none}.card .btn:hover::after{left:-60%}}
@media(max-width:720px){
 .controls .chips,.controls .faixas,.controls .search{transition:max-height .35s var(--ease),opacity .25s,margin .3s;max-height:240px;overflow:hidden}
 body.scrolled .controls .chips,body.scrolled .controls .faixas,body.scrolled .controls .search{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none}
 body.scrolled .controls .wrap{padding-top:2px;padding-bottom:2px;gap:0}
}