Empresas de embalaje industrial en España: cinco especialistas, una red

<div class="liderpac-map-wrapper">
    <!-- Reemplaza el src con la URL definitiva de tu imagen del mapa subida a WordPress -->
    <img src="https://web.liderpac.es/wp-content/uploads/2026/08/map2.png" alt="Red Nacional Liderpac" class="liderpac-map-bg">
    
    <!-- Capa de Líneas SVG animadas -->
    <svg class="liderpac-svg-lines" viewBox="0 0 1000 700" preserveAspectRatio="none">
        <path d="M 450,290 Q 380,210 330,165" class="map-line" />
        <path d="M 450,290 Q 560,260 670,390" class="map-line" />
        <path d="M 450,290 Q 570,390 650,505" class="map-line" />
        <path d="M 450,290 Q 360,450 280,560" class="map-line" />
        <path d="M 280,560 Q 480,600 650,505" class="map-line" />
    </svg>

    <!-- Puntos interactivos de las sedes -->
    <div class="liderpac-pins-container">
        <!-- Valladolid -->
        <div class="map-pin" style="top: 23.5%; left: 33%;" data-city="Valladolid">
            <span class="pulse-ring"></span>
            <span class="pin-dot"></span>
            <span class="pin-label">Valladolid</span>
        </div>
        <!-- Madrid -->
        <div class="map-pin" style="top: 41.5%; left: 45%;" data-city="Madrid">
            <span class="pulse-ring"></span>
            <span class="pin-dot"></span>
            <span class="pin-label">Madrid</span>
        </div>
        <!-- Valencia -->
        <div class="map-pin" style="top: 55.5%; left: 67%;" data-city="Valencia">
            <span class="pulse-ring"></span>
            <span class="pin-dot"></span>
            <span class="pin-label">Valencia</span>
        </div>
        <!-- Alicante / Murcia -->
        <div class="map-pin" style="top: 72.2%; left: 65%;" data-city="Alicante / Murcia">
            <span class="pulse-ring"></span>
            <span class="pin-dot"></span>
            <span class="pin-label">Alicante / Murcia</span>
        </div>
        <!-- Sevilla -->
        <div class="map-pin" style="top: 80%; left: 28%;" data-city="Sevilla">
            <span class="pulse-ring"></span>
            <span class="pin-dot"></span>
            <span class="pin-label">Sevilla</span>
        </div>
    </div>
</div>

.liderpac-map-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background-color: #000000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.liderpac-map-bg {
    width: 100%;
    height: auto;
    display: block;
}

.liderpac-svg-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-line {
    fill: none;
    stroke: #800000;
    stroke-width: 2.5;
    stroke-dasharray: 6, 6;
    opacity: 0.7;
    animation: flowLines 25s linear infinite;
}

@keyframes flowLines {
    to {
        stroke-dashoffset: -200;
    }
}

.liderpac-pins-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.pin-dot {
    width: 14px;
    height: 14px;
    background-color: #800000;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 10px rgba(128, 0, 0, 0.8);
    transition: transform 0.3s ease;
}

.map-pin:hover .pin-dot {
    transform: scale(1.3);
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid #800000;
    border-radius: 50%;
    animation: pulseAnim 2s infinite;
    opacity: 0;
}

@keyframes pulseAnim {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 45px;
        height: 45px;
        opacity: 0;
    }
}

.pin-label {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #800000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.map-pin:hover .pin-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

document.addEventListener("DOMContentLoaded", function() {
    const pins = document.querySelectorAll('.map-pin');
    
    pins.forEach(pin => {
        pin.addEventListener('click', function() {
            const city = this.getAttribute('data-city');
            console.log("Sede seleccionada: " + city);
            // Aquí puedes agregar lógica adicional si lo deseas (ej. scroll a la sección de esa provincia)
        });
    });
});