:root{--primary:#0a5fff;--dark:#0f172a;--text:#0b1220;--muted:#6b7280;--bg:#f8fafc;--success:#16a34a;--warning:#f59e0b}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.header .row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:36px;width:auto}
.brand .title{font-weight:700}
.cta{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.cta.secondary{background:#0b1326;color:#fff}
.hero{padding:24px 16px;background:linear-gradient(180deg,#ffffff,#eef2ff)}
.hero h1{font-size:28px;line-height:1.1;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 16px}
.searchbar{display:grid;gap:8px;grid-template-columns:1fr 1fr 1fr 1fr 120px}
.searchbar input,.searchbar select{padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{position:relative;height:200px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:10px;left:10px;background:var(--success);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px}
.badge.warning{background:var(--warning)}
.card .body{padding:12px;display:flex;gap:8px;flex-direction:column}
.card h3{margin:6px 0 0;font-size:16px}
.meta{color:var(--muted);font-size:13px}
.price{display:flex;align-items:baseline;gap:8px}
.price .main{font-weight:800;font-size:18px}
.price .gc{color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px;margin-top:8px}
.btn{flex:1;text-align:center;padding:10px;border-radius:10px;border:1px solid #e5e7eb;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}
.footer{padding:32px 16px;color:#475569;text-align:center}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:16px;max-width:960px;width:100%;max-height:90vh;overflow:auto}
.modal .head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e5e7eb}
.modal .content{padding:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}
.gallery{display:flex;gap:8px;overflow:auto}
.gallery img{height:220px;border-radius:12px}
.detail h2{margin:0 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#eef2ff;color:#1e3a8a;border-radius:999px;padding:6px 10px;font-size:12px}
.form{display:grid;gap:8px}
.form input, .form textarea{padding:10px;border:1px solid #e5e7eb;border-radius:10px}
.form .cta{width:100%}
.note{font-size:12px;color:var(--muted)}
.whatsapp-fixed{position:fixed;right:16px;bottom:16px;background:#25d366;color:#fff;border-radius:999px;padding:12px 16px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr 1fr}
  .searchbar{grid-template-columns:1fr 1fr 1fr 100px}
  .modal .content{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .grid{grid-template-columns:1fr}
  .searchbar{grid-template-columns:1fr 1fr; gap:10px}
}