/* ============================================================
   Carril de vehículos — sección "Para quién"
   Un vehículo entra rodando, frena, muestra su telemetría y sale;
   luego entra el siguiente. Cada vehículo resalta su tarjeta.
   Mismos tokens que style.css (--blue, --ink, --sky, --line, --muted).
   ============================================================ */

/* Título a la izquierda, carril a la derecha */
.intro-con-carril {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}

.carril {
  --vh: 132px;                              /* alto del vehículo */
  position: relative;
  height: calc(var(--vh) + 74px);
  margin-bottom: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.carril::after {                            /* camino con línea punteada */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  border-top: 2px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--line) 0 22px, transparent 22px 44px) 0 8px / 100% 2px no-repeat;
}

.veh {
  position: absolute; left: 0;
  bottom: calc(16px - var(--vh) * .1);      /* el suelo del dibujo (y=108 de 120) toca el camino */
  height: var(--vh);
  width: calc(var(--vh) * 320 / 120);
  overflow: visible;
  visibility: hidden;
  will-change: transform;
}

/* Estilo relleno: flotilla blanca rotulada con franja y logo de marca */
.veh .b   { fill: #fff; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .g   { fill: #bfe0fb; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .s   { fill: var(--blue); }
.veh .t   { fill: var(--blue); font: 800 15px 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.04em; }
.veh .d   { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: .45; }
.veh .neg { fill: var(--ink); }
.veh .lf  { fill: #ffcf4d; }
.veh .lt  { fill: #ef5b5b; }
.veh .llanta { fill: var(--ink); }
.veh .rin    { fill: #dce5ed; }
.veh .rayo   { stroke: #7f95a9; stroke-width: 2; stroke-linecap: round; }
.veh .maza   { fill: var(--ink); }
.veh .sombra { fill: #0a223b; opacity: .1; }

/* Etiqueta de telemetría: viaja sobre el techo del vehículo */
.carril-chip {
  position: absolute; left: 0; top: 0;
  display: grid;
  grid-template-columns: 8px auto auto;
  align-items: center;
  column-gap: 8px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d4e7f5;
  border-radius: 10px;
  padding: 7px 12px 7px 10px;
  box-shadow: 0 8px 22px #0a223b12;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--ink);
  visibility: hidden;
  will-change: transform;
}
.carril-chip b { font-weight: 700; }
.carril-chip .vel {
  justify-self: end;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  min-width: 6.2ch;
  text-align: right;
}
.carril-chip .estado { grid-column: 2 / 4; color: var(--muted); font-size: .6875rem; }

/* Punto de estado: en movimiento, detenido con motor encendido, motor apagado */
.carril-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #18b26b; transition: background .25s; }
.carril-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: carril-ping 1.6s ease-out infinite; }
.carril-chip[data-motor="encendido"] i { background: #f5a524; }
.carril-chip[data-motor="apagado"] i { background: #9aabbb; }
.carril-chip[data-motor="apagado"] i::after { animation: none; }
@keyframes carril-ping { to { transform: scale(2.8); opacity: 0; } }

/* Tarjeta del vehículo en pantalla (solo después de su animación de entrada) */
[data-sync] .usecase:not([data-rv]) {
  transition: background .4s, border-color .4s, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
[data-sync] .usecase-icon { transition: background .4s, color .4s; }
[data-sync] .usecase.is-activa:not([data-rv]) {
  background: #fff;
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px #0a223b14;
}
[data-sync] .usecase.is-activa:not([data-rv]) .usecase-icon { background: var(--blue); color: #fff; }

@media (max-width: 900px) {
  .intro-con-carril { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .carril { --vh: 96px; height: calc(var(--vh) + 66px); }
  [data-sync] .usecase.is-activa:not([data-rv]) { transform: none; }   /* tarjetas apiladas: sin salto */
}