<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RRPJ — Shopping</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--navy-900:#0c2138;--navy-800:#123353;--navy-700:#1b4470;--gray-50:#f4f6f8;--gray-100:#eef1f4;--gray-300:#c9d2da;--gray-500:#8996a3;--gray-700:#4d5a67;--ink:#16232e;--white:#fff;--brass:#ad8850;--brass-dark:#8f6f3f}
*{box-sizing:border-box}body{margin:0;background:var(--gray-100);color:var(--ink);font-family:Inter,sans-serif;line-height:1.5}.rrpj{min-height:100vh}.RRPJ h1,.rrpj h2,.rrpj h3{font-family:Fraunces,serif;margin:0;color:var(--navy-900)}button,select,input{font:inherit}button{cursor:pointer}
.header{background:var(--navy-900);padding:18px 32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:9px;color:#fff}.brand__mark{width:34px;height:34px;border:1.4px solid var(--brass);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--brass);font-family:Fraunces,serif;font-size:17px}.brand__name{font-family:Fraunces,serif;font-size:19px}
.header__search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:9px 14px;color:var(--gray-100)}.header__search input{background:transparent;border:0;outline:0;color:#fff;font-size:14px;width:100%}.header__search input::placeholder{color:var(--gray-300)}.header__cta{background:transparent;border:1px solid var(--brass);color:var(--brass);padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600}.header__cta:hover{background:var(--brass);color:var(--navy-900)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:64px 32px;max-width:1180px;margin:auto}.hero__eyebrow{color:var(--brass-dark);font-size:13.5px;font-weight:600;margin-bottom:14px}.hero h1{font-size:40px;font-weight:500;line-height:1.18;max-width:15ch}.hero p{margin-top:18px;color:var(--gray-700);font-size:15.5px;max-width:46ch}.hero__stats{display:flex;gap:32px;margin-top:30px}.hero__stat strong{display:block;font-family:Fraunces,serif;font-size:24px;color:var(--navy-900)}.hero__stat span{font-size:12.5px;color:var(--gray-500)}
.plate{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--navy-800),var(--navy-900));display:flex;align-items:center;justify-content:center;border-radius:10px}.plate--card{aspect-ratio:16/11}.plate--modal{aspect-ratio:16/8;border-radius:14px 14px 0 0}.plate__grid{position:absolute;inset:-20%;background-image:repeating-linear-gradient(var(--angle),rgba(255,255,255,.07) 0 1px,transparent 1px 28px),repeating-linear-gradient(calc(var(--angle) + 90deg),rgba(255,255,255,.07) 0 1px,transparent 1px 28px)}.plate__corner{position:absolute;width:16px;height:16px;border-color:rgba(255,255,255,.4);border-style:solid}.plate__corner--tl{top:10px;left:10px;border-width:1.5px 0 0 1.5px}.plate__corner--br{bottom:10px;right:10px;border-width:0 1.5px 1.5px 0}.plate__icon{position:relative;width:34%;height:34%;color:rgba(255,255,255,.72)}.plate--modal .plate__icon{width:20%;height:20%}
.filterbar{max-width:1180px;margin:auto;padding:0 32px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pill{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid var(--gray-300);background:#fff;color:var(--gray-700);font-size:13.5px;font-weight:500}.pill:hover{border-color:var(--navy-700)}.pill--active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}.pill__count{font-size:11.5px;opacity:.65}.filterbar__sort{margin-left:auto;border:1px solid var(--gray-300);background:#fff;color:var(--gray-700);border-radius:8px;padding:9px 12px;font-size:13.5px}
.grid{max-width:1180px;margin:auto;padding:0 32px 72px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}.card{background:#fff;border:1px solid var(--gray-300);border-radius:12px;overflow:hidden;transition:.15s;cursor:pointer}.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(12,33,56,.12);border-color:var(--navy-700)}.card__media{position:relative}.card__badge,.card__tag{position:absolute;top:12px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.card__badge{left:12px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);color:var(--navy-900);font-size:12px}.card__tag{right:12px;background:var(--brass);color:#fff}.card__body{padding:16px 18px 18px}.card__title{font-size:17px;font-weight:500}.card__location{display:flex;align-items:center;gap:5px;color:var(--gray-500);font-size:12.5px;margin:6px 0 12px}.card__specs{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}.card__spec{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gray-700)}.card__footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-100);padding-top:12px}.card__price{font-family:Fraunces,serif;font-size:17px;color:var(--navy-900)}.card__cta{display:flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600;color:var(--navy-700)}
.empty{max-width:1180px;margin:auto;padding:60px 32px 90px;text-align:center;color:var(--gray-700)}.empty h3{margin-bottom:8px}.empty button{margin-top:18px;border:1px solid var(--navy-900);background:transparent;color:var(--navy-900);padding:9px 18px;border-radius:8px;font-size:13.5px;font-weight:600}
.overlay{position:fixed;inset:0;background:rgba(10,22,36,.62);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.modal{background:#fff;border-radius:14px;max-width:620px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal__close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.9);border:0;border-radius:999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--navy-900);z-index:2}.modal__body{padding:26px 28px 28px}.modal__badge{display:inline-flex;align-items:center;gap:6px;background:var(--gray-100);color:var(--navy-800);font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px}.modal__title{font-size:24px;font-weight:500;margin-top:12px}.modal__location{display:flex;align-items:center;gap:6px;color:var(--gray-500);font-size:13px;margin:8px 0 20px}.modal__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:16px;background:var(--gray-50);border-radius:10px;margin-bottom:18px}.modal__spec{display:flex;align-items:flex-start;gap:9px;color:var(--navy-800)}.modal__spec-label{display:block;font-size:11.5px;color:var(--gray-500)}.modal__spec-value{display:block;font-size:14px;font-weight:600}.modal__description{color:var(--gray-700);font-size:14.5px;margin-bottom:22px}.modal__pricebar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--gray-100);padding-top:20px}.modal__price-label{display:block;font-size:12px;color:var(--gray-500)}.modal__price{font-family:Fraunces,serif;font-size:26px;color:var(--navy-900)}.modal__actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:flex;align-items:center;gap:7px;border-radius:8px;padding:10px 16px;font-size:13.5px;font-weight:600;border:1px solid transparent}.btn--ghost{border-color:var(--navy-900);color:var(--navy-900);background:transparent}.btn--primary{background:var(--brass);color:#fff}.btn--primary:hover{background:var(--brass-dark)}
.footer{background:var(--navy-900);color:var(--gray-300);padding:44px 32px 26px}.footer__inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}.footer h4{color:#fff;font-size:13px;font-weight:600;margin:0 0 12px}.footer p,.footer li{font-size:13px;color:var(--gray-300);line-height:1.8}.footer ul{list-style:none;padding:0;margin:0}.footer__bottom{max-width:1180px;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:var(--gray-500);display:flex;align-items:center;gap:8px}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding:40px 20px}.header{padding:16px 20px}.filterbar{padding:0 20px 16px}.grid{padding:0 20px 56px}.footer__inner{grid-template-columns:1fr}.filterbar__sort{margin-left:0}.hero h1{font-size:34px}}
@media(max-width:560px){.header__search{order:3;flex-basis:100%}.hero__stats{gap:18px;flex-wrap:wrap}.modal__specs{grid-template-columns:1fr}.modal__body{padding:22px}.overlay{padding:10px}}
</style>
<div id="app"></div>
<script>
const LISTINGS=[
{id:"c1",category:"carro",title:"BMW 320i Sport 2022",location:"Rio de Janeiro, RJ",price:189900,tag:"Baixa quilometragem",specs:{Ano:"2022",Km:"28.000 km",Câmbio:"Automático",Combustível:"Flex"},description:"Sedã executivo com pacote esportivo, revisões feitas na concessionária e manual completo. Pneus novos e sem sinistro."},
{id:"c2",category:"carro",title:"Jeep Compass Limited 2021",location:"Niterói, RJ",price:149500,tag:"Único dono",specs:{Ano:"2021",Km:"41.200 km",Câmbio:"Automático",Combustível:"Diesel"},description:"SUV completo, único dono, com teto solar e central multimídia atualizada. Ideal para cidade e estrada."},
{id:"c3",category:"carro",title:"Toyota Corolla Altis 2023",location:"São Paulo, SP",price:168000,tag:"Seminovo",specs:{Ano:"2023",Km:"12.500 km",Câmbio:"Automático",Combustível:"Híbrido"},description:"Modelo topo de linha, motor híbrido de baixo consumo e ainda na garantia de fábrica."},
{id:"m1",category:"moto",title:"Honda CB 500F 2022",location:"Belo Horizonte, MG",price:34900,tag:"Revisada",specs:{Ano:"2022",Km:"8.200 km",Cilindrada:"500 cc"},description:"Moto urbana leve e econômica, com revisão recém-feita e pneus em ótimo estado."},
{id:"m2",category:"moto",title:"Kawasaki Z900 2021",location:"Curitiba, PR",price:52500,tag:"Oportunidade",specs:{Ano:"2021",Km:"15.000 km",Cilindrada:"900 cc"},description:"Naked de alta performance, escapamento esportivo e suspensão ajustável. Documentação em dia."},
{id:"m3",category:"moto",title:"Triumph Bonneville T120 2020",location:"Rio de Janeiro, RJ",price:68000,tag:"Clássica",specs:{Ano:"2020",Km:"9.800 km",Cilindrada:"1200 cc"},description:"Design retrô com tecnologia atual. Acompanha acessórios originais e capa protetora."},
{id:"h1",category:"casa",title:"Casa contemporânea em condomínio",location:"Búzios, RJ",price:1850000,tag:"Vista mar",specs:{Quartos:"4",Banheiros:"3",Área:"320 m²",Vagas:"3"},description:"Casa de alto padrão com vista para o mar, piscina privativa e área gourmet integrada."},
{id:"h2",category:"casa",title:"Sobrado reformado",location:"Petrópolis, RJ",price:920000,tag:"Recém-reformada",specs:{Quartos:"3",Banheiros:"2",Área:"210 m²",Vagas:"2"},description:"Sobrado em rua tranquila, reforma concluída em 2024 com acabamentos de qualidade."},
{id:"h3",category:"casa",title:"Casa térrea com jardim",location:"Florianópolis, SC",price:1180000,tag:"Perto da praia",specs:{Quartos:"3",Banheiros:"2",Área:"180 m²",Vagas:"2"},description:"Casa térrea a 400 metros da praia, com jardim amplo e churrasqueira coberta."},
{id:"t1",category:"terreno",title:"Terreno plano residencial",location:"Campinas, SP",price:385000,tag:"Pronto para construir",specs:{Área:"450 m²",Zoneamento:"Residencial",Topografia:"Plano"},description:"Lote plano em bairro consolidado, com toda infraestrutura já disponível."},
{id:"t2",category:"terreno",title:"Lote em condomínio fechado",location:"Niterói, RJ",price:610000,tag:"Segurança 24h",specs:{Área:"600 m²",Zoneamento:"Residencial",Topografia:"Levemente inclinado"},description:"Condomínio fechado com segurança 24 horas e área verde preservada."},
{id:"t3",category:"terreno",title:"Terreno comercial",location:"Rio de Janeiro, RJ",price:1250000,tag:"Alto fluxo",specs:{Área:"800 m²",Zoneamento:"Comercial",Topografia:"Plano"},description:"Localização de alto fluxo de pessoas, ideal para comércio ou serviços."}
];
const META={carro:{label:"Carro",plural:"Carros",icon:"🚗",angle:"0deg"},moto:{label:"Moto",plural:"Motos",icon:"🏍️",angle:"25deg"},casa:{label:"Casa",plural:"Casas",icon:"⌂",angle:"-12deg"},terreno:{label:"Terreno",plural:"Terrenos",icon:"⌖",angle:"8deg"}};
const fmt=n=>n.toLocaleString("pt-BR",{style:"currency",currency:"BRL",maximumFractionDigits:0});
const esc=s=>String(s).replace(/[&<>"']/g,m=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[m]));
function icon(k){return {Ano:"◷",Km:"◉",Câmbio:"↕",Combustível:"◌",Cilindrada:"◍",Quartos:"▣",Banheiros:"♢",Área:"□",Vagas:"▤",Zoneamento:"⌖",Topografia:"⌁"}[k]||"•"}
function plate(cat,size="card"){return `<div class="plate plate--${size}" style="--angle:${META[cat].angle}"><div class="plate__grid"></div><div class="plate__corner plate__corner--tl"></div><div class="plate__corner plate__corner--br"></div><div class="plate__icon" style="font-size:${size==="modal"?"52px":"72px"};font-family:Arial;text-align:center">${META[cat].icon}</div></div>`}
let category="todos",query="",sort="relevancia",selected=null;
function render(){
let list=LISTINGS.filter(x=>(category==="todos"||x.category===category)&&(!query.trim()||x.title.toLowerCase().includes(query.toLowerCase())||x.location.toLowerCase().includes(query.toLowerCase())));
if(sort==="menor-preco")list.sort((a,b)=>a.price-b.price);if(sort==="maior-preco")list.sort((a,b)=>b.price-a.price);
document.getElementById("app").innerHTML=`<div class="marco">
<header class="header"><div class="brand"><span class="brand__mark">M</span><span class="brand__name">Marco</span></div><div class="header__search"><span>⌕</span><input id="search" placeholder="Buscar por modelo, bairro ou cidade" value="${esc(query)}"></div><button class="header__cta" id="announce">Anunciar meu bem</button></header>
<section class="hero"><div><div class="hero__eyebrow">Carros · Motos · Terrenos · Casas</div><h1>Decisões importantes merecem uma vitrine à altura.</h1><p>Encontre veículos e imóveis selecionados com curadoria, informações claras e contato direto com quem está vendendo — sem intermediários escondidos.</p><div class="hero__stats"><div class="hero__stat"><strong>${LISTINGS.length}</strong><span>anúncios ativos</span></div><div class="hero__stat"><strong>4</strong><span>categorias</span></div><div class="hero__stat"><strong>9</strong><span>cidades atendidas</span></div></div></div><div>${plate("casa","modal")}</div></section>
<div class="filterbar"><button class="pill ${category==="todos"?"pill--active":""}" data-cat="todos">✓ Todos <span class="pill__count">${LISTINGS.length}</span></button>${Object.entries(META).map(([k,m])=>`<button class="pill ${category===k?"pill--active":""}" data-cat="${k}">${m.icon} ${m.plural} <span class="pill__count">${LISTINGS.filter(x=>x.category===k).length}</span></button>`).join("")}<select class="filterbar__sort" id="sort"><option value="relevancia">Relevância</option><option value="menor-preco">Menor preço</option><option value="maior-preco">Maior preço</option></select></div>
${list.length?`<div class="grid">${list.map(card).join("")}</div>`:`<div class="empty"><h3>Nenhum resultado encontrado</h3><p>Ajuste os filtros ou tente outro termo de busca.</p><button id="clear">Limpar filtros</button></div>`}
<footer class="footer"><div class="footer__inner"><div><h4>Marco</h4><p>Marketplace para compra e venda de carros, motos, terrenos e casas, com curadoria e negociação direta.</p></div><div><h4>Categorias</h4><ul><li>Carros</li><li>Motos</li><li>Terrenos</li><li>Casas</li></ul></div><div><h4>Contato</h4><ul><li>contato@rpjrubensgmail.com</li><li>(21) 4002-8922</li><li>Rio de Janeiro, RJ</li></ul></div></div><div class="footer__bottom">◉ © 2026 RRPJ. Todos os direitos reservados.</div></footer></div>`;
bind();
}
function card(x){return `<article class="card" data-id="${x.id}"><div class="card__media">${plate(x.category)}<span class="card__badge">${META[x.category].icon} ${META[x.category].label}</span><span class="card__tag">${esc(x.tag)}</span></div><div class="card__body"><h3 class="card__title">${esc(x.title)}</h3><p class="card__location">⌖ ${esc(x.location)}</p><div class="card__specs">${Object.entries(x.specs).slice(0,3).map(([k,v])=>`<span class="card__spec">${icon(k)} ${esc(v)}</span>`).join("")}</div><div class="card__footer"><span class="card__price">${fmt(x.price)}</span><span class="card__cta">Ver detalhes ›</span></div></div></article>`}
function bind(){
document.querySelectorAll("[data-cat]").forEach(b=>b.onclick=()=>{category=b.dataset.cat;render()});
document.getElementById("search").oninput=e=>{query=e.target.value;render();const s=document.getElementById("search");s.focus();s.setSelectionRange(query.length,query.length)};
document.getElementById("sort").value=sort;document.getElementById("sort").onchange=e=>{sort=e.target.value;render()};
document.querySelectorAll(".card").forEach(c=>c.onclick=()=>openModal(LISTINGS.find(x=>x.id===c.dataset.id)));
const clear=document.getElementById("clear");if(clear)clear.onclick=()=>{category="todos";query="";render()};
document.getElementById("announce").onclick=()=>alert("A área de anúncios está pronta para receber seu formulário de cadastro.");
}
function openModal(x){selected=x;document.body.insertAdjacentHTML("beforeend",`<div class="overlay" id="overlay"><div class="modal" onclick="event.stopPropagation()"><button class="modal__close" id="close">×</button>${plate(x.category,"modal")}<div class="modal__body"><span class="modal__badge">${META[x.category].icon} ${META[x.category].label}</span><h2 class="modal__title">${esc(x.title)}</h2><p class="modal__location">⌖ ${esc(x.location)}</p><div class="modal__specs">${Object.entries(x.specs).map(([k,v])=>`<div class="modal__spec"><span>${icon(k)}</span><div><span class="modal__spec-label">${esc(k)}</span><span class="modal__spec-value">${esc(v)}</span></div></div>`).join("")}</div><p class="modal__description">${esc(x.description)}</p><div class="modal__pricebar"><div><span class="modal__price-label">Valor</span><span class="modal__price">${fmt(x.price)}</span></div><div class="modal__actions"><button class="btn btn--ghost" id="visit">◷ ${x.category==="carro"||x.category==="moto"?"Agendar test-drive":"Agendar visita"}</button><button class="btn btn--primary" id="contact">☎ Falar com o anunciante</button></div></div></div></div></div>`);document.getElementById("overlay").onclick=closeModal;document.getElementById("close").onclick=closeModal;document.getElementById("contact").onclick=()=>alert("Contato com o anunciante: em uma versão real, aqui pode abrir WhatsApp, telefone ou formulário.");document.getElementById("visit").onclick=()=>alert("Agendamento: aqui pode ser conectado a um formulário de visita/test-drive.");document.onkeydown=e=>{if(e.key==="Escape")closeModal()}}
function closeModal(){const o=document.getElementById("overlay");if(o)o.remove();document.onkeydown=null}
render();
</script>
'''
path = Path("/mnt/data/index.html")
path.write_text(html, encoding="utf-8")
print(f"Arquivo criado: {path}")