/* ════════════════════════════════════════════════════════════
   NexxusCars — tarjeta de vehículo (compartida)
   Fondo blanco, mucho aire, el auto es el protagonista.
   Rojo #C41B1B solo en el precio y los acentos.
   Mobile-first: 1 columna en teléfono, rejilla en pantallas grandes.
   ════════════════════════════════════════════════════════════ */

.vgrid{display:grid;grid-template-columns:1fr;gap:18px}

.vcard{
  display:block;background:#FFF;border:1px solid #EBEBED;border-radius:16px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.vcard:hover{border-color:#DCDCE0;box-shadow:0 14px 34px rgba(122,10,10,.10);transform:translateY(-2px)}
.vcard:focus-visible{outline:3px solid #C41B1B;outline-offset:2px}

/* 1 · Foto principal a todo el ancho de la tarjeta */
.vc-img{
  position:relative;aspect-ratio:4/3;background:#F2F2F4 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.vc-nofoto{font:600 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#9A9AA2}
.vc-badge{
  position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:999px;
  font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#FFF;
}
.vc-badge.st-sold{background:#1A1A1A}
.vc-badge.st-resv{background:#C41B1B}
.vcard-sold .vc-img{filter:saturate(.35)}

.vc-b{padding:18px 18px 20px}

/* 2 · Marca Modelo Año */
.vc-t{
  margin:0;font-family:'Oswald','Anton',sans-serif;font-weight:500;
  font-size:19px;line-height:1.2;text-transform:uppercase;color:#1A1A1A;
  letter-spacing:.01em;
}
/* 3 · Precio grande en USD */
.vc-p{
  margin-top:8px;font-family:'Anton','Oswald',sans-serif;font-size:27px;line-height:1;
  color:#C41B1B;letter-spacing:.01em;
}
/* 4 · Año · Millaje */
.vc-d{margin-top:10px;font:600 14px/1.4 'Inter',system-ui,sans-serif;color:#1A1A1A}
/* 5 · Ciudad, Estado | Combustible | Transmisión */
.vc-meta{margin-top:5px;font:400 13px/1.5 'Inter',system-ui,sans-serif;color:#6B6B73}
/* 6 · Cuota estimada */
.vc-fin{
  margin-top:12px;padding-top:12px;border-top:1px solid #F0F0F2;
  font:500 13px/1.4 'Inter',system-ui,sans-serif;color:#6B6B73;
}

/* Carrusel horizontal (vehículos similares) — misma tarjeta, scroll táctil */
.vrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;margin:0 -20px;padding-left:20px;padding-right:20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.vrail::-webkit-scrollbar{display:none}
.vrail>.vcard{scroll-snap-align:start}

@media(min-width:600px){
  .vgrid{grid-template-columns:repeat(2,1fr);gap:22px}
  .vrail{grid-auto-columns:46%}
}
@media(min-width:1024px){
  .vgrid{grid-template-columns:repeat(4,1fr);gap:26px}
  .vrail{grid-auto-columns:30%;margin:0;padding-left:0;padding-right:0}
  .vc-t{font-size:20px}
  .vc-p{font-size:29px}
}