:root{
  --bg:#fff8f7;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#666;
  --primary:#ff3d00; /* naranja/rojo */
  --primary-2:#c1121f; /* rojo profundo */
  --accent:#ffe5e0;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:20px}
header{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #eee;
}
.nav{display:flex;align-items:center;gap:20px;padding:10px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--primary-2)}
.logo img{height:44px;width:auto;border-radius:10px;box-shadow:var(--shadow)}
.badge{background:var(--accent);color:var(--primary-2);padding:6px 12px;border-radius:999px;font-weight:600}
.controls{display:grid;grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap:12px;margin:18px 0}
.input, select{
  padding:12px 14px;border:1px solid #eee;border-radius:12px;background:#fff;outline:none;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
button, .btn{
  border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff;
  padding:12px 16px;border-radius:12px; font-weight:700; cursor:pointer; box-shadow: var(--shadow);
}
button:disabled{opacity:.6;cursor:not-allowed}
.grid{display:grid;grid-template-columns: repeat(12, 1fr); gap:16px}
.card{
  grid-column: span 4; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.12)}
.card .photo{aspect-ratio: 16/9; background:#ddd; overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover; display:block}
.card .body{padding:14px}
.title{font-size:18px; font-weight:800; margin:2px 0 8px}
.meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.price{font-size:22px; font-weight:900; color:var(--primary-2); margin-top:8px}
.footer{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.tag{background:#f5f5f5; padding:6px 10px; border-radius:999px; font-size:12px}
.contact{
  display:grid; grid-template-columns: 32px auto; gap:12px; align-items:center;
  background:var(--card); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);
}
.contact svg{width:22px;height:22px;color:var(--primary-2)}
.section{margin:26px 0}
.section h2{margin:0 0 12px; color:var(--primary-2)}
footer{margin:30px 0 50px; color:#888; text-align:center}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal .dialog{background:#fff; border-radius:20px; width:min(980px, 100%); max-height:92vh; display:grid; grid-template-columns: 1.25fr 1fr; overflow:hidden}
.modal .gallery{position:relative; background:#000}
.modal .gallery img{width:100%; height:100%; object-fit:cover}
.modal .gallery .nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:12px}
.modal .gallery .nav button{background:rgba(255,255,255,.2); backdrop-filter: blur(6px); border-radius:12px; padding:10px 14px}
.modal .content{padding:18px; overflow:auto}
.close{position:absolute; top:12px; right:12px; background:#fff; color:#000; border-radius:12px; padding:8px 10px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 8px}
.map-buttons{display:flex; gap:8px; flex-wrap:wrap}
.map-buttons a.btn{display:inline-block}

@media (max-width: 900px){
  .controls{grid-template-columns: 1fr 1fr}
  .card{grid-column: span 6}
  .modal .dialog{grid-template-columns: 1fr}
}
@media (max-width: 600px){
  .card{grid-column: span 12}
}