/* eVoost · Vecto Kit · hexmap.css — contenedor del mapa, radar de escaneo y hexagonos numerados. Requiere tokens.css y maplibre-gl.css. */
.vk-hexmap { position: absolute; inset: 0; }
.vk-hexmap .maplibregl-canvas { outline: none; }

/* radar: barrido conico + tres hexagonos que se expanden [final.css .radar] */
.vk-radar { position: absolute; z-index: 5; width: var(--vk-radar-size, 460px); height: var(--vk-radar-size, 460px);
  margin: calc(var(--vk-radar-size, 460px) / -2) 0 0 calc(var(--vk-radar-size, 460px) / -2); left: 50%; top: 50%;
  pointer-events: none; opacity: 0; transition: opacity .45s var(--vk-ease-out); }
.vk-radar.on { opacity: 1; }
.vk-radar .vk-sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0, transparent 64%, rgba(87,155,255,0) 66%, rgba(87,155,255,.5) 100%);
  animation: vk-spin 1.7s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.vk-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vk-radar polygon { fill: none; stroke: rgba(87,155,255,.7); stroke-width: 1.3; transform-origin: center; transform-box: fill-box; opacity: 0; animation: vk-rring 2.4s ease-out infinite; }
.vk-radar polygon:nth-child(2) { animation-delay: .8s; }
.vk-radar polygon:nth-child(3) { animation-delay: 1.6s; }
@keyframes vk-rring { 0% { opacity: .85; transform: scale(.15); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes vk-spin { to { transform: rotate(360deg); } }

/* numero sobre un hexagono del mapa [buyer.css .hexnum] */
.vk-hexnum { width: 34px; height: 38px; display: grid; place-items: center; background: var(--vk-navy); color: #fff;
  font: 700 15px var(--vk-font-text); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: vk-pin .3s var(--vk-ease-out) both; }
.vk-hexnum.first { background: var(--vk-brand-h); }
@keyframes vk-pin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* fade de cabecera/pie opcional sobre el mapa: <div class="vk-map-fade"></div> dentro del contenedor [vecto.css .map-fade] */
.vk-map-fade { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(11,37,69,.28) 0, transparent 20%, transparent 52%, rgba(248,250,252,.55) 100%); }
.maplibregl-ctrl-attrib { font: 400 10px var(--vk-font-text); }

@media (prefers-reduced-motion: reduce) {
  .vk-radar .vk-sweep, .vk-radar polygon { animation: none; }
  .vk-hexnum { animation: none; }
}