{"id":505,"date":"2026-03-22T11:15:14","date_gmt":"2026-03-22T10:15:14","guid":{"rendered":"https:\/\/www.clickpotito.com\/?page_id=505"},"modified":"2026-06-06T19:59:21","modified_gmt":"2026-06-06T17:59:21","slug":"elementor-505","status":"publish","type":"page","link":"https:\/\/www.clickpotito.com\/?page_id=505","title":{"rendered":"Mappa"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"505\" class=\"elementor elementor-505\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d19fc1d e-flex e-con-boxed e-con e-parent\" data-id=\"d19fc1d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e321c71 elementor-widget-divider--view-line_icon elementor-view-default elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider\" data-id=\"e321c71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon elementor-divider__element\">\n\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-square-full\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M512 512H0V0h512v512z\"><\/path><\/svg><\/div>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14a012c e-flex e-con-boxed e-con e-parent\" data-id=\"14a012c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f2c7d2 elementor-widget elementor-widget-text-editor\" data-id=\"2f2c7d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Scopri San Potito <br \/>attraverso la mappa interattiva<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b532a0d fade-up sezione-intro e-flex e-con-boxed e-con e-parent\" data-id=\"b532a0d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b10e6ce elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"b10e6ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');\r\n\r\n    \/* CONTENITORE GENERALE *\/\r\n    .sezione-passaggi-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n        max-width: 1240px;\r\n        margin: 0 auto;\r\n        padding: 60px 20px;\r\n        font-family: 'Montserrat', sans-serif;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* TITOLO INTRODUTTIVO *\/\r\n    .titolo-istruzioni {\r\n        font-weight: 800;\r\n        font-size: 14px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #bb5d45;\r\n        margin-bottom: 35px;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* 1. CONTENITORE CARD (ORIZZONTALE) *\/\r\n    .chiesa-visita-wrapper-full {\r\n        display: flex;\r\n        flex-direction: row;\r\n        justify-content: center;\r\n        align-items: stretch;\r\n        gap: 25px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* 2. STILE CARD - DESKTOP *\/\r\n    .card-potito-full {\r\n        position: relative;\r\n        flex: 1;\r\n        border-radius: 35px;\r\n        padding: 35px 25px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n        transition: all 0.4s ease;\r\n        border: 1px solid rgba(255, 243, 176, 0.5);\r\n        box-shadow: 0 8px 25px rgba(0,0,0,0.08);\r\n        background-color: rgba(255, 243, 176, 0.4) !important;\r\n        color: #0f0c0c;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .card-potito-full:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 12px 25px rgba(0,0,0,0.06);\r\n    }\r\n\r\n    \/* 3. INDICATORE NUMERICO *\/\r\n    .card-step-number {\r\n        position: absolute;\r\n        top: 25px;\r\n        left: 25px;\r\n        font-weight: 900;\r\n        font-size: 20px;\r\n        color: #bb5d45;\r\n        opacity: 0.6;\r\n    }\r\n\r\n    \/* 4. IMMAGINI TESTATA *\/\r\n    .img-testata-card {\r\n        width: 180px;\r\n        height: 150px;\r\n        object-fit: contain;\r\n        margin-bottom: 25px;\r\n        filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));\r\n    }\r\n\r\n    \/* 5. TESTI - DESKTOP *\/\r\n    .card-potito-full h3 {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-weight: 900;\r\n        text-transform: uppercase;\r\n        font-size: 22px;\r\n        margin-top: 0;\r\n        margin-bottom: 12px;\r\n        letter-spacing: 1.5px;\r\n        color: #0f0c0c;\r\n        word-wrap: break-word;\r\n    }\r\n\r\n    .card-potito-full p {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-weight: 500;\r\n        font-size: 17px;\r\n        line-height: 1.5;\r\n        margin-bottom: 0;\r\n        flex-grow: 1;\r\n        color: #0f0c0c;\r\n    }\r\n\r\n    \/* RESPONSIVE: DA 767px IN GI\u00d9 (MOBILE) *\/\r\n    @media (max-width: 767px) {\r\n        .sezione-passaggi-container {\r\n            padding: 40px 15px;\r\n        }\r\n        \r\n        .titolo-istruzioni {\r\n            font-size: 13px;\r\n            margin-bottom: 25px;\r\n            letter-spacing: 1.5px;\r\n        }\r\n\r\n        .chiesa-visita-wrapper-full { \r\n            flex-direction: column; \r\n            align-items: center; \r\n            gap: 20px;\r\n        }\r\n\r\n        .card-potito-full { \r\n            width: 100%; \r\n            max-width: 400px; \r\n            padding: 30px 15px; \/* Leggermente pi\u00f9 stretto ai lati per dare spazio al testo *\/\r\n            border-radius: 28px;\r\n        }\r\n\r\n        .card-step-number {\r\n            top: 20px;\r\n            left: 20px;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .img-testata-card {\r\n            width: 130px; \/* Ridotta un altro filino per bilanciare lo spazio *\/\r\n            height: 110px;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .card-potito-full h3 {\r\n            font-size: 18px; \/* Dimensione ottimale per evitare tagli su scritte lunghe come \"Scopri San Potito\" *\/\r\n            margin-bottom: 8px;\r\n            letter-spacing: 0.5px; \/* Lettere pi\u00f9 vicine per non far tagliare la parola *\/\r\n        }\r\n\r\n        .card-potito-full p {\r\n            font-size: 14px;\r\n            line-height: 1.4;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"sezione-passaggi-container\">\r\n\r\n    <div class=\"titolo-istruzioni\">Come funziona la mappa interattiva<\/div>\r\n\r\n    <div class=\"chiesa-visita-wrapper-full\">\r\n        \r\n        <div class=\"card-potito-full\">\r\n            <span class=\"card-step-number\">01<\/span>\r\n            <img decoding=\"async\" src=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/03\/BBP.png\" class=\"img-testata-card\" alt=\"Clicca\">\r\n            <h3>Clicca<\/h3>\r\n            <p>Seleziona un punto d'interesse sulla mappa interattiva qui sotto.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"card-potito-full\">\r\n            <span class=\"card-step-number\">02<\/span>\r\n            <img decoding=\"async\" src=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/03\/ChatGPT_Image_22_mar_2026__14_51_29-removebg-preview.png\" class=\"img-testata-card\" alt=\"Scopri\">\r\n            <h3>Scopri San Potito<\/h3>\r\n            <p>Leggi la storia, ammira le opere d'arte e svela le curiosit\u00e0 nascoste.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"card-potito-full\">\r\n            <span class=\"card-step-number\">03<\/span>\r\n            <img decoding=\"async\" src=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/03\/Gemini_Generated_Image_2mqr2w2mqr2w2mqr-removebg-preview.png\" class=\"img-testata-card\" alt=\"Esplora\">\r\n            <h3>Esplora<\/h3>\r\n            <p>Prosegui la visita guidata virtuale seguendo l\u2019itinerario nel quartiere.<\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8c5a6b7 e-con-full e-flex e-con e-parent\" data-id=\"8c5a6b7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-b7ab263 mappa-wrappers e-con-full e-flex e-con e-child\" data-id=\"b7ab263\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ec6bc3 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"7ec6bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"it\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<title>Mappa Interattiva - Chiesa di San Potito<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght=500;600;700&family=Montserrat:wght=400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n:root{\r\n    --rame:#bb5d45;\r\n    --rame-dark:#8f3f2b;\r\n    --gold:#FFF3B0;\r\n}\r\n\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n    -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\nbody{\r\n    background: #fffdf3;\r\n    font-family:'Montserrat',sans-serif;\r\n    color:#2b2b2b;\r\n    padding:30px 15px;\r\n    overflow-x:hidden;\r\n}\r\n\r\n\/* ================= WRAPPER ================= *\/\r\n\r\n.mappa-wrapper{\r\n    width:100%;\r\n    max-width:1200px;\r\n    margin:auto;\r\n    font-size:clamp(11px,1.15vw,16px);\r\n}\r\n\r\n\/* ================= MAPPA ================= *\/\r\n\r\n.mappa-container{\r\n    position:relative;\r\n    width:100%;\r\n    overflow:hidden;\r\n    border-radius:34px;\r\n    background: #fff;\r\n    box-shadow:\r\n        0 30px 80px rgba(0,0,0,.12),\r\n        0 8px 25px rgba(0,0,0,.08);\r\n    transition:\r\n        transform .8s cubic-bezier(.25,1,.5,1),\r\n        filter .8s ease;\r\n}\r\n\r\n\/* texture cinematica *\/\r\n.mappa-container::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n        radial-gradient(\r\n            circle at center,\r\n            transparent 35%,\r\n            rgba(255,243,176,.15)\r\n        );\r\n    pointer-events:none;\r\n    z-index:2;\r\n}\r\n\r\n\/* leggerissimo rumore *\/\r\n.mappa-container::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background-image:\r\n        linear-gradient(rgba(255,255,255,.02) 50%, transparent 50%);\r\n    background-size:3px 3px;\r\n    opacity:.25;\r\n    pointer-events:none;\r\n    z-index:2;\r\n}\r\n\r\n.mappa-container.zoom{\r\n    transform:scale(1.02);\r\n    filter:\r\n        brightness(.58)\r\n        blur(2px)\r\n        saturate(.72);\r\n}\r\n\r\n.img-mappa{\r\n    width:100%;\r\n    display:block;\r\n    filter:\r\n        sepia(.08)\r\n        contrast(1.02)\r\n        saturate(.96);\r\n    user-select:none;\r\n}\r\n\r\n\/* ================= HOTSPOT ================= *\/\r\n\r\n.hotspot{\r\n    position:absolute;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:.6em;\r\n    cursor:pointer;\r\n    transform:translate(-0.45em,-50%);\r\n    z-index:10;\r\n    white-space:nowrap;\r\n    transition:\r\n        transform .25s cubic-bezier(.25,1,.5,1),\r\n        opacity .2s ease;\r\n    padding:15px 20px;\r\n    margin:-15px -20px;\r\n}\r\n\r\n.hotspot-left{\r\n    flex-direction:row-reverse;\r\n    transform: translate(calc(-100% + 0.45em), -50%);\r\n}\r\n\r\n\/* ================= MARKER ORIGINAL ================= *\/\r\n\r\n.marker-wrapper{\r\n    position:relative;\r\n    width:.9em;\r\n    height:.9em;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    flex-shrink:0;\r\n}\r\n\r\n.marker{\r\n    width:.7em;\r\n    height:.7em;\r\n    border-radius:50%;\r\n    background:var(--rame);\r\n    border:1px solid #fff;\r\n    box-shadow:\r\n        0 1px 4px rgba(0,0,0,0.2),\r\n        0 0 12px rgba(187,93,69,.22);\r\n    z-index:2;\r\n    transition:\r\n        transform .25s cubic-bezier(.25,1,.5,1),\r\n        background-color .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n.pulse-ring{\r\n    position:absolute;\r\n    width:100%;\r\n    height:100%;\r\n    border-radius:50%;\r\n    border:1.5px solid var(--rame);\r\n    z-index:1;\r\n    animation:pulse 2s infinite ease-out;\r\n    pointer-events:none;\r\n}\r\n\r\n@keyframes pulse{\r\n    0%{\r\n        transform:scale(1);\r\n        opacity:1;\r\n    }\r\n    100%{\r\n        transform:scale(2.4);\r\n        opacity:0;\r\n    }\r\n}\r\n\r\n\/* ================= LABEL ================= *\/\r\n\r\n.label{\r\n    font-family: 'Cinzel', serif;\r\n    color:var(--rame);\r\n    font-size: .88em;\r\n    font-weight:600;\r\n    line-height:1;\r\n    letter-spacing:.3px;\r\n    white-space:nowrap;\r\n    transition:\r\n        color .25s ease,\r\n        background .25s ease,\r\n        border-color .25s ease,\r\n        box-shadow .25s ease;\r\n    text-shadow:\r\n        2px 2px 3px rgba(255,255,255,.95),\r\n        -2px -2px 3px rgba(255,255,255,.95);\r\n    background: rgba(255,255,255,.75);\r\n    backdrop-filter:blur(4px);\r\n    padding:.45em .7em;\r\n    border-radius:999px;\r\n    border: 1px solid rgba(187,93,69,.25);\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.05);\r\n}\r\n\r\n\/* Nascondiamo la lettera singola su desktop *\/\r\n.label-mobile-only {\r\n    display: none;\r\n}\r\n\r\n\/* ================= LEGENDA COMPONENTE ================= *\/\r\n\r\n.mappa-legenda {\r\n    display: none;\r\n    margin-top: 25px;\r\n    background: #fff;\r\n    padding: 20px;\r\n    border-radius: 24px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n    border: 1px solid rgba(187,93,69,.1);\r\n}\r\n\r\n.mappa-legenda h3 {\r\n    font-family: 'Cinzel', serif;\r\n    color: var(--rame);\r\n    font-size: 16px;\r\n    margin-bottom: 15px;\r\n    text-align: center;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n.legenda-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 12px;\r\n}\r\n\r\n.legenda-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: #fffdf3;\r\n    padding: 10px 12px;\r\n    border-radius: 12px;\r\n    border: 1px solid rgba(187,93,69,.15);\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n}\r\n\r\n.legenda-badge {\r\n    width: 22px;\r\n    height: 22px;\r\n    background: var(--rame);\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 11px;\r\n    font-weight: bold;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.legenda-text {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    color: #333;\r\n    line-height: 1.2;\r\n}\r\n\r\n\/* ================= HOVER & CLIC EFFECTS ================= *\/\r\n\r\n@media (hover: hover) {\r\n    .hotspot:hover .marker {\r\n        background: var(--rame-dark);\r\n        transform: scale(1.3);\r\n        box-shadow: 0 0 18px rgba(187,93,69,.6);\r\n    }\r\n    .hotspot:hover .label {\r\n        color: #fff;\r\n        background: var(--rame);\r\n        border-color: var(--rame);\r\n        text-shadow: none;\r\n        box-shadow: 0 4px 15px rgba(187,93,69,0.35);\r\n    }\r\n    .legenda-item:hover {\r\n        background: var(--gold);\r\n        border-color: var(--rame);\r\n        transform: translateY(-2px);\r\n    }\r\n}\r\n\r\n.hotspot.attivo .marker {\r\n    background: var(--rame-dark) !important;\r\n    transform: scale(1.4) !important;\r\n    box-shadow: 0 0 25px var(--rame) !important;\r\n}\r\n\r\n.hotspot.attivo .label {\r\n    color: #fff !important;\r\n    background: var(--rame-dark) !important;\r\n    border-color: var(--rame-dark) !important;\r\n    text-shadow: none !important;\r\n    box-shadow: 0 6px 20px rgba(187,93,69,0.5) !important;\r\n}\r\n\r\n\/* ================= OVERLAY ================= *\/\r\n\r\n.overlay{\r\n    position:fixed;\r\n    inset:0;\r\n    background:\r\n        radial-gradient(\r\n            circle at center,\r\n            rgba(0,0,0,.65),\r\n            rgba(0,0,0,.92)\r\n        );\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n    opacity:0;\r\n    pointer-events:none;\r\n    transition:opacity .45s ease;\r\n    z-index:9999;\r\n    padding:20px;\r\n}\r\n\r\n.overlay.active{\r\n    opacity:1;\r\n    pointer-events:all;\r\n}\r\n\r\n\/* ================= CARD (RIDIMENSIONATA GENERALE) ================= *\/\r\n\r\n.cappella-card{\r\n    position:relative;\r\n    width:100%;\r\n    max-width:680px; \/* Ridotta da 900px a 680px per evitare l'effetto gigante su desktop *\/\r\n    border-radius:24px;\r\n    overflow:hidden;\r\n    background:#111;\r\n    box-shadow: 0 30px 70px rgba(0,0,0,.8);\r\n    transform: translateY(20px) scale(.97);\r\n    transition: all .55s cubic-bezier(.25,1,.5,1);\r\n}\r\n\r\n.overlay.active .cappella-card{\r\n    transform: translateY(0) scale(1);\r\n}\r\n\r\n\/* ================= HERO (RIDIMENSIONATA GENERALE) ================= *\/\r\n\r\n.hero{\r\n    position:relative;\r\n    width:100%;\r\n    height:280px; \/* Ridotta da 460px a 280px *\/\r\n    overflow:hidden;\r\n}\r\n\r\n.hero img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    transition:transform 4s ease;\r\n}\r\n\r\n.overlay.active .hero img{\r\n    transform:scale(1.08);\r\n}\r\n\r\n.hero::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            rgba(0,0,0,0),\r\n            rgba(0,0,0,.18),\r\n            #111\r\n        );\r\n}\r\n\r\n\/* ================= CLOSE ================= *\/\r\n\r\n.close{\r\n    position:absolute;\r\n    top:15px;\r\n    right:15px;\r\n    z-index:30;\r\n    width:42px;\r\n    height:42px;\r\n    border-radius:50%;\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n    background: rgba(255,255,255,.15);\r\n    backdrop-filter:blur(10px);\r\n    color:#fff;\r\n    font-size:20px;\r\n    cursor:pointer;\r\n    transition:.3s ease;\r\n}\r\n\r\n.close:hover{\r\n    transform: rotate(90deg) scale(1.08);\r\n    background: rgba(255,255,255,.24);\r\n}\r\n\r\n\/* ================= CONTENT (RIDIMENSIONATO GENERALE) ================= *\/\r\n\r\n.content{\r\n    padding:30px 35px 35px; \/* Padding pi\u00f9 compatti rispetto ai 50px precedenti *\/\r\n    text-align:center;\r\n}\r\n\r\n.content h2{\r\n    font-family:'Cinzel',serif;\r\n    color:var(--gold);\r\n    font-size: clamp(24px, 3.5vw, 32px); \/* Dimensioni carattere ridotte e pi\u00f9 armoniose *\/\r\n    letter-spacing:1.5px;\r\n    margin-bottom:12px;\r\n}\r\n\r\n.content p{\r\n    max-width:580px;\r\n    margin:auto;\r\n    color:#ccc;\r\n    line-height:1.6;\r\n    font-size:14px; \/* Un filo pi\u00f9 piccolo e leggibile *\/\r\n}\r\n\r\n\/* ================= BUTTON ================= *\/\r\n\r\n.btn{\r\n    display:inline-flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n    margin-top:24px;\r\n    min-width:200px;\r\n    padding:12px 28px;\r\n    border-radius:999px;\r\n    text-decoration:none;\r\n    font-weight:700;\r\n    letter-spacing:1px;\r\n    text-transform:uppercase;\r\n    color:#1b1b1b;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #fff9dc,\r\n            #FFF3B0\r\n        );\r\n    box-shadow: 0 8px 20px rgba(255,243,176,.15);\r\n    transition:.3s ease;\r\n    font-size: 13px;\r\n}\r\n\r\n.btn:hover{\r\n    transform:translateY(-3px);\r\n    box-shadow: 0 14px 30px rgba(255,243,176,.3);\r\n}\r\n\r\n.btn.disabled{\r\n    background:#444 !important;\r\n    color:#888 !important;\r\n    pointer-events:none;\r\n    box-shadow:none !important;\r\n}\r\n\r\n\/* ================= CONFIGURAZIONE INTERFACCIA MOBILE CON LEGENDA (767px) ================= *\/\r\n\r\n@media(max-width:767px){\r\n    body {\r\n        padding: 10px;\r\n    }\r\n\r\n    .mappa-wrapper {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .mappa-legenda {\r\n        display: block;\r\n    }\r\n\r\n    \/* Le etichette diventano piccoli badge circolari *\/\r\n    .label {\r\n        padding: 0 !important;\r\n        width: 22px;\r\n        height: 22px;\r\n        display: flex !important;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 50% !important;\r\n        font-size: 10px !important;\r\n        box-shadow: 0 2px 6px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .label-text-full {\r\n        display: none !important;\r\n    }\r\n\r\n    .label-mobile-only {\r\n        display: inline-block !important;\r\n    }\r\n\r\n    \/* Punti Destra (A, B, C): Lettera a destra del pallino rosso *\/\r\n    .hotspot {\r\n        gap: .3em;\r\n        transform: translate(-0.45em, -50%) !important;\r\n        flex-direction: row !important;\r\n    }\r\n    \r\n    \/* Punti Sinistra (D, E, F): Spostati a sinistra del pallino senza allontanarsi troppo *\/\r\n    .hotspot-left {\r\n        flex-direction: row-reverse !important; \r\n        transform: translate(calc(-100% + 1.2em), -50%) !important;\r\n    }\r\n\r\n    \/* OTTIMIZZAZIONE SPECIFICA DELLA CARD SU SMARTPHONE *\/\r\n    .cappella-card {\r\n        border-radius: 20px;\r\n    }\r\n\r\n    .hero {\r\n        height:160px; \/* Notevolmente abbassato su mobile per far spazio al testo senza costringere a scrollare *\/\r\n    }\r\n    .content {\r\n        padding:20px 15px 25px;\r\n    }\r\n    .content h2 {\r\n        font-size: 20px; \/* Titolo pi\u00f9 piccolo su mobile *\/\r\n        margin-bottom: 8px;\r\n    }\r\n    .content p {\r\n        font-size: 13px;\r\n        line-height: 1.5;\r\n    }\r\n    .btn {\r\n        margin-top: 18px;\r\n        padding: 10px 22px;\r\n        font-size: 12px;\r\n        min-width: 180px;\r\n    }\r\n    .close {\r\n        top:10px;\r\n        right:10px;\r\n        width:36px;\r\n        height:36px;\r\n        font-size:16px;\r\n    }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"mappa-wrapper\">\r\n\r\n    <div class=\"mappa-container\" id=\"mappa\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/03\/b18377-1.png\"\r\n            class=\"img-mappa\"\r\n            alt=\"Mappa della Chiesa di San Potito\">\r\n\r\n        <div\r\n            class=\"hotspot\"\r\n            style=\"top:55%; left:71%;\"\r\n            data-id=\"A\"\r\n            data-title=\"Madonna del Rosario\"\r\n            data-link=\"https:\/\/www.clickpotito.com\/?page_id=3697\"\r\n            data-img=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-06-at-19.58.39.jpeg\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">Madonna del Rosario<\/span>\r\n                <span class=\"label-mobile-only\">A<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"hotspot\"\r\n            style=\"top:41%; left:65%;\"\r\n            data-id=\"B\"\r\n            data-title=\"San Gaetano\"\r\n            data-link=\"https:\/\/www.clickpotito.com\/?page_id=2769\"\r\n            data-img=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/05\/20260303_113017-scaled.jpg\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">San Gaetano<\/span>\r\n                <span class=\"label-mobile-only\">B<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"hotspot\"\r\n            style=\"top:29%; left:61.5%;\"\r\n            data-id=\"C\"\r\n            data-title=\"IMMACOLATA CONCEZIONE\"\r\n            data-link=\"https:\/\/www.clickpotito.com\/?page_id=603\"\r\n            data-img=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/03\/20260303_113235-2-scaled.jpg\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">Immacolata Concezione<\/span>\r\n                <span class=\"label-mobile-only\">C<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"hotspot hotspot-left\"\r\n            style=\"top:36%; left:28.5%;\"\r\n            data-id=\"D\"\r\n            data-title=\"Santi Protettori\"\r\n            data-link=\"https:\/\/www.clickpotito.com\/?page_id=2802\"\r\n            data-img=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/05\/20260303_113123-scaled.jpg\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">Santi Protettori<\/span>\r\n                <span class=\"label-mobile-only\">D<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"hotspot hotspot-left\"\r\n            style=\"top:50.5%; left:32%;\"\r\n            data-id=\"E\"\r\n            data-title=\"Cappella in Esplorazione\"\r\n            data-link=\"\"\r\n            data-img=\"\"\r\n            data-esplorazione=\"true\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">Cappella in Esplorazione<\/span>\r\n                <span class=\"label-mobile-only\">E<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"hotspot hotspot-left\"\r\n            style=\"top:65.5%; left:34%;\"\r\n            data-id=\"F\"\r\n            data-title=\"Calvario\"\r\n            data-link=\"https:\/\/www.clickpotito.com\/?page_id=2128\"\r\n            data-img=\"https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/05\/20260303_112733-scaled.jpg\">\r\n\r\n            <div class=\"marker-wrapper\">\r\n                <div class=\"marker\"><\/div>\r\n                <div class=\"pulse-ring\"><\/div>\r\n            <\/div>\r\n            <div class=\"label\">\r\n                <span class=\"label-text-full\">Calvario<\/span>\r\n                <span class=\"label-mobile-only\">F<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"mappa-legenda\">\r\n        <h3>Seleziona una Cappella<\/h3>\r\n        <div class=\"legenda-grid\">\r\n            <div class=\"legenda-item\" data-target=\"A\">\r\n                <div class=\"legenda-badge\">A<\/div>\r\n                <div class=\"legenda-text\">Madonna del Rosario<\/div>\r\n            <\/div>\r\n            <div class=\"legenda-item\" data-target=\"B\">\r\n                <div class=\"legenda-badge\">B<\/div>\r\n                <div class=\"legenda-text\">San Gaetano<\/div>\r\n            <\/div>\r\n            <div class=\"legenda-item\" data-target=\"C\">\r\n                <div class=\"legenda-badge\">C<\/div>\r\n                <div class=\"legenda-text\">Immacolata Concezione<\/div>\r\n            <\/div>\r\n            <div class=\"legenda-item\" data-target=\"D\">\r\n                <div class=\"legenda-badge\">D<\/div>\r\n                <div class=\"legenda-text\">Santi Protettori<\/div>\r\n            <\/div>\r\n            <div class=\"legenda-item\" data-target=\"E\">\r\n                <div class=\"legenda-badge\">E<\/div>\r\n                <div class=\"legenda-text\">In Esplorazione<\/div>\r\n            <\/div>\r\n            <div class=\"legenda-item\" data-target=\"F\">\r\n                <div class=\"legenda-badge\">F<\/div>\r\n                <div class=\"legenda-text\">Calvario<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<div id=\"overlay\" class=\"overlay\" onclick=\"chiudiSeFuori(event)\">\r\n    <div class=\"cappella-card\">\r\n        <div class=\"close\" onclick=\"chiudiOverlay()\">\u2715<\/div>\r\n        <div class=\"hero\">\r\n            <img decoding=\"async\" id=\"overlay-img\" src=\"\" alt=\"Anteprima Cappella\">\r\n        <\/div>\r\n        <div class=\"content\">\r\n            <h2 id=\"overlay-title\">Cappella<\/h2>\r\n            <p id=\"overlay-desc\">\r\n                Esplora la storia, i dettagli e le opere d\u2019arte custodite all\u2019interno di questo ambiente sacro.\r\n            <\/p>\r\n            <a href=\"#\" class=\"btn\" id=\"overlay-btn\">Entra e scopri di pi\u00f9<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\nconst overlay = document.getElementById('overlay');\r\nconst mappa = document.getElementById('mappa');\r\nconst overlayTitle = document.getElementById('overlay-title');\r\nconst overlayDesc = document.getElementById('overlay-desc');\r\nconst overlayImg = document.getElementById('overlay-img');\r\nconst overlayBtn = document.getElementById('overlay-btn');\r\nconst hotspots = document.querySelectorAll('.hotspot');\r\nconst legendaItems = document.querySelectorAll('.legenda-item');\r\n\r\n\/* ================= FUNZIONE UNICA DI APERTURA CARD ================= *\/\r\nfunction apriCardHotspot(hotspot) {\r\n    hotspots.forEach(h => h.classList.remove('attivo'));\r\n    hotspot.classList.add('attivo');\r\n\r\n    const nome = hotspot.dataset.title;\r\n    const link = hotspot.dataset.link;\r\n    const imgUrl = hotspot.dataset.img;\r\n    const inEsplorazione = hotspot.dataset.esplorazione === \"true\";\r\n\r\n    overlayTitle.innerText = nome;\r\n\r\n    if(inEsplorazione){\r\n        overlayImg.style.display = \"none\";\r\n        overlayDesc.innerText = \"Questa zona \u00e8 ancora in fase di esplorazione e studio. Non sono attualmente disponibili informazioni.\";\r\n        overlayBtn.href = \"#\";\r\n        overlayBtn.innerText = \"In Esplorazione\";\r\n        overlayBtn.classList.add('disabled');\r\n    } else {\r\n        overlayImg.style.display = \"block\";\r\n        overlayImg.src = imgUrl;\r\n        overlayDesc.innerText = \"Esplora la storia, i dettagli e le opere d\u2019arte di questo ambiente sacro.\";\r\n        overlayBtn.href = link;\r\n        overlayBtn.innerText = \"Entra e scopri di pi\u00f9\";\r\n        overlayBtn.classList.remove('disabled');\r\n    }\r\n\r\n    mappa.classList.add('zoom');\r\n\r\n    setTimeout(() => {\r\n        overlay.classList.add('active');\r\n        document.body.style.overflow = 'hidden';\r\n    }, 300);\r\n}\r\n\r\n\/* Clic sui cerchietti della mappa *\/\r\nhotspots.forEach(hotspot => {\r\n    hotspot.addEventListener('click', () => {\r\n        apriCardHotspot(hotspot);\r\n    });\r\n});\r\n\r\n\/* Clic sulle voci della legenda (Mobile) *\/\r\nlegendaItems.forEach(item => {\r\n    item.addEventListener('click', () => {\r\n        const targetId = item.dataset.target;\r\n        const hotspotCorrispondente = document.querySelector(`.hotspot[data-id=\"${targetId}\"]`);\r\n        if(hotspotCorrispondente) {\r\n            apriCardHotspot(hotspotCorrispondente);\r\n        }\r\n    });\r\n});\r\n\r\n\/* ================= LOGICA DI CHIUSURA ================= *\/\r\nfunction chiudiOverlay(){\r\n    overlay.classList.remove('active');\r\n    mappa.classList.remove('zoom');\r\n    document.body.style.overflow = '';\r\n    hotspots.forEach(h => h.classList.remove('attivo'));\r\n}\r\n\r\nfunction chiudiSeFuori(e){\r\n    if(e.target === overlay){\r\n        chiudiOverlay();\r\n    }\r\n}\r\n\r\ndocument.addEventListener('keydown', e => {\r\n    if(e.key === \"Escape\"){\r\n        chiudiOverlay();\r\n    }\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c2f447 e-con-full e-flex e-con e-parent\" data-id=\"5c2f447\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d7a8e9 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"0d7a8e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"it\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Chiesa di San Potito<\/title>\r\n\r\n<style>\r\n\/* ============================================================\r\n    RESET & VARIABILI\r\n   ============================================================ *\/\r\nbody, html {\r\n    margin: 0;\r\n    padding: 0;\r\n    width: 100%;\r\n    overflow-x: hidden;\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n}\r\n\r\n:root {\r\n    --sp-petrolio: #7c969c;\r\n    --sp-mattone: #BB5D45;\r\n    --sp-beige-soft: #fdfaf9;\r\n    --sp-radius: 12px;\r\n}\r\n\r\n\/* ============================================================\r\n    BANNER STILI (FORZATO A LARGHEZZA PIENA SCHERMO)\r\n   ============================================================ *\/\r\n.full-width-banner {\r\n    position: relative;\r\n    width: 100vw !important;\r\n    left: 50% !important;\r\n    right: 50% !important;\r\n    margin-left: -50vw !important;\r\n    margin-right: -50vw !important;\r\n    height: 380px;\r\n    background-image: \r\n        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), \r\n        url('https:\/\/www.clickpotito.com\/wp-content\/uploads\/2026\/02\/Chiesa-di-San-Potito-interno.jpg');\r\n    background-size: cover;\r\n    background-position: center 40%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.container {\r\n    padding: 0 5%;\r\n    color: white;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.container h1 {\r\n    font-size: 2.8rem;\r\n    text-transform: uppercase;\r\n    font-weight: 800;\r\n    margin: 0 0 15px 0;\r\n    line-height: 1.1;\r\n    color: #ffffff;\r\n}\r\n\r\n.container p {\r\n    font-size: 1.05rem;\r\n    line-height: 1.5;\r\n    max-width: 850px;\r\n    margin-bottom: 25px;\r\n    opacity: 0.9;\r\n}\r\n\r\n\/* ============================================================\r\n    BOTTONE PRENOTA\r\n   ============================================================ *\/\r\n.hero-btn-wrapper {\r\n    text-align: left;\r\n    margin: 20px 0 0 0;\r\n    width: 100%;\r\n}\r\n\r\n.btn-prenota-sanpotito {\r\n    display: inline-block;\r\n    padding: 16px 50px;\r\n    background: var(--sp-mattone);\r\n    color: #ffffff !important; \r\n    border-radius: var(--sp-radius);\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-weight: 800;\r\n    font-size: 14px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    text-decoration: none !important;\r\n    transition: all 0.4s ease;\r\n    cursor: pointer;\r\n    box-shadow: 0 10px 20px rgba(187, 93, 69, 0.2);\r\n    border: none;\r\n}\r\n\r\n.btn-prenota-sanpotito:hover {\r\n    transform: translateY(-4px);\r\n    filter: brightness(1.1);\r\n    box-shadow: 0 15px 30px rgba(187, 93, 69, 0.3);\r\n}\r\n\r\n\/* ============================================================\r\n    POPUP MODALE & COERENZA FLUENT FORM\r\n   ============================================================ *\/\r\n.sp-overlay {\r\n    position: fixed; \r\n    inset: 0;\r\n    background: rgba(124, 150, 156, 0.9);\r\n    backdrop-filter: blur(8px);\r\n    z-index: 999999; \r\n    display: none; \r\n    align-items: center; \r\n    justify-content: center;\r\n    padding: 20px;\r\n}\r\n\r\n.sp-overlay.active { display: flex; }\r\n\r\n.sp-modal {\r\n    background: #ffffff;\r\n    width: 100%;\r\n    max-width: 650px;\r\n    padding: 40px;\r\n    border-radius: 30px;\r\n    border: 4px solid var(--sp-petrolio); \r\n    position: relative;\r\n    box-shadow: 0 30px 70px rgba(0,0,0,0.4);\r\n    animation: spFadeUp 0.4s ease-out;\r\n    max-height: 90vh;\r\n    overflow-y: auto;\r\n}\r\n\r\n@keyframes spFadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\ndiv#popup-sanpotito div.sp-modal h2.sp-modal-title {\r\n    color: var(--sp-petrolio);\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-weight: 900;\r\n    font-size: 24px;\r\n    text-align: center;\r\n    margin: 0 0 20px 0;\r\n    text-transform: uppercase;\r\n    display: block;\r\n}\r\n\r\n.sp-close {\r\n    position: absolute; \r\n    top: 15px; \r\n    right: 20px;\r\n    color: var(--sp-petrolio); \r\n    font-size: 35px; \r\n    cursor: pointer;\r\n    line-height: 1;\r\n    transition: 0.2s;\r\n}\r\n.sp-close:hover { transform: rotate(90deg) scale(1.2); color: var(--sp-mattone); }\r\n\r\n.form-container-fluent div.ff-el-group label.ff-el-control-label {\r\n    color: var(--sp-marrone, #6f6155);\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    font-size: 11px;\r\n}\r\n\r\n.form-container-fluent input.ff-el-form-control {\r\n    background: var(--sp-beige-soft);\r\n    border: 1.5px solid #eee;\r\n    border-radius: 8px;\r\n    padding: 12px;\r\n}\r\n\r\n.form-container-fluent button.ff-btn-submit {\r\n    background-color: var(--sp-mattone) !important;\r\n    color: #ffffff !important;\r\n    font-weight: 800 !important;\r\n    text-transform: uppercase;\r\n    border-radius: var(--sp-radius) !important;\r\n    padding: 15px !important;\r\n    transition: 0.3s !important;\r\n}\r\n\r\n.flatpickr-calendar { \r\n    z-index: 99999999 !important; \r\n    border: 2px solid var(--sp-petrolio);\r\n}\r\n\r\n\/* ============================================================\r\n    RESPONSIVE (VERA LARGHEZZA TOTALE SU MOBILE)\r\n   ============================================================ *\/\r\n@media (max-width: 768px) {\r\n    .full-width-banner { \r\n        height: auto; \r\n        min-height: 340px;\r\n        padding: 50px 0; \r\n        background-position: center center;\r\n    }\r\n    .container { \r\n        padding: 0 20px; \r\n    }\r\n    .container h1 { \r\n        font-size: 1.8rem; \r\n    }\r\n    .container p {\r\n        font-size: 0.9rem;\r\n        max-width: 100%;\r\n    }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .full-width-banner {\r\n        min-height: 360px;\r\n        padding: 40px 0;\r\n    }\r\n    .container h1 { \r\n        font-size: 1.6rem; \r\n    }\r\n    .hero-btn-wrapper { \r\n        text-align: center; \r\n        margin-top: 25px;\r\n    }\r\n    .btn-prenota-sanpotito { \r\n        display: block;\r\n        width: 100% !important; \r\n        max-width: 100% !important; \r\n        padding: 16px 20px;\r\n        font-size: 14px;\r\n        box-sizing: border-box; \r\n    }\r\n    .sp-modal { \r\n        padding: 35px 16px 25px 16px; \r\n        width: 100% !important; \r\n        max-width: 100% !important;\r\n        border-width: 3px; \r\n        border-radius: 20px;\r\n        box-sizing: border-box;\r\n    }\r\n    div#popup-sanpotito div.sp-modal h2.sp-modal-title {\r\n        font-size: 20px;\r\n        margin-bottom: 15px;\r\n    }\r\n    .sp-close {\r\n        top: 10px;\r\n        right: 15px;\r\n        font-size: 30px;\r\n    }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"full-width-banner\">\r\n    <div class=\"container\">\r\n        <h1>BENVENUTI ALLA<br>CHIESA DI SAN POTITO<\/h1>\r\n        <p>\r\n            La Chiesa di San Potito \u00e8 uno scrigno di arte e spiritualit\u00e0 nel quale batte il cuore di Napoli. \r\n            Fondata nel IV secolo, custodisce opere di Luca Giordano, Andrea Vaccaro e Giacinto Diano.\r\n        <\/p>\r\n        \r\n        <div class=\"hero-btn-wrapper\">\r\n            <a href=\"javascript:void(0)\" class=\"btn-prenota-sanpotito\" id=\"trigger-prenota\">\r\n                Prenota la tua Visita\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<div id=\"popup-sanpotito\" class=\"sp-overlay\">\r\n    <div class=\"sp-modal\">\r\n        <span class=\"sp-close\">&times;<\/span>\r\n        <h2 class=\"sp-modal-title\">Prenotazione<\/h2>\r\n        \r\n        <div class=\"form-container-fluent\">\r\n            <div class='fluentform ff-default fluentform_wrapper_3 ffs_default_wrap'><form data-form_id=\"3\" id=\"fluentform_3\" class=\"frm-fluent-form fluent_form_3 ff-el-form-top ff_form_instance_3_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_3_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Prenota<\/legend><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&#916;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"60\"\/><script>\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n<\/script>\n<\/p><input type='hidden' name='__fluent_form_embded_post_id' value='505' \/><input type=\"hidden\" id=\"_fluentform_3_fluentformnonce\" name=\"_fluentform_3_fluentformnonce\" value=\"e3a77ebaa8\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F505\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group  ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_first_name_' id='label_ff_3_names_first_name_' >Cognome<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_3_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"Cognome\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group  ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_last_name_' id='label_ff_3_names_last_name_' >Nome<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_3_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Nome\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div data-name=\"ff_cn_id_1\"  class='ff-t-container ff-column-container ff_columns_total_2 '><div class='ff-t-cell ff-t-column-1' style='flex-basis: 50%;'><div class='ff-el-group ff-el-form-top'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_email' id='label_ff_3_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_3_email\" class=\"ff-el-form-control\" placeholder=\"Email \" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><div class='ff-t-cell ff-t-column-2' style='flex-basis: 50%;'><div class='ff-el-group ff-el-form-top'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_numeric_field' id='label_ff_3_numeric_field' aria-label=\"Visitatori\">Visitatori<\/label><\/div><div class='ff-el-input--content'><input type=\"number\" name=\"numeric_field\" id=\"ff_3_numeric_field\" class=\"ff-el-form-control\" placeholder=\"Numeri di Visitatori \" data-name=\"numeric_field\" inputmode=\"numeric\" step=\"any\" min=\"1\" aria-valuemin=\"1\" max=\"28\" aria-valuemax=\"28\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><\/div><div class='ff-el-group ff-el-form-top'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_datetime' id='label_ff_3_datetime' aria-label=\"Data della visita\">Data della visita<\/label><\/div><div class='ff-el-input--content'><input  aria-label='Data della visita Use arrow keys to navigate dates. Press enter to select a date.'  aria-haspopup='dialog' data-type-datepicker data-format='d\/m\/Y' type=\"text\" name=\"datetime\" id=\"ff_3_datetime\" class=\"ff-el-form-control ff-el-datepicker\" placeholder=\"Data della visita\" data-name=\"datetime\"  aria-invalid='false' aria-required=true><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style\"  aria-label=\"Submit Form\">Submit Form<\/button><\/div><\/fieldset><\/form><div id='fluentform_3_errors' class='ff-errors-in-stack ff_form_instance_3_1 ff-form-loading_errors ff_form_instance_3_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_3_1 = {\"id\":\"3\",\"ajaxUrl\":\"https:\\\/\\\/www.clickpotito.com\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"asteriskPlacement\":\"asterisk-right\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_3_1\",\"form_id_selector\":\"fluentform_3\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":false,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true,\"global_message\":\"Questo campo \\u00e8 obbligatorio\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true,\"global_message\":\"Questo campo \\u00e8 obbligatorio\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true,\"global_message\":\"Questo campo \\u00e8 obbligatorio\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true,\"global_message\":\"Questo campo \\u00e8 obbligatorio\"},\"email\":{\"value\":true,\"message\":\"Questo campo deve contenere un indirizzo email valido\",\"global\":true,\"global_message\":\"Questo campo deve contenere un indirizzo email valido\"}},\"numeric_field\":{\"required\":{\"value\":true,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global_message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true},\"numeric\":{\"value\":true,\"message\":\"Questo campo deve contenere un valore numerico\",\"global_message\":\"Questo campo deve contenere un valore numerico\",\"global\":true},\"min\":{\"value\":\"1\",\"message\":\"La convalida non riesce per il valore minimo\",\"global_message\":\"La convalida non riesce per il valore minimo\",\"global\":true},\"max\":{\"value\":\"28\",\"message\":\"La convalida non riesce per il valore massimo\",\"global_message\":\"La convalida non riesce per il valore massimo\",\"global\":true},\"digits\":{\"value\":\"\",\"message\":\"La convalida non riesce per cifre limitate\",\"global_message\":\"La convalida non riesce per cifre limitate\",\"global\":true}},\"datetime\":{\"required\":{\"value\":true,\"message\":\"Questo campo \\u00e8 obbligatorio\",\"global_message\":\"Questo campo \\u00e8 obbligatorio\",\"global\":true}}},\"debounce_time\":300,\"file_upload_settings\":[]};\n                            <\/script>\n            \r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const btn = document.getElementById('trigger-prenota');\r\n    const modal = document.getElementById('popup-sanpotito');\r\n    const close = document.querySelector('.sp-close');\r\n\r\n    if(btn && modal) {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n        });\r\n\r\n        close.addEventListener('click', () => {\r\n            modal.classList.remove('active');\r\n            document.body.style.overflow = 'auto';\r\n        });\r\n\r\n        modal.addEventListener('click', (e) => { \r\n            if(e.target === modal) {\r\n                modal.classList.remove('active');\r\n                document.body.style.overflow = 'auto';\r\n            }\r\n        });\r\n    }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 Clicca Seleziona un punto d&#8217;interesse sulla mappa interattiva qui sotto. 02 Scopri San Potito Leggi la storia, ammira le opere d&#8217;arte e svela le curiosit\u00e0 nascoste. 03 Esplora Prosegui la visita guidata virtuale seguendo l\u2019itinerario nel quartiere. Mappa Interattiva &#8211; Chiesa di [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-505","page","type-page","status-publish","hentry"],"blocksy_meta":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"google-site-verification\" content=\"2IN4rn90n6-gyKQ7crc4inhupEbWPUSfw0gUay_N-hY\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.clickpotito.com\/?page_id=505\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"it_IT\" \/>\n\t\t<meta property=\"og:site_name\" content=\"CLICKPOTIT -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Mappa - CLICKPOTIT\" \/>\n\t\t<meta property=\"og:description\" content=\"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.clickpotito.com\/?page_id=505\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-03-22T10:15:14+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-06-06T17:59:21+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Mappa - CLICKPOTIT\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.clickpotito.com#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickpotito.com\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505#listItem\",\"name\":\"Mappa\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505#listItem\",\"position\":2,\"name\":\"Mappa\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.clickpotito.com#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/#organization\",\"name\":\"CLICKPOTIT\",\"url\":\"https:\\\/\\\/www.clickpotito.com\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505#webpage\",\"url\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505\",\"name\":\"Mappa - CLICKPOTIT\",\"description\":\"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form\",\"inLanguage\":\"it-IT\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/?page_id=505#breadcrumblist\"},\"datePublished\":\"2026-03-22T11:15:14+01:00\",\"dateModified\":\"2026-06-06T19:59:21+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/#website\",\"url\":\"https:\\\/\\\/www.clickpotito.com\\\/\",\"name\":\"CLICKPOTIT\",\"inLanguage\":\"it-IT\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickpotito.com\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Mappa - CLICKPOTIT","description":"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form","canonical_url":"https:\/\/www.clickpotito.com\/?page_id=505","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"2IN4rn90n6-gyKQ7crc4inhupEbWPUSfw0gUay_N-hY","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.clickpotito.com\/?page_id=505#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.clickpotito.com#listItem","position":1,"name":"Home","item":"https:\/\/www.clickpotito.com","nextItem":{"@type":"ListItem","@id":"https:\/\/www.clickpotito.com\/?page_id=505#listItem","name":"Mappa"}},{"@type":"ListItem","@id":"https:\/\/www.clickpotito.com\/?page_id=505#listItem","position":2,"name":"Mappa","previousItem":{"@type":"ListItem","@id":"https:\/\/www.clickpotito.com#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/www.clickpotito.com\/#organization","name":"CLICKPOTIT","url":"https:\/\/www.clickpotito.com\/"},{"@type":"WebPage","@id":"https:\/\/www.clickpotito.com\/?page_id=505#webpage","url":"https:\/\/www.clickpotito.com\/?page_id=505","name":"Mappa - CLICKPOTIT","description":"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form","inLanguage":"it-IT","isPartOf":{"@id":"https:\/\/www.clickpotito.com\/#website"},"breadcrumb":{"@id":"https:\/\/www.clickpotito.com\/?page_id=505#breadcrumblist"},"datePublished":"2026-03-22T11:15:14+01:00","dateModified":"2026-06-06T19:59:21+02:00"},{"@type":"WebSite","@id":"https:\/\/www.clickpotito.com\/#website","url":"https:\/\/www.clickpotito.com\/","name":"CLICKPOTIT","inLanguage":"it-IT","publisher":{"@id":"https:\/\/www.clickpotito.com\/#organization"}}]},"og:locale":"it_IT","og:site_name":"CLICKPOTIT -","og:type":"article","og:title":"Mappa - CLICKPOTIT","og:description":"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form","og:url":"https:\/\/www.clickpotito.com\/?page_id=505","article:published_time":"2026-03-22T10:15:14+00:00","article:modified_time":"2026-06-06T17:59:21+00:00","twitter:card":"summary_large_image","twitter:title":"Mappa - CLICKPOTIT","twitter:description":"Scopri San Potito attraverso la mappa interattiva Come funziona la mappa interattiva 01 CognomeNomeEmailVisitatoriData della visitaSubmit Form"},"aioseo_meta_data":{"post_id":"505","title":"#post_title #separator_sa #site_title","description":"#post_content","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-03-17 13:53:44","updated":"2026-06-06 19:22:42","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.clickpotito.com\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tMappa\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.clickpotito.com"},{"label":"Mappa","link":"https:\/\/www.clickpotito.com\/?page_id=505"}],"_links":{"self":[{"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/pages\/505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=505"}],"version-history":[{"count":566,"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/pages\/505\/revisions"}],"predecessor-version":[{"id":4100,"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=\/wp\/v2\/pages\/505\/revisions\/4100"}],"wp:attachment":[{"href":"https:\/\/www.clickpotito.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}