#opening-demo,#opening-demo{margin: 0px;}
#opening-demo *{box-sizing: border-box;}
#opening-demo{scroll-behavior: smooth;}
#opening-demo{-webkit-font-smoothing: antialiased; overflow-x: hidden;}
#opening-demo a{color: inherit; text-decoration: none;}
#opening-demo img{max-width: 100%; height: auto;}
#opening-demo :focus-visible{outline: rgb(0, 163, 224) solid 3px; outline-offset: 3px; border-radius: 10px;}
#opening-demo .wrap{width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 5.5vw, 80px);}
#opening-demo .topo{position: absolute; fill: none; stroke-width: 1.5; pointer-events: none;}
#opening-demo .schermo{position: relative; width: 100%; overflow: hidden; background: rgb(244, 244, 244); max-width: 100%;}
#opening-demo .schermo-in{position: absolute; left: 0px; top: 0px; transform-origin: 0px 0px; transform: scale(var(--s,1));}
#opening-demo .schermo-in > div{position: absolute; left: 0px; top: 0px;}
#opening-demo .vista{position: absolute; left: 0px; top: 0px; opacity: 0; transition: opacity 0.7s; pointer-events: none;}
#opening-demo .vista.on{opacity: 1;}
#opening-demo .velo{position: absolute; inset: 0px; background: rgba(10, 35, 64, 0.28);}
#opening-demo .barra{height: 40px; display: flex; align-items: center; gap: 8px; padding: 0px 16px;}
#opening-demo .barra.piccola{height: 34px; gap: 7px; padding: 0px 14px;}
#opening-demo .barra .dot{width: 11px; height: 11px; border-radius: 99px; flex-shrink: 0;}
#opening-demo .barra.piccola .dot{width: 10px; height: 10px;}
#opening-demo .barra .url{margin: 0px auto; width: min(320px, 58%); height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;}
#opening-demo .barra-fine{width: 49px; flex-shrink: 0;}
#opening-demo .etichetta{position: absolute; z-index: 4; top: var(--top); display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; max-width: 330px; box-shadow: rgba(3, 17, 33, 0.28) 0px 24px 50px; opacity: 0; transform: translateY(14px) scale(0.95); transition: opacity 0.45s 0.25s, transform 0.65s cubic-bezier(0.2, 1.3, 0.4, 1) 0.25s; pointer-events: none;}
#opening-demo .etichetta.on,#opening-demo .etichetta.ferma{opacity: 1; transform: none;}
#opening-demo .etichetta .ico{width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;}
#opening-demo .etichetta b{display: block; font-size: 14.5px;}
#opening-demo .etichetta small{display: block; font-size: 12.5px; margin-top: 2px;}
#opening-demo .lato-d{right: 3%;}
#opening-demo .lato-s{left: 3%;}
#opening-demo .lato-c{right: 38%;}
#opening-demo .tel{background: rgb(14, 30, 46); padding: 3.2%; border-radius: 13% / 6%; box-shadow: rgba(3, 17, 33, 0.45) 0px 40px 80px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;}
#opening-demo .tel-schermo{border-radius: 10% / 4.6%; overflow: hidden;}
#opening-demo .tel-over{position: absolute; z-index: 3; right: 8%; top: 7%; width: 27%; opacity: 0; transform: translateX(70px); transition: opacity 0.5s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none;}
#opening-demo .tel-over.on{opacity: 1; transform: none;}
#opening-demo .passo{appearance: none; border: 0px; cursor: pointer; font-family: inherit; position: relative; overflow: hidden;}
#opening-demo .passo .riempi{position: absolute; transform: scaleX(0); transform-origin: 0px 50%;}
#opening-demo .passo.on .riempi{animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: riempi; animation-timeline: auto; animation-range: normal; animation-duration: var(--dur,3600ms);}
@keyframes riempi { 
  100% { transform: scaleX(1); }
}
#opening-demo .foto-duo{display: flex; gap: 4%;}
#opening-demo .foto-duo img{width: 48%; aspect-ratio: 3 / 4; object-fit: cover; background: rgb(234, 244, 250);}
@media (max-width: 720px){#opening-demo .etichetta{inset: auto 10px 10px; max-width: none; padding: 10px 12px 10px 10px; gap: 10px; border-radius: 14px;}
#opening-demo .etichetta .ico{width: 32px; height: 32px; border-radius: 10px;}
#opening-demo .etichetta b{font-size: 13.5px;}
#opening-demo .etichetta small{font-size: 12px;}
#opening-demo .tel-over{width: 40%; right: 4%; top: 4%;}
#opening-demo .barra .url{display: none;}}
@media (prefers-reduced-motion: reduce){#opening-demo *,#opening-demo ::before,#opening-demo ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
#opening-demo .passo .riempi{display: none;}}
#opening-demo{--navy: #0A2340; --azz: #00A3E0; --azz-forte: #0077AA; --azz-chiaro: #4CC3F0; --ghiaccio: #7FCBEA; --carta: #F7FAFC; --ink: #0E1E2E; --ink-2: #4B5B6B; --linea: #E3ECF3; --cielo: #EAF4FA; --su-navy: #C9D8E6; --su-navy-2: #9FB4C8; --serif: 'DM Serif Display',Georgia,'Times New Roman',serif; --sans: 'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;}
#opening-demo{background: var(--carta); color: var(--ink); font-family: var(--sans); font-size: 16px;}
#opening-demo .topo{stroke: rgba(255, 255, 255, 0.05);}
#opening-demo .hero{position: relative; overflow: hidden; background: var(--navy); color: rgb(255, 255, 255); padding-bottom: clamp(150px, 29vw, 430px);}
#opening-demo .topo-a{width: 1400px; height: 1120px; left: -700px; top: -420px;}
#opening-demo .topo-b{width: 1400px; height: 1120px; right: -760px; top: -300px;}
#opening-demo .luce{position: absolute; left: 50%; bottom: 0px; width: min(1120px, 95vw); height: 560px; transform: translateX(-50%); border-radius: 50%; background: rgb(0, 146, 204); opacity: 0.22; filter: blur(110px); pointer-events: none;}
#opening-demo .nav{position: relative; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
#opening-demo .nav img{height: 25px; width: auto; filter: brightness(0) invert(1);}
#opening-demo .nav-voci{display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500; color: rgb(220, 232, 243);}
#opening-demo .nav-voci a:hover{color: rgb(255, 255, 255);}
#opening-demo .nav-cta{display: inline-flex; align-items: center; height: 44px; padding: 0px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: rgb(255, 255, 255); font-weight: 600;}
#opening-demo .intro{position: relative; padding-top: 52px; display: flex; flex-direction: column; align-items: center; text-align: center;}
#opening-demo .occhiello{font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--ghiaccio);}
#opening-demo h1{margin: 22px 0px 0px; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 74px); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance;}
#opening-demo h1 em,#opening-demo h2 em{font-style: italic;}
#opening-demo h1 em{color: var(--azz-chiaro);}
#opening-demo .lead{margin: 18px 0px 0px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--su-navy); max-width: 640px;}
#opening-demo .ctas{margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;}
#opening-demo .btn{display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0px 28px; border-radius: 999px; font-size: 16.5px; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s;}
#opening-demo .btn:hover{transform: translateY(-1px);}
#opening-demo .btn-azz{background: var(--azz); color: rgb(6, 34, 45);}
#opening-demo .btn-azz:hover{box-shadow: rgba(0, 163, 224, 0.35) 0px 10px 30px;}
#opening-demo .btn-vetro{background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-weight: 600;}
#opening-demo .passi{margin-top: 44px; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); max-width: 100%; overflow-x: auto; scrollbar-width: none;}
#opening-demo .passi::-webkit-scrollbar{display: none;}
#opening-demo .passo{flex-shrink: 0; height: 46px; padding: 0px 18px 0px 8px; border-radius: 999px; background: transparent; color: var(--su-navy-2); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; transition: background 0.4s, color 0.4s;}
#opening-demo .passo .n{width: 28px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); color: var(--su-navy); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.4s, color 0.4s;}
#opening-demo .passo:hover{color: rgb(255, 255, 255);}
#opening-demo .passo.fatto{color: rgb(255, 255, 255);}
#opening-demo .passo.fatto .n{background: var(--azz); color: rgb(6, 34, 45);}
#opening-demo .passo.on{background: rgb(255, 255, 255); color: var(--navy);}
#opening-demo .passo.on .n{background: var(--navy); color: rgb(255, 255, 255);}
#opening-demo .passo .riempi{left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--azz);}
#opening-demo .didascalia{margin: 16px 0px 0px; min-height: 24px; font-size: 16px; color: var(--su-navy);}
#opening-demo .palco{position: relative; z-index: 1; margin-top: calc(-1 * clamp(130px, 27vw, 410px));}
#opening-demo .palco-box{position: relative; max-width: 1140px; margin-inline: auto;}
#opening-demo .finestra{border-radius: 18px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(3, 17, 33, 0.45) 0px 60px 120px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px;}
#opening-demo .finestra .barra{background: rgb(238, 243, 247);}
#opening-demo .finestra .dot{background: rgb(201, 213, 223);}
#opening-demo .finestra .url{background: rgb(255, 255, 255); color: var(--ink-2);}
#opening-demo .etichetta{background: rgb(255, 255, 255);}
#opening-demo .etichetta b{color: var(--ink);}
#opening-demo .etichetta small{color: var(--ink-2);}
@media (min-width: 1380px){#opening-demo .palco .lato-d{right: -104px;}
#opening-demo .palco .lato-s{left: -104px;}}
#opening-demo section{scroll-margin-top: 24px;}
#opening-demo .titolo-sez{padding-top: clamp(90px, 10vw, 150px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;}
#opening-demo .occhiello-b{font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--azz-forte);}
#opening-demo h2{margin: 0px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.06; color: var(--navy); text-wrap: balance;}
#opening-demo h2 em{color: var(--azz-forte);}
#opening-demo .sotto{margin: 0px; max-width: 620px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2);}
#opening-demo .capitoli{padding-top: clamp(64px, 8vw, 110px); display: flex; flex-direction: column; gap: clamp(90px, 10vw, 150px);}
#opening-demo .capitolo{display: grid; grid-template-columns: minmax(0px, 420px) minmax(0px, 1fr); gap: clamp(40px, 5.5vw, 80px); align-items: center;}
#opening-demo .capitolo.inverso{grid-template-columns: minmax(0px, 1fr) minmax(0px, 420px);}
#opening-demo .capitolo.inverso .testo{order: 2;}
#opening-demo .ora{display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;}
#opening-demo .ora span:first-child{font-family: var(--serif); font-size: clamp(44px, 4vw, 58px); line-height: 1; color: var(--azz-forte);}
#opening-demo .ora span:last-child{font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-2);}
#opening-demo h3{margin: 22px 0px 0px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.12; color: var(--navy); text-wrap: balance;}
#opening-demo .testo p{margin: 16px 0px 0px; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 60ch;}
#opening-demo .punti{margin: 22px 0px 0px; padding: 0px; list-style: none;}
#opening-demo .punti li{display: flex; align-items: center; gap: 12px; padding: 12px 0px; border-top: 1px solid var(--linea); font-size: 15.5px; font-weight: 600;}
#opening-demo .immagine{position: relative;}
#opening-demo .cornice{border-radius: 16px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(12, 43, 75, 0.18) 0px 30px 80px, rgba(12, 43, 75, 0.08) 0px 0px 0px 1px;}
#opening-demo .cornice .barra{background: rgb(233, 239, 244);}
#opening-demo .cornice .dot{background: rgb(201, 213, 223);}
#opening-demo .immagine .ferma{position: absolute; bottom: -28px; left: -36px;}
#opening-demo .capitolo.inverso .immagine .ferma{left: auto; right: -36px;}
#opening-demo .pannello-tel{position: relative; overflow: hidden; border-radius: 28px; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 48px) 16px;}
#opening-demo .pannello-tel .topo{width: 1100px; height: 880px; left: -160px; top: -170px; stroke: rgba(255, 255, 255, 0.07);}
#opening-demo .pannello-tel .alone{position: absolute; left: 50%; top: 50%; width: 520px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(0, 146, 204); opacity: 0.28; filter: blur(80px);}
#opening-demo .pannello-tel .tel{position: relative; width: min(262px, 56%);}
#opening-demo .pannello-tel .ferma.a{inset: 12% auto auto 6%;}
#opening-demo .pannello-tel .ferma.b{inset: auto 6% 14% auto;}
#opening-demo .chi{margin-top: clamp(110px, 12vw, 170px); padding: clamp(28px, 5vw, 72px); border-radius: 32px; background: rgb(255, 255, 255); border: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0px, 500px) minmax(0px, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center;}
#opening-demo .chi .foto-duo img{border-radius: 24px;}
#opening-demo .chi .foto-duo img:last-child{margin-top: 12%;}
#opening-demo .citazione{margin: 0px; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 42px); line-height: 1.18; color: var(--navy); text-wrap: balance;}
#opening-demo .chi p.sotto{text-align: left;}
#opening-demo .firma-nomi{padding-top: 18px; border-top: 1px solid var(--linea); font-size: 15px; font-weight: 700; color: var(--navy);}
#opening-demo .prezzi-testa{padding-top: clamp(100px, 11vw, 150px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;}
#opening-demo .pioniere{display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--cielo); font-size: 15px; font-weight: 600; color: var(--navy);}
#opening-demo .pioniere i{width: 8px; height: 8px; border-radius: 99px; background: var(--azz);}
#opening-demo .prezzi{margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px;}
#opening-demo .prezzo{border-radius: 24px; background: rgb(255, 255, 255); border: 1px solid var(--linea); padding: 32px; display: flex; flex-direction: column; gap: 10px;}
#opening-demo .prezzo b{font-size: 18px;}
#opening-demo .prezzo .cifra{font-size: clamp(36px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums;}
#opening-demo .prezzo .cifra small{font-size: 16px; font-weight: 500; letter-spacing: 0px; color: var(--ink-2);}
#opening-demo .prezzo span{font-size: 16px; line-height: 1.5; color: var(--ink-2);}
#opening-demo .nota{margin: 20px 0px 0px; font-size: 14px; color: var(--ink-2);}
#opening-demo .chiusura{position: relative; overflow: hidden; margin-top: clamp(100px, 11vw, 150px); padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 96px); border-radius: 32px; background: var(--navy); color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;}
#opening-demo .chiusura .topo{width: 1300px; height: 1040px; left: -300px; top: -420px; stroke: rgba(255, 255, 255, 0.06);}
#opening-demo .chiusura .alone{position: absolute; left: 50%; top: 40%; width: min(800px, 90%); height: 360px; transform: translateX(-50%); border-radius: 50%; background: rgb(0, 146, 204); opacity: 0.25; filter: blur(100px);}
#opening-demo .chiusura h2{position: relative; color: rgb(255, 255, 255); font-size: clamp(44px, 6vw, 84px); line-height: 1;}
#opening-demo .chiusura h2 em{color: var(--azz-chiaro);}
#opening-demo .chiusura p{position: relative; margin: 0px; font-size: 19px; color: var(--su-navy);}
#opening-demo .chiusura .btn{position: relative;}
#opening-demo footer{margin-top: 120px; padding-block: 44px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;}
#opening-demo footer .marchio{display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2);}
#opening-demo footer img{height: 20px; width: auto;}
#opening-demo footer nav{display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--navy);}
@media (max-width: 1000px){#opening-demo .capitolo,#opening-demo .capitolo.inverso{grid-template-columns: minmax(0px, 1fr);}
#opening-demo .capitolo.inverso .testo{order: 0;}
#opening-demo .immagine .ferma,#opening-demo .capitolo.inverso .immagine .ferma{left: 12px; right: auto; bottom: -24px;}
#opening-demo .chi{grid-template-columns: minmax(0px, 1fr);}
#opening-demo .prezzi{grid-template-columns: minmax(0px, 1fr);}}
@media (max-width: 820px){#opening-demo .nav-voci a:not(.nav-cta){display: none;}}
@media (max-width: 720px){#opening-demo .didascalia{font-size: 15px;}
#opening-demo .pannello-tel .ferma{display: none;}}
#opening-demo{scroll-snap-type: y; scroll-behavior: auto;}
@media (min-width: 900px) and (min-height: 520px){#opening-demo{scroll-snap-type: none;}}
#opening-demo .racconto{position: relative; height: 700svh;}
#opening-demo .fermata{position: absolute; left: 0px; width: 1px; height: 100svh; top: calc(var(--i) * 100svh); scroll-snap-align: start; pointer-events: none;}
#opening-demo .fotogramma{position: sticky; top: 0px; height: 100svh; overflow: hidden; background: var(--navy); color: rgb(255, 255, 255); display: flex; flex-direction: column;}
#opening-demo .fotogramma .nav{flex: 0 0 auto;}
#opening-demo .intro-testi{flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(8px, 3vh, 40px); max-height: 560px; overflow: hidden; transition: max-height 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s, padding 0.8s;}
#opening-demo .intro-testi h1{margin-top: clamp(12px, 2.4vh, 22px);}
#opening-demo .tour .intro-testi{max-height: 0px; opacity: 0; padding-top: 0px; pointer-events: none;}
#opening-demo .passi-box{flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: clamp(16px, 3.6vh, 36px); transition: padding 0.8s;}
#opening-demo .tour .passi-box{padding-top: 6px;}
#opening-demo .passi-box .passi{margin-top: 0px;}
#opening-demo .passi-box .didascalia{margin-top: 12px;}
#opening-demo .palco2{flex: 1 1 auto; min-height: 0px; position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: clamp(14px, 2.6vh, 26px);}
#opening-demo .palco-box{position: relative; width: min(1140px, 100% - 32px); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);}
#opening-demo .scorri{appearance: none; cursor: pointer; font-family: inherit; position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(10, 35, 64, 0.84); border: 1px solid rgba(255, 255, 255, 0.22); color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(10px); transition: opacity 0.4s;}
#opening-demo .scorri svg{animation: 1.6s ease-in-out 0s infinite normal none running giu;}
@keyframes giu { 
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
#opening-demo .tour .scorri{opacity: 0; pointer-events: none;}
@media (min-width: 1380px){#opening-demo .palco2 .lato-d{right: -104px;}
#opening-demo .palco2 .lato-s{left: -104px;}}
#opening-demo .passo{scroll-margin-inline: 24px;}
#opening-demo .schermata{position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; padding-block: clamp(48px, 8vh, 96px);}
#opening-demo .giornata{align-items: center; text-align: center; gap: 18px;}
#opening-demo .orario{margin: 44px 0px 0px; padding: 0px; list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); width: min(920px, 100%);}
#opening-demo .orario::before{content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: rgb(207, 227, 240);}
#opening-demo .orario a{position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0px 8px; border-radius: 14px;}
#opening-demo .orario i{width: 20px; height: 20px; border-radius: 99px; background: rgb(255, 255, 255); border: 5px solid var(--azz); box-sizing: border-box;}
#opening-demo .orario b{font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--navy);}
#opening-demo .orario small{font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-2);}
#opening-demo .orario a:hover b{color: var(--azz-forte);}
#opening-demo .schermata .chi{margin-top: 0px;}
#opening-demo .schermata .prezzi-testa{padding-top: 0px;}
#opening-demo .schermata .chiusura{margin-top: 0px;}
#opening-demo .ultima footer{margin-top: clamp(40px, 7vh, 72px);}
@media (max-width: 720px){#opening-demo .orario{grid-template-columns: repeat(2, minmax(0px, 1fr)); row-gap: 32px;}
#opening-demo .orario::before{display: none;}
#opening-demo .scorri{bottom: 14px; font-size: 13px;}
#opening-demo .tour .palco2{align-items: center; padding-bottom: 48px;}}
#opening-demo .perchi{align-items: center; text-align: center; gap: 18px;}
#opening-demo .confronto{margin-top: 40px; width: min(1040px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px; text-align: left;}
#opening-demo .colonna{border-radius: 28px; padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 6px;}
#opening-demo .colonna h3{margin: 0px 0px 10px; font-size: clamp(24px, 2.2vw, 30px);}
#opening-demo .colonna ul{margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column;}
#opening-demo .colonna li{display: flex; align-items: center; gap: 14px; padding: 14px 0px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.35;}
#opening-demo .oggi{background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .oggi h3{color: var(--ink-2);}
#opening-demo .oggi li{color: var(--ink-2); border-top: 1px solid var(--linea);}
#opening-demo .oggi li span{text-decoration: line-through 1.5px rgba(75, 91, 107, 0.45);}
#opening-demo .con{position: relative; overflow: hidden; background: var(--navy); color: rgb(255, 255, 255);}
#opening-demo .con .topo{width: 900px; height: 720px; right: -420px; top: -260px; stroke: rgba(255, 255, 255, 0.06);}
#opening-demo .con h3{position: relative; color: rgb(255, 255, 255);}
#opening-demo .con h3 em{color: var(--azz-chiaro);}
#opening-demo .con li{position: relative; font-weight: 600; border-top: 1px solid rgba(255, 255, 255, 0.12);}
@media (max-width: 820px){#opening-demo .confronto{grid-template-columns: minmax(0px, 1fr);}}
#opening-demo .prezzi-sez,#opening-demo .confronta-sez{padding-block: clamp(28px, 4.5vh, 60px);}
#opening-demo .prezzi-sez h2,#opening-demo .confronta-sez h2,#opening-demo .conto-sez h2{font-size: clamp(30px, 3.2vw, 46px);}
#opening-demo .prezzi-riga{display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;}
#opening-demo .prezzi-riga h2{max-width: 720px;}
#opening-demo .prezzi-riga h2 em,#opening-demo .confronta-sez h2 em,#opening-demo .conto-sez h2 em{color: var(--azz-forte);}
#opening-demo .fattura-come,#opening-demo .segmenti{display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .seg{appearance: none; border: 0px; cursor: pointer; font-family: inherit; height: 42px; padding: 0px 18px; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; transition: background 0.3s, color 0.3s;}
#opening-demo .seg[aria-pressed="true"]{background: var(--navy); color: rgb(255, 255, 255);}
#opening-demo .seg .meno{margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgb(226, 245, 236); color: rgb(11, 107, 73); font-size: 12.5px; font-weight: 700;}
#opening-demo .seg[aria-pressed="true"] .meno{background: rgba(255, 255, 255, 0.16); color: rgb(155, 232, 198);}
#opening-demo .piani{margin-top: clamp(24px, 4vh, 40px); display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; align-items: stretch;}
#opening-demo .piano{position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: 26px; background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .piano.popolare{border: 2px solid var(--azz); box-shadow: rgba(0, 119, 170, 0.14) 0px 30px 70px;}
#opening-demo .nastro{position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--azz); color: rgb(6, 34, 45); font-size: 12.5px; font-weight: 700;}
#opening-demo .piano-testa h3{margin: 0px; font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--navy);}
#opening-demo .piano-testa p{margin: 6px 0px 0px; font-size: 15px; line-height: 1.5; color: var(--ink-2);}
#opening-demo .cifre{display: flex; align-items: baseline; gap: 6px;}
#opening-demo .grande{font-size: clamp(34px, 3vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums;}
#opening-demo .mese{font-size: 15px; color: var(--ink-2);}
#opening-demo .sotto-prezzo{margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums;}
#opening-demo .sotto-prezzo s{text-decoration-thickness: 1.5px;}
#opening-demo .fatturato{font-weight: 600; color: var(--navy);}
#opening-demo .gettone-pioniere{display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--cielo); font-size: 13px; font-weight: 600; color: var(--navy);}
#opening-demo .compresi{display: flex; gap: 8px; flex-wrap: wrap;}
#opening-demo .compresi span{display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgb(244, 248, 251); font-size: 14px; color: var(--ink-2);}
#opening-demo .compresi b{color: var(--navy);}
#opening-demo .voci{flex-grow: 1; padding-top: 12px; border-top: 1px solid var(--linea);}
#opening-demo .voci-testa{font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2);}
#opening-demo .voci ul{margin: 8px 0px 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 7px;}
#opening-demo .voci li{display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; font-weight: 500;}
#opening-demo .voci li svg{margin-top: 2px;}
#opening-demo .btn-scuro{background: var(--navy); color: rgb(255, 255, 255); justify-content: center;}
#opening-demo .piano .btn{justify-content: center; height: 50px;}
#opening-demo .nota-prezzi{margin: 22px 0px 0px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);}
#opening-demo .nota-prezzi a{color: var(--azz-forte); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;}
#opening-demo .confronta-sez h2{margin-top: 12px;}
#opening-demo .tabella-box{margin-top: clamp(16px, 2.6vh, 28px); overflow-x: auto; border-radius: 24px; background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .confronto-piani{width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px;}
#opening-demo .confronto-piani th,#opening-demo .confronto-piani td{padding: 5px 20px; text-align: center; border-top: 1px solid rgb(238, 243, 247);}
#opening-demo .confronto-piani thead th{padding: 12px 20px 10px; border-top: 0px; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--navy); vertical-align: bottom;}
#opening-demo .confronto-piani thead small{display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; color: var(--ink-2);}
#opening-demo .confronto-piani thead .col-pop{color: var(--azz-forte);}
#opening-demo .confronto-piani tbody th{text-align: left; font-weight: 500; color: var(--ink);}
#opening-demo .confronto-piani tr.gruppo th{padding: 10px 20px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azz-forte); background: rgb(247, 250, 252);}
#opening-demo .confronto-piani td:nth-child(3){background: rgba(0, 163, 224, 0.05);}
#opening-demo .confronto-piani .si{display: inline-flex;}
#opening-demo .confronto-piani .trattino{color: rgb(182, 196, 209);}
#opening-demo .confronto-piani td b{color: var(--navy);}
#opening-demo .confronto-piani td.unita{text-align: left; color: var(--ink-2); background: transparent;}
#opening-demo .vh{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px);}
#opening-demo .conto-sez h2{margin-top: 12px;}
#opening-demo .conto{margin-top: clamp(20px, 4vh, 40px); display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 440px); gap: 24px; align-items: stretch;}
#opening-demo .comandi{display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .comando{display: flex; flex-direction: column; gap: 10px;}
#opening-demo .etich{font-size: 15px; font-weight: 700; color: var(--navy);}
#opening-demo .etich small{margin-left: 8px; font-weight: 500; color: var(--ink-2);}
#opening-demo .segmenti{align-self: flex-start; background: rgb(244, 248, 251); border-color: rgb(227, 236, 243); flex-wrap: wrap; border-radius: 22px;}
#opening-demo .contatore{display: flex; align-items: center; gap: 14px; flex-wrap: wrap;}
#opening-demo .tondo{appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--linea); background: rgb(244, 248, 251); color: var(--navy); font: 600 22px var(--sans); display: flex; align-items: center; justify-content: center;}
#opening-demo .tondo:hover{background: var(--cielo);}
#opening-demo #n-accessi{min-width: 34px; text-align: center; font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;}
#opening-demo .totale-accessi{font-size: 14px; color: var(--ink-2);}
#opening-demo .chips{display: flex; gap: 8px; flex-wrap: wrap;}
#opening-demo .chip{appearance: none; cursor: pointer; font-family: inherit; height: 40px; padding: 0px 16px; border-radius: 999px; border: 1px solid var(--linea); background: rgb(244, 248, 251); color: var(--ink-2); font-size: 14.5px; font-weight: 600;}
#opening-demo .chip[aria-pressed="true"]{background: var(--navy); border-color: var(--navy); color: rgb(255, 255, 255);}
#opening-demo .interruttore{display: flex; align-items: center; gap: 14px; cursor: pointer; padding-top: 18px; border-top: 1px solid var(--linea);}
#opening-demo .interruttore input{position: absolute; opacity: 0; width: 1px; height: 1px;}
#opening-demo .binario{flex-shrink: 0; position: relative; width: 50px; height: 30px; border-radius: 99px; background: rgb(203, 214, 224); transition: background 0.3s;}
#opening-demo .pallino{position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 99px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; transition: transform 0.3s;}
#opening-demo .interruttore input:checked + .binario{background: var(--azz);}
#opening-demo .interruttore input:checked + .binario .pallino{transform: translateX(20px);}
#opening-demo .interruttore input:focus-visible + .binario{outline: 3px solid var(--azz); outline-offset: 3px;}
#opening-demo .interruttore b{display: block; font-size: 15px; color: var(--navy);}
#opening-demo .interruttore small{display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2);}
#opening-demo .ricevuta{position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 34px); border-radius: 26px; background: var(--navy); color: rgb(255, 255, 255);}
#opening-demo .ricevuta .topo{width: 900px; height: 720px; right: -420px; top: -280px; stroke: rgba(255, 255, 255, 0.06);}
#opening-demo .ric-testa{position: relative; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ghiaccio);}
#opening-demo .ric-righe{position: relative; margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column;}
#opening-demo .ric-righe li{display: flex; justify-content: space-between; gap: 16px; padding: 11px 0px; border-bottom: 1px dashed rgba(255, 255, 255, 0.18); font-size: 15px; font-variant-numeric: tabular-nums;}
#opening-demo .ric-righe li span:first-child{color: var(--su-navy);}
#opening-demo .ric-righe li.meno span:last-child{color: rgb(155, 232, 198);}
#opening-demo .ric-totale{position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px;}
#opening-demo .ric-totale > span{font-size: 15px; color: var(--su-navy);}
#opening-demo .ric-totale b{font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.6vw, 50px); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;}
#opening-demo .ric-anno{position: relative; margin: 0px; min-height: 22px; font-size: 14.5px; color: var(--su-navy);}
#opening-demo .ricevuta .btn{position: relative; margin-top: auto; justify-content: center;}
@media (max-width: 1000px){#opening-demo .piani{grid-template-columns: minmax(0px, 1fr);}
#opening-demo .conto{grid-template-columns: minmax(0px, 1fr);}}
#opening-demo .perchi-ab{align-items: center; text-align: center; gap: clamp(12px, 2vh, 20px); padding-block: clamp(28px, 4.5vh, 60px);}
#opening-demo .perchi-ab .sotto{max-width: 760px;}
#opening-demo .perchi-ab h2 em{color: var(--azz-forte);}
#opening-demo .ab{position: relative; width: min(100%, 1200px, -675px + 187.5svh); margin-top: clamp(8px, 2vh, 20px); aspect-ratio: 1200 / 640; border-radius: 28px; overflow: hidden; box-shadow: rgba(12, 43, 75, 0.18) 0px 40px 90px; --pos: 50%; touch-action: pan-y; text-align: left;}
#opening-demo .ab .strato{position: absolute; inset: 0px;}
#opening-demo .ab .strato .schermo{position: absolute; inset: 0px; background: transparent;}
#opening-demo .ab .strato-opero{clip-path: inset(0 0 0 var(--pos));}
#opening-demo .ab .maniglia{position: absolute; top: 0px; bottom: 0px; left: var(--pos); width: 0px; z-index: 4; pointer-events: none;}
#opening-demo .ab .maniglia i{position: absolute; top: 0px; bottom: 0px; left: -1.5px; width: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 18px;}
#opening-demo .ab .pomello{position: absolute; top: 50%; left: -30px; width: 60px; height: 60px; margin-top: -30px; border-radius: 99px; background: rgb(255, 255, 255); box-shadow: rgba(3, 17, 33, 0.35) 0px 10px 30px; display: flex; align-items: center; justify-content: center;}
#opening-demo .ab .etichetta-lato{position: absolute; top: 18px; z-index: 3; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;}
#opening-demo .ab .sx{left: 18px; background: rgb(255, 255, 255); color: var(--ink);}
#opening-demo .ab .dx{right: 18px; background: var(--azz); color: rgb(6, 34, 45);}
#opening-demo .ab input{position: absolute; inset: 0px; z-index: 5; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: ew-resize; appearance: none;}
#opening-demo .ab input:focus-visible ~ .maniglia .pomello{outline: 3px solid var(--azz); outline-offset: 3px;}
#opening-demo .per-chi{margin: 0px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2);}
@media (max-width: 720px){#opening-demo .ab{border-radius: 18px;}
#opening-demo .ab .pomello{width: 44px; height: 44px; left: -22px; margin-top: -22px;}
#opening-demo .ab .etichetta-lato{top: 10px; padding: 6px 10px; font-size: 12.5px;}
#opening-demo .ab .sx{left: 10px;}
#opening-demo .ab .dx{right: 10px;}}
#opening-demo .fotogramma .tl{position: relative; width: min(980px, 100%); display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr));}
#opening-demo .fotogramma .tl-binario{position: absolute; left: 8.333%; right: 8.333%; top: 13px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); pointer-events: none;}
#opening-demo .fotogramma .tl-riempi{position: absolute; left: 0px; top: 0px; bottom: 0px; width: 0px; border-radius: 2px; background: linear-gradient(90deg,var(--azz),var(--azz-chiaro)); transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);}
#opening-demo .fotogramma .tl .passo{appearance: none; border: 0px; background: none; padding: 0px 4px; margin: 0px; height: auto; border-radius: 12px; overflow: visible; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; color: inherit;}
#opening-demo .fotogramma .tl .punto{position: relative; width: 28px; height: 28px; border-radius: 99px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.3); background: var(--navy); display: flex; align-items: center; justify-content: center; transition: background 0.45s, border-color 0.45s, box-shadow 0.45s, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);}
#opening-demo .fotogramma .tl .punto svg{opacity: 0; transition: opacity 0.3s;}
#opening-demo .fotogramma .tl .nome{font-size: 14.5px; font-weight: 600; color: rgb(127, 149, 171); white-space: nowrap; transition: color 0.4s;}
#opening-demo .fotogramma .tl .passo:hover .punto{border-color: rgba(255, 255, 255, 0.7);}
#opening-demo .fotogramma .tl .passo:hover .nome{color: rgb(255, 255, 255);}
#opening-demo .fotogramma .tl .fatto .punto{background: var(--azz); border-color: var(--azz);}
#opening-demo .fotogramma .tl .fatto .punto svg{opacity: 1;}
#opening-demo .fotogramma .tl .fatto .nome{color: var(--su-navy);}
#opening-demo .fotogramma .tl .on .punto{border-color: rgb(255, 255, 255); background: rgb(255, 255, 255); transform: scale(1.08); box-shadow: rgba(76, 195, 240, 0.25) 0px 0px 0px 7px, rgba(76, 195, 240, 0.6) 0px 0px 24px;}
#opening-demo .fotogramma .tl .on .punto svg{display: none;}
#opening-demo .fotogramma .tl .on .punto::after{content: ""; width: 10px; height: 10px; border-radius: 99px; background: var(--azz);}
#opening-demo .fotogramma .tl .on .nome{color: rgb(255, 255, 255); font-weight: 700;}
#opening-demo .fotogramma .tl .n{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;}
#opening-demo .tour .passi-box{padding-top: 10px;}
@media (max-width: 720px){#opening-demo .fotogramma .tl .nome{font-size: 11px; font-weight: 600;}
#opening-demo .fotogramma .tl .punto{width: 24px; height: 24px;}
#opening-demo .fotogramma .tl-binario{top: 11px;}
#opening-demo .fotogramma .tl .passo{gap: 8px; padding: 0px 1px;}}
#opening-demo .demo-blocco{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 540px); gap: 24px; align-items: stretch;}
#opening-demo .demo-testo{align-items: flex-start; text-align: left; justify-content: center;}
#opening-demo .demo-testo h2{font-size: clamp(40px, 4.6vw, 68px);}
#opening-demo .demo-testo p{font-size: 18px;}
#opening-demo .demo-testo .demo-piccolo{font-size: 15.5px; color: var(--su-navy-2);}
#opening-demo .demo-form{display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: rgb(255, 255, 255); border: 1px solid var(--linea);}
#opening-demo .demo-form .campi{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px;}
#opening-demo .demo-form label{display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 700; color: var(--navy);}
#opening-demo .demo-form label small{font-weight: 500; color: var(--ink-2);}
#opening-demo .demo-form label.pieno{grid-column: 1 / -1;}
#opening-demo .demo-form input,#opening-demo .demo-form textarea{font: 500 15.5px var(--sans); color: var(--ink); padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(213, 226, 236); background: rgb(247, 250, 252); resize: vertical;}
#opening-demo .demo-form input:focus,#opening-demo .demo-form textarea:focus{outline: rgba(0, 163, 224, 0.35) solid 3px; border-color: var(--azz); background: rgb(255, 255, 255);}
#opening-demo .demo-form [aria-invalid="true"]{border-color: rgb(209, 59, 48); background: rgb(255, 245, 244);}
#opening-demo .demo-form .btn{align-self: flex-start; border: 0px; cursor: pointer; font-family: inherit;}
#opening-demo .demo-esito{margin: 0px; min-height: 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2);}
#opening-demo .demo-esito.ok{padding: 12px 14px; border-radius: 12px; background: rgb(226, 245, 236); color: rgb(11, 107, 73); font-weight: 600;}
#opening-demo .demo-esito.no{color: rgb(180, 35, 24); font-weight: 600;}
#opening-demo .demo-scelta{padding: 14px 16px; border-radius: 16px; background: var(--cielo); border: 1px solid rgb(207, 227, 240); color: var(--navy);}
#opening-demo .demo-scelta span{font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: rgb(0, 106, 153);}
#opening-demo .demo-scelta p{margin: 6px 0px 4px; font-size: 15.5px; font-weight: 600; line-height: 1.45;}
#opening-demo .demo-scelta small{display: block; font-size: 13.5px; color: var(--ink-2);}
#opening-demo .demo-scelta a{color: rgb(0, 106, 153); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;}
#opening-demo .nota-scegli{position: relative; margin: 0px; font-size: 13.5px; line-height: 1.45; color: var(--su-navy-2);}
#opening-demo .sotto-prezzo s{position: relative; display: inline-block; text-decoration: none;}
#opening-demo .sotto-prezzo s::after{content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 1.5px; border-radius: 2px; background: var(--ink-2); transform: translateY(-50%) rotate(-10deg);}
@media (max-width: 1000px){#opening-demo .demo-blocco{grid-template-columns: minmax(0px, 1fr);}}
@media (max-width: 560px){#opening-demo .demo-form .campi{grid-template-columns: minmax(0px, 1fr);}}