/* ========== Variables y Reset ========== */
:root{
  --bg:#fbf7ea;
  --bg-accent:#fffdf5;
  --ink:#111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#111;
  --btn-dark:#111;
  --btn-dark-ink:#fff;
  --btn-light:#fff;
  --btn-light-ink:#111;
  --primary:#0f172a;
  --primary-ink:#fff;
  --radius:10px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.4 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 28px),
    var(--bg);
}

/* Containers */
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
.container-narrow{max-width:720px}

/* Header */
.site-header{background:var(--bg-accent)}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0 14px;
}
.brand{text-decoration:none; color:inherit}
.brand-title{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:900; letter-spacing:1px; text-transform:uppercase;
  font-size:40px; line-height:1; margin-bottom:4px; color:var(--brand);
}
.brand-subtitle{
  font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
.header-divider{height:2px; background:#111; opacity:.2}

/* Buttons */
.btn{
  display:inline-block; border:1px solid #111; padding:10px 16px; border-radius:6px;
  font-weight:600; text-decoration:none; transition:.15s ease; line-height:1;
}
.btn-sm{padding:8px 12px; font-size:14px}
.btn-light{background:var(--btn-light); color:var(--btn-light-ink)}
.btn-light:hover{transform:translateY(-1px); box-shadow:0 2px 0 #11110f}
.btn-dark{background:var(--btn-dark); color:var(--btn-dark-ink)}
.btn-dark:hover{filter:brightness(1.1)}
.btn-primary{background:var(--primary); color:var(--primary-ink); border-color:var(--primary)}

/* Sections */
.section{padding:24px 0}
.section-title{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800; font-size:28px; margin:8px 0 12px;
}
.section-title + .section-rule,
.header-divider{border:0}

/* Ads Grid (máx 7 columnas) */
.ads-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(7, minmax(0, 1fr));
}
@media (max-width: 1400px){ .ads-grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width: 1200px){ .ads-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width: 992px){  .ads-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 768px){  .ads-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 560px){  .ads-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 380px){  .ads-grid{grid-template-columns:repeat(1,1fr)} }

/* Card */
.ad-card{
  background:#fff; border:1px solid #00000030; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
}
.ad-thumb{display:block; padding:12px 12px 0; text-decoration:none}
.thumb-skeleton{
  height:110px; border:1px solid var(--line); background:#e5e7eb; border-radius:6px;
}
.ad-body{padding:10px 12px 14px}
.ad-title{
  font-size:14px; font-weight:600; color:#1f2937; margin:8px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ad-meta{display:flex; gap:10px; font-size:12px; color:#6b7280}
.ad-price{height:8px; background:#d1d5db; border-radius:3px; padding:0 30px}
.ad-location{height:8px; background:#e5e7eb; border-radius:3px; padding:0 24px}

/* Footer */
.site-footer{margin-top:20px; padding:20px 0 30px; background:var(--bg-accent); border-top:1px solid var(--line)}
.footer-bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-nav a{color:inherit; text-decoration:none; margin-left:14px}
.footer-nav a:hover{text-decoration:underline}

/* Forms */
.form-card{
  background:#fff; border:1px solid #00000020; border-radius:10px; padding:18px;
}
.form-row{display:flex; gap:12px; flex-wrap:wrap}
.form-control{width:100%}
label{display:block; font-size:14px; color:#374151; margin:10px 0 6px}
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff;
  font:inherit;
}
input:focus, select:focus, textarea:focus{outline:2px solid #000000; outline-offset:1px}
.form-actions{margin-top:14px; display:flex; gap:10px; align-items:center}
.helper{color:var(--muted); font-size:13px}
.link{color:#111; text-decoration:underline}