:root{
  --brand:#C7A74F; --secondary:#1C1C1C; --deep-blue:#1A2E45; --muted:#6E6E6E;
  --bg:#FFFFFF; --text:#1C1C1C; --danger:#C0392B;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08);
  --font-display:'Montserrat','Avenir Next',ui-sans-serif,system-ui;
  --font-body:'Lato','Open Sans',ui-sans-serif,system-ui;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px}
.brand-word{font-family:var(--font-display);font-weight:700;letter-spacing:.2px}
.btn{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#1C1C1C}
.btn-ghost{background:transparent;border-color:#e5e7eb}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f8fafc}
.meta{color:var(--muted);font-size:13px}
.hero{display:grid;place-items:center;min-height:440px;background:linear-gradient(135deg,#f8f6ef,#ffffff)}
.hero h1{font-family:var(--font-display);font-size:44px;line-height:1.05;margin:0 0 8px;color:var(--deep-blue); text-align:center}
.hero p{color:var(--muted); text-align:center; margin: 0 auto; max-width: 720px}
.searchbar{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:8px;box-shadow:var(--shadow); width:100%; max-width: 1000px; margin: 12px auto 0}
.searchbar input,.searchbar select{border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font:inherit;min-width:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px auto 0; justify-content:center}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:18px 0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(12,1fr)}
.grid > .card{ grid-column: span 4; } /* 3 por fila en desktop */
@media (max-width: 900px){ .grid > .card{ grid-column: span 6; } } /* 2 por fila */
@media (max-width: 600px){ .grid > .card{ grid-column: span 12; } } /* 1 por fila */
.card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.03); display:flex; flex-direction:column; min-height: 390px}
.thumb{position:relative;height:200px;background:#f3f4f6;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.price{font-weight:800;font-family:var(--font-display);color:var(--deep-blue)}
.card .content{padding:12px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .title{font-family:var(--font-display);font-weight:600; line-height:1.25; min-height: 3em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .actions{display:flex;gap:8px;margin-top:auto}
footer{border-top:1px solid #e5e7eb;margin-top:32px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:20px 0;color:var(--muted);font-size:14px}
.footer-legal{font-size:12px;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.6);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:16px;max-width:980px;width:100%;max-height:90vh;overflow:auto}
.detail{display:grid;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){ .detail{grid-template-columns:1fr} }
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gallery img{height:180px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb}
.drawer{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;box-shadow:var(--shadow);display:none;gap:8px;align-items:center;padding:8px 10px}
.drawer.open{display:flex}
.toast{position:fixed;right:16px;bottom:16px;background:#1C1C1C;color:#fff;padding:10px 14px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f7f7f7 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:12px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}