/* ===== Base igual que auto.php ===== */
body{
  background:#f5f5f5;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111827;
}

header{
  background:#111827;     /* ESTE es el “azul” real de auto.php */
  color:#fff;
  padding:25px 0;
  text-align:center;      /* centra el texto del header */
}

/* Botón del header (como en auto.php) */
header button{
  border:none;
  background:#2563eb;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
header button:hover{ background:#1d4ed8; }

/* ===== Index: tarjetas NO centradas (grid) ===== */
.catalogo{
  padding:20px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:15px;
}

.card{
  background:#fff;
  padding:12px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border:1px solid #e5e7eb;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,0.10);
}

.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
}

.card h3{
  margin:10px 0 4px;
  font-size:18px;
}
.card p{
  margin:6px 0;
  color:#374151;
  font-size:14px;
}

/* ===== auto.php: tu tarjeta detalle (por si lo usas también fuera) ===== */
#detalleCoche{
  max-width:900px;
  margin:30px auto;
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
#detalleCoche p{ margin:6px 0; color:#374151; }

/* Slider (copiado de tu auto.php) */
.slider{position:relative;overflow:hidden;border-radius:12px;margin-top:15px}
.slides{display:flex;transition:transform .3s ease-in-out}
.slide{flex:0 0 100%;display:flex;justify-content:center;align-items:center}
.slide img{width:100%;height:400px;object-fit:cover;cursor:pointer}
.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:30px;color:#fff;background:rgba(0,0,0,.5);border:none;padding:10px;cursor:pointer;border-radius:50%}
.arrow.left{left:10px} .arrow.right{right:10px}

.lightbox{display:none;position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);justify-content:center;align-items:center;overflow:hidden}
.lightbox-slider{display:flex;width:100%;height:100%;transition:transform .3s ease-in-out}
.lightbox-slider .slide{flex:0 0 100%;display:flex;justify-content:center;align-items:center}
.lightbox-slider img{max-width:90%;max-height:90%;object-fit:contain}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:50px;color:#fff;background:rgba(0,0,0,.5);border:none;padding:15px;cursor:pointer;border-radius:50%;z-index:1000}
.lightbox-arrow.left{left:20px} .lightbox-arrow.right{right:20px}
.lightbox-close{position:absolute;top:20px;right:30px;font-size:50px;color:#fff;cursor:pointer;z-index:1000}

/* Responsive */
@media (max-width:600px){
  .card img{ height:140px; }
  .slide img{ height:260px; }
  #detalleCoche{ margin:16px; padding:16px; }
}