@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --ink:#202520; --paper:#f6f3eb; --green:#203b32; --lime:#e6f486; --line:#d6d7ca; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.5 "DM Sans",system-ui,sans-serif; }
.wrap { width:min(1100px, calc(100% - 2rem)); margin:auto; }
header { background:var(--green); color:white; }
.mast { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; }
.mast a { font-weight:700; text-decoration:none; color:inherit; }
.mast span { color:var(--lime); font-size:.88rem; }
.intro { padding:clamp(2.5rem,8vw,6rem) 0 2.2rem; }
h1 { font:clamp(2.5rem,7vw,5.7rem)/.99 "Archivo Black",system-ui,sans-serif; letter-spacing:-.055em; margin:0; }
.intro p { font-size:clamp(1rem,2.2vw,1.25rem); margin-bottom:0; }
.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; background:var(--green); color:white; padding:1.2rem; border-radius:.8rem; }
label { display:grid; gap:.45rem; font-weight:700; }
select,input { width:100%; min-height:2.85rem; border:1px solid var(--line); border-radius:.4rem; padding:.5rem; background:white; color:var(--ink); font:inherit; }
.results-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 1rem; margin-top:1.6rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1rem; padding-bottom:3rem; }
.card,#detail { background:#fffefa; border:1px solid var(--line); border-radius:.8rem; padding:1.2rem; }
.card h3 { margin:.35rem 0 .65rem; line-height:1.25; }
.card p { margin:.35rem 0; }
.platform { color:#3a544a; font-size:.86rem; font-weight:700; }
.price { font-weight:700; font-size:1.35rem; }
.button { display:inline-block; margin-top:.8rem; padding:.55rem .85rem; border-radius:.35rem; background:var(--lime); color:#202520; font-weight:700; text-decoration:none; }
#detail { max-width:700px; margin:2rem 0; }
:focus-visible { outline:3px solid #a65c17; outline-offset:3px; }
@media(max-width:680px) { .filters { grid-template-columns:1fr; } }

[hidden] { display:none !important; }