/* NODEN, foglio di stile scritto da zero.
   Breakpoint come l'originale: desktop da 1200, tablet 810–1199, phone sotto 810. */

@font-face { font-family: "Advercase Demo Regular"; src: url("../assets/font/advercase-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Advercase Demo Bold"; src: url("../assets/font/advercase-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal Book"; src: url("../assets/font/neue-montreal-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal Italic"; src: url("../assets/font/neue-montreal-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Neue Montreal Medium"; src: url("../assets/font/neue-montreal-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal SemiBold italic"; src: url("../assets/font/neue-montreal-semibold-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Söhne Leicht"; src: url("../assets/font/sohne-leicht.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

/* Font di riserva come sull'originale: Arial locale con metriche adattate.
   Servono perché Advercase Demo (versione dimostrativa, 74 caratteri) non ha apostrofo, accenti, virgolette, lineette, € @ + ;
   e sull'originale quei caratteri escono così. */
@font-face { font-family: "Advercase Demo Regular Placeholder"; src: local("Arial"); ascent-override: 96.30%; descent-override: 23.59%; line-gap-override: 0.00%; size-adjust: 103.85%; }
@font-face { font-family: "Advercase Demo Bold Placeholder"; src: local("Arial"); ascent-override: 95.82%; descent-override: 23.48%; line-gap-override: 0.00%; size-adjust: 104.36%; }
@font-face { font-family: "PP Neue Montreal Book Placeholder"; src: local("Arial"); ascent-override: 101.42%; descent-override: 25.62%; line-gap-override: 0.00%; size-adjust: 94.46%; }
@font-face { font-family: "PP Neue Montreal Italic Placeholder"; src: local("Arial"); ascent-override: 99.63%; descent-override: 25.17%; line-gap-override: 0.00%; size-adjust: 96.15%; }
@font-face { font-family: "PP Neue Montreal Medium Placeholder"; src: local("Arial"); ascent-override: 98.07%; descent-override: 24.77%; line-gap-override: 0.00%; size-adjust: 97.68%; }
@font-face { font-family: "PP Neue Montreal SemiBold italic Placeholder"; src: local("Arial"); ascent-override: 94.17%; descent-override: 23.79%; line-gap-override: 0.00%; size-adjust: 101.73%; }
@font-face { font-family: "Söhne Leicht Placeholder"; src: local("Arial"); ascent-override: 117.11%; descent-override: 42.30%; line-gap-override: 0.00%; size-adjust: 99.99%; }

:root {
  --grey: rgb(216, 217, 216);
  --grey-50: rgba(216, 217, 216, 0.5);
  --orange: rgb(255, 139, 0);
  --orange-300: rgb(226, 128, 40);
  --orange-600: rgb(255, 156, 88);
  --black: rgb(0, 0, 0);
  --black-50: rgba(80, 80, 80, 0.6);
  --outline: rgba(255, 255, 255, 0.2);
  --green: rgb(6, 179, 0);
  /* Molla di Framer durata 0,45 s, rimbalzo 0,25: rigidità 434,29, smorzamento 31,26 (node rif/molla.js durata 0.45 0.25) */
  --molla-045: 651ms linear(0, 0.0514, 0.1651, 0.3111, 0.4569, 0.5963, 0.713, 0.8112, 0.885, 0.941, 0.9788, 1.004, 1.0187, 1.0256, 1.0275, 1.0262, 1.023, 1.0191, 1.015, 1.0112, 1.0079, 1.0052, 1.0032, 1.0016, 1.0006, 0.9999, 0.9995, 0.9993, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1, 1);
  /* Forma "squircle" come Framer: superellisse (1 + percentuale) dove il browser supporta corner-shape,
     altrimenti un raggio ridotto. Per la squircle al 50% il ripiego è il 75,2% (--sq). */
  --sq: 0.752;
}
@supports (corner-shape: superellipse(2)) {
  :root { --sq: 1; --uno: 1; }
}
/* Squircle generica: --r raggio, --fb fattore di ripiego, --se esponente della superellisse.
   Le variabili non si ereditano, altrimenti un genitore squircle cambierebbe i figli. */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fb { syntax: "<number>"; inherits: false; initial-value: 0.752; }
@property --se { syntax: "<number>"; inherits: false; initial-value: 1.5; }
.sq {
  border-radius: calc(var(--r) * var(--uno, var(--fb)));
  corner-shape: superellipse(var(--se));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grey);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
  font-size: 12px;
}
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
a { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: inherit; }
img { display: block; }
/* picture serve solo a scegliere il formato (AVIF o WebP): non deve creare un riquadro */
picture { display: contents; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Stili di testo */
.t-nome { color: var(--black); font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 16px; line-height: 1.4em; font-weight: 400; white-space: pre; }
.t-piccolo { color: var(--black); font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 14px; line-height: 1.2em; letter-spacing: 0.01em; font-weight: 400; white-space: pre; }
.t-medio { color: var(--black); font-family: "PP Neue Montreal Medium", "PP Neue Montreal Medium Placeholder", sans-serif; font-size: 14px; line-height: 1.2em; letter-spacing: 0.01em; font-weight: 500; }
.t-titolo { color: var(--black); font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 60px; line-height: 1.1em; font-weight: 400; text-align: center; white-space: pre-wrap; }
.t-titolo .p { display: inline-block; }
.t-sotto { color: var(--black-50); font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 23px; line-height: 1.4em; font-weight: 400; }
.t-corpo { color: var(--black-50); font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 15px; line-height: 1.4em; letter-spacing: 0.04em; font-weight: 400; }
.arancio { color: var(--orange); }

/* Bordo sottile come Framer: linea interna disegnata sopra il contenuto */
.bordo { position: relative; }
.bordo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--outline);
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
}

.solo-phone { display: none !important; }

.pagina {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--grey);
  overflow: hidden;
}

/* ---------- Header ---------- */
.testata {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 700px;
  max-width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: calc(50px * var(--sq));
  corner-shape: superellipse(1.5);
}

.profilo {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  outline: none;
}
.profilo-foto {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: calc(100px * var(--sq));
  corner-shape: superellipse(1.5);
  transition: transform var(--molla-045);
  will-change: transform;
}
.profilo-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  corner-shape: inherit;
}
.profilo-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--outline);
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
}
.profilo-nome {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}
.profilo-ruolo {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.ruolo-a, .ruolo-b { transition: transform var(--molla-045), top var(--molla-045); }
.ruolo-a { position: relative; }
.ruolo-b { position: absolute; left: 0; top: 27.7px; transform: translateY(-50%); }
.testo-hover { display: none; }
.ruolo-a, .ruolo-b { display: flex; flex-direction: column; align-items: flex-start; }

/* Hover del profilo: foto 1,1, il ruolo esce in alto ed entra "Scopri chi sono" */
@media (hover: hover) {
  .profilo:hover .profilo-foto { transform: scale(1.1); }
  .profilo:hover .ruolo-a { transform: translateY(-27.7px); }
  .profilo:hover .ruolo-b { top: 0; transform: none; }
  .profilo:hover .testo-default { display: none; }
  .profilo:hover .testo-hover { display: block; }
}

/* Vetro liquido dietro l'header */
.vetro { position: absolute; inset: 0; z-index: -1; }
.vetro-ombra, .vetro-clip, .vetro-sfoca, .vetro-tinta, .vetro-bordo {
  position: absolute;
  inset: 0;
  border-radius: var(--rv, 31px);
}
.vetro-ombra { z-index: 1; box-shadow: rgba(0, 0, 0, 0.08) 0 4px 4px 0, rgba(0, 0, 0, 0.043) 0 0 12px 0; pointer-events: none; }
.vetro-clip { overflow: hidden; }
.vetro-sfoca { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); filter: url(#vetro); }
.vetro-tinta { z-index: 1; background: var(--grey-50); }
.vetro-bordo { z-index: 2; box-shadow: rgba(255, 255, 255, 0.2) 2px 2px 2px 0 inset, rgba(255, 255, 255, 0.2) -2px -2px 2px 0 inset; }

.testata-destra {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.stato {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.stato-punto {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background: var(--green);
}
.stato-alone {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  overflow: hidden;
  background: rgba(7, 209, 0, 0.4);
  animation: alone 1.2s ease-in-out infinite alternate;
}
@keyframes alone { from { transform: scale(1); } to { transform: scale(2.5); } }

.lingua {
  position: relative;
  flex: none;
  z-index: 5;
  text-align: start;
  display: flex;
  width: 17px;
  height: 17px;
  border-radius: 50px;
  overflow: hidden;
  color: var(--black);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lingua svg { width: 100%; height: 100%; }

/* ---------- Phone ---------- */
@media (max-width: 809.98px) {
  .solo-largo { display: none !important; }
  .solo-phone { display: block !important; }

  .testata { top: 16px; left: 16px; right: 16px; width: auto; transform: none; }
  .testata .vetro { --rv: 80px; }
  .profilo-foto { border-radius: 100px; corner-shape: round; }
  .profilo-nome { gap: 0; }
  .testata-destra { flex: 1 0 0; min-width: 0; gap: 10px; }
  .stato { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
  .stato .t-piccolo { text-align: right; }
}

/* ---------- Contenuto principale ---------- */
.principale {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 250px;
  padding: 150px 0 150px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}
.hero-testo {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.pillola {
  --r: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--grey) 0%, rgb(79, 79, 79) 0%, var(--black) 99.6762%);
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
}
.pillola .t-medio { white-space: pre; }
.hero-titoli {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: clip;
}
.hero-titoli h1 { width: 100%; max-width: 600px; text-wrap: balance; }
.hero-titoli .t-sotto { width: 100%; max-width: 350px; text-align: center; text-wrap: balance; }
.hero-testo .t-corpo { width: 100%; max-width: 350px; text-align: center; text-wrap: balance; }

/* Bottone arancio "shiny cta" */
.cta {
  --r: 57px; --fb: 0.723; --se: 1.57;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(0deg, var(--orange-300) 0.638725%, var(--orange) 53.9432%, var(--orange-600) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
  user-select: none;
}
.cta-holder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-holder .t-medio { width: 100px; text-align: center; white-space: pre-wrap; transition: transform var(--molla-045); }
.cta-holder .cta-b { position: absolute; left: 0; right: 0; top: 80px; z-index: 1; }
@media (hover: hover) {
  .cta:hover .cta-a { transform: translateY(-80px); }
  .cta:hover .cta-b { transform: translateY(-80px); }
}

/* ---------- Carosello ---------- */
.carosello {
  --altezza: 523px;
  position: relative;
  width: 100%;
  height: var(--altezza);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.carosello-area {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carosello-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.carosello-card {
  position: absolute;
  left: calc(50% - 270px);
  top: calc(50% - 335px);
  width: 540px;
  height: 670px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 25px 50px -12px;
  transition: transform 800ms ease-in-out, opacity 800ms ease-in-out;
}
.carosello-card[hidden] { display: none; }
.carosello-dentro {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.carosello-dentro video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.carosello-freccia {
  position: absolute;
  top: 50%;
  z-index: 100;
  transform: translateY(-50%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.carosello-freccia.sx { left: 0; }
.carosello-freccia.dx { right: 0; }
.carosello-freccia > svg { position: absolute; left: -0.5px; top: -0.5px; pointer-events: none; }
.carosello-freccia button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  clip-path: path("M 0,16 C 0,4.8 4.8,0 16,0 C 27.2,0 32,4.8 32,16 C 32,27.2 27.2,32 16,32 C 4.8,32 0,27.2 0,16 Z");
  background-color: var(--grey-50);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--black);
  cursor: pointer;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .principale { gap: 70px; padding: 150px 0 70px; }
  .t-titolo { font-size: 46px; }
  .carosello { --altezza: 375px; }
}
@media (max-width: 809.98px) {
  .principale { gap: 100px; padding: 150px 16px 100px; }
  .hero-testo { gap: 20px; }
  .t-titolo { font-size: 35px; }
  .hero-titoli h1, .hero-titoli .t-sotto, .hero-testo .t-corpo { max-width: 300px; }
  .carosello { --altezza: 337px; }
}

/* Entrate: nascosti finché lo script non li anima (vedi main.js, Entrate come in Framer) */
.js [data-entra]:not(.entrando):not(.entrato), .js [data-parole]:not(.entrando):not(.entrato) .p { opacity: 0.001; }

/* Livelli compositi come nell'originale (Framer li lascia dopo le animazioni di entrata):
   cambiano l'antialiasing, servono per avere gli stessi pixel. */
.testata, .pillola, .t-titolo .p, .hero-titoli .t-sotto, .hero-testo .t-corpo, .cta, .carosello, .carosello-freccia button,
.titoli .t-sotto, .intestazione-testo .t-corpo, .servizio, .servizio .vetro, .progetto-badge,
.contatti-box, .contatti-testo .t-corpo, .modulo, .contatti-link, .contatti-email, .contatti-voce, .social-icona, .cookie-pannello,
.nav-esterna, .bottone-flottante, .nav > .vetro { will-change: transform; }
.t-titolo .p { filter: blur(0px); }
.carosello-card { will-change: transform, opacity; }
.vetro-sfoca { will-change: filter; }

/* ---------- Servizi ---------- */
.servizi {
  position: relative;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
}
.intestazione {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.intestazione-testo {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
}
.titoli {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: clip;
}
.titoli h1 { width: 100%; }
.titoli .t-sotto { width: 100%; max-width: 350px; text-align: center; text-wrap: balance; }
.intestazione-testo .t-corpo { width: 100%; max-width: 350px; white-space: pre-wrap; text-align: center; }

.servizi-griglia {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-auto-rows: auto;
  justify-content: center;
  gap: 10px;
}
.servizio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  border-radius: 30px;
}
.servizio.tutto { padding: 50px; }
.servizio.piena { background-color: var(--grey-50); box-shadow: rgba(0, 0, 0, 0.1) 0 5px 20px 0; }
.servizio .vetro { --rv: 32px; }

/* Cartella: chiusa a riposo, aperta col mouse (sempre aperta su phone).
   Molla rigidità 500, smorzamento 60, massa 2 (curva calcolata con rif/molla.js). */
@property --retro-2 { syntax: "<color>"; inherits: true; initial-value: rgb(255, 139, 0); }
.cartella {
  --molla-cartella: 624ms linear(0, 0.0267, 0.0902, 0.1765, 0.2687, 0.3615, 0.4503, 0.5323, 0.6083, 0.6732, 0.7295, 0.7777, 0.8186, 0.854, 0.8823, 0.9057, 0.9249, 0.9405, 0.9535, 0.9636, 0.9717, 0.9781, 0.9832, 0.9873, 0.9903, 0.9927, 0.9946, 0.996, 0.9971, 0.9979, 0.9985, 0.999, 0.9993, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1, 1);
  position: relative;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.cartella .t-medio { white-space: pre; }
.cartella-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: perspective(2500px);
  transform-style: preserve-3d;
}
.cartella-fronte {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 180px;
  height: 111.172px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(0deg, var(--orange-300) 0.638725%, var(--orange) 53.9432%, var(--orange-600) 100%);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: translateX(-50%) perspective(2500px) rotateX(0deg);
  transition: transform var(--molla-cartella);
}
.cartella-retro {
  --retro-2: var(--orange);
  position: relative;
  width: 180px;
  height: 143.6975px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(176deg, var(--orange-600) 5%, var(--retro-2) 16.598%);
  -webkit-mask: url("../assets/img/cartella-retro-maschera.svg") center / cover no-repeat;
  mask: url("../assets/img/cartella-retro-maschera.svg") center / cover no-repeat;
  transition: --retro-2 var(--molla-cartella);
}
.cartella-foto {
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 84.7031px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--molla-cartella), box-shadow var(--molla-cartella);
}
.cartella-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgb(255, 255, 255);
  border-radius: inherit;
  pointer-events: none;
}
.cartella-foto img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; }
.cartella-foto.vuota {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='126'%3E%3Cpath d='M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z' fill='rgb(136, 136, 136, 0.2)' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 / 64px repeat;
}
.luce {
  position: absolute;
  left: -46.0469px;
  top: -26.5156px;
  width: 54px;
  height: 142px;
  overflow: hidden;
  background: linear-gradient(148deg, rgb(163, 163, 163) 0%, rgb(138, 138, 138) 100%);
  opacity: 0.22;
  filter: blur(5px);
  transition: transform var(--molla-cartella);
}
.cartella-foto.f3 { left: 90px; top: 70.4062px; transform: translate(-60px, -42.3516px) rotate(6deg); box-shadow: rgba(133, 133, 133, 0.25) 0 -1px 2px 0; }
.cartella-foto.f2 { left: 88.1875px; top: 70.4062px; transform: translate(-60px, -42.3516px) rotate(-4deg); box-shadow: rgba(122, 122, 122, 0.25) 0 -1px 2px 0; }
.cartella-foto.f1 { left: 90px; top: 70.4062px; transform: translate(-60px, -42.3516px) rotate(0deg); box-shadow: rgba(117, 117, 117, 0.25) 0 -1px 2px 0; }

/* Stato aperto: posizioni esatte dell'originale. Su phone è fisso; su desktop e tablet lo attiva il mouse
   (js/main.js) cambiando subito la posizione e compensandola con una trasformazione, come fa Framer,
   così il movimento è solo in transform e non scatta al pixel. */
.cartella.aperta .cartella-fronte { transform: translateX(-50%) perspective(2500px) rotateX(-65deg); }
.cartella.aperta .cartella-retro { --retro-2: var(--orange-300); }
.cartella.aperta .luce { left: 122px; }
.cartella.aperta .f3 { left: -29px; top: 20.1094px; transform: translate(0px, -42.3516px) rotate(-19deg); box-shadow: rgba(92, 92, 92, 0.34) 0 1px 3px 0; }
.cartella.aperta .f2 { top: -11px; transform: translate(-60px, 0px) rotate(-7deg); box-shadow: rgba(92, 92, 92, 0.3) -1px 1px 3px 0; }
.cartella.aperta .f1 { left: 154.797px; top: 20.1094px; transform: translate(-60px, -42.3516px) rotate(16deg); box-shadow: rgba(51, 51, 51, 0.18) 0 1px 2px 1px; }
.cartella.aperta.senza-seconda .f2 { display: none; }
.cartella.senza-trans .cartella-foto, .cartella.senza-trans .luce { transition: none; }
/* Dal primo passaggio del mouse Framer tiene i pezzi su livelli propri */
.cartella.mossa .cartella-fronte, .cartella.mossa .cartella-foto { will-change: transform; }

@media (max-width: 809.98px) {
  .servizi { gap: 30px; }
  .intestazione, .intestazione-testo { gap: 20px; }
  .titoli h1, .titoli .t-sotto, .intestazione-testo .t-corpo { max-width: 300px; }
  .servizi-griglia { grid-template-columns: minmax(50px, 1fr); gap: 30px 10px; }
  .servizio { padding: 30px 0; }
  .servizio.tutto { padding: 30px 50px; }
}

/* ---------- Progetti ---------- */
.progetti {
  position: relative;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
}
.intestazione-testo.aperto, .titoli.aperto { overflow: visible; }
.t-titolo.bilanciato { text-wrap: balance; white-space: normal; }
.titoli .t-sotto.largo { max-width: none; }
.progetti .intestazione-testo .t-corpo { white-space: pre-wrap; }

.progetto { position: relative; width: 100%; height: 900px; }
.progetto.lungo { height: auto; }
.progetto-card {
  --r: 70px;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--black-50) 0 15px 20px 0;
  color: inherit;
  outline: none;
  --tween-card: 0.4s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.progetto-video {
  position: relative;
  flex: 1 0 0;
  align-self: stretch;
  transform: scale(1.1);
  transition: transform var(--tween-card);
}
/* proporzioni vere del video (1080x1920): in Chrome e Safari l'originale prende queste appena il video si carica.
   893/1600 era il valore di riserva di Framer, che si vede solo nei browser senza H.264 */
.video-lungo .progetto-video { align-self: auto; aspect-ratio: 1080 / 1920; }
.progetto-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.progetto-dettagli {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -110px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  transition: transform var(--tween-card);
}
.dettagli-box {
  --r: 100px; --fb: 0.867; --se: 1.25;
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dettagli-box .vetro { --rv: 32px; }
.dettagli-riga {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.dettagli-logo {
  --r: 100px; --fb: 0.867; --se: 1.25;
  position: relative;
  flex: none;
  width: 60px;
  aspect-ratio: 1;
  overflow: hidden;
  transition: transform var(--molla-045);
}
.dettagli-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; corner-shape: inherit; }
.dettagli-titolo {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  overflow: hidden;
}
.dettagli-titolo h3 { width: 100%; white-space: pre-wrap; }
.dettagli-cta {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 20px;
  overflow: hidden;
  border-radius: 50px;
  background: var(--grey-50);
  transition: transform var(--molla-045);
}
.freccia { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: rotate(-45deg); }
.freccia svg { display: block; width: 20px; height: 20px; color: black; }

.progetto-badge {
  --r: 100px; --fb: 0.852; --se: 1.28;
  position: absolute;
  top: 33px;
  right: 30px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
  transition: transform var(--molla-045);
}
.progetto-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid var(--outline);
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
}
.progetto-badge .t-medio { white-space: pre; }
.progetto-badge .vetro { --rv: 8px; }
.progetto-card.attiva .dettagli-cta.sparisce { display: none; }

/* Stato hover della card (desktop e tablet): attivato da js/main.js con la tecnica FLIP */
.progetto-card.attiva .progetto-video { transform: scale(1); }
.progetto-card.attiva .progetto-dettagli { bottom: 10px; }
.progetto-card.attiva .dettagli-riga { overflow: visible; }
@media (hover: hover) {
  .progetto-card.attiva .dettagli-logo:hover,
  .progetto-card.attiva .dettagli-cta:hover,
  .progetto-card.attiva .progetto-badge:hover { transform: scale(1.05); }
}
.progetto-card.senza-trans .progetto-dettagli { transition: none; }
/* Dal primo passaggio del mouse Framer tiene video e bottone su livelli propri */
.progetto-card.mossa .progetto-video, .progetto-card.mossa .dettagli-cta { will-change: transform; }

.trigger { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; overflow: clip; z-index: 1; }

/* ---------- Anteprima del progetto (finestra con iframe) ---------- */
.anteprima {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anteprima-box {
  position: relative;
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 20px;
  background: rgba(219, 219, 219, 0.97);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: rgba(0, 0, 0, 0.18) 0 8px 40px, rgba(255, 255, 255, 0.7) 0 1px 0 inset;
  opacity: 0;
  transform: scale(0.96) translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.anteprima.aperta { opacity: 1; }
.anteprima.aperta .anteprima-box { opacity: 1; transform: scale(1) translateY(0); }
.anteprima-chiudi {
  position: absolute;
  top: 72px;
  right: 20px;
  z-index: 10;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: rgba(0, 0, 0, 0.18) 0 4px 16px, rgba(255, 255, 255, 0.6) 0 0.5px 0 inset;
  background: rgba(216, 217, 216, 0.28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
  outline: none;
  opacity: 0;
  transform: translateY(0) scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}
.anteprima.aperta .anteprima-chiudi { opacity: 1; }
.anteprima-chiudi:hover { transform: translateY(-3px) scale(1.08); background: rgba(216, 217, 216, 0.55); }
.anteprima iframe { flex: 1 1 0%; width: 100%; height: 100%; border: none; display: block; pointer-events: auto; }
.anteprima-carica {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.anteprima-carica span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.65);
  animation: anteprima-gira 0.9s linear infinite;
}
@keyframes anteprima-gira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 809.98px) {
  .progetti { gap: 30px; }
  .progetti .intestazione, .progetti .intestazione-testo { gap: 20px; }
  .progetto { height: 525px; }
  .progetto-card { --r: 55px; }
  .progetto-dettagli { bottom: 10px; padding: 5px; }
  .dettagli-box { padding: 10px 15px 10px 10px; }
  .dettagli-box .vetro { --rv: 27px; }
  .dettagli-riga { gap: 8px; }
  .dettagli-logo { width: 44px; }
  .dettagli-titolo { gap: 2px; }
  .dettagli-titolo h3 { text-align: right; }
  .dettagli-cta { display: none; }
  .progetto-badge { top: 25px; right: auto; left: 50%; transform: translateX(-50%); will-change: transform; }
  .progetti .titoli .t-sotto.largo { max-width: 300px; }
}

/* ---------- Contatti e footer (#contattami) ---------- */
.contatti-esterno { position: relative; z-index: 2; width: 100%; }
.contatti { position: relative; display: flex; align-items: center; justify-content: center; }
.solo-phone-br { display: none; }
.contatti-box {
  --r: 100px; --fb: 0.652; --se: 1.75;
  position: relative;
  width: 700px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  overflow: hidden;
  box-shadow: var(--black-50) 0 10px 20px 0;
}
.contatti-box > .vetro { --rv: 64px; }
.contatti-arancio {
  --r: 100px; --fb: 0.599; --se: 1.9;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  padding: 40px;
  overflow: hidden;
  background: linear-gradient(0deg, var(--orange-300) 0.638725%, var(--orange) 53.9432%, var(--orange-600) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
}
.contatti-intestazione { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.contatti-testo { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; overflow: hidden; }
.contatti-testo h1 { width: 100%; }
.contatti-testo .t-corpo { width: 100%; max-width: 350px; text-align: center; white-space: pre-wrap; }
.t-corpo.nero { color: var(--black); }

.modulo { position: relative; width: 100%; max-width: 500px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; margin: 0; }
.campo { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.campo-box {
  --r: 50px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px 16px;
  overflow: hidden;
  background: rgba(216, 217, 216, 0.1);
  box-shadow: rgba(0, 0, 0, 0.1) 0 5px 20px 0;
}
.campo-box.area { --fb: 0.652; --se: 1.75; padding: 0; }
.campo-box:focus-within::after { border-color: rgb(0, 153, 255); }
.campo-box input, .campo-box textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--black);
  font-family: "PP Neue Montreal Book";
  font-size: 16px;
  line-height: 1.2em;
  letter-spacing: 0.01em;
  font-weight: 400;
  flex: 1 0 0;
  text-overflow: ellipsis;
}
.campo:not(.area) .campo-box { height: 56px; }
.campo-box input { height: 100%; min-width: 0; overflow: clip; white-space: nowrap; }
.campo-box textarea { display: flex; min-height: 100px; padding: 20px 16px; resize: vertical; white-space: break-spaces; overflow: hidden auto; }
.campo-box input::placeholder, .campo-box textarea::placeholder { color: var(--black-50); opacity: 1; }

.invia-esterno { position: relative; width: 100%; }
.invia {
  --r: 50px;
  --molla-invia: 876ms linear(0, 0.0639, 0.214, 0.3976, 0.5884, 0.7589, 0.8966, 0.9971, 1.0621, 1.0961, 1.1074, 1.1022, 1.087, 1.067, 1.0464, 1.0281, 1.0128, 1.0015, 0.994, 0.9899, 0.9885, 0.9889, 0.9904, 0.9925, 0.9947, 0.9968, 0.9984, 0.9997, 1.0006, 1.001, 1.0012, 1.0012, 1.0011, 1.0008, 1.0006, 1.0004, 1.0002, 1, 0.9999, 0.9999, 1); /* rigidità 300, smorzamento 20, massa 1 */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(180deg, var(--grey) 0%, rgb(79, 79, 79) 0%, var(--black) 99.6762%);
  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px 0;
  transition: opacity var(--molla-invia), box-shadow var(--molla-invia);
}
.invia-holder { position: relative; flex: 1 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.invia-holder > span { display: block; width: 100%; text-align: center; white-space: pre-wrap; color: var(--grey); user-select: none; transition: transform var(--molla-invia); }
.invia-b { position: absolute; left: 0; top: 28.375px; transform: translateY(-50%); z-index: 1; }
@media (hover: hover) {
  .invia[data-stato="normale"]:hover .invia-a { transform: translateY(-28.375px); }
  .invia[data-stato="normale"]:hover .invia-b { transform: translateY(-150%); }
}
.invia-esito, .invia-spinner { display: none; }
.invia-esito { flex: 1 0 0; font-family: "PP Neue Montreal Medium", "PP Neue Montreal Medium Placeholder", sans-serif; font-weight: 500; font-size: 14px; line-height: 1em; letter-spacing: -0.03em; text-align: center; user-select: none; }
.invia-esito.ok { color: rgb(0, 217, 51); }
.invia-esito.errore { color: rgb(255, 59, 48); }
.invia-spinner { position: relative; width: 20px; height: 20px; overflow: hidden; -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); }
.invia-spinner span { position: absolute; inset: 0; background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 7.2deg, rgb(255, 255, 255) 342deg); animation: anteprima-gira 1s linear infinite; }
.invia[data-stato="invio"] .invia-holder, .invia[data-stato="ok"] .invia-holder, .invia[data-stato="errore"] .invia-holder { display: none; }
.invia[data-stato="invio"] .invia-spinner { display: block; }
.invia[data-stato="ok"] .invia-esito.ok, .invia[data-stato="errore"] .invia-esito.errore { display: block; }
.invia[data-stato="ok"], .invia[data-stato="errore"] { box-shadow: rgba(194, 194, 194, 0.5) 0 10px 20px 0; }

.contatti-link { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.contatti-link-lista { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.contatti-email, .contatti-voce { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.contatti-email span, .contatti-voce span { display: block; width: 100%; text-align: center; white-space: pre-wrap; color: var(--black); font-family: "PP Neue Montreal Medium", "PP Neue Montreal Medium Placeholder", sans-serif; font-weight: 500; }
.contatti-email span { font-size: 36px; line-height: 1.2em; }
.contatti-voce span { font-size: 20px; line-height: 1.2em; letter-spacing: 0.02em; }
.chiamami { cursor: pointer; outline: none; }

.social { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; }
.social-icona {
  --r: 17px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(216, 217, 216, 0.1) 0%, var(--grey-50) 46%, var(--grey-50) 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px 0;
  transform: none;
  transition: transform var(--molla-045);
}
.social-icona svg { display: block; width: 16px; height: 16px; color: black; }
@media (hover: hover) { .social-icona:hover { transform: translateY(-5px) scale(1.1); } }

.contatti-fondo { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 20px 0 10px; overflow: hidden; }
.apri-cookie { display: flex; align-items: flex-start; text-align: center; cursor: pointer; font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 14px; line-height: 1em; font-weight: 400; color: var(--black); }
.apri-cookie span { white-space: nowrap; }
.contatti-fondo .t-piccolo { white-space: pre; }
.contatti-fondo a { color: inherit; }

/* ---------- Banner cookie ---------- */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  padding: 20px;
  touch-action: none;
  pointer-events: none;
}
.cookie-centro { width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.cookie-pannello {
  position: relative;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms linear, transform var(--molla-cookie);
  --molla-cookie: 1016ms linear(0, 0.1037, 0.2718, 0.4235, 0.5503, 0.6505, 0.7287, 0.7895, 0.8359, 0.8727, 0.9013, 0.9234, 0.9406, 0.9537, 0.9641, 0.9721, 0.9784, 0.9832, 0.9869, 0.9899, 0.9921, 0.9939, 0.9953, 0.9963, 0.9971, 0.9978, 0.9983, 0.9987, 0.999, 0.9992, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 0.9999, 1); /* rigidità 500, smorzamento 60, massa 1 */
}
.cookie.aperto .cookie-pannello { opacity: 1; transform: none; }
/* Scelta di Walter (2 nov): il banner usa il vetro liquido come l'header invece del fondo grigio pieno */
.cookie-scheda { position: relative; border-radius: 14px; overflow: scroll; max-height: calc(100vh - 40px); scrollbar-width: none; }
.cookie-scheda > .vetro { --rv: 14px; }
/* più coprente del vetro dell'header perché il testo deve restare leggibile */
.cookie-scheda > .vetro .vetro-tinta { background: rgba(216, 217, 216, 0.82); }
.cookie-scheda > .vetro .vetro-sfoca { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cookie-dentro { position: relative; z-index: 1; }
.cookie-scheda::-webkit-scrollbar { display: none; }
.cookie-dentro { padding: 20px; }
.cookie-opzione { position: relative; }
.cookie-titolo { margin: 0 0 10px; padding: 0; font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 15px; line-height: 1em; letter-spacing: 0.01em; font-weight: 400; color: var(--black); }
.cookie-testo { margin: 0; padding: 0; font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 15px; line-height: 1.4em; color: var(--black-50); }
.cookie-testo a { color: var(--orange); text-decoration: none; }
.cookie-opzioni { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; overflow: hidden; }
.cookie-opzione { padding: 12px; border-radius: 8px; background: rgb(219, 219, 219); box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 0 inset; cursor: pointer; }
.cookie-opzione-riga { display: flex; justify-content: space-between; }
.cookie-opzione-titolo { margin: 0; font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-weight: 400; font-size: 12px; color: var(--black); }
.cookie-opzione-testo { margin: 10px 0 0; font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 12px; line-height: 1.5; color: var(--black-50); }
.cookie-interruttore { position: relative; display: flex; gap: 10px; width: 24px; height: 14px; padding: 2px; border: 0; border-radius: 20px; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; transition: background-color 0.2s; }
.cookie-interruttore span { position: relative; width: 10px; height: 10px; border-radius: 50%; background: rgb(255, 255, 255); transition: transform var(--molla-cookie); }
.cookie-interruttore[aria-checked="true"] { background-color: rgb(0, 0, 0); }
.cookie-interruttore[aria-checked="true"] span { transform: translateX(10px); }
.cookie-bottoni { display: flex; flex-direction: row; gap: 10px; margin-top: 16px; }
.cookie-bottoni input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: auto;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1em;
  cursor: pointer;
  font-weight: unset;
  font-family: "CUSTOM;PP Editorial New Regular", sans-serif;
  letter-spacing: 0em;
  background: rgb(0, 0, 0);
  color: rgb(219, 219, 219);
  transition: opacity 0.2s;
  will-change: transform;
}
.cookie-bottoni input.primario { background: var(--orange); color: var(--black); }
@media (hover: hover) { .cookie-bottoni input:hover { opacity: 0.6; } }
.cookie-bottoni input:active { opacity: 0.4; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .contatti-box { width: 700px; }
}
@media (max-width: 809.98px) {
  .contatti-esterno { width: 100%; }
  .contatti { width: 100%; }
  .contatti-box { width: 100%; padding: 5px; }
  .contatti-arancio { gap: 30px; padding: 30px 20px; }
  .contatti-intestazione { gap: 20px; }
  .contatti-testo h1 { font-size: 45px; line-height: 1.15em; }
  .contatti-fondo { flex-direction: column; gap: 10px; padding: 15px 0 20px; }
  .contatti-fondo .piva { order: -1; }
  .solo-phone-br { display: inline; }
}

/* ---------- Nav fissa in basso ---------- */
.nav-esterna {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 9;
  width: 361px;
  max-width: 700px;
  height: 54px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}
.nav {
  --r: 100px;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 5px;
  overflow: visible;
  transition: transform var(--molla-045);
}
/* In Framer la nav ha un hover (y -5, scala 1,1) che però sul sito pubblicato non si attiva: non replicato */
.nav > .vetro { --rv: 19px; }
.nav-link { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 50px; }
.bottone-flottante {
  --r: 57px; --fb: 0.723; --se: 1.57;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(216, 217, 216, 0.1) 0%, var(--grey-50) 46%, var(--grey-50) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
  --tween-bottone: 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}
.bottone-icona { position: relative; width: 24px; height: 23px; flex: none; }
.bottone-icona svg { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; overflow: hidden; }
.bottone-testi { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bottone-testi .t-medio { white-space: pre; transition: transform var(--tween-bottone); }
.bottone-b { position: absolute; left: 0; top: 38px; }
@media (hover: hover) {
  .bottone-flottante:hover .bottone-testi .t-medio { transform: translateY(-38px); }
}
.nav-logo { position: relative; flex: none; width: 61px; aspect-ratio: 2.9242424242424243; }
.nav-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nav-cta { align-self: stretch; }

@media (max-width: 809.98px) {
  .nav-esterna { left: 16px; right: 16px; bottom: 16px; width: auto; margin: 0; }
  .nav { border-radius: 100px; corner-shape: round; }
  .nav > .vetro { --rv: 40px; }
  .bottone-flottante, .nav-cta { border-radius: 57px; corner-shape: round; }
  .nav-link { align-self: stretch; }
  .bottone-flottante { align-self: stretch; }
  .bottone-icona { height: 24px; }
}

/* ---------- Preloader ---------- */
/* Strato alto quanto lo schermo in cima alla pagina, sotto i contenuti (che all'inizio sono invisibili). */
.preloader { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; overflow: hidden; }
.preloader-strato { position: absolute; inset: 0; z-index: 60; display: block; }
.preloader-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(0deg, var(--orange-300) 0%, var(--orange) 50%, var(--orange-600) 100%); }
.preloader-testo-box { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.preloader-testo { font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 35px; letter-spacing: -0.01em; line-height: 1em; color: var(--black); opacity: 0; filter: blur(10px); }
.preloader.finito { display: none; }

/* ---------- Cursore personalizzato (componente "Custom Cursor NODEN" di Framer) ---------- */
.cursore-nascosto, .cursore-nascosto * { cursor: none !important; }
#cursore {
  position: fixed; top: 0; left: 0; z-index: 13; pointer-events: none;
  width: 80px; height: 80px; overflow: visible; mix-blend-mode: difference;
  opacity: 0; transform: translate(-50%, -50%);
}
#cursore[hidden] { display: none; }
.cursore-anello {
  border-radius: calc(50% * var(--uno, 0.752)); corner-shape: superellipse(1.5);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; place-content: center; align-items: center;
  flex: 0 0 auto; gap: 0; overflow: clip; background-color: var(--orange); mix-blend-mode: difference;
}
.cursore-testo { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; white-space: pre; opacity: 0; }
.cursore-testo h3 { min-width: auto; min-height: auto; }
#cursore.v-hover .cursore-anello { width: 72px; }
#cursore.v-hover .cursore-testo { opacity: 1; will-change: transform; }
#cursore.v-focus .cursore-anello { width: 34px; }
#cursore.premuto .cursore-anello { width: 34px; }
#cursore.v-hover.premuto .cursore-anello { width: 80px; }
#cursore.v-focus.premuto .cursore-anello { width: 40px; }

/* ---------- Scheda bio (overlay Framer XNKsfPvcc, valori letti in sola lettura) ---------- */
/* Lo sfondo grigio compare e sparisce di colpo; contenitore e scheda entrano ed escono con la molla 0,7 s rimbalzo 0,2. */
.bio { position: fixed; inset: 0; z-index: 10; }
.bio[hidden] { display: none; }
.bio-fondo { position: fixed; inset: 0; background: var(--black-50); }
.bio-contenitore {
  --r: 50px;
  position: fixed;
  top: 25px;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  width: 58%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px;
  overflow: hidden auto;
  will-change: transform;
}
.bio-contenitore > .vetro { --rv: 39px; }
.bio-scheda {
  --r: 42px;
  position: relative;
  width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  padding: 40px;
  overflow: hidden;
  background: linear-gradient(0deg, var(--orange-300) 0.638725%, var(--orange) 53.9432%, var(--orange-600) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 20px 0;
  will-change: transform;
}
.bio-blocco { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.bio-blocco > h3 { width: 100%; margin: 0; }
.bio-svolta { max-width: 80%; }
.bio-faccio { max-width: 70%; }
.bio-titolo { color: var(--black); font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 23px; line-height: 1.4em; font-weight: 400; text-align: left; }
.bio-voce { color: var(--black); font-family: "Advercase Demo Regular", "Advercase Demo Regular Placeholder", sans-serif; font-size: 16px; line-height: 1.4em; font-weight: 400; }
.bio-testo { color: var(--black); font-family: "PP Neue Montreal Book", "PP Neue Montreal Book Placeholder", sans-serif; font-size: 14px; line-height: 1.2em; letter-spacing: 0.01em; font-weight: 400; }
.bio-foto { position: absolute; right: -20px; bottom: -48px; z-index: 1; width: 240px; aspect-ratio: 1611 / 2000; overflow: clip; }
.bio-foto img { width: 100%; height: 100%; object-fit: cover; }
.bio-chiudi {
  --r: 17px;
  position: absolute;
  left: 625px;
  top: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px;
  overflow: hidden;
  font: inherit;
  color: var(--black);
  background: linear-gradient(0deg, rgba(216, 217, 216, 0.1) 0%, var(--grey-50) 46%, var(--grey-50) 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px 0;
  cursor: pointer;
  will-change: transform;
  transition: transform var(--molla-045);
}
.bio-chiudi svg { display: block; width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) {
  .bio-chiudi:hover { transform: translateY(-5px) scale(1.1); }
}
@media (max-width: 809.98px) {
  .bio-contenitore { top: 16px; left: 16px; right: 16px; translate: none; width: auto; height: 90vh; max-height: none; }
  .bio-scheda { flex: 1 0 0px; height: 1px; overflow: hidden auto; padding: 20px 20px 100px 20px; }
  .bio-intro { align-items: flex-start; }
  .bio-intro .bio-titolo { width: 80%; }
  .bio-svolta { max-width: none; }
  .bio-foto { right: -82px; bottom: -42px; }
  .bio-chiudi { left: auto; right: 19px; }
}

/* ---------- Menu lingue (overlay Framer D7IPiKFpG sotto il globo) ---------- */
/* Centrato sotto il globo a 10 px, mai a meno di 20 px dal bordo dello schermo. Il box entra ed esce in opacità con
   la molla 0,4 s rimbalzo 0,2; le voci compaiono con un tween di 0,4 s dopo 0,1 s. La zona "sicura" a triangolo tra
   globo e menu evita che il menu si chiuda mentre il mouse scende verso le voci, come in Framer. */
.lingue { position: fixed; z-index: 11; }
.lingue[hidden] { display: none; }
.lingue.chiudendo { pointer-events: none; }
.lingue-sicura { position: absolute; left: 0; bottom: 0; }
.lingue-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(14, 16, 17, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0;
  transform-origin: 50% 0;
  will-change: transform;
}
.lingue-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 253, 244, 0.5);
  border-radius: inherit;
  pointer-events: none;
}
.lingue-voce {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 9px;
  border: 0;
  border-radius: 100px;
  overflow: hidden;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.lingue-voce svg { display: block; flex: none; width: 20px; height: 20px; }
.lingue-voce .t-corpo { white-space: pre; transition: color 464ms linear(0, 0.0305, 0.1038, 0.2058, 0.314, 0.4229, 0.5263, 0.6204, 0.7032, 0.7768, 0.8353, 0.8829, 0.9207, 0.9499, 0.9719, 0.9886, 0.9996, 1.0069, 1.0113, 1.0136, 1.0144, 1.014, 1.0131, 1.0117, 1.0102, 1.0086, 1.007, 1.0056, 1.0044, 1.0034, 1.0025, 1.0018, 1.0012, 1.0008, 1.0004, 1.0002, 1, 0.9999, 0.9998, 0.9998, 1); }
@media (hover: hover) {
  .lingue-voce:hover .t-corpo { color: var(--black); }
}

/* Inglese: tiene insieme due parole del titolo animato parola per parola */
.unite { white-space: nowrap; }