:root{
  --bg:#0e1520; --bg2:#0b111a; --card:#18212e; --card2:#1f2a3a;
  --line:#28384c; --txt:#e7edf5; --muted:#93a4b8;
  --amber:#f59e0b; --amber2:#d97706; --blue:#38bdf8; --green:#22c55e; --red:#ef4444;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;line-height:1.5}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(11,17,26,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;letter-spacing:.02em}
.brand .mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--amber),var(--amber2));color:#1a1206;font-weight:900}
nav.menu{display:flex;gap:6px}
nav.menu a{color:var(--muted);padding:8px 14px;border-radius:10px;font-weight:600}
nav.menu a:hover,nav.menu a.active{color:var(--txt);background:var(--card)}

/* hero */
.hero{padding:54px 0 30px;border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 300px at 70% -40%, rgba(245,158,11,.12), transparent)}
.hero h1{font-size:2.3rem;margin:0 0 10px;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
.hero p{color:var(--muted);max-width:620px;margin:0;font-size:1.05rem}

/* tabs */
.tabs{display:flex;gap:8px;margin:26px 0 18px;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:9px 18px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.92rem}
.tab.active{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#1a1206;border-color:transparent}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:10px 0 50px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:#3a506c}
.card .thumb{height:150px;background:var(--card2) center/cover no-repeat;display:grid;place-items:center;color:#45586f;font-size:2.4rem}
.card .body{padding:15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pill{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.pill.diesel{background:rgba(245,158,11,.16);color:var(--amber)}
.pill.cars{background:rgba(56,189,248,.16);color:var(--blue)}
.card h3{margin:0;font-size:1.05rem}
.card .desc{color:var(--muted);font-size:.9rem;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-weight:900;font-size:1.25rem}
.price small{color:var(--muted);font-weight:600;font-size:.7rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-weight:800;border-radius:11px;padding:11px 18px;font-size:.95rem;color:#1a1206;
  background:linear-gradient(135deg,var(--amber),var(--amber2))}
.btn:hover{filter:brightness(1.06)}
.btn.sm{padding:8px 14px;font-size:.85rem}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.blue{background:linear-gradient(135deg,var(--blue),#0ea5e9);color:#04121e}
.btn.red{background:var(--red);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* modal */
.telon{position:fixed;inset:0;background:rgba(5,9,14,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.telon.on{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:18px;max-width:520px;width:100%;padding:26px;max-height:92vh;overflow:auto}
.modal h2{margin:0 0 6px}
.cerrar{float:right;background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1}

/* forms / cards generic */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0}
label{display:block;font-weight:600;color:#c7d3e2;margin:12px 0 4px;font-size:.9rem}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px 12px;font-size:.95rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
.aviso{border-radius:10px;padding:11px 14px;margin:10px 0;font-size:.92rem}
.aviso.ok{background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.3)}
.aviso.err{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.aviso.info{background:rgba(56,189,248,.12);color:#bae6fd;border:1px solid rgba(56,189,248,.3)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.muted{color:var(--muted)}
.chip{font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px}
.chip.ok{background:rgba(34,197,94,.16);color:#86efac}
.chip.no{background:rgba(148,163,184,.16);color:#cbd5e1}
footer{border-top:1px solid var(--line);color:var(--muted);padding:26px 0;font-size:.85rem;text-align:center}
@media(max-width:520px){.hero h1{font-size:1.7rem}}