/* =========================================================
   FleTrack — ilustraciones isométricas y cámara frontal (iso.mjs)
   ========================================================= */
.iso-ants { animation: sc-ants 1.4s linear infinite; }
.iso-pulse { transform-box: fill-box; transform-origin: center; animation: iso-pulse 3.2s ease-out infinite; }
@keyframes iso-pulse { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
.iso-ping { transform-box: fill-box; transform-origin: center; animation: sc-node 2.2s ease-in-out infinite; }
.iso-blink { animation: sc-blink 1.4s steps(1) infinite; }
.iso-arm { animation: iso-arm 5s ease-in-out infinite; }
@keyframes iso-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
.iso-drive { animation: iso-drive 12s linear infinite; }
.iso-drive--slow { animation-duration: 16s; }
@keyframes iso-drive { from { transform: translate(-520px, -300px); } to { transform: translate(520px, 300px); } }

/* ---------- Cámara frontal ---------- */
.dc { position: absolute; inset: 0; overflow: hidden; background: #070b14; }
.dc-sky { position: absolute; inset: 0 0 48% 0; background: linear-gradient(180deg, #05080f 0%, #0d1424 55%, #26324a 100%); }
.dc-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; }
.dc-lights { position: absolute; left: 6%; right: 6%; bottom: 6%; height: 14%; }
.dc-lights i { position: absolute; bottom: var(--b, 0); width: var(--s); height: var(--s); border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 6px #ffb84d; animation: dc-twinkle 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes dc-twinkle { 50% { opacity: .35; } }
.dc-road-wrap { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; overflow: hidden; perspective: 180px; perspective-origin: 50% 0%; }
.dc-road {
  position: absolute; left: -40%; right: -40%; bottom: 0; height: 900%;
  transform-origin: 50% 100%; transform: rotateX(84deg);
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(232, 236, 241, .9) 31% 31.6%, transparent 31.6% 68.4%, rgba(232, 236, 241, .9) 68.4% 69%, transparent 69%),
    repeating-linear-gradient(180deg, #f3d46b 0 6%, transparent 6% 14%) 50% 0 / .9% 100% repeat-y,
    linear-gradient(90deg, #07090d 0%, #161a21 30%, #1f242c 50%, #161a21 70%, #07090d 100%);
  animation: dc-road 1.1s linear infinite;
}
@keyframes dc-road { from { background-position: 0 0, 50% 0, 0 0; } to { background-position: 0 0, 50% 14%, 0 0; } }
.dc-car { position: absolute; left: 50%; top: 60%; width: 15%; min-width: 120px; transform: translate(-50%, -78%); animation: dc-sway 6s ease-in-out infinite; }
.dc-car__svg { display: block; width: 100%; height: auto; }
@keyframes dc-sway { 0%, 100% { transform: translate(-50%, -78%); } 50% { transform: translate(-48%, -77%) scale(.97); } }
.dc-tail { animation: dc-brake 6s steps(1) infinite; }
@keyframes dc-brake { 62%, 74% { fill: #ff6b6b; } }
.dc-box { position: absolute; left: 50%; top: 60%; width: 19%; min-width: 150px; aspect-ratio: 1.55; transform: translate(-50%, -84%); animation: dc-box 6s ease-in-out infinite; }
@keyframes dc-box { 0%, 100% { transform: translate(-50%, -84%); } 50% { transform: translate(-48%, -83%) scale(.97); } }
.dc-box i { position: absolute; width: 18%; height: 22%; border: 2.5px solid #9bff03; }
.dc-box i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.dc-box i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.dc-box i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.dc-box i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.dc-box span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 9px; border-radius: 6px; background: #9bff03; color: #0b0e13; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-hud { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .88); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dc-hud--tl { left: 22px; top: 18px; padding: 7px 12px; border-radius: 10px; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dc-hud--tr { right: 22px; top: 18px; }
.dc-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; }
.dc-rec b { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; animation: sc-blink 1.2s steps(1) infinite; }
.dc-ai { padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(155, 255, 3, .5); color: #9bff03; background: rgba(155, 255, 3, .08); }
.dc-hud--bc { left: 50%; bottom: 18px; transform: translateX(-50%); gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dc-hud--bc b { font-size: 22px; } .dc-hud--bc small { font-size: 11px; color: rgba(255, 255, 255, .6); }
.dc-gap { width: 70px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.dc-gap i { display: block; height: 100%; width: 70%; background: #9bff03; animation: dc-gap 6s ease-in-out infinite; }
@keyframes dc-gap { 62%, 74% { width: 38%; background: #f59e0b; } }
.dc-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

@media (max-width: 767px) {
  .dc-hud--tr, .dc-time { display: none; }
  .dc-car { width: 30%; } .dc-box { width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .iso-ants, .iso-pulse, .iso-ping, .iso-blink, .iso-arm, .iso-drive, .dc-road, .dc-car, .dc-box, .dc-tail, .dc-gap i, .dc-lights i { animation: none !important; }
  .iso-drive { transform: none; }
}
/* Radar isométrico (seguridad de carga) */
.iso-sweep { transform-origin: 0 0; animation: iso-spin 5s linear infinite; }
@keyframes iso-spin { to { transform: rotate(360deg); } }
/* Ruta con paradas (transporte de personal): la van se detiene en cada parada */
.iso-route { animation: iso-route 14s ease-in-out infinite; }
@keyframes iso-route {
  0% { transform: translate(-606px, -350px); }
  16%, 26% { transform: translate(-197px, -114px); }
  42%, 52% { transform: translate(-24px, -14px); }
  68%, 78% { transform: translate(149px, 86px); }
  100% { transform: translate(606px, 350px); }
}
.iso-stop { opacity: 0; animation: iso-stop 14s ease-out infinite; }
@keyframes iso-stop { 0%, 15% { opacity: 0; transform: translateY(8px); } 18%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .iso-sweep, .iso-route, .iso-stop { animation: none !important; }
  .iso-route { transform: translate(-24px, -14px); }
}
/* Neblina de horizonte: une el cielo con el final de la carretera */
.dc-road-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #243047 0%, rgba(36, 48, 71, .55) 18%, rgba(7, 11, 20, 0) 55%); }
/* En los banners las tarjetas de datos ocupan la parte baja: la velocidad sube al centro superior */
.stage .dc-hud--bc { top: 18px; bottom: auto; }
/* Versión miniatura (tarjetas de solución): solo la escena y el recuadro de detección */
.mg-dc { position: absolute; inset: 0; }
.mg-dc .dc-hud { display: none; }
.mg-dc .dc-car { min-width: 0; width: 22%; }
.mg-dc .dc-box { min-width: 0; width: 30%; }
.mg-dc .dc-box span { font-size: 11px; padding: 3px 7px; }