/* Vista Landing/Index: el mapa vivo del héroe (D-W3) — la firma del escaparate.
   Silueta estilizada de la zona real (bbox MADRID_SUR de GET /api/v1/zona) con
   rutas que se dibujan y conductores que laten. Posiciones decorativas: nunca
   las reales. Animación solo CSS (stroke-dashoffset, transform, opacity). */
.mapa {
    position: relative;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border: 1px solid var(--vtc-noche-linea);
    border-radius: 20px;
    background: linear-gradient(160deg, #0B3F4E 0%, #082C37 55%, #061E26 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(234, 242, 244, .08);
}

.mapa svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mapa .hud {
    position: absolute;
    left: 16px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--vtc-fuente-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--vtc-noche-texto-2);
}

.mapa .hud i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vtc-noche-ok);
    box-shadow: 0 0 10px var(--vtc-noche-ok);
}

.mapa .leyenda {
    position: absolute;
    right: 16px;
    bottom: 14px;
    text-align: right;
    line-height: 1.6;
    font-family: var(--vtc-fuente-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--vtc-noche-texto-3);
}

.mapa .leyenda b {
    color: var(--vtc-noche-ambar);
    font-weight: 500;
}

.calle {
    stroke: rgba(234, 242, 244, .07);
    stroke-width: 1;
}

.calle-mayor {
    stroke: rgba(234, 242, 244, .14);
    stroke-width: 1.4;
}

.etiqueta {
    font-family: var(--vtc-fuente-mono);
    font-size: 9px;
    letter-spacing: .12em;
    fill: #9DB4BB;
}

.ruta {
    fill: none;
    stroke: var(--vtc-noche-ambar);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    filter: drop-shadow(0 0 6px var(--vtc-noche-ambar-halo));
    animation: dibujar 4.5s var(--vtc-ease) infinite;
}

.ruta.r2 { animation-delay: 1.4s; }
.ruta.r3 { animation-delay: 2.6s; }

@keyframes dibujar {
    0%   { stroke-dashoffset: 640; opacity: 0; }
    12%  { opacity: 1; }
    55%  { stroke-dashoffset: 0; opacity: 1; }
    85%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.pulso {
    fill: var(--vtc-noche-ambar);
}

.pulso-anillo {
    fill: none;
    stroke: var(--vtc-noche-ambar);
    stroke-width: 1.5;
    transform-origin: center;
    transform-box: fill-box;
    animation: latir 2.4s ease-out infinite;
}

.pulso-anillo.p2 { animation-delay: .8s; }
.pulso-anillo.p3 { animation-delay: 1.6s; }

@keyframes latir {
    0%   { transform: scale(.4); opacity: .9; }
    100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ruta {
        animation: none;
        stroke-dashoffset: 0;
        opacity: .9;
    }

    .pulso-anillo {
        animation: none;
        opacity: .5;
        transform: scale(1.4);
    }
}