Simulatore Piercing · Atomika by The Beauty Factory@endsection


<style>
.m-sim-hero{
  background: var(--m-black); color: #fff; padding: 5rem 2rem 3rem;
  text-align: center; position: relative; overflow: hidden;
}
.m-sim-hero::before{
  content: ""; position: absolute; inset: -10rem auto auto -10rem;
  width: 38rem; height: 38rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,171,2,0.18) 0%, rgba(198,171,2,0) 70%);
  pointer-events: none;
}
.m-sim-hero > *{ position: relative; z-index: 1; }
.m-sim-hero__eyebrow{
  display: inline-block; font-size: 1.2rem; letter-spacing: 0.2em; font-weight: 700;
  text-transform: uppercase; color: var(--m-yellow); margin-bottom: 1rem;
}
.m-sim-hero__h1{
  font-size: clamp(2.6rem, 4vw, 4rem) !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important; line-height: 1.1 !important;
  color: #fff !important; margin: 0 0 1rem !important; text-transform: none !important;
}
.m-sim-hero__h1 span{ color: var(--m-yellow); }
.m-sim-hero__lead{
  font-size: 1.5rem; line-height: 1.55; color: rgba(255,255,255,0.85);
  max-width: 60ch; margin: 0 auto; text-transform: none;
}

.m-sim-app{ padding: 3rem 2rem 6rem; background: var(--m-gray-50); }
.m-sim-container{ max-width: 1280px; margin: 0 auto; }

.m-sim-layout{
  display: grid; grid-template-columns: 1fr 320px; gap: 2rem;
}
@media (max-width: 900px){ .m-sim-layout{ grid-template-columns: 1fr; } }

/* Canvas area */
.m-sim-canvas{
  position: relative; background: #fff; border: 1px solid var(--m-gray-200);
  border-radius: 16px; overflow: hidden; min-height: 500px;
  display: flex; flex-direction: column;
}
.m-sim-canvas__toolbar{
  display: flex !important; flex-wrap: wrap; gap: 0.6rem; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--m-gray-200); background: #fff;
  align-items: center;
}
.m-sim-canvas__toolbar-spacer{ flex: 1; min-width: 0; }
.m-sim-canvas__toolbar .m-tool-btn,
button.m-tool-btn{
  display: inline-flex !important; width: auto !important; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem !important; font-size: 1.25rem !important; font-weight: 600;
  background: var(--m-gray-50); border: 1px solid var(--m-gray-200); border-radius: 999px !important;
  color: var(--m-gray-700); cursor: pointer; transition: all .15s ease;
  text-transform: none !important; letter-spacing: 0.01em;
  line-height: 1.2; height: auto; min-height: 0; box-shadow: none;
  margin: 0;
}
.m-tool-btn:hover:not(:disabled){
  background: var(--m-yellow-soft); border-color: var(--m-yellow); color: var(--m-black);
}
.m-tool-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.m-tool-btn--primary{ background: var(--m-yellow); border-color: var(--m-yellow); color: var(--m-black); }
.m-tool-btn--danger{ background: #fff0ed; border-color: #ffb8aa; color: #b53e2c; }
.m-tool-btn svg{ width: 1.5rem; height: 1.5rem; }

.m-sim-stage{
  position: relative; flex: 1; min-height: 500px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#f5f5f5 0% 25%, #fff 0% 50%) 50% / 24px 24px;
}
.m-sim-stage__empty{
  text-align: center; padding: 3rem 2rem; max-width: 360px;
}
.m-sim-stage__empty svg{ width: 5rem; height: 5rem; color: var(--m-gray-500); margin-bottom: 1rem; }
.m-sim-stage__empty h3{
  font-size: 1.8rem !important; font-weight: 700 !important; color: var(--m-black) !important;
  margin: 0 0 0.6rem !important; text-transform: none !important;
}
.m-sim-stage__empty p{
  font-size: 1.35rem; color: var(--m-gray-700); line-height: 1.5;
  margin: 0 0 1.5rem; text-transform: none;
}
.m-sim-stage__container{ display: none; }
.m-sim-stage--ready .m-sim-stage__empty{ display: none; }
.m-sim-stage--ready .m-sim-stage__container{ display: block; }

.m-sim-tip{
  padding: 1rem 1.2rem; background: var(--m-yellow-soft);
  font-size: 1.25rem; color: var(--m-gray-700);
  border-top: 1px solid var(--m-gray-200); text-transform: none;
}
.m-sim-tip strong{ color: var(--m-black); }

/* Sidebar picker */
.m-sim-picker{
  background: #fff; border: 1px solid var(--m-gray-200);
  border-radius: 16px; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  max-height: 700px;
}
.m-sim-picker__head h3{
  font-size: 1.5rem !important; font-weight: 700 !important; color: var(--m-black) !important;
  margin: 0 0 0.3rem !important; text-transform: none !important;
}
.m-sim-picker__head p{
  font-size: 1.2rem; color: var(--m-gray-500); margin: 0; text-transform: none;
}
.m-sim-picker__tabs{
  display: flex !important; gap: 0.4rem; flex-wrap: wrap;
}
.m-sim-picker__tabs .m-sim-picker__tab,
button.m-sim-picker__tab{
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 1 1 auto !important; width: auto !important;
  padding: 0.6rem 0.9rem !important; font-size: 1.15rem !important; font-weight: 600;
  background: var(--m-gray-50); border: 1px solid var(--m-gray-200); border-radius: 999px !important;
  color: var(--m-gray-700); cursor: pointer; transition: all .15s ease;
  text-transform: none !important; white-space: nowrap; text-align: center;
  line-height: 1.2; height: auto; min-height: 0; box-shadow: none; margin: 0;
}
.m-sim-picker__tab.is-active{
  background: var(--m-black); border-color: var(--m-black); color: #fff;
}
.m-sim-picker__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  overflow-y: auto; max-height: 480px;
  padding-right: 0.4rem;
}
.m-sim-picker__item{
  position: relative; aspect-ratio: 1/1;
  background: #fafafa; border: 1px solid var(--m-gray-200); border-radius: 10px;
  overflow: hidden; cursor: pointer; transition: all .15s ease;
}
.m-sim-picker__item:hover{
  border-color: var(--m-yellow); transform: translateY(-2px);
}
.m-sim-picker__item img{
  width: 100%; height: 100%; object-fit: contain; padding: 0.3rem;
}
.m-sim-picker__item-name{
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.3rem 0.5rem; font-size: 0.95rem; font-weight: 600;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
  color: var(--m-black); text-align: center;
  line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.m-sim-foot{ padding: 5rem 2rem; background: #fff; text-align: center; }
.m-sim-foot p{
  font-size: 1.4rem; line-height: 1.55; color: var(--m-gray-700);
  margin: 0 auto 2rem; max-width: 60ch; text-transform: none;
}
.m-sim-foot p strong{ color: var(--m-black); }

@media (max-width: 600px){
  .m-sim-app{ padding: 1.5rem 1rem 4rem; }
  .m-sim-canvas__toolbar{ padding: 0.8rem; gap: 0.4rem; }
  .m-tool-btn{ padding: 0.5rem 0.9rem; font-size: 1.1rem; }
  .m-tool-btn span{ display: none; } /* solo icone su mobile */
  .m-tool-btn--keep-label span{ display: inline; }
  .m-sim-picker__grid{ grid-template-columns: repeat(4, 1fr); max-height: 360px; }
}
</style>


<!DOCTYPE html>
<html lang="it" class="no-js">
	
<head>
	<meta charset="utf-8">

<!-- Google Tag Manager (delayed until user interaction or 4s timeout) -->
<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
  var loaded=false;
  function loadGTM(){
    if (loaded) return; loaded=true;
    var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),
        dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;
    j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
  }
  var evts=['scroll','mousemove','touchstart','keydown','click'];
  function trigger(){
    evts.forEach(function(e){w.removeEventListener(e,trigger,{passive:true});});
    loadGTM();
  }
  evts.forEach(function(e){w.addEventListener(e,trigger,{passive:true,once:true});});
  // Fallback: load after 4s of silence so SEO crawlers / silent visits still fire GTM
  setTimeout(loadGTM, 4000);
})(window,document,'script','dataLayer','GTM-TBN85FC');
</script>
<!-- End Google Tag Manager -->

<meta name="facebook-domain-verification" content="bwxr7fdf0mfv8pmou0fxvmcbvnp3t5" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="theme-color" content="#C6AB02" />
<meta name="csrf-token" content="o3cHCCB5jATqKq7uMEZ8sIRoogWzSGlFLJoPOD8g">

<link rel="canonical" href="https://thebeautyfactory.it/body-piercing-roma/simulatore">

<meta property="og:type" content="website">
<meta property="og:site_name" content="The Beauty Factory - Sharon Russo">
<meta property="og:locale" content="it_IT">
<meta property="og:url" content="https://thebeautyfactory.it/body-piercing-roma/simulatore">
<meta property="og:title" content="Microblading &amp; Trucco Permanente Roma - Sharon Russo">
<meta property="og:description" content="Carica una tua foto e prova come ti starebbe ciascun gioiello della collezione Atomika.">
<meta property="og:image" content="https://thebeautyfactory.it/img/microblading-e-trucco-permanente-roma/sopracciglia/hybrid-brows-sopracciglia-roma.webp">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Microblading &amp; Trucco Permanente Roma - Sharon Russo">
<meta name="twitter:description" content="Carica una tua foto e prova come ti starebbe ciascun gioiello della collezione Atomika.">
<meta name="twitter:image" content="https://thebeautyfactory.it/img/microblading-e-trucco-permanente-roma/sopracciglia/hybrid-brows-sopracciglia-roma.webp">


<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": ["BeautySalon", "HealthAndBeautyBusiness"],
            "@id": "https://thebeautyfactory.it/#business",
            "name": "The Beauty Factory - Sharon Russo",
            "url": "https://thebeautyfactory.it",
            "image": [
                "https://thebeautyfactory.it/img/microblading-e-trucco-permanente-roma/sopracciglia/hybrid-brows-sopracciglia-roma.webp"
            ],
            "logo": {"@id": "https://thebeautyfactory.it/#logo"},
            "telephone": "+393483106525",
            "email": "info@thebeautyfactory.it",
            "priceRange": "€€€",
            "address": {
                "@type": "PostalAddress",
                "streetAddress": "Via Flaminia 855",
                "addressLocality": "Roma",
                "addressRegion": "RM",
                "postalCode": "00191",
                "addressCountry": "IT"
            },
            "geo": {
                "@type": "GeoCoordinates",
                "latitude": 41.9516391,
                "longitude": 12.4838165
            },
            "areaServed": {"@type": "City", "name": "Roma"},
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "5.0",
                "reviewCount": "417"
            },
            "openingHoursSpecification": [{
                "@type": "OpeningHoursSpecification",
                "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
                "opens": "10:00",
                "closes": "19:00"
            }],
            "sameAs": [
                "https://www.instagram.com/sharonrusso_tbf/",
                "https://www.facebook.com/Sharon-Russo-permanent-makeup-microblading-artist-143818229615265/",
                "https://www.youtube.com/channel/UCaXoY3XawQ7WylCgVzJztsA"
            ],
            "founder": [
                {"@id": "https://thebeautyfactory.it/#sharon-russo"},
                {"@id": "https://thebeautyfactory.it/#riccardo-marchi"}
            ],
            "hasOfferCatalog": {
                "@type": "OfferCatalog",
                "name": "Trattamenti The Beauty Factory",
                "itemListElement": [
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-microblading", "@type": "Service", "name": "Microblading sopracciglia", "url": "https://thebeautyfactory.it/microblading-sopracciglia-roma", "provider": {"@id": "https://thebeautyfactory.it/#sharon-russo"}}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-sopracciglia-dermografo", "@type": "Service", "name": "Trucco Permanente sopracciglia (dermografo)", "url": "https://thebeautyfactory.it/trucco-permanente-sopracciglia-roma", "provider": {"@id": "https://thebeautyfactory.it/#sharon-russo"}}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-labbra", "@type": "Service", "name": "Trucco Permanente labbra", "url": "https://thebeautyfactory.it/trucco-permanente-roma/tatuaggio-labbra", "provider": {"@id": "https://thebeautyfactory.it/#sharon-russo"}}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-eyeliner", "@type": "Service", "name": "Trucco Permanente eyeliner", "url": "https://thebeautyfactory.it/trucco-permanente-roma/tatuaggio-eyeliner-roma", "provider": {"@id": "https://thebeautyfactory.it/#sharon-russo"}}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-tricopigmentazione", "@type": "Service", "name": "Tricopigmentazione", "url": "https://thebeautyfactory.it/tricopigmentazione-roma", "provider": {"@id": "https://thebeautyfactory.it/#riccardo-marchi"}}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-piercing", "@type": "Service", "name": "Body piercing", "url": "https://thebeautyfactory.it/body-piercing-roma"}},
                    {"@type": "Offer", "itemOffered": {"@id": "https://thebeautyfactory.it/#service-laminazione", "@type": "Service", "name": "Laminazione ciglia e sopracciglia", "url": "https://thebeautyfactory.it/laminazione-ciglia-e-sopracciglia-roma"}}
                ]
            }
        },
        {
            "@type": ["BeautySalon", "HealthAndBeautyBusiness"],
            "@id": "https://thebeautyfactory.it/#business-trico",
            "name": "The Beauty Factory - Tricopigmentazione Roma",
            "url": "https://thebeautyfactory.it/tricopigmentazione-roma",
            "image": [
                "https://thebeautyfactory.it/img/tricopigmentazione/riccardo-marchi-tricopigmentazione-roma.webp"
            ],
            "logo": {"@id": "https://thebeautyfactory.it/#logo"},
            "telephone": "+393483106525",
            "email": "info@thebeautyfactory.it",
            "address": {
                "@type": "PostalAddress",
                "streetAddress": "Via Flaminia 855",
                "addressLocality": "Roma",
                "addressRegion": "RM",
                "postalCode": "00191",
                "addressCountry": "IT"
            },
            "geo": {
                "@type": "GeoCoordinates",
                "latitude": 41.9516299,
                "longitude": 12.4836669
            },
            "areaServed": {"@type": "City", "name": "Roma"},
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "5.0",
                "reviewCount": "53"
            },
            "openingHoursSpecification": [{
                "@type": "OpeningHoursSpecification",
                "dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday","Saturday"],
                "opens": "10:00",
                "closes": "19:00"
            }],
            "founder": {"@id": "https://thebeautyfactory.it/#riccardo-marchi"},
            "parentOrganization": {"@id": "https://thebeautyfactory.it/#business"}
        },
        {
            "@type": "Person",
            "@id": "https://thebeautyfactory.it/#sharon-russo",
            "name": "Sharon Russo",
            "jobTitle": "PMU & Microblading Artist",
            "description": "Esperta di Microblading e Trucco Permanente con 10 anni di esperienza, formatrice riconosciuta.",
            "image": "https://thebeautyfactory.it/img/logo-sharon-russo-tagline.webp",
            "url": "https://thebeautyfactory.it/chi-siamo/sharon-russo",
            "worksFor": {"@id": "https://thebeautyfactory.it/#business"},
            "sameAs": [
                "https://www.instagram.com/sharonrusso_tbf/",
                "https://www.facebook.com/Sharon-Russo-permanent-makeup-microblading-artist-143818229615265/"
            ]
        },
        {
            "@type": "Person",
            "@id": "https://thebeautyfactory.it/#riccardo-marchi",
            "name": "Riccardo Marchi",
            "jobTitle": "Specialista in Tricopigmentazione",
            "description": "Co-fondatore di The Beauty Factory, specialista in tricopigmentazione (effetto rasato, densità, copertura cicatrici e alopecia).",
            "image": "https://thebeautyfactory.it/img/tricopigmentazione/riccardo-marchi-tricopigmentazione-roma.webp",
            "url": "https://thebeautyfactory.it/chi-siamo/riccardo-marchi",
            "worksFor": {"@id": "https://thebeautyfactory.it/#business"}
        },
        {
            "@type": "ImageObject",
            "@id": "https://thebeautyfactory.it/#logo",
            "url": "https://thebeautyfactory.it/img/logo.png",
            "contentUrl": "https://thebeautyfactory.it/img/logo.png",
            "caption": "The Beauty Factory - Sharon Russo"
        },
        {
            "@type": "WebSite",
            "@id": "https://thebeautyfactory.it/#website",
            "url": "https://thebeautyfactory.it",
            "name": "The Beauty Factory",
            "inLanguage": "it-IT",
            "publisher": {"@id": "https://thebeautyfactory.it/#business"}
        }
    ]
}
</script>


<link href="https://fonts.googleapis.com/css2?family=Jura:wght@400;700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">
<link rel="stylesheet" href="/css/style.css?v=1783009009">
<link rel="stylesheet" href="/css/modern.css?v=1783009009">
<link rel="stylesheet" href="/css/icons-sharon-russo.css">
<link rel="stylesheet" href="/css/topbar.css?v=1783009009">
<link rel="stylesheet" href="/css/sticky-cta.css?v=1783009009">


<link rel="stylesheet" href="/css/flexslider.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="/css/owl.carousel.css" media="print" onload="this.media='all'">
<noscript>
    <link rel="stylesheet" href="/css/flexslider.css">
    <link rel="stylesheet" href="/css/owl.carousel.css">
</noscript>

<link href="https://thebeautyfactory.it/css/app.css" rel="stylesheet">

<link rel="icon" href="/favicon.ico" type="image/x-icon">


<script>
(function(){
    function hideIubBadge(){
        document.querySelectorAll('.iubenda-tp-btn[data-tp-float]').forEach(function(b){
            b.style.setProperty('display','none','important');
        });
    }
    hideIubBadge();
    new MutationObserver(hideIubBadge).observe(document.documentElement,{childList:true,subtree:true});
})();
</script>



<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="/js/modernizr.custom.js"></script>
<script defer src="/js/waypoints.min.js"></script>
<script defer src="/js/jquery.flexslider.js"></script>
<script defer src="/js/jquery.easing.min.js"></script>
<script defer src="/js/scroll.js"></script>
<script defer src="/js/owl.carousel.js"></script>
<script defer src="/js/beforeafter.jquery-1.0.0.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css">

		<title>Simulatore Piercing su Foto · Atomika · The Beauty Factory Roma</title>
<meta name="author" content="Sharon Russo">
<meta name="Description" content="Prova i gioielli Atomika sulla tua foto: trascina, ridimensiona, ruota e visualizza il risultato prima di prenotare. Tutto direttamente dal browser, senza app.">
<meta name="robots" content="index,follow">
			</head>

<body>
	
	

	<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TBN85FC" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->	
	
	<div id="top" class="wrapper">
		<div class="tbf-topbar tbf-topbar--open">
    <div class="container">
        <div class="tbf-topbar__inner">
            <a class="tbf-topbar__item tbf-topbar__rating" href="https://g.page/microblading-sopracciglia-roma?share" target="_blank" rel="noopener" aria-label="417 recensioni Google, 5 stelle">
                <span class="tbf-stars" aria-hidden="true">★★★★★</span>
                <span class="tbf-topbar__rating-text">5,0 · 417 recensioni Google</span>
                <span class="tbf-topbar__rating-compact" aria-hidden="true">417</span>
            </a>
            <a class="tbf-topbar__item tbf-topbar__address" href="https://maps.app.goo.gl/kUyFpW5s5rJekaZS9" target="_blank" rel="noopener" aria-label="Via Flaminia 855, Roma — apri su Google Maps">
                <i class="icon-map" aria-hidden="true"></i>
                <span>Via Flaminia 855, Roma</span>
            </a>
            <a class="tbf-topbar__item tbf-topbar__phone" href="tel:+393483106525" aria-label="Chiama 348 310 6525">
                <i class="icon-phone" aria-hidden="true"></i>
                <span>348 310 6525</span>
            </a>
            <span class="tbf-topbar__item tbf-topbar__status" title="Oggi 10-19">
                <span class="tbf-status-dot" aria-hidden="true"></span>
                <span>Oggi 10-19</span>
            </span>
            <a class="tbf-topbar__item tbf-topbar__whatsapp" href="https://wa.me/+393483106525?text=Ciao%2C%20vorrei%20prenotare%20una%20consulenza" target="_blank" rel="noopener" aria-label="contatto WhatsApp">
                <i class="icon-whatsapp" aria-hidden="true"></i>
                <span>WhatsApp</span>
            </a>
        </div>
    </div>
</div>
		<header id="header" class="header header-small">
<div class="container">
    <div class="row">
        <div class="header-front">
            <div class="logo">
                <a href="/" title="">
                    <picture>
        <source type="image/avif" srcset="/img/optimized/logo-sharon-russo-tagline-sm.avif 351w, /img/optimized/logo-sharon-russo-tagline-md.avif 768w, /img/optimized/logo-sharon-russo-tagline-lg.avif 1024w, /img/optimized/logo-sharon-russo-tagline-xl.avif 1280w, /img/optimized/logo-sharon-russo-tagline-2xl.avif 1536w" sizes="(max-width: 768px) 200px, 150px">
        <source type="image/webp" srcset="/img/optimized/logo-sharon-russo-tagline-sm.webp 351w, /img/optimized/logo-sharon-russo-tagline-md.webp 768w, /img/optimized/logo-sharon-russo-tagline-lg.webp 1024w, /img/optimized/logo-sharon-russo-tagline-xl.webp 1280w, /img/optimized/logo-sharon-russo-tagline-2xl.webp 1536w" sizes="(max-width: 768px) 200px, 150px">
        <img fetchpriority="high" class="u-max-full-width" src="/img/logo-sharon-russo-tagline.webp" alt="pagina principale" loading="eager">
    </picture>
                </a>
            </div>
            <div class="mobile-menu"><span id="mobile" class="mobile-menu-icon"><i class="icon-hamburger"></i></span>
            </div>
            <nav id="navbar">
                <ul>
                    <li><a title="" aria-label="pagina microblading" href="/microblading-sopracciglia-roma">Microblading</a>
</li>
<li class="has-children"><a title="" aria-label="trucco permanente" href="/trucco-permanente-roma"><i class="icon-arrow"></i>Trucco Permanente</a>
    <ul>
        <li><a title="" aria-label="pagina sopracciglia col dermografo" href="/trucco-permanente-sopracciglia-roma">Sopracciglia</a>
        </li>
        <li><a title="" aria-label="pagina labbra" href="/trucco-permanente-roma/tatuaggio-labbra">Labbra</a>
        </li>
        <li><a title="" aria-label="pagina eyeliner" href="/trucco-permanente-roma/tatuaggio-eyeliner-roma">Eye-liner</a>
        </li>
    </ul>
</li>
<li><a title="" aria-label="pagina tricopigmentazione" href="/tricopigmentazione-roma">Tricopigmentazione</a>
</li>
<li><a title="" aria-label="pagina laminazione ciglia e sopracciglia" href="/laminazione-ciglia-e-sopracciglia-roma">Laminazione</a>
</li>
<li><a title="" aria-label="pagina body piercing" href="/body-piercing-roma">Piercing</a>
</li>
                    <li class="tbf-cta-prenota-wrapper">
                        <a class="tbf-cta-prenota" href="https://wa.me/+393483106525?text=Ciao%2C%20vorrei%20prenotare%20una%20consulenza" target="_blank" rel="noopener" aria-label="prenota una consulenza gratuita" data-track-location="header_cta">Prenota</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</header>

<div id="mobile-nav-backdrop" class="mobile-nav-backdrop"></div>
<div id="mobile-navigation" class="mobile-nav">
    <div class="mobile-nav-container">
        <div class="mobile-nav-inner">
            <ul>
                <li><a title="" aria-label="pagina microblading" href="/microblading-sopracciglia-roma">Microblading</a>
</li>
<li class="has-children"><a title="" aria-label="trucco permanente" href="/trucco-permanente-roma"><i class="icon-arrow"></i>Trucco Permanente</a>
    <ul>
        <li><a title="" aria-label="pagina sopracciglia col dermografo" href="/trucco-permanente-sopracciglia-roma">Sopracciglia</a>
        </li>
        <li><a title="" aria-label="pagina labbra" href="/trucco-permanente-roma/tatuaggio-labbra">Labbra</a>
        </li>
        <li><a title="" aria-label="pagina eyeliner" href="/trucco-permanente-roma/tatuaggio-eyeliner-roma">Eye-liner</a>
        </li>
    </ul>
</li>
<li><a title="" aria-label="pagina tricopigmentazione" href="/tricopigmentazione-roma">Tricopigmentazione</a>
</li>
<li><a title="" aria-label="pagina laminazione ciglia e sopracciglia" href="/laminazione-ciglia-e-sopracciglia-roma">Laminazione</a>
</li>
<li><a title="" aria-label="pagina body piercing" href="/body-piercing-roma">Piercing</a>
</li>
                <li><a title="" aria-label="pagina contatti" href="/contatti">contatti</a>
                </li>
            </ul>
            <div class="icons-link-label">Seguici su...</div>
            <ul class="icons-link">
                <li><a href="https://www.instagram.com/sharonrusso_tbf/" rel="noopener" title="" aria-label="seguimi su instagram" target="_blank"><i class="icon-instagram"></i></a>
                </li>
                <li><a href="https://www.facebook.com/Sharon-Russo-permanent-makeup-microblading-artist-143818229615265/" rel="noopener" aria-label="seguimi su facebook" title="" target="_blank"><i class="icon-facebook"></i></a>
                </li>
                <li><a href="https://api.whatsapp.com/send/?phone=%2B393483106525&text=Ciao%2C+vorrei+informazioni&type=phone_number&app_absent=0" rel="noopener" aria-label="scrivimi su whatsapp" title="" target="_blank"><i class="icon-whatsapp"></i></a>
                </li>
                <li><a href="https://g.page/microblading-sopracciglia-roma?share" rel="noopener" aria-label="profilo google" title=""><i class="icon-google"></i></a>
                </li>
                <li><a href="https://www.youtube.com/channel/UCaXoY3XawQ7WylCgVzJztsA" rel="noopener" aria-label="video su youtube" title=""><i class="icon-youtube"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
		<main id="main-content">
		
<section class="m-sim-hero">
  <span class="m-sim-hero__eyebrow">Simulatore</span>
  <h1 class="m-sim-hero__h1">Prova il tuo <span>piercing</span></h1>
  <p class="m-sim-hero__lead">
    Carica una tua foto, scegli un gioiello e posizionalo: trascina, ridimensiona e ruota per vedere come ti starebbe. <strong style="color:#fff">Tutto nel browser</strong> — la foto non viene mai caricata sui nostri server.
  </p>
</section>

<section class="m-sim-app">
  <div class="m-sim-container">
    <div class="m-sim-layout">

      
      <div class="m-sim-canvas">
        <div class="m-sim-canvas__toolbar">
          <button class="m-tool-btn m-tool-btn--keep-label" id="btn-upload" data-track-event="simulator_upload_click" data-track-simulator="piercing_canvas">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            <span>Carica foto</span>
          </button>
          <input type="file" id="file-input" accept="image/*" style="display:none">

          <button class="m-tool-btn" id="btn-flip" disabled title="Specchia orizzontalmente">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><path d="M12 20v2M12 14v2M12 8v2M12 2v2"/></svg>
            <span>Specchia</span>
          </button>

          <button class="m-tool-btn m-tool-btn--danger" id="btn-remove" disabled title="Elimina selezionato">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            <span>Rimuovi</span>
          </button>

          <button class="m-tool-btn" id="btn-clear" disabled title="Rimuovi tutti i gioielli">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
            <span>Reset</span>
          </button>

          <div class="m-sim-canvas__toolbar-spacer"></div>

          <button class="m-tool-btn" id="btn-download" disabled title="Scarica immagine" data-track-event="simulator_download" data-track-simulator="piercing_canvas">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            <span>Scarica</span>
          </button>

          <button class="m-tool-btn m-tool-btn--primary m-tool-btn--keep-label" id="btn-share" data-track-event="simulator_share" data-track-simulator="piercing_canvas" data-track-location="piercing_simulator_share">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.4-3.9-3.4-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.5l-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.6.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/><path d="M20.5 3.4C18.3 1.2 15.3 0 12.1 0 5.5 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.6 1.4 5.5 1.4h.1c6.6 0 12-5.4 12-12 .1-3.2-1.2-6.2-3.3-8.4zm-8.4 18.5c-1.7 0-3.4-.4-4.8-1.3l-.3-.2-3.6.9.9-3.5-.2-.4c-.9-1.5-1.4-3.2-1.4-5 0-5.4 4.4-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 0 5.5-4.4 9.9-9.9 9.9z"/></svg>
            <span>WhatsApp</span>
          </button>
        </div>

        <div class="m-sim-stage" id="stage-wrap">
          <div class="m-sim-stage__empty">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            <h3>Carica una tua foto</h3>
            <p>Una foto del tuo orecchio, naso, ombelico... poi scegli un gioiello dalla griglia e trascinalo dove vuoi.</p>
            <button class="m-tool-btn m-tool-btn--primary m-tool-btn--keep-label" id="btn-upload-2" type="button" data-track-event="simulator_upload_click" data-track-simulator="piercing_canvas">
              Scegli foto
            </button>
          </div>
          <div class="m-sim-stage__container" id="stage-container"></div>
        </div>

        <div class="m-sim-tip">
          <strong>Suggerimento:</strong> tocca/click sul gioiello per selezionarlo. Trascina dagli angoli per ridimensionare, dall'icona in alto per ruotare.
        </div>
      </div>

      
      <aside class="m-sim-picker">
        <div class="m-sim-picker__head">
          <h3>Scegli un gioiello</h3>
          <p>74 modelli Atomika · titanio ASTM F136</p>
        </div>

        <div class="m-sim-picker__tabs" role="tablist">
          <button class="m-sim-picker__tab is-active" data-cat="all">Tutti</button>
                      <button class="m-sim-picker__tab" data-cat="punti-luce">Punti luce</button>
                      <button class="m-sim-picker__tab" data-cat="cerchietti">Cerchietti</button>
                      <button class="m-sim-picker__tab" data-cat="barre-curve">Barre curve</button>
                  </div>

        <div class="m-sim-picker__grid" id="picker-grid">
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_wings.webp" data-name="Crystal Wings" title="Crystal Wings">
              <img src="/storage/images/crystal_wings.webp" alt="Crystal Wings" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Wings</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/solo_marquise.webp" data-name="Solo Marquise" title="Solo Marquise">
              <img src="/storage/images/solo_marquise.webp" alt="Solo Marquise" loading="lazy"/>
              <div class="m-sim-picker__item-name">Solo Marquise</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/marquise_bloom.webp" data-name="Marquise Bloom" title="Marquise Bloom">
              <img src="/storage/images/marquise_bloom.webp" alt="Marquise Bloom" loading="lazy"/>
              <div class="m-sim-picker__item-name">Marquise Bloom</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/baguette_bold.webp" data-name="Baguette Bold" title="Baguette Bold">
              <img src="/storage/images/baguette_bold.webp" alt="Baguette Bold" loading="lazy"/>
              <div class="m-sim-picker__item-name">Baguette Bold</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/marquise_curve.webp" data-name="Marquise Curve" title="Marquise Curve">
              <img src="/storage/images/marquise_curve.webp" alt="Marquise Curve" loading="lazy"/>
              <div class="m-sim-picker__item-name">Marquise Curve</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/triple_leaf.webp" data-name="Triple Leaf" title="Triple Leaf">
              <img src="/storage/images/triple_leaf.webp" alt="Triple Leaf" loading="lazy"/>
              <div class="m-sim-picker__item-name">Triple Leaf</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/chain_frame.webp" data-name="Chain Frame" title="Chain Frame">
              <img src="/storage/images/chain_frame.webp" alt="Chain Frame" loading="lazy"/>
              <div class="m-sim-picker__item-name">Chain Frame</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/silent_blade.webp" data-name="Silent Blade" title="Silent Blade">
              <img src="/storage/images/silent_blade.webp" alt="Silent Blade" loading="lazy"/>
              <div class="m-sim-picker__item-name">Silent Blade</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/diamond_arc.webp" data-name="Diamond Arc" title="Diamond Arc">
              <img src="/storage/images/diamond_arc.webp" alt="Diamond Arc" loading="lazy"/>
              <div class="m-sim-picker__item-name">Diamond Arc</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/lovely_drop.webp" data-name="Lovely Drop" title="Lovely Drop">
              <img src="/storage/images/lovely_drop.webp" alt="Lovely Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lovely Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/blossom_drop.webp" data-name="Blossom Drop" title="Blossom Drop">
              <img src="/storage/images/blossom_drop.webp" alt="Blossom Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Blossom Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/sleek_point.webp" data-name="Sleek Point" title="Sleek Point">
              <img src="/storage/images/sleek_point.webp" alt="Sleek Point" loading="lazy"/>
              <div class="m-sim-picker__item-name">Sleek Point</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/geo_drop.webp" data-name="Geo Drop" title="Geo Drop">
              <img src="/storage/images/geo_drop.webp" alt="Geo Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Geo Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/pear_spark.webp" data-name="Pear Spark" title="Pear Spark">
              <img src="/storage/images/pear_spark.webp" alt="Pear Spark" loading="lazy"/>
              <div class="m-sim-picker__item-name">Pear Spark</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/spiral_love.webp" data-name="Spiral Love" title="Spiral Love">
              <img src="/storage/images/spiral_love.webp" alt="Spiral Love" loading="lazy"/>
              <div class="m-sim-picker__item-name">Spiral Love</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_curve.webp" data-name="Crystal Curve" title="Crystal Curve">
              <img src="/storage/images/crystal_curve.webp" alt="Crystal Curve" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Curve</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/radiant_edge.webp" data-name="Radiant Edge" title="Radiant Edge">
              <img src="/storage/images/radiant_edge.webp" alt="Radiant Edge" loading="lazy"/>
              <div class="m-sim-picker__item-name">Radiant Edge</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/sunburst_glow.webp" data-name="Sunburst Glow" title="Sunburst Glow">
              <img src="/storage/images/sunburst_glow.webp" alt="Sunburst Glow" loading="lazy"/>
              <div class="m-sim-picker__item-name">Sunburst Glow</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/pyramid_punk.webp" data-name="Pyramid Punk" title="Pyramid Punk">
              <img src="/storage/images/pyramid_punk.webp" alt="Pyramid Punk" loading="lazy"/>
              <div class="m-sim-picker__item-name">Pyramid Punk</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/lucky_paw.webp" data-name="Lucky Paw" title="Lucky Paw">
              <img src="/storage/images/lucky_paw.webp" alt="Lucky Paw" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lucky Paw</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/sacred_blade.webp" data-name="Sacred Blade" title="Sacred Blade">
              <img src="/storage/images/sacred_blade.webp" alt="Sacred Blade" loading="lazy"/>
              <div class="m-sim-picker__item-name">Sacred Blade</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_bloom.webp" data-name="Crystal Bloom" title="Crystal Bloom">
              <img src="/storage/images/crystal_bloom.webp" alt="Crystal Bloom" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Bloom</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/floral_glow.webp" data-name="Floral Glow" title="Floral Glow">
              <img src="/storage/images/floral_glow.webp" alt="Floral Glow" loading="lazy"/>
              <div class="m-sim-picker__item-name">Floral Glow</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/velvet_chains.webp" data-name="Velvet Chains" title="Velvet Chains">
              <img src="/storage/images/velvet_chains.webp" alt="Velvet Chains" loading="lazy"/>
              <div class="m-sim-picker__item-name">Velvet Chains</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/cascade.webp" data-name="Cascade" title="Cascade">
              <img src="/storage/images/cascade.webp" alt="Cascade" loading="lazy"/>
              <div class="m-sim-picker__item-name">Cascade</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/holy_shine.webp" data-name="Holy Shine" title="Holy Shine">
              <img src="/storage/images/holy_shine.webp" alt="Holy Shine" loading="lazy"/>
              <div class="m-sim-picker__item-name">Holy Shine</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_wave.webp" data-name="Crystal Wave" title="Crystal Wave">
              <img src="/storage/images/crystal_wave.webp" alt="Crystal Wave" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Wave</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/gem_leaf.webp" data-name="Gem Leaf" title="Gem Leaf">
              <img src="/storage/images/gem_leaf.webp" alt="Gem Leaf" loading="lazy"/>
              <div class="m-sim-picker__item-name">Gem Leaf</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/golden_rain.webp" data-name="Golden Rain" title="Golden Rain">
              <img src="/storage/images/golden_rain.webp" alt="Golden Rain" loading="lazy"/>
              <div class="m-sim-picker__item-name">Golden Rain</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/vega_shine.webp" data-name="Vega Shine" title="Vega Shine">
              <img src="/storage/images/vega_shine.webp" alt="Vega Shine" loading="lazy"/>
              <div class="m-sim-picker__item-name">Vega Shine</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/note_chic.webp" data-name="Note Chic" title="Note Chic">
              <img src="/storage/images/note_chic.webp" alt="Note Chic" loading="lazy"/>
              <div class="m-sim-picker__item-name">Note Chic</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/triple_love.webp" data-name="Triple Love" title="Triple Love">
              <img src="/storage/images/triple_love.webp" alt="Triple Love" loading="lazy"/>
              <div class="m-sim-picker__item-name">Triple Love</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_heart.webp" data-name="Crystal Heart" title="Crystal Heart">
              <img src="/storage/images/crystal_heart.webp" alt="Crystal Heart" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Heart</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/iridescent_crown.webp" data-name="Iridescent Crown" title="Iridescent Crown">
              <img src="/storage/images/iridescent_crown.webp" alt="Iridescent Crown" loading="lazy"/>
              <div class="m-sim-picker__item-name">Iridescent Crown</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/golden_dew.webp" data-name="Golden Dew" title="Golden Dew">
              <img src="/storage/images/golden_dew.webp" alt="Golden Dew" loading="lazy"/>
              <div class="m-sim-picker__item-name">Golden Dew</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_camellia.webp" data-name="Crystal Camellia" title="Crystal Camellia">
              <img src="/storage/images/crystal_camellia.webp" alt="Crystal Camellia" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Camellia</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/pearl_drop.webp" data-name="Pearl Drop" title="Pearl Drop">
              <img src="/storage/images/pearl_drop.webp" alt="Pearl Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Pearl Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/crystal_duet.webp" data-name="Crystal Duet" title="Crystal Duet">
              <img src="/storage/images/crystal_duet.webp" alt="Crystal Duet" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Duet</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/falling_drop.webp" data-name="Falling Drop" title="Falling Drop">
              <img src="/storage/images/falling_drop.webp" alt="Falling Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Falling Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/flash_bolt.webp" data-name="Flash Bolt" title="Flash Bolt">
              <img src="/storage/images/flash_bolt.webp" alt="Flash Bolt" loading="lazy"/>
              <div class="m-sim-picker__item-name">Flash Bolt</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/luna.webp" data-name="Luna" title="Luna">
              <img src="/storage/images/luna.webp" alt="Luna" loading="lazy"/>
              <div class="m-sim-picker__item-name">Luna</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/stella.webp" data-name="Stella" title="Stella">
              <img src="/storage/images/stella.webp" alt="Stella" loading="lazy"/>
              <div class="m-sim-picker__item-name">Stella</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/triple_dot.webp" data-name="Triple Dot" title="Triple Dot">
              <img src="/storage/images/triple_dot.webp" alt="Triple Dot" loading="lazy"/>
              <div class="m-sim-picker__item-name">Triple Dot</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/butterlight.webp" data-name="Butterlight" title="Butterlight">
              <img src="/storage/images/butterlight.webp" alt="Butterlight" loading="lazy"/>
              <div class="m-sim-picker__item-name">Butterlight</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/bloody_legs.webp" data-name="Bloody Legs" title="Bloody Legs">
              <img src="/storage/images/bloody_legs.webp" alt="Bloody Legs" loading="lazy"/>
              <div class="m-sim-picker__item-name">Bloody Legs</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/petal_chain.webp" data-name="Petal Chain" title="Petal Chain">
              <img src="/storage/images/petal_chain.webp" alt="Petal Chain" loading="lazy"/>
              <div class="m-sim-picker__item-name">Petal Chain</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/cherry_bloom.webp" data-name="Cherry Bloom" title="Cherry Bloom">
              <img src="/storage/images/cherry_bloom.webp" alt="Cherry Bloom" loading="lazy"/>
              <div class="m-sim-picker__item-name">Cherry Bloom</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/lotus_shine.webp" data-name="Lotus Shine" title="Lotus Shine">
              <img src="/storage/images/lotus_shine.webp" alt="Lotus Shine" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lotus Shine</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/regal_halo.webp" data-name="Regal Halo" title="Regal Halo">
              <img src="/storage/images/regal_halo.webp" alt="Regal Halo" loading="lazy"/>
              <div class="m-sim-picker__item-name">Regal Halo</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="punti-luce" data-img="/storage/images/whispering_wisteria_final_perfect.webp" data-name="Whispering Wisteria" title="Whispering Wisteria">
              <img src="/storage/images/whispering_wisteria_final_perfect.webp" alt="Whispering Wisteria" loading="lazy"/>
              <div class="m-sim-picker__item-name">Whispering Wisteria</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/celestial_dots.webp" data-name="Celestial Dots" title="Celestial Dots">
              <img src="/storage/images/celestial_dots.webp" alt="Celestial Dots" loading="lazy"/>
              <div class="m-sim-picker__item-name">Celestial Dots</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/chain-glory---named.webp" data-name="Chain Glory" title="Chain Glory">
              <img src="/storage/images/chain-glory---named.webp" alt="Chain Glory" loading="lazy"/>
              <div class="m-sim-picker__item-name">Chain Glory</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/twin-shine---named.webp" data-name="Twin Shine" title="Twin Shine">
              <img src="/storage/images/twin-shine---named.webp" alt="Twin Shine" loading="lazy"/>
              <div class="m-sim-picker__item-name">Twin Shine</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/royal-flare.webp" data-name="Royal Flare" title="Royal Flare">
              <img src="/storage/images/royal-flare.webp" alt="Royal Flare" loading="lazy"/>
              <div class="m-sim-picker__item-name">Royal Flare</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/crystal-eye---named.webp" data-name="Crystal Eye" title="Crystal Eye">
              <img src="/storage/images/crystal-eye---named.webp" alt="Crystal Eye" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Eye</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/glimmer-arc---named-fixed.webp" data-name="Glimmer Arc" title="Glimmer Arc">
              <img src="/storage/images/glimmer-arc---named-fixed.webp" alt="Glimmer Arc" loading="lazy"/>
              <div class="m-sim-picker__item-name">Glimmer Arc</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/lumina-drop---named.webp" data-name="Lumina Drop" title="Lumina Drop">
              <img src="/storage/images/lumina-drop---named.webp" alt="Lumina Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lumina Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/shiny-loop-.webp" data-name="Shiny Loop" title="Shiny Loop">
              <img src="/storage/images/shiny-loop-.webp" alt="Shiny Loop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Shiny Loop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/lumina-loop.webp" data-name="Lumina Loop" title="Lumina Loop">
              <img src="/storage/images/lumina-loop.webp" alt="Lumina Loop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lumina Loop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/linear-spark.webp" data-name="Linear Spark" title="Linear Spark">
              <img src="/storage/images/linear-spark.webp" alt="Linear Spark" loading="lazy"/>
              <div class="m-sim-picker__item-name">Linear Spark</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/lunar-bloom.webp" data-name="Lunar Bloom" title="Lunar Bloom">
              <img src="/storage/images/lunar-bloom.webp" alt="Lunar Bloom" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lunar Bloom</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/halo_band.webp" data-name="Halo Band" title="Halo Band">
              <img src="/storage/images/halo_band.webp" alt="Halo Band" loading="lazy"/>
              <div class="m-sim-picker__item-name">Halo Band</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/luminous_band.webp" data-name="Luminous Band" title="Luminous Band">
              <img src="/storage/images/luminous_band.webp" alt="Luminous Band" loading="lazy"/>
              <div class="m-sim-picker__item-name">Luminous Band</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/heart_spell.webp" data-name="Heart Spell" title="Heart Spell">
              <img src="/storage/images/heart_spell.webp" alt="Heart Spell" loading="lazy"/>
              <div class="m-sim-picker__item-name">Heart Spell</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/double-orbit.webp" data-name="Double Orbit" title="Double Orbit">
              <img src="/storage/images/double-orbit.webp" alt="Double Orbit" loading="lazy"/>
              <div class="m-sim-picker__item-name">Double Orbit</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/stellar-twist.webp" data-name="Stellar Twist" title="Stellar Twist">
              <img src="/storage/images/stellar-twist.webp" alt="Stellar Twist" loading="lazy"/>
              <div class="m-sim-picker__item-name">Stellar Twist</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/heart-line.webp" data-name="Heart Line" title="Heart Line">
              <img src="/storage/images/heart-line.webp" alt="Heart Line" loading="lazy"/>
              <div class="m-sim-picker__item-name">Heart Line</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/solar-drop.webp" data-name="Solar Drop" title="Solar Drop">
              <img src="/storage/images/solar-drop.webp" alt="Solar Drop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Solar Drop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/crystal-garland.webp" data-name="Crystal Garland" title="Crystal Garland">
              <img src="/storage/images/crystal-garland.webp" alt="Crystal Garland" loading="lazy"/>
              <div class="m-sim-picker__item-name">Crystal Garland</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/golden-teardrop.webp" data-name="Golden Teardrop" title="Golden Teardrop">
              <img src="/storage/images/golden-teardrop.webp" alt="Golden Teardrop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Golden Teardrop</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/royal_radiance-(1).webp" data-name="Royal Radiance" title="Royal Radiance">
              <img src="/storage/images/royal_radiance-(1).webp" alt="Royal Radiance" loading="lazy"/>
              <div class="m-sim-picker__item-name">Royal Radiance</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="cerchietti" data-img="/storage/images/bold_orbit.webp" data-name="Bold Orbit" title="Bold Orbit">
              <img src="/storage/images/bold_orbit.webp" alt="Bold Orbit" loading="lazy"/>
              <div class="m-sim-picker__item-name">Bold Orbit</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="barre-curve" data-img="/storage/images/trinity-gem.webp" data-name="Trinity Gem" title="Trinity Gem">
              <img src="/storage/images/trinity-gem.webp" alt="Trinity Gem" loading="lazy"/>
              <div class="m-sim-picker__item-name">Trinity Gem</div>
            </div>
                      <div class="m-sim-picker__item" data-cat="barre-curve" data-img="/storage/images/lunar_loop.webp" data-name="Lunar Loop" title="Lunar Loop">
              <img src="/storage/images/lunar_loop.webp" alt="Lunar Loop" loading="lazy"/>
              <div class="m-sim-picker__item-name">Lunar Loop</div>
            </div>
                  </div>
      </aside>

    </div>
  </div>
</section>

<section class="m-sim-foot">
  <p>Risultato non realistico al 100% (dimensione/posizione sono manuali). Per una <strong>simulazione precisa</strong> manda una foto a Sharon su WhatsApp — la fa direttamente lei.</p>
  <a class="m-btn m-btn--ghost" href="/body-piercing-roma">Torna al body piercing</a>
</section>

<script src="https://cdn.jsdelivr.net/npm/konva@9.3.16/konva.min.js" defer></script>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
  const stageContainer = document.getElementById('stage-container');
  const stageWrap = document.getElementById('stage-wrap');
  const fileInput = document.getElementById('file-input');
  const btnUpload = document.getElementById('btn-upload');
  const btnUpload2 = document.getElementById('btn-upload-2');
  const btnRemove = document.getElementById('btn-remove');
  const btnClear = document.getElementById('btn-clear');
  const btnFlip = document.getElementById('btn-flip');
  const btnDownload = document.getElementById('btn-download');
  const btnShare = document.getElementById('btn-share');
  const grid = document.getElementById('picker-grid');
  const tabs = document.querySelectorAll('.m-sim-picker__tab');

  let stage = null;
  let bgLayer = null;
  let jewelLayer = null;
  let transformer = null;
  let selectedNode = null;
  let stageReady = false;

  // Inizializza Konva stage in base alla foto caricata
  function initStage(imgObj) {
    if (stage) stage.destroy();
    stageWrap.classList.add('m-sim-stage--ready');

    // dimensioni: cap a 720px lato max, mantieni aspect
    const maxW = Math.min(stageContainer.parentElement.clientWidth - 20, 720);
    const maxH = 600;
    let w = imgObj.width, h = imgObj.height;
    const ratio = Math.min(maxW / w, maxH / h, 1);
    w = Math.round(w * ratio);
    h = Math.round(h * ratio);

    stage = new Konva.Stage({ container: 'stage-container', width: w, height: h });
    bgLayer = new Konva.Layer();
    jewelLayer = new Konva.Layer();
    stage.add(bgLayer); stage.add(jewelLayer);

    const bg = new Konva.Image({ image: imgObj, x: 0, y: 0, width: w, height: h, listening: false });
    bgLayer.add(bg);

    transformer = new Konva.Transformer({
      rotateEnabled: true,
      borderStroke: '#c6ab02',
      anchorStroke: '#c6ab02',
      anchorFill: '#fff',
      anchorSize: 12,
      keepRatio: true,
      enabledAnchors: ['top-left','top-right','bottom-left','bottom-right'],
    });
    jewelLayer.add(transformer);

    // deselect on stage empty click
    stage.on('click tap', (e) => {
      if (e.target === stage || e.target === bg) selectNode(null);
    });

    stageReady = true;
    btnClear.disabled = false;
    btnDownload.disabled = false;
    btnFlip.disabled = false;
  }

  function selectNode(node) {
    selectedNode = node;
    if (node) {
      transformer.nodes([node]);
      btnRemove.disabled = false;
    } else {
      transformer.nodes([]);
      btnRemove.disabled = true;
    }
    jewelLayer?.batchDraw();
  }

  /**
   * Rimuove lo sfondo bianco/quasi-bianco da un'immagine.
   * I mockup Atomika hanno bg studio bianco — sull'orecchio dell'utente
   * apparirebbero come carte appiccicate. Qui mappiamo RGB > soglia a alpha 0.
   * Inoltre crop al bounding-box del soggetto, così l'asset risulta
   * dimensionalmente ragionevole.
   */
  function knockoutWhite(img) {
    const c = document.createElement('canvas');
    c.width = img.width; c.height = img.height;
    const ctx = c.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(img, 0, 0);
    const data = ctx.getImageData(0, 0, c.width, c.height);
    const px = data.data;
    let minX = c.width, minY = c.height, maxX = 0, maxY = 0;
    for (let i = 0; i < px.length; i += 4) {
      const r = px[i], g = px[i+1], b = px[i+2];
      // soglia "quasi bianco" — leggermente permissiva per anti-aliasing
      const isWhite = r > 235 && g > 235 && b > 235;
      if (isWhite) {
        px[i+3] = 0; // alpha = 0
      } else {
        const p = i / 4;
        const x = p % c.width, y = (p / c.width) | 0;
        if (x < minX) minX = x;
        if (y < minY) minY = y;
        if (x > maxX) maxX = x;
        if (y > maxY) maxY = y;
        // anti-alias: pixel grigiastri vicini al bianco → alpha intermedio
        const avg = (r + g + b) / 3;
        if (avg > 215) px[i+3] = Math.round(((255 - avg) / 20) * 255);
      }
    }
    ctx.putImageData(data, 0, 0);
    // crop al bounding-box (+ margine) per ridurre vuoti
    if (minX < maxX && minY < maxY) {
      const pad = 8;
      const sx = Math.max(0, minX - pad);
      const sy = Math.max(0, minY - pad);
      const sw = Math.min(c.width - sx, maxX - sx + pad);
      const sh = Math.min(c.height - sy, maxY - sy + pad);
      const cropped = document.createElement('canvas');
      cropped.width = sw; cropped.height = sh;
      cropped.getContext('2d').drawImage(c, sx, sy, sw, sh, 0, 0, sw, sh);
      return cropped;
    }
    return c;
  }

  function addJewel(imgSrc) {
    if (!stageReady) {
      alert('Carica prima una tua foto.');
      return;
    }
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const w = stage.width(), h = stage.height();
      const knockout = knockoutWhite(img);
      // dimensione iniziale: ~22% della larghezza stage, mantiene aspect
      const targetW = w * 0.22;
      const scale = targetW / knockout.width;
      const node = new Konva.Image({
        image: knockout,
        x: w / 2 - targetW / 2,
        y: h / 2 - (knockout.height * scale) / 2,
        width: targetW,
        height: knockout.height * scale,
        draggable: true,
      });
      node.on('click tap', (e) => { e.cancelBubble = true; selectNode(node); });
      jewelLayer.add(node);
      transformer.moveToTop();
      selectNode(node);
    };
    img.src = imgSrc;
  }

  // ===== Handlers =====
  function pickFile() { fileInput.click(); }
  btnUpload.addEventListener('click', pickFile);
  btnUpload2?.addEventListener('click', pickFile);

  fileInput.addEventListener('change', (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    window.tbf && window.tbf.track('simulator_photo_loaded', { simulator: 'piercing_canvas', file_size_kb: Math.round(f.size / 1024) });
    const reader = new FileReader();
    reader.onload = (evt) => {
      const img = new Image();
      img.onload = () => initStage(img);
      img.src = evt.target.result;
    };
    reader.readAsDataURL(f);
  });

  btnRemove.addEventListener('click', () => {
    if (selectedNode) { selectedNode.destroy(); selectNode(null); }
  });

  btnClear.addEventListener('click', () => {
    if (!confirm('Rimuovere tutti i gioielli dalla foto?')) return;
    jewelLayer.find('Image').forEach(n => n.destroy());
    selectNode(null);
  });

  btnFlip.addEventListener('click', () => {
    if (!selectedNode) return;
    selectedNode.scaleX(-selectedNode.scaleX());
    selectedNode.x(selectedNode.x() + selectedNode.width() * (selectedNode.scaleX() < 0 ? 1 : 0));
    jewelLayer.batchDraw();
  });

  btnDownload.addEventListener('click', () => {
    if (!stage) return;
    transformer.nodes([]); // nasconde handles nell'export
    jewelLayer.batchDraw();
    const dataUrl = stage.toDataURL({ pixelRatio: 2, mimeType: 'image/jpeg', quality: 0.9 });
    if (selectedNode) transformer.nodes([selectedNode]);
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = 'simulazione-piercing-tbf.jpg';
    document.body.appendChild(a); a.click(); a.remove();
  });

  btnShare.addEventListener('click', () => {
    const msg = "Ciao Sharon! Ho fatto una simulazione con il vostro tool, posso mandartela su WhatsApp per avere un parere?";
    const url = 'https://wa.me/+393483106525?text=' + encodeURIComponent(msg);
    window.open(url, '_blank', 'noopener');
  });

  // Picker click → aggiunge gioiello
  grid.addEventListener('click', (e) => {
    const item = e.target.closest('.m-sim-picker__item');
    if (!item) return;
    addJewel(item.dataset.img);
  });

  // Filtri categoria
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('is-active'));
      tab.classList.add('is-active');
      const cat = tab.dataset.cat;
      grid.querySelectorAll('.m-sim-picker__item').forEach(it => {
        it.style.display = (cat === 'all' || it.dataset.cat === cat) ? '' : 'none';
      });
    });
  });

  // Tasto Delete/Backspace per rimuovere
  document.addEventListener('keydown', (e) => {
    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNode && document.activeElement === document.body) {
      e.preventDefault();
      selectedNode.destroy();
      selectNode(null);
    }
  });
});
</script>

		</main>
		<footer>
    <div class="container">
        <div class="five columns copy">
            <div class="footer-box">
                <ul class="footer-menu">
                    <li><a title="" href="/chi-siamo"><i class="icon-arrow"></i>Chi siamo</a></li>
                    <li><a title="" href="/blog?page=1"><i class="icon-arrow"></i>Blog</a></li>
                    <li><a title="" href="/foto-prima-e-dopo"><i class="icon-arrow"></i>foto prima e dopo</a></li>
                    <li><a title="" href="/rassegna-stampa"><i class="icon-arrow"></i>rassegna stampa</a></li>
                    <li><a title="" href="/listino-prezzi"><i class="icon-arrow"></i>listino prezzi</a></li>
                    <li><a title="" href="/pagamenti-rateali"><i class="icon-arrow"></i>pagamenti rateali</a></li>
                </ul>
            </div>
            <div class="footer-box">
                <ul class="icons-link social-footer">
                    <li><a href="https://www.instagram.com/sharonrusso_tbf/" rel="noopener" title="" aria-label="seguimi su instagram" target="_blank"><i class="icon-instagram"></i></a>
                    </li>
                    <li><a href="https://www.facebook.com/Sharon-Russo-permanent-makeup-microblading-artist-143818229615265/" rel="noopener" aria-label="seguimi su facebook" title="" target="_blank"><i class="icon-facebook"></i></a>
                    </li>
                    <li><a href="mailto:info@thebeautyfactory.it"  rel="noopener" title="" aria-label="scrivimi su whatsapp" target="_blank"><i class="icon-mail"></i></a>
                    </li>
                    <li><a href="https://g.page/microblading-sopracciglia-roma?share" rel="noopener" title="" aria-label="profilo google"><i class="icon-google"></i></a>
                    </li>
                    <li><a href="https://www.youtube.com/channel/UCaXoY3XawQ7WylCgVzJztsA" rel="noopener" title="" aria-label="video su youtube"><i class="icon-youtube"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="seven columns info">
            <div class="footer-box">
                <ul class="icons-link">
                    <li><a href="https://maps.app.goo.gl/kUyFpW5s5rJekaZS9" rel="noopener" title="" target="_blank">Via Flaminia, 855 - 00191 Roma<i class="icon-map"></i></a>
                    </li>
                    <li><a href="tel:+393483106525" title="">348 310 6525<i class="icon-phone"></i></a>
                    </li>
                    <li><a href="https://api.whatsapp.com/send/?phone=%2B393483106525&text=Ciao%2C+vorrei+informazioni&type=phone_number&app_absent=0" title="">348 310 65 25<i class="icon-whatsapp"></i></a>
                    </li>
                </ul>
            </div>
            <div class="footer-box">
                <strong class="footer-logo"><img src="/img/icon-sharon-russo.svg" alt=""/>SHARON <span class="yellow">RUSSO</span></strong>
                <span class="grey footer-logo-tagline">THE BEAUTY FACTORY</span>
                <span class="footer-copy">© 2026 Diritti Riservati - The Beauty Factory Srls<br>
                <span class="grey">P. IVA 16048821009 | Capitale Sociale Versato: 6000€</span><br>
                <a href="/privacy" aria-label="pagina privacy">Privacy</a>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#" aria-label="gestisci preferenze cookie" onclick="event.preventDefault();if(window._iub&&_iub.cs&&_iub.cs.api){_iub.cs.api.openPreferences();}">Preferenze cookie</a>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a class="dc" href="/regolamento" title="" aria-label="clicca per chiamare" target="_blank">regolamento</a>
                
                </span>
            </div>
        </div>
    </div>
</footer>		<div class="tbf-sticky-cta" role="region" aria-label="contatto rapido">
    <a class="tbf-sticky-cta__btn tbf-sticky-cta__btn--primary"
       href="https://wa.me/+393483106525?text=Ciao%2C%20vorrei%20prenotare%20una%20consulenza%20gratuita" target="_blank" rel="noopener"
       data-tbf-event="sticky_cta_consulenza"
       aria-label="prenota la consulenza gratuita su WhatsApp">
        <svg class="tbf-sticky-cta__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.5 3.4C18.3 1.2 15.3 0 12.1 0 5.5 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.6 1.4 5.5 1.4h.1c6.6 0 12-5.4 12-12 .1-3.2-1.2-6.2-3.3-8.4zm-8.4 18.5c-1.7 0-3.4-.4-4.8-1.3l-.3-.2-3.6.9.9-3.5-.2-.4c-.9-1.5-1.4-3.2-1.4-5 0-5.4 4.4-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 0 5.5-4.4 9.9-9.9 9.9z"/>
            <path d="M17.5 14.4c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.4-3.9-3.4-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.5l-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.6.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/>
        </svg>
        <span>Consulenza</span>
    </a>
    <a class="tbf-sticky-cta__btn tbf-sticky-cta__btn--ghost"
       href="https://wa.me/+393483106525?text=Ciao%2C%20vorrei%20chiedere%20informazioni" target="_blank" rel="noopener"
       data-tbf-event="sticky_cta_info"
       aria-label="chiedi informazioni su WhatsApp">
        <span>Chiedi info</span>
    </a>
</div>
		
		
		

		
		
	</div>
	
	
	
	
	<script>
	document.addEventListener('DOMContentLoaded', function(){
		if (typeof ScrollReveal !== 'undefined') {
			window.sr = ScrollReveal({ reset: false });
			sr.reveal('.animate', { duration: 700, origin: 'bottom', distance: '30px', delay: 200, opacity:0, scale: 1 });
			sr.reveal('.animate-sequence', { duration: 700, origin: 'bottom', distance: '30px', delay: 200, opacity:0, scale: 1 }, 500);
			sr.reveal('.iconbox', { duration: 700, origin: 'bottom', distance: '30px', delay: 200, opacity:0, scale: 1 }, 500);
		}
		if (typeof jQuery !== 'undefined') {
			jQuery(window).on('load', function(){
				if (jQuery.fn.flexslider) {
					jQuery('#main-slider').flexslider({
						animation: "fade",
						slideshowSpeed: 4500,
						animationSpeed: 500,
						keyboard: true,
						controlsContainer: '.flex-container'
					});
				}
			});
		}
	});
	</script>

	<script defer src="/js/common.js"></script>
	<script defer src="/js/tbf-analytics.js"></script>

	<script>
	// Se visiti /?dev=1 imposta il cookie
	if (window.location.search.includes('dev=1')) {
		document.cookie = "exclude_from_ga=true; path=/; max-age=" + (60*60*24*365);
		console.log("Cookie 'exclude_from_ga' impostato");
	}
	</script>


	

	

		

	
</body>
</html>


</style>