.mappa-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            position: relative;
        }

        .mappa-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .mappa-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .mappa-header h2 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 1rem;
            font-weight: 800;
        }

        .mappa-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .mappa-info {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .distanza-highlight {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 2rem;
        }

        .distanza-highlight h3 {
            font-size: 3rem;
            margin: 0;
            font-weight: 800;
        }

        .distanza-highlight p {
            margin: 0.5rem 0 0 0;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .tempo-percorrenza {
            display: flex;
            justify-content: space-around;
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 15px;
        }

        .tempo-item {
            text-align: center;
        }

        .tempo-item i {
            font-size: 2rem;
            color: #3498db;
            margin-bottom: 0.5rem;
        }

        .tempo-item span {
            display: block;
            font-weight: 600;
            font-size: 1.2rem;
            color: #2c3e50;
        }

        .tempo-item small {
            color: #666;
            font-size: 0.9rem;
        }

        .custom-map {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
        }

        .map-svg {
            width: 100%;
            height: 400px;
            display: block;
        }

        .strada {
            stroke: #ddd;
            stroke-width: 8;
            fill: none;
        }

        .strada-principale {
            stroke: #bbb;
            stroke-width: 12;
            fill: none;
        }

        .marker-parcheggio {
            fill: #3498db;
            stroke: white;
            stroke-width: 3;
        }

        .marker-centro {
            fill: #e74c3c;
            stroke: white;
            stroke-width: 3;
        }

        .distanza-linea {
            stroke: #3498db;
            stroke-width: 3;
            stroke-dasharray: 10,5;
            fill: none;
        }

        .etichetta {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 600;
            fill: #2c3e50;
        }

        .etichetta-distanza {
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            font-weight: 800;
            fill: #3498db;
        }

        .area-centro {
            fill: #ffe6e6;
            stroke: #e74c3c;
            stroke-width: 2;
            stroke-dasharray: 5,5;
            opacity: 0.3;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }

        @media (max-width: 768px) {
            .mappa-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .mappa-header h2 {
                font-size: 2rem;
            }

            .mappa-info {
                display:none;
            }

            .map-svg {
                height: 300px;
            }

            .tempo-percorrenza {
                flex-direction: column;
                gap: 1rem;
            }

            .tempo-item {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
            }

            .tempo-item i {
                margin-bottom: 0;
            }
        }