/* ============================================================
   Econimize — estilos
   Escala de desconto (classes utilitárias p/ .badge-disc):
     .disc-soft → 1–14%   (tom neutro)
     .disc-mid  → 15–29%  (laranja)
     .disc-high → ≥30%    (vermelho forte — padrão do badge)
   A render adiciona a classe conforme a faixa de %; sem a
   classe, o badge já usa o tratamento forte por padrão.
   ============================================================ */
:root{
  --bg:#f3f6f5; --surface:#fff; --ink:#0f172a; --muted:#5c6b7a;
  --brand:#059669; --brand-2:#0d9488; --dark:#065f46; --deep:#052e22;
  --disc:#dc2626; --disc-mid:#ea580c; --disc-soft:#475569;
  --good:#047857; --good-bg:#ecfdf5; --good-border:#a7f3d0;
  --amber:#d97706; --border:#e2e8f0;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:
  radial-gradient(1200px 500px at 15% -10%, rgba(5,150,105,.10), transparent 60%),
  radial-gradient(900px 420px at 90% -5%, rgba(13,148,136,.08), transparent 55%),
  var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
img{max-width:100%}
a{color:var(--brand)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
[hidden]{display:none!important}   /* toggles de view: nenhuma regra vence `hidden` */
::selection{background:rgba(5,150,105,.18)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* header */
.topbar{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:baseline;gap:14px;padding:14px 20px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.25rem}
.logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:900}
.tagline{color:var(--muted);font-size:.9rem}

/* hero */
.hero{padding:56px 0 26px;text-align:center}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:620px;margin:0 auto 26px;color:var(--muted);font-size:1.05rem}

.searchbar{display:flex;gap:10px;max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px;box-shadow:var(--shadow)}
#linkInput{flex:1;border:0;outline:0;background:transparent;padding:10px 16px;font-size:1rem;min-width:0;color:var(--ink)}
.btn{border:0;cursor:pointer;font-family:inherit;font-weight:700;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:12px 22px;font-size:1rem;box-shadow:0 4px 14px rgba(5,150,105,.35)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(5,150,105,.45)}
.btn-primary:disabled{opacity:.7;cursor:progress}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{color:var(--muted);font-size:.85rem;margin:10px 0 0}

.errorbox{max-width:720px;margin:16px auto 0;background:#fef2f2;border:1px solid #fecaca;border-left:5px solid var(--disc);color:#991b1b;border-radius:14px;padding:12px 16px;font-size:.95rem;font-weight:600}
.errorbox.warn{background:#fffbeb;border-color:#fde68a;border-left-color:var(--amber);color:#92400e}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;max-width:760px;margin-left:auto;margin-right:auto}
.chips-label{color:var(--muted);font-size:.85rem;align-self:center}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-family:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--brand);color:var(--dark);background:#ecfdf5}

/* resumo — produto de referência */
.resumo{margin-top:34px;scroll-margin-top:88px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.ref{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--good-border);border-top:3px solid var(--brand)}
.ref-thumb{width:84px;height:84px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--border);padding:6px}
.ref-info{flex:1;min-width:220px}
.ref-info h2{margin:0 0 6px;font-size:1.2rem;line-height:1.3}
.ref-meta{display:inline-block;margin:0;background:var(--good-bg);border:1px solid var(--good-border);color:var(--dark);border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:700}
.ref-price{text-align:right;min-width:200px}
.ref-old{display:block;color:var(--muted);font-size:.95rem;text-decoration-color:#94a3b8;text-decoration-thickness:1.5px}
.ref-price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px}
.ref-now{font-size:1.9rem;font-weight:900;color:var(--deep);letter-spacing:-.02em;line-height:1.1}

/* badge de desconto — hierarquia por faixa (inconfundível) */
.badge-disc{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 3px 12px rgba(220,38,38,.38);font-size:.78rem;padding:4px 10px;border-radius:9px;letter-spacing:.02em}
.badge-disc.disc-soft{background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 1px 5px rgba(71,85,105,.3)}
.badge-disc.disc-mid{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 2px 9px rgba(234,88,12,.35)}
.badge-disc.disc-high{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 3px 12px rgba(220,38,38,.4)}
#refDisc{font-size:1.05rem;padding:6px 14px;border-radius:12px}

.callout{background:linear-gradient(135deg,#d1fae5,#ecfdf5);border:1px solid #6ee7b7;border-left:6px solid var(--brand);color:var(--dark);border-radius:14px;padding:14px 18px;margin:16px 0 0;font-weight:700;font-size:1.02rem}
.savings-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.save-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.save-item span{display:block;font-size:1.35rem;font-weight:800;color:var(--dark)}
.save-item small{color:var(--muted);font-size:.78rem}
.save-item.save-total{background:var(--good-bg);border-color:var(--good-border)}
.save-item.save-total span{color:var(--good)}

/* ofertas */
.ofertas,.outras,.cupons,.steps{margin-top:42px;scroll-margin-top:88px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar h3{margin:0;font-size:1.25rem}
#sortSel{border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:.9rem;background:var(--surface);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.offer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
.offer:hover{transform:translateY(-3px);border-color:#a7f3d0}
.offer.best{border-color:var(--brand);border-top:3px solid var(--brand);box-shadow:0 0 0 3px rgba(5,150,105,.14),var(--shadow)}
.offer-top{position:relative}
.offer-thumb{width:100%;height:140px;object-fit:contain;border-radius:12px;background:#f8fafc;border:1px solid var(--border)}
.offer-thumb.placeholder{display:grid;place-items:center;font-size:2rem;background:#f1f5f9}
.offer-badges{position:absolute;top:8px;left:8px;display:flex;gap:6px;flex-wrap:wrap}
.badge{border-radius:8px;padding:3px 9px;font-size:.72rem;font-weight:800;color:#fff}
.badge-best{background:var(--brand)}
.badge-store{background:#334155}
.offer-title{margin:0;font-size:.95rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.offer-seller{color:var(--muted);font-size:.8rem;margin:0}
.offer-prices{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.offer-prices .old{color:var(--muted);font-size:.85rem;text-decoration-color:#94a3b8;text-decoration-thickness:1.5px}
.offer-prices .now{font-size:1.45rem;font-weight:900;color:var(--deep);letter-spacing:-.01em}
.offer-save{margin:0;color:var(--good);font-weight:800;font-size:.9rem;background:var(--good-bg);border:1px solid var(--good-border);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:6px;line-height:1.3}
.offer-meta{color:var(--muted);font-size:.8rem;margin:0}
.btn-go{margin-top:auto;background:var(--deep);color:#fff;padding:10px 16px;font-size:.9rem;width:100%}
.btn-go:hover{background:#0b3b2c}

/* similares — visualmente secundário */
.similares{margin-top:42px;scroll-margin-top:88px}
.similares .toolbar{margin-bottom:6px}
.similares-note{margin:0 0 14px;color:var(--muted);font-size:.92rem;background:#f8fafc;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px 14px}
.grid-sm{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
#similaresGrid .offer{padding:12px;gap:6px;border-color:#e2e8f0}
#similaresGrid .offer:hover{border-color:var(--border)}
#similaresGrid .offer-thumb{height:110px}
#similaresGrid .offer-title{font-size:.88rem;min-height:2.4em}
#similaresGrid .offer-prices .now{font-size:1.15rem}
#similaresGrid .offer-save{font-size:.8rem;padding:5px 8px}
#similaresGrid .badge-disc{font-size:.7rem;padding:3px 8px;box-shadow:0 1px 5px rgba(220,38,38,.3)}

/* outras lojas */
.store-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.store-chip{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:all .12s}
.store-chip:hover{border-color:var(--brand);color:var(--dark);background:#ecfdf5}
.store-chip small{color:var(--muted);font-weight:400}

/* cupons */
.cupon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cupon-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:block;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:all .12s}
.cupon-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.cupon-card h4{margin:0 0 4px;font-size:1rem}
.cupon-card p{margin:0;color:var(--muted);font-size:.85rem}

/* steps */
.step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow)}
.step-n{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* skeleton */
.skeleton-card{border-radius:var(--radius);overflow:hidden}
.sk{background:linear-gradient(90deg,#eef1f4 25%,#e2e8ec 37%,#eef1f4 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-img{height:140px}
.sk-line{height:14px;margin-top:10px}
.sk-line.short{width:55%}

/* footer */
.footer{border-top:1px solid var(--border);margin-top:60px;padding:26px 0 34px;color:var(--muted);font-size:.9rem}
.footer .wrap p{margin:0 0 6px}

/* acessibilidade de movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sk{animation:none}
  .offer:hover,.cupon-card:hover{transform:none}
}

@media (max-width:720px){
  .searchbar{flex-direction:column;border-radius:22px}
  .btn-primary{width:100%}
  .savings-strip{grid-template-columns:repeat(2,1fr)}
  .step-row{grid-template-columns:1fr}
  .hero{padding-top:38px}
  .ref{flex-direction:column;align-items:flex-start}
  .ref-price{text-align:left;width:100%}
  .ref-price-row{justify-content:flex-start}
  .ref-now{font-size:1.6rem}
  .offer-prices .now{font-size:1.3rem}
  .grid-sm{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}