/*
Theme Name: Centurion Motors Theme
Theme URI: https://centurion-motors.local
Author: Centurion
Description: Tema a medida para concesionario – versión pulida con UI profesional
Version: 1.1.0
Text Domain: centurion
*/

/* ---------- Base & Tokens ---------- */
:root{
  --bg:#0d0d0d;
  --bg-elev:#151515;
  --bg-soft:#101010;
  --fg:#f5f5f5;
  --fg-muted:#c6c6c6;
  --fg-subtle:#9b9b9b;
  --accent:#c23a2b;
  --accent-600:#a93326;
  --accent-700:#922e22;
  --ring:#242424;
  --ring-strong:#2e2e2e;
  --success:#1f9d55;
  --warning:#e3a008;
  --danger:#dc2626;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:radial-gradient(1200px 800px at 70% -10%,rgba(194,58,43,.08),transparent) , var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(var(--container),92vw);margin-inline:auto}

/* ---------- Header & Navigation ---------- */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(13,13,13,.72);
  border-bottom:1px solid var(--ring);
  backdrop-filter:saturate(1.1) blur(8px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.header img.logo{height:48px; display:block}
.nav a{
  color:var(--fg);
  text-decoration:none;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  opacity:.9;
}
.nav a:hover{background:var(--bg-elev); opacity:1; transition:.2s ease}

/* ---------- Hero ---------- */
.hero{
  display:grid; place-items:center; text-align:center;
  padding:72px 0 48px;
  gap:12px;
}
.hero h1{
  font-family:Cinzel,serif;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(28px,5vw,48px);
  margin:10px 0 6px;
}
.hero p{color:var(--fg-muted); margin:.25rem 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; border:1px solid transparent;
  box-shadow:var(--shadow-soft);
}
.btn:hover{background:var(--accent-600); transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:active{background:var(--accent-700); transform:none}

/* ---------- Cards & Grid ---------- */
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--bg-elev); border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card .thumb{position:relative; aspect-ratio:16/10; background:var(--bg-soft)}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.card .pad{padding:14px 14px 16px}
.card h3{margin:0 0 8px; font-size:1.05rem; line-height:1.35}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#0b0b0b; border:1px solid var(--ring);
  color:var(--fg-subtle); padding:4px 10px; border-radius:999px; font-size:.78rem
}

/* ---------- Archive Grid (shortcode output) ---------- */
.cm-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cm-card{background:var(--bg-elev); border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .2s, box-shadow .2s}
.cm-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.cm-card .thumb{position:relative; aspect-ratio:16/10; background:var(--bg-soft)}
.cm-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cm-card .title{padding:12px 14px 2px; margin:0; font-size:1.02rem}
.cm-card .meta{display:flex; gap:12px; align-items:center; padding:0 14px 14px; color:var(--fg-muted); font-size:.92rem}
.cm-card .price{font-weight:700; color:#fff}

/* ---------- Filters ---------- */
.cm-filters{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px;
  padding:10px; background:var(--bg-elev); border:1px solid var(--ring); border-radius:var(--radius);
}
.cm-filters input,.cm-filters select{
  height:44px; padding:0 12px;
  background:#0f0f0f; color:#f0f0f0;
  border:1px solid var(--ring-strong); border-radius:10px;
  outline:none;
}
.cm-filters select{padding-right:34px}
.cm-filters input:focus,.cm-filters select:focus{border-color:#3a3a3a; box-shadow:0 0 0 3px rgba(194,58,43,.22)}

/* Pagination */
.cm-pagination{text-align:center; margin:18px 0}
#cm-load-more{
  padding:12px 16px; border-radius:999px; border:1px solid var(--ring);
  background:#111; color:#fff; cursor:pointer;
}
#cm-load-more:hover{background:#161616}

/* ---------- Vehicle Single ---------- */
.vehicle-hero{display:grid; grid-template-columns:1fr; gap:18px; margin:18px 0 10px}
@media(min-width:980px){.vehicle-hero{grid-template-columns:1.25fr .75fr}}

.thumb{border-radius:var(--radius); overflow:hidden; border:1px solid var(--ring); background:var(--bg-soft)}
.gallery{display:grid; gap:10px; grid-template-columns:repeat(5,1fr)}
.gallery img{width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--ring)}
@media(min-width:980px){.gallery img{height:130px}}

.price{font-size:1.6rem; font-weight:800; margin:6px 0 10px}

.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
@media(min-width:680px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stats div{
  background:var(--bg-elev); border:1px solid var(--ring); padding:12px;
  border-radius:12px; color:var(--fg-muted)
}
.stats div strong{color:#fff}

.tabs{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.tabs button{
  background:#121212; color:#fff; border:1px solid var(--ring);
  padding:10px 14px; border-radius:999px; cursor:pointer;
}
.tabs button:hover{background:#171717}
.tab-pane{margin-top:12px; background:var(--bg-elev); border:1px solid var(--ring); border-radius:var(--radius); padding:14px}

/* Financing */
#sim-fin label{display:flex; align-items:center; gap:8px; margin:6px 0}
#sim-fin input{
  height:42px; background:#0f0f0f; color:#f0f0f0;
  border:1px solid var(--ring-strong); border-radius:10px; padding:0 10px; width:140px;
}
#fin-cuota{font-weight:800}

/* ---------- Floating CTA ---------- */
.cta-floating{
  position:fixed; bottom:18px; right:18px; display:flex; gap:10px; z-index:50;
}
.cta-floating a{
  background:var(--accent); color:#fff; padding:12px 14px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow-soft);
}
.cta-floating a:hover{background:var(--accent-600)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--ring); padding:32px 0; color:var(--fg-subtle); background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}
.text-muted{color:var(--fg-muted)}
.center{text-align:center}
.hidden{display:none}

/* ---------- Responsive Tweaks ---------- */
@media(max-width:480px){
  .header img.logo{height:40px}
  .hero{padding:56px 0 36px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .cm-grid{grid-template-columns:repeat(1,1fr)}
}