/* JV Brokers Motors — estilos propios.
 *
 * Se carga después de styles.css (que pone la tipografía, el scrollbar y las
 * animaciones de los modales, compartidas con la náutica). Acá va sólo lo que
 * cambia: la paleta y los fondos.
 *
 * La paleta (rojo + amarillo) vive en variables con los canales RGB sueltos,
 * para que Tailwind pueda aplicarles opacidad: bg-racing-500/20.
 */
:root {
  --racing-400: 240 68 56;   /* #F04438 */
  --racing-500: 225 37 27;   /* #E1251B */
  --racing-600: 185 28 20;   /* #B91C14 */
  --fuel-300: 255 226 122;   /* #FFE27A */
  --fuel-400: 255 214 38;    /* #FFD626 */
  --fuel-500: 251 206 7;     /* #FBCE07 */
  --fuel-600: 224 168 0;     /* #E0A800 */
}

body.motors {
  background-color: #f4f4f5;
  color: #0f1013;
}

.motors ::selection {
  background: rgb(var(--racing-500));
  color: #fff;
}

.glass-nav-motors {
  background: rgba(15, 16, 19, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Franja de colores bajo el header: la "firma" visual de Motors. Una sola
   línea continua que pasa del rojo al amarillo. */
.racing-stripe {
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--racing-500)) 0%, rgb(var(--fuel-500)) 100%);
}

/* Hero: asfalto con un brillo rojo y uno del acento, como el náutico tiene
   el cian y el dorado. Las líneas diagonales reemplazan a los puntos. */
.hero-motors {
  background:
    radial-gradient(circle at 82% 18%, rgb(var(--racing-500) / 0.22) 0%, transparent 48%),
    radial-gradient(circle at 18% 85%, rgb(var(--fuel-500) / 0.12) 0%, transparent 42%),
    linear-gradient(135deg, #09090b 0%, #111214 50%, #1c1e23 100%);
}

.speed-lines {
  background-image: repeating-linear-gradient(
    -62deg,
    rgba(255, 255, 255, 0.05) 0 2px,
    transparent 2px 26px
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}

.racing-gradient-text {
  background: linear-gradient(100deg, rgb(var(--racing-400)) 0%, rgb(var(--racing-500)) 35%, rgb(var(--fuel-500)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fuel-gradient-text {
  background: linear-gradient(135deg, rgb(var(--fuel-300)) 0%, rgb(var(--fuel-500)) 60%, rgb(var(--fuel-600)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tarjetas del catálogo */
.vehicle-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vehicle-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(15, 16, 19, 0.2), 0 10px 10px -5px rgb(var(--racing-500) / 0.1);
}

.vehicle-card .vehicle-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vehicle-card:hover .vehicle-img {
  transform: scale(1.05);
}

.vehicle-card.is-sold .vehicle-img {
  filter: grayscale(0.85);
}

/* Etiqueta en paralelogramo, como los números de competición */
.tag-slant {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding-left: 14px;
  padding-right: 14px;
}

/* Bloque "vender": banda diagonal detrás del formulario */
.sell-band {
  background:
    linear-gradient(115deg, transparent 0 58%, rgb(var(--racing-500) / 0.14) 58% 70%, transparent 70%),
    linear-gradient(135deg, #0f1013 0%, #16181c 100%);
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-card,
  .vehicle-card .vehicle-img {
    transition: none;
  }
}