/* Studio Pitagora del Dott. Michele Mercuri · foglio di stile unico */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@property --angolo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --navy-950: #050f20;
  --navy-900: #0a1d38;
  --navy-800: #0f2a4f;
  --navy-700: #173a6b;
  --blu-700: #0a5996;
  --blu-600: #0c6fb8;
  --blu-500: #1784cf;
  --azzurro-400: #4fb3ec;
  --azzurro-200: #b9e5fb;
  --azzurro-50: #eef7fd;
  --arancio-700: #a8560a;
  --arancio-500: #f39212;
  --ambra-400: #fbb829;
  --ambra-100: #fff3d9;

  --carta: #f6f8fb;
  --bianco: #ffffff;
  --inchiostro: #0e1b2e;
  --testo: #2b3a50;
  --tenue: #56667d;
  --linea: #e2e8f0;
  --linea-scura: rgba(255, 255, 255, .12);

  --grad-arancio: linear-gradient(135deg, #fdc23a 0%, #f39212 100%);
  --grad-blu: linear-gradient(135deg, #4fb3ec 0%, #0c6fb8 100%);
  --grad-marchio: linear-gradient(100deg, #4fb3ec 0%, #8fd0f5 35%, #fbb829 65%, #f39212 100%);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accento: "Instrument Serif", Georgia, serif;

  --t-hero: clamp(2.25rem, 1.15rem + 3.9vw, 4.4rem);
  --t-h1: clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem);
  --t-h2: clamp(1.95rem, 1.35rem + 2.3vw, 3.2rem);
  --t-h3: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);

  --raggio: 20px;
  --raggio-s: 12px;
  --ombra-s: 0 1px 2px rgba(10, 29, 56, .06), 0 4px 14px rgba(10, 29, 56, .06);
  --ombra-m: 0 2px 6px rgba(10, 29, 56, .06), 0 18px 44px rgba(10, 29, 56, .12);
  --ombra-l: 0 30px 80px rgba(5, 15, 32, .28);

  --larghezza: 1200px;
  --margine: clamp(16px, 4vw, 40px);
  --sezione: clamp(72px, 9vw, 130px);
  --testata-h: 76px;
  --durata-slide: 7s;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-molla: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--testata-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--testo);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main, .piede { overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--inchiostro); margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 750; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1 em, h2 em, .accento {
  font-family: var(--font-accento);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
::selection { background: var(--ambra-400); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--blu-700); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .hero-pagina :focus-visible, .testata:not(.scorrimento) :focus-visible, .menu-mobile :focus-visible, .piede :focus-visible,
.missione :focus-visible, .fattori :focus-visible, .banda :focus-visible, .palco__recapiti :focus-visible, .obiettivi__pannelli :focus-visible,
.area:focus-visible, .invito__scatola :focus-visible, .mappa__scheda :focus-visible, .nastro :focus-visible, .tessera.attiva:focus-visible { outline-color: var(--ambra-400); }

.contenitore { width: 100%; max-width: calc(var(--larghezza) + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }
.salta {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  background: var(--ambra-400); color: var(--navy-900); padding: 10px 16px; border-radius: 10px; font-weight: 700;
  transition: top .2s;
}
.salta:focus { top: 12px; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- transizione tra pagine ---------- */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root) { animation: vt-esce .32s var(--curva) both; }
::view-transition-new(root) { animation: vt-entra .5s var(--curva) both; }
@keyframes vt-esce { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(18px); } }
.testata { view-transition-name: testata; }

/* ---------- bottoni ---------- */
.bottone {
  --bx: 0px; --by: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.55em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .98rem; line-height: 1.1; letter-spacing: .005em; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  transform: translate(var(--bx), var(--by));
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), background-color .25s, color .25s, border-color .25s;
}
.bottone svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .35s var(--curva); }
.bottone:hover svg.freccia { transform: translateX(4px); }
.bottone::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--curva);
}
.bottone:hover::after { transform: translateX(120%); }
.bottone--arancio { background: var(--grad-arancio); color: var(--navy-900); box-shadow: 0 10px 30px -10px rgba(243, 146, 18, .65); }
.bottone--arancio:hover { box-shadow: 0 16px 40px -12px rgba(243, 146, 18, .8); }
.bottone--blu { background: var(--blu-600); color: #fff; box-shadow: 0 10px 30px -12px rgba(12, 111, 184, .7); }
.bottone--blu:hover { background: var(--blu-700); }
.bottone--vetro { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bottone--vetro:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.bottone--contorno { background: transparent; color: var(--blu-700); border-color: rgba(12, 111, 184, .35); }
.bottone--contorno:hover { background: var(--azzurro-50); border-color: var(--blu-600); }

.etichetta {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blu-600); margin: 0 0 1.1rem;
}
.etichetta::before {
  content: ""; width: 26px; height: 8px; flex: none;
  background:
    radial-gradient(circle at 4px 4px, var(--azzurro-400) 3.2px, transparent 3.6px),
    radial-gradient(circle at 13px 4px, var(--blu-500) 3.2px, transparent 3.6px),
    radial-gradient(circle at 22px 4px, var(--arancio-500) 3.2px, transparent 3.6px);
}
.etichetta--spaziata { letter-spacing: .34em; font-weight: 750; color: var(--arancio-700); }
.hero .etichetta, .hero-pagina .etichetta, .missione .etichetta, .fattori .etichetta, .banda .etichetta, .palco .etichetta { color: var(--ambra-400); }

/* icone che si disegnano quando entrano nella pagina */
.js .area__icona svg > *, .js .principio__icona svg > *, .js .fattore__icona svg > *,
.js .voce__icona svg > *, .js .pannello__icona svg > * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.js .area.visibile .area__icona svg > *, .js .principio.visibile .principio__icona svg > *,
.js .fattore.visibile .fattore__icona svg > *, .js .voce.visibile .voce__icona svg > * {
  animation: traccia 1.6s var(--curva) calc(.35s + var(--i, 0) * 90ms) both;
}

/* ---------- testata ---------- */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: #fff;
  transition: background-color .4s var(--curva), box-shadow .4s var(--curva), color .3s, transform .45s var(--curva);
}
.barra-info {
  border-bottom: 1px solid var(--linea-scura);
  font-size: .82rem; color: rgba(255, 255, 255, .78);
  overflow: hidden; max-height: 44px;
  transition: max-height .45s var(--curva), opacity .3s, border-color .3s;
}
.barra-info__riga { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 40px; }
.barra-info__titolare { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-info__titolare strong { color: #fff; font-weight: 750; }
.barra-info ul { display: flex; gap: 24px; flex: none; }
.barra-info li, .barra-info a { display: inline-flex; align-items: center; gap: 8px; }
.barra-info svg { width: 15px; height: 15px; color: var(--ambra-400); flex: none; }
.barra-info a:hover { color: #fff; }
.testata__riga { display: flex; align-items: center; gap: 28px; height: var(--testata-h); transition: height .4s var(--curva); }
.marchio { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.marchio__sfere { width: 62px; height: auto; transition: transform .6s var(--curva-molla); }
.marchio:hover .marchio__sfere { transform: rotate(-8deg) scale(1.06); }
.marchio__testo { position: relative; width: 150px; }
.marchio__testo img { width: 100%; height: auto; transition: opacity .3s; }
.marchio__testo .su-chiaro { position: absolute; inset: 0; opacity: 0; }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: 6px; }
.menu a {
  position: relative; display: block; padding: 10px 16px; border-radius: 999px;
  font-weight: 650; font-size: .96rem; color: rgba(255, 255, 255, .86);
  transition: color .25s, background-color .25s;
}
.menu a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--grad-arancio); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--curva);
}
.menu a:hover { color: #fff; }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu a[aria-current="page"] { color: #fff; }
.testata__cta { padding: .8em 1.3em; font-size: .92rem; }
.testata__tel { display: none; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-left: auto; background: var(--grad-arancio); color: var(--navy-900); box-shadow: 0 8px 20px -10px rgba(243, 146, 18, .7); }
.testata__tel svg { width: 20px; height: 20px; }

.testata.scorrimento {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 rgba(10, 29, 56, .06), 0 10px 30px -18px rgba(10, 29, 56, .35);
  color: var(--inchiostro);
}
.testata.scorrimento .barra-info { max-height: 0; opacity: 0; border-color: transparent; }
.testata.scorrimento .testata__riga { height: 68px; }
.testata.scorrimento .marchio__testo .su-chiaro { opacity: 1; }
.testata.scorrimento .marchio__testo .su-scuro { opacity: 0; }
.testata.scorrimento .menu a { color: var(--testo); }
.testata.scorrimento .menu a:hover, .testata.scorrimento .menu a[aria-current="page"] { color: var(--inchiostro); }
.testata.nascosta { transform: translateY(-100%); }

.hamburger {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06);
  position: relative; cursor: pointer;
}
.hamburger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--curva), top .4s var(--curva); }
.hamburger span:nth-child(1) { top: 18px; }
.hamburger span:nth-child(2) { top: 26px; }
.testata.scorrimento .hamburger { border-color: var(--linea); background: #fff; }
.menu-aperto .hamburger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-aperto .hamburger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(120% 80% at 100% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: #fff; padding: calc(var(--testata-h) + 40px) var(--margine) 40px;
  display: flex; flex-direction: column; gap: 28px;
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path .7s var(--curva); visibility: hidden;
}
.menu-aperto .menu-mobile { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
.menu-aperto .testata { background: transparent; box-shadow: none; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-aperto .testata .marchio__testo .su-chiaro { opacity: 0; }
.menu-aperto .testata .marchio__testo .su-scuro { opacity: 1; }
.menu-aperto .testata .hamburger { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); }
.menu-mobile ul { display: grid; gap: 4px; }
.menu-mobile li { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--curva), transform .6s var(--curva); transition-delay: calc(.15s + var(--i, 0) * .07s); }
.menu-aperto .menu-mobile li { opacity: 1; transform: none; }
.menu-mobile ul a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 750; letter-spacing: -.03em; }
.menu-mobile ul a small { font-size: .9rem; font-weight: 600; color: var(--ambra-400); letter-spacing: 0; }
.menu-mobile ul a[aria-current="page"] { color: var(--azzurro-400); }
.menu-mobile__piede { margin-top: auto; display: grid; gap: 12px; color: rgba(255, 255, 255, .75); font-size: .95rem; }
.menu-mobile__piede strong { color: #fff; }
.menu-mobile__piede a, .menu-mobile__piede span { display: inline-flex; align-items: center; gap: 10px; }
.menu-mobile__piede svg { width: 18px; height: 18px; color: var(--ambra-400); flex: none; }
.menu-aperto { overflow: hidden; }

/* ---------- hero home con schede a rotazione ---------- */
.hero {
  --mx: 0; --my: 0; --n: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(760px, 100svh);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--testata-h) + 80px) 0 170px;
  background: radial-gradient(130% 90% at 80% 10%, var(--navy-700) 0%, var(--navy-900) 46%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, .82);
}
.hero__rete, .hero-pagina__rete { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__griglia {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 70% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 70% 40%, #000 20%, transparent 80%);
}
.bagliore { position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; transition: translate 2s var(--curva), opacity 2s; }
.bagliore--blu { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -8vw; top: -10vw; background: radial-gradient(circle, #1f7fd0 0%, transparent 68%); animation: deriva 18s ease-in-out infinite alternate; }
.bagliore--arancio { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; right: 18vw; bottom: -14vw; background: radial-gradient(circle, rgba(243, 146, 18, .7) 0%, transparent 68%); opacity: .35; animation: deriva 22s ease-in-out infinite alternate-reverse; }
.hero .bagliore--arancio { translate: calc(var(--n) * -9vw) calc(var(--n) * -2vw); opacity: calc(.3 + var(--n) * .06); }
.hero .bagliore--blu { translate: calc(var(--n) * 4vw) calc(var(--n) * 3vw); }
@keyframes deriva {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4vw, 3vw) scale(1.08); }
  100% { transform: translate(2vw, -2vw) scale(.96); }
}
.hero__corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.hero__marca {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 18px 9px 12px; border-radius: 999px; margin: 0 0 34px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  font-size: .92rem; font-weight: 800; letter-spacing: .01em; line-height: 1.3; color: #fff;
}
.hero__marca > span:last-child { font-weight: 600; color: rgba(255, 255, 255, .72); }
.occhiello__punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ambra-400); box-shadow: 0 0 0 0 rgba(251, 184, 41, .6); animation: pulsa 2.4s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(251, 184, 41, .55); } 70% { box-shadow: 0 0 0 12px rgba(251, 184, 41, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 184, 41, 0); } }

.vetrina { display: grid; }
.vetrina__slide { grid-area: 1 / 1; }
html:not(.js) .vetrina__slide:not(:first-child) { display: none; }
.js .vetrina__slide { visibility: hidden; pointer-events: none; }
.js .vetrina__slide.attiva, .js .vetrina__slide.uscita { visibility: visible; }
.js .vetrina__slide.attiva { pointer-events: auto; }
.vetrina__area {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ambra-400);
}
.vetrina__area span {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(251, 184, 41, .5); font-size: .78rem; letter-spacing: .04em; color: #fff;
}
.vetrina__titolo { font-size: var(--t-hero); color: #fff; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 24px; max-width: 13.5em; }
.vetrina__titolo em, .hero-pagina h1 em {
  background: var(--grad-marchio); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.js [data-split] em { background: none; color: inherit; padding-right: 0; }
.js .vetrina__titolo em .parola > span, .js .hero-pagina h1 em .parola > span {
  background: var(--grad-marchio); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .08em .22em 0; margin-bottom: -.22em;
}
.vetrina__testo { font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); max-width: 34em; color: rgba(255, 255, 255, .76); margin-bottom: 34px; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 14px; }

.js .vetrina__slide .vetrina__area, .js .vetrina__slide .vetrina__testo, .js .vetrina__slide .hero__azioni {
  opacity: 0; translate: 0 22px;
  transition: opacity .7s var(--curva), translate .9s var(--curva);
}
.pronto .vetrina__slide.attiva .vetrina__area { opacity: 1; translate: none; transition-delay: .05s; }
.pronto .vetrina__slide.attiva .vetrina__testo { opacity: 1; translate: none; transition-delay: .45s; }
.pronto .vetrina__slide.attiva .hero__azioni { opacity: 1; translate: none; transition-delay: .6s; }
.js .vetrina__slide.uscita .vetrina__area, .js .vetrina__slide.uscita .vetrina__testo, .js .vetrina__slide.uscita .hero__azioni {
  opacity: 0; translate: 0 -14px; transition-duration: .35s; transition-delay: 0s;
}

.hero__visivo { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.orbita {
  position: absolute; border-radius: 50%; border: 1px dashed rgba(185, 229, 251, .22);
  transform: translate(calc(var(--mx) * var(--p, 6px)), calc(var(--my) * var(--p, 6px)));
}
.orbita::before {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; top: -5px; left: calc(50% - 5px);
  background: var(--c, var(--azzurro-400)); box-shadow: 0 0 18px var(--c, var(--azzurro-400));
}
.orbita--1 { inset: 4%; --p: 10px; animation: gira 46s linear infinite; }
.orbita--2 { inset: 17%; --p: 18px; --c: var(--ambra-400); border-style: solid; border-color: rgba(255, 255, 255, .07); animation: gira 30s linear infinite reverse; }
.orbita--3 { inset: 30%; --p: 26px; border-color: rgba(251, 184, 41, .18); animation: gira 22s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
.hero__alone { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(79, 179, 236, .28) 0%, rgba(79, 179, 236, 0) 70%); filter: blur(10px); }
.hero__ruota { position: relative; z-index: 1; width: 96%; display: grid; place-items: center; }
.hero__visivo.in-orbita .chip {
  left: 50%; top: 50%; right: auto; bottom: auto; opacity: 0; animation: none !important; transition: none;
  transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--os, 1)); will-change: transform, opacity;
}
.hero__ellisse { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(251, 184, 41, .3); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--curva); }
.pronto .hero__ellisse { opacity: 1; }
.hero .spirale { transition: filter .8s var(--curva); }
.hero .spirale.in-volo { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)) drop-shadow(0 0 24px rgba(79, 179, 236, .5)); }
.hero__impulso { position: absolute; inset: 22%; border-radius: 50%; border: 1.5px solid rgba(251, 184, 41, .6); box-shadow: 0 0 40px rgba(251, 184, 41, .25) inset; opacity: 0; pointer-events: none; }
.hero__impulso.via { animation: impulso 1.5s var(--curva) both; }
@keyframes impulso { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
.spirale { position: relative; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.spirale .g-blu { transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); transition: transform .9s var(--curva); }
.spirale .g-arancio { transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 10px)); transition: transform .9s var(--curva); }
.spirale circle { transform-box: fill-box; transform-origin: center; }
.js .spirale circle { opacity: 0; }
.pronto .spirale circle {
  animation:
    sfera-entra 1.1s var(--curva-molla) both,
    sfera-respira 5.5s ease-in-out infinite;
  animation-delay: calc(.25s + var(--i) * .075s), calc(1.6s + var(--i) * .2s);
}
.pronto .spirale .g-blu circle { --da-x: -140px; }
.pronto .spirale .g-arancio circle { --da-x: 140px; }
@keyframes sfera-entra {
  from { opacity: 0; transform: translateX(var(--da-x)) scale(0); }
  to { opacity: 1; transform: none; }
}
@keyframes sfera-respira {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 12px; border-radius: 16px;
  background: rgba(15, 42, 79, .55); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  font-size: .9rem; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.3;
  transform: translate(calc(var(--mx) * var(--p)), calc(var(--my) * var(--p)));
  transition: transform 1s var(--curva);
}
.chip__icona { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-arancio); color: var(--navy-900); flex: none; }
.chip__icona--blu { background: var(--grad-blu); color: #fff; }
.chip svg { width: 18px; height: 18px; }
.chip small { display: block; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .6); }
.chip--1 { top: 2%; left: -2%; --p: -22px; }
.chip--2 { top: 9%; right: -5%; --p: 26px; }
.chip--3 { bottom: 2%; left: 4%; --p: 18px; }
.js .chip { opacity: 0; }
.pronto .chip { animation: chip-entra .9s var(--curva) both, galleggia 7s ease-in-out infinite; }
.pronto .chip--1 { animation-delay: 1.25s, 2.2s; }
.pronto .chip--2 { animation-delay: 1.45s, 2.9s; }
.pronto .chip--3 { animation-delay: 1.65s, 3.4s; }
@keyframes chip-entra { from { opacity: 0; translate: 0 24px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* schede numerate sotto l'hero */
.schede-vetrina { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--bianco); box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .5); }
.schede-vetrina__riga { display: flex; align-items: stretch; }
.schede-vetrina__elenco { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheda-v {
  position: relative; display: grid; gap: 4px; align-content: center; text-align: left;
  padding: 22px 26px 24px; border: 0; border-left: 1px solid var(--linea); background: transparent; cursor: pointer;
  color: var(--tenue); transition: color .3s, background-color .3s;
}
.scheda-v:last-child { border-right: 1px solid var(--linea); }
.scheda-v::before {
  content: ""; position: absolute; left: 30px; top: -11px; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid var(--bianco);
  opacity: 0; translate: 0 6px; transition: opacity .35s, translate .45s var(--curva);
}
.scheda-v:hover { color: var(--inchiostro); background: var(--carta); }
.scheda-v.attiva { color: var(--inchiostro); }
.scheda-v.attiva::before { opacity: 1; translate: none; }
.scheda-v__num { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--tenue); transition: color .3s; }
.scheda-v.attiva .scheda-v__num { color: var(--blu-600); }
.scheda-v:nth-child(even).attiva .scheda-v__num { color: var(--arancio-700); }
.scheda-v__nome { font-weight: 750; font-size: .96rem; }
.scheda-v__barra { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-marchio); transform: scaleX(0); transform-origin: left; }
.pronto .scheda-v.attiva .scheda-v__barra { animation: riempi var(--durata-slide) linear both; }
.pronto .scheda-v.primo .scheda-v__barra { animation-delay: 2.6s; }
.pronto .scheda-v.ferma .scheda-v__barra { animation: none; transform: scaleX(1); }
.hero.in-pausa .scheda-v.attiva .scheda-v__barra { animation-play-state: paused; }
@keyframes riempi { to { transform: scaleX(1); } }
.hero.tutto-fermo *, .hero.tutto-fermo *::before, .hero.tutto-fermo *::after { animation-play-state: paused !important; }
.vetrina__pausa {
  flex: none; width: 64px; border: 0; border-left: 1px solid var(--linea); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--tenue); transition: color .3s, background-color .3s;
}
.vetrina__pausa:hover { color: var(--inchiostro); background: var(--carta); }
.vetrina__pausa span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.vetrina__pausa.ferma span { width: 0; height: 0; border-left: 12px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px; }

/* titolo diviso in parole */
.parola { display: inline-block; overflow: clip; overflow-clip-margin: .3em; vertical-align: top; padding-bottom: .22em; margin-bottom: -.22em; }
.parola > span { display: inline-block; }
.js [data-split] .parola > span { transform: translateY(110%); opacity: 0; }
.pronto [data-split].visibile:not(.vetrina__titolo) .parola > span { animation: parola-sale 1s var(--curva) both; animation-delay: calc(.15s + var(--i) * .055s); }
.pronto .vetrina__slide.attiva .vetrina__titolo .parola > span { animation: parola-sale 1s var(--curva) both; animation-delay: calc(.12s + var(--i) * .045s); }
.vetrina__slide.uscita .vetrina__titolo .parola > span { animation: parola-esce .5s var(--curva) both; animation-delay: calc(var(--i) * .015s); }
@keyframes parola-sale { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes parola-esce { from { transform: none; opacity: 1; } to { transform: translateY(-110%); opacity: 0; } }

/* ---------- comparsa allo scorrimento ---------- */
.js [data-reveal] {
  opacity: 0; translate: 0 34px;
  transition: opacity .9s var(--curva), translate 1s var(--curva), scale 1s var(--curva), clip-path 1.3s var(--curva), transform .5s var(--curva), box-shadow .5s var(--curva), border-color .4s, background-color .4s, color .3s;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 120ms), 0s, 0s, 0s, 0s, 0s;
}
.js [data-reveal="sinistra"] { translate: -46px 0; }
.js [data-reveal="destra"] { translate: 46px 0; }
.js [data-reveal="zoom"] { translate: none; scale: .92; }
.js [data-reveal="tendina"] { opacity: 1; translate: none; }
.js [data-reveal="tendina"] picture { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--curva) calc(var(--i, 0) * 140ms); }
.js [data-reveal].visibile { opacity: 1; translate: none; scale: none; }
.js [data-reveal="tendina"].visibile picture { clip-path: inset(0 0 0 0); }
.hero [data-reveal], .hero-pagina [data-reveal] { transition-delay: calc(.55s + var(--i, 0) * 120ms); }

/* ---------- nastro ---------- */
.nastro {
  position: relative; z-index: 2; overflow: hidden;
  background: var(--navy-950); color: rgba(255, 255, 255, .85);
  border-block: 1px solid rgba(255, 255, 255, .06);
  padding: 20px 0;
}
.nastro::before, .nastro::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none; }
.nastro::before { left: 0; background: linear-gradient(90deg, var(--navy-950), transparent); }
.nastro::after { right: 0; background: linear-gradient(270deg, var(--navy-950), transparent); }
.nastro__pausa {
  position: absolute; right: 10px; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: var(--navy-900); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.nastro__pausa span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.nastro.fermo .nastro__pausa span { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.nastro__binario { display: flex; width: max-content; animation: nastro 52s linear infinite; }
.nastro { cursor: pointer; }
.nastro:hover .nastro__binario, .nastro.fermo .nastro__binario { animation-play-state: paused; }
.nastro ul { display: flex; align-items: center; flex: none; }
.nastro li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 650; white-space: nowrap; letter-spacing: -.01em; }
.nastro li::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-arancio); flex: none; }
.nastro li:nth-child(even)::after { background: var(--grad-blu); }
.nastro li em { font-family: var(--font-accento); font-style: italic; font-weight: 400; font-size: 1.15em; color: var(--ambra-400); }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ---------- sezioni ---------- */
.sezione { position: relative; padding: var(--sezione) 0; }
.sezione--bianca { background: var(--bianco); }
/* contatti: sezioni brevi, spazi verticali più stretti */
.pagina-contatti { --sezione: clamp(52px, 6vw, 84px); }
.pagina-contatti .intestazione { margin-bottom: clamp(28px, 3.5vw, 44px); }
.intestazione { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.intestazione--centro { margin-inline: auto; text-align: center; }
.intestazione--centro .etichetta { justify-content: center; }
.intestazione h2 { font-size: var(--t-h2); margin-bottom: 18px; }
.intestazione h2 em { color: var(--blu-600); }
.intestazione p { font-size: 1.12rem; color: var(--tenue); margin: 0; }
.intestazione--riga { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.intestazione--riga > div { max-width: 720px; }

/* ---------- presentazione ---------- */
.presentazione__griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 96px); align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.dichiarazione { font-size: clamp(1.6rem, 1.05rem + 1.95vw, 2.7rem); line-height: 1.24; letter-spacing: -.028em; font-weight: 720; }
.dichiarazione em { font-size: 1.08em; color: var(--blu-600); }
.js .dichiarazione .w { color: rgba(14, 27, 46, .3); transition: color .4s var(--curva); }
.js .dichiarazione .w.accesa { color: var(--inchiostro); }
.js .dichiarazione em .w.accesa { color: var(--blu-600); }
.presentazione__lato { color: var(--testo); font-size: 1.05rem; }
.firma-blocco { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.firma-testo { font-family: var(--font-accento); font-style: italic; font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem); line-height: 1; color: var(--navy-800); margin: 0; padding: .05em .1em .1em 0; }
.js .firma-testo { clip-path: inset(-10% 100% -25% 0); transition: clip-path 2s var(--curva) .25s; }
.js .firma-blocco.disegnato .firma-testo { clip-path: inset(-10% -6% -25% 0); }
.firma-segno { width: min(260px, 70%); height: auto; margin: 4px 0 10px; overflow: visible; }
.firma-segno path { fill: none; stroke: var(--arancio-500); stroke-width: 2.6; stroke-linecap: round; }
.js .firma-segno path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--curva) 1.5s; }
.js .firma-blocco.disegnato .firma-segno path { stroke-dashoffset: 0; }
.firma-ruolo { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }

.principi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.principio {
  --lx: 50%; --ly: 50%;
  position: relative; padding: 34px 30px 30px; border-radius: var(--raggio); overflow: hidden; isolation: isolate;
  background: var(--carta); border: 1px solid var(--linea);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), border-color .4s;
}
.principio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--angolo), transparent 0 55%, var(--azzurro-400) 72%, var(--arancio-500) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s; animation: ruota-angolo 3.6s linear infinite;
}
.principio::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(320px circle at var(--lx) var(--ly), rgba(79, 179, 236, .14), transparent 65%); }
.principio:hover { transform: translateY(-6px); box-shadow: var(--ombra-m); border-color: transparent; background: #fff; }
.principio:hover::before, .principio:hover::after { opacity: 1; }
@keyframes ruota-angolo { to { --angolo: 360deg; } }
.principio__num { position: absolute; right: 22px; top: 6px; font-family: var(--font-accento); font-style: italic; font-size: 5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(12, 111, 184, .22); }
.principio:nth-child(2) .principio__num { -webkit-text-stroke-color: rgba(243, 146, 18, .3); }
.principio__icona { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 22px; background: var(--azzurro-50); color: var(--blu-600); }
.principio:nth-child(2) .principio__icona { background: var(--ambra-100); color: var(--arancio-700); }
.principio__icona svg { width: 28px; height: 28px; }
.principio h3 { font-size: var(--t-h3); margin-bottom: 10px; }
.principio p { margin: 0; color: var(--tenue); }

/* ---------- aree di attività ---------- */
.aree__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.area {
  --rx: 0deg; --ry: 0deg; --lx: 50%; --ly: 50%;
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 310px;
  padding: 34px 30px 30px; border-radius: var(--raggio); overflow: hidden; isolation: isolate;
  background: var(--navy-900); color: rgba(255, 255, 255, .72);
  box-shadow: var(--ombra-s);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}
.area--chiara { background: var(--navy-700); }
.area::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--lx) var(--ly), rgba(79, 179, 236, .22), transparent 60%); }
.area:nth-child(even)::before { background: radial-gradient(420px circle at var(--lx) var(--ly), rgba(251, 184, 41, .18), transparent 60%); }
.area::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-marchio); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva); }
.area:hover { box-shadow: var(--ombra-l); }
.area:hover::before { opacity: 1; }
.area:hover::after { transform: scaleX(1); }
.area__num { position: absolute; top: 22px; right: 26px; font-size: .82rem; font-weight: 800; letter-spacing: .16em; color: rgba(255, 255, 255, .32); }
.area__icona {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; margin-bottom: 8px;
  background: rgba(79, 179, 236, .14); color: var(--azzurro-400);
  transition: transform .6s var(--curva-molla), background-color .3s, color .3s;
}
.area:nth-child(even) .area__icona { background: rgba(251, 184, 41, .14); color: var(--ambra-400); }
.area__icona svg { width: 30px; height: 30px; }
.area:hover .area__icona { transform: rotate(-8deg) scale(1.08); background: var(--grad-blu); color: #fff; }
.area:nth-child(even):hover .area__icona { background: var(--grad-arancio); color: var(--navy-900); }
.area h3 { color: #fff; font-size: 1.3rem; }
.area p { margin: 0; font-size: .98rem; }
.area__link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: .95rem; color: var(--ambra-400); }
.area__link svg { width: 18px; height: 18px; transition: transform .4s var(--curva); }
.area:hover .area__link svg { transform: translateX(6px); }

/* ---------- missione con foto in parallasse ---------- */
.missione { position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 12vw, 170px) 0; background: var(--navy-950); }
.missione__foto, .banda__foto, .palco__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.missione__foto img, .banda__foto img, .palco__foto img {
  position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(.9);
  transform: translate3d(0, var(--sposta, 0px), 0);
}
.missione__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(5, 15, 32, .94) 0%, rgba(10, 29, 56, .86) 45%, rgba(12, 111, 184, .7) 100%); }
.missione__riquadro { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 76px); text-align: center; }
.missione__riquadro .etichetta { justify-content: center; }
.missione__cornice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.missione__cornice rect { fill: none; stroke: rgba(251, 184, 41, .85); stroke-width: 2; }
.js .missione__cornice rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--curva); }
.js .disegnato .missione__cornice rect { stroke-dashoffset: 0; }
.missione__testo { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.1rem); line-height: 1.18; letter-spacing: -.03em; font-weight: 720; color: #fff; margin: 0 0 26px; }
.missione__testo em { font-family: var(--font-accento); font-style: italic; font-weight: 400; color: var(--ambra-400); }
.missione__firma { margin: 0; font-size: .84rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.js .missione__testo, .js .missione__firma, .js .missione__riquadro .etichetta { opacity: 0; translate: 0 26px; transition: opacity 1s var(--curva), translate 1.1s var(--curva); }
.js .disegnato .missione__riquadro .etichetta, .js .missione__riquadro.disegnato .etichetta { opacity: 1; translate: none; transition-delay: .3s; }
.js .missione__riquadro.disegnato .missione__testo { opacity: 1; translate: none; transition-delay: .6s; }
.js .missione__riquadro.disegnato .missione__firma { opacity: 1; translate: none; transition-delay: 1.1s; }

/* ---------- agevolazioni per obiettivo ---------- */
.obiettivi__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.obiettivi__tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tessera {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 86px;
  padding: 18px 20px; border-radius: 18px; border: 1px solid var(--linea); background: var(--carta);
  cursor: pointer; text-align: left; font-weight: 750; font-size: 1rem; line-height: 1.3; color: var(--inchiostro);
  overflow: hidden; isolation: isolate;
}
.tessera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(130% 120% at 0% 0%, var(--blu-600) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  clip-path: circle(0% at 34px 50%); transition: clip-path .75s var(--curva);
}
.tessera svg { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: #fff; color: var(--blu-600); flex: none; box-shadow: var(--ombra-s); transition: background-color .4s, color .4s, transform .6s var(--curva-molla); }
.tessera:nth-child(even) svg { color: var(--arancio-700); }
.tessera:hover { border-color: rgba(12, 111, 184, .3); box-shadow: var(--ombra-m); }
.tessera:hover svg { transform: rotate(-8deg) scale(1.06); }
.js .tessera[data-reveal].visibile:hover { translate: 0 -3px; }
.tessera.attiva { color: #fff; border-color: transparent; box-shadow: var(--ombra-m); }
.tessera.attiva::before { clip-path: circle(160% at 34px 50%); }
.tessera.attiva svg { background: var(--grad-arancio); color: var(--navy-900); }
.tessera.attiva::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ambra-400); box-shadow: 0 0 0 0 rgba(251, 184, 41, .6); animation: pulsa 2.4s infinite; }

.obiettivi__pannelli {
  position: sticky; top: 100px; padding: clamp(28px, 3.4vw, 40px); border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 100% at 100% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, .78); box-shadow: var(--ombra-l);
}
.obiettivi__pannelli::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 179, 236, .3), transparent 70%); z-index: -1; }
.pannello[hidden] { display: none; }
.pannello.attivo { animation: pannello-entra .65s var(--curva) both; }
@keyframes pannello-entra { from { opacity: 0; translate: 0 18px; filter: blur(4px); } to { opacity: 1; translate: none; filter: none; } }
.pannello__icona { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; margin-bottom: 20px; background: var(--grad-arancio); color: var(--navy-900); box-shadow: 0 16px 30px -14px rgba(243, 146, 18, .7); }
.pannello__icona svg { width: 34px; height: 34px; }
.js .pannello.attivo .pannello__icona svg > * { animation: traccia 1.4s var(--curva) .15s both; }
@keyframes traccia { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pannello h3 { color: #fff; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); margin-bottom: 10px; }
.pannello > p { margin-bottom: 22px; }
.pannello h4 { color: var(--ambra-400); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.pannello__elenco { display: grid; gap: 8px; margin-bottom: 22px; }
.pannello__elenco li { position: relative; padding-left: 26px; color: #fff; font-weight: 600; }
.pannello__elenco li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--azzurro-400); border-bottom: 2px solid var(--azzurro-400); transform: rotate(-45deg); }
.pannello__tag { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pannello__tag li { padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-weight: 700; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.pannello.attivo li { animation: chip-entra .55s var(--curva) both; }
.pannello.attivo li:nth-child(1) { animation-delay: .2s; }
.pannello.attivo li:nth-child(2) { animation-delay: .28s; }
.pannello.attivo li:nth-child(3) { animation-delay: .36s; }
.pannello.attivo li:nth-child(4) { animation-delay: .44s; }
.pannello__nota { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; color: rgba(255, 255, 255, .6); }
.pannello__nota svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ambra-400); }

/* ---------- il titolare ---------- */
.titolare__griglia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.titolare__foto { position: relative; margin: 0; padding: 0 0 10% 10%; }
.titolare__cornice { border-radius: 240px 240px 28px 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--ombra-l); background: var(--navy-900); }
.titolare__cornice picture { display: block; width: 100%; height: 100%; }
.titolare__cornice img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; transform: scale(1.18); transition: transform 2s var(--curva); }
.js .titolare__foto .titolare__cornice { clip-path: inset(100% 0 0 0 round 240px 240px 28px 28px); transition: clip-path 1.5s var(--curva) .1s; }
.js .titolare__foto.visibile .titolare__cornice { clip-path: inset(0 0 0 0 round 240px 240px 28px 28px); }
.titolare__foto.visibile .titolare__cornice img { transform: scale(1); }
.titolare__targa {
  position: absolute; left: 0; bottom: 4%; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombra-m); border: 1px solid rgba(255, 255, 255, .8);
  animation: galleggia 8s ease-in-out infinite;
}
.titolare__targa img { width: 54px; }
.titolare__targa small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--arancio-700); }
.titolare__targa strong { display: block; color: var(--inchiostro); font-size: 1.05rem; }
.titolare__punti { position: absolute; top: -24px; right: -24px; width: 130px; height: 130px; z-index: -1; background-image: radial-gradient(var(--azzurro-400) 1.6px, transparent 1.8px); background-size: 16px 16px; opacity: .55; }
.titolare__testo h2 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); margin-bottom: 12px; }
.titolare__testo h2 em { color: var(--blu-600); }
.titolare__ruolo { font-weight: 750; color: var(--arancio-700); font-size: 1.05rem; margin-bottom: 22px; }
.titolare__testo > p:not(.etichetta):not(.titolare__ruolo) { font-size: 1.06rem; }
.credenziali { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 34px; }
.credenziali li { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; background: var(--bianco); border: 1px solid var(--linea); font-size: .88rem; color: var(--tenue); line-height: 1.4; transition: transform .4s var(--curva), box-shadow .4s; }
.credenziali li:hover { transform: translateY(-4px); box-shadow: var(--ombra-m); }
.credenziali svg { width: 26px; height: 26px; color: var(--blu-600); }
.credenziali li:nth-child(2) svg { color: var(--arancio-500); }
.credenziali strong { display: block; color: var(--inchiostro); font-size: .95rem; margin-bottom: 2px; }
.titolare__azioni { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- metodo: fasi impilate ---------- */
.metodo__griglia { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.metodo__lato { position: sticky; top: 110px; }
.metodo__lato h2 { font-size: var(--t-h2); margin-bottom: 18px; }
.metodo__lato h2 em { color: var(--blu-600); }
.metodo__intro { font-size: 1.1rem; color: var(--tenue); max-width: 32em; }
.metodo__pitagora { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 26px; align-items: center; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--linea); }
.figura { width: 100%; overflow: visible; }
.figura .tratto { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--curva); }
.figura .q-a { stroke: var(--blu-500); fill: rgba(79, 179, 236, 0); transition: stroke-dashoffset 1.4s var(--curva) .2s, fill .8s 1.4s; }
.figura .q-b { stroke: var(--arancio-500); fill: rgba(243, 146, 18, 0); transition: stroke-dashoffset 1.4s var(--curva) .5s, fill .8s 1.6s; }
.figura .q-c { stroke: var(--navy-700); fill: rgba(23, 58, 107, 0); transition: stroke-dashoffset 1.6s var(--curva) .8s, fill .8s 1.9s; }
.figura .tri { stroke: var(--inchiostro); stroke-width: 3.4; fill: rgba(14, 27, 46, 0); transition: stroke-dashoffset 1.2s var(--curva), fill .6s 1.2s; }
.figura text { font-family: var(--font-accento); font-style: italic; font-size: 40px; opacity: 0; transition: opacity .8s 2.1s; }
.figura .angolo { fill: none; stroke: var(--inchiostro); stroke-width: 2; opacity: 0; transition: opacity .6s 1.3s; }
.disegnato .tratto { stroke-dashoffset: 0; }
.disegnato .q-a { fill: rgba(79, 179, 236, .16); }
.disegnato .q-b { fill: rgba(243, 146, 18, .16); }
.disegnato .q-c { fill: rgba(23, 58, 107, .08); }
.disegnato .tri { fill: rgba(14, 27, 46, .05); }
.disegnato text, .disegnato .angolo { opacity: 1; }
.motto__formula { font-family: var(--font-accento); font-style: italic; font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: .01em; color: var(--blu-600); margin: 0 0 14px; white-space: nowrap; }
.motto__formula sup { font-size: .55em; }
.motto__testo { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--arancio-700); }
.citazione { margin: 0; }
.citazione p { font-family: var(--font-accento); font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem); line-height: 1; color: var(--inchiostro); margin: 0 0 12px; letter-spacing: -.02em; }
.citazione p .accento { color: var(--blu-600); }
.citazione cite { font-style: normal; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--arancio-700); }

.pila { display: grid; gap: 24px; padding-bottom: 20px; }
.pila__carta {
  --scala: 1; --vela: 0;
  position: sticky; top: calc(112px + var(--i) * 26px);
  padding: clamp(26px, 3vw, 38px); border-radius: 26px; min-height: 280px;
  background: var(--bianco); border: 1px solid var(--linea); box-shadow: 0 24px 60px -30px rgba(10, 29, 56, .4);
  transform-origin: 50% 0; scale: var(--scala); isolation: isolate; overflow: hidden;
}
.pila__carta::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--navy-950); opacity: var(--vela); }
.pila__carta:nth-child(2) { background: var(--navy-900); border-color: transparent; color: rgba(255, 255, 255, .74); }
.pila__carta:nth-child(3) { background: var(--ambra-100); border-color: rgba(243, 146, 18, .2); }
.pila__carta:nth-child(4) { background: radial-gradient(120% 120% at 100% 0%, var(--blu-500) 0%, var(--blu-700) 60%, var(--navy-800) 100%); border-color: transparent; color: rgba(255, 255, 255, .8); }
.pila__carta:nth-child(2) h3, .pila__carta:nth-child(4) h3 { color: #fff; }
.pila__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.pila__num { font-family: var(--font-accento); font-style: italic; font-size: 4.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--blu-500); }
.pila__carta:nth-child(2) .pila__num, .pila__carta:nth-child(4) .pila__num { -webkit-text-stroke-color: var(--ambra-400); }
.pila__carta:nth-child(3) .pila__num { -webkit-text-stroke-color: var(--arancio-500); }
.pila__icona { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--azzurro-50); color: var(--blu-600); }
.pila__carta:nth-child(2) .pila__icona, .pila__carta:nth-child(4) .pila__icona { background: rgba(255, 255, 255, .1); color: var(--ambra-400); }
.pila__carta:nth-child(3) .pila__icona { background: #fff; color: var(--arancio-700); }
.pila__icona svg { width: 26px; height: 26px; }
.pila__carta h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); margin-bottom: 12px; }
.pila__carta p { margin: 0 0 22px; max-width: 34em; }
.pila__esito { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 750; background: var(--azzurro-50); color: var(--blu-700); }
.pila__esito svg { width: 16px; height: 16px; }
.pila__carta:nth-child(2) .pila__esito, .pila__carta:nth-child(4) .pila__esito { background: rgba(255, 255, 255, .1); color: #fff; }
.pila__carta:nth-child(3) .pila__esito { background: #fff; color: var(--arancio-700); }

/* ---------- fattori distintivi su fondo blu con onde ---------- */
.fattori {
  position: relative; isolation: isolate; padding: clamp(130px, 13vw, 180px) 0 clamp(90px, 10vw, 140px);
  background: linear-gradient(180deg, var(--blu-600) 0%, var(--blu-700) 30%, var(--navy-800) 72%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, .78); overflow: hidden;
}
.fattori::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(180deg, transparent 10%, #000 40%, transparent 95%); -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 40%, transparent 95%); }
.fattori h2 { color: #fff; }
.fattori .intestazione h2 em { color: var(--ambra-400); }
.fattori .intestazione p { color: rgba(255, 255, 255, .72); }
.fattori__onde { position: absolute; left: 0; right: 0; top: -1px; height: 86px; pointer-events: none; }
.fattori__onde i {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 86' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0h1200v38c-100 30-200 30-300 0S700 8 600 38 400 68 300 38 100 8 0 38z'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 86px;
  animation: onde 22s linear infinite;
}
.fattori__onde i:nth-child(2) { opacity: .35; top: 14px; animation-duration: 13s; animation-direction: reverse; }
@keyframes onde { to { background-position-x: -1200px; } }
.fattori__griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fattore {
  --lx: 50%; --ly: 50%;
  position: relative; padding: 32px 26px 28px; border-radius: var(--raggio); overflow: hidden; isolation: isolate; text-align: center;
  background: var(--bianco); color: var(--tenue); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.fattore::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(300px circle at var(--lx) var(--ly), rgba(79, 179, 236, .16), transparent 65%); }
.fattore:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7); }
.fattore:hover::before { opacity: 1; }
.fattore__icona { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%; background: var(--grad-blu); color: #fff; box-shadow: 0 14px 30px -12px rgba(12, 111, 184, .7); transition: transform .6s var(--curva-molla); }
.fattore:nth-child(even) .fattore__icona { background: var(--grad-arancio); color: var(--navy-900); box-shadow: 0 14px 30px -12px rgba(243, 146, 18, .7); }
.fattore:hover .fattore__icona { transform: scale(1.1) rotate(-6deg); }
.fattore__icona svg { width: 30px; height: 30px; }
.fattore h3 { font-size: 1.16rem; margin-bottom: 10px; color: var(--blu-700); letter-spacing: -.01em; }
.fattore:nth-child(even) h3 { color: var(--arancio-700); }
.fattore p { margin: 0; font-size: .96rem; }

/* ---------- banda d'invito con foto ---------- */
.banda { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 11vw, 150px) 0; text-align: center; background: var(--navy-950); color: rgba(255, 255, 255, .8); }
.banda__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 15, 32, .95) 0%, rgba(10, 89, 150, .72) 50%, rgba(5, 15, 32, .95) 100%); }
.banda__corpo .etichetta { justify-content: center; }
.banda h2 { color: #fff; font-size: var(--t-h2); max-width: 17em; margin: 0 auto 18px; }
.banda h2 em { color: var(--ambra-400); }
.banda p { font-size: 1.12rem; max-width: 36em; margin: 0 auto 34px; }
.banda__azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ---------- invito finale (pagina servizi) ---------- */
.invito__scatola {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px;
  padding: clamp(44px, 6vw, 84px) clamp(24px, 6vw, 84px);
  background: radial-gradient(120% 140% at 0% 0%, var(--blu-600) 0%, var(--navy-800) 45%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, .8); box-shadow: var(--ombra-l);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center;
}
.invito__scatola h2 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); margin-bottom: 14px; max-width: 16em; }
.invito__scatola h2 em { color: var(--ambra-400); }
.invito__scatola p { margin: 0; font-size: 1.1rem; max-width: 36em; }
.invito__azioni { display: flex; flex-direction: column; gap: 12px; }
.invito__sfere { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.invito__sfere i { position: absolute; border-radius: 50%; background: var(--c); opacity: .55; filter: blur(.3px); animation: galleggia var(--d, 9s) ease-in-out infinite; animation-delay: var(--r, 0s); }

/* ---------- hero pagine interne ---------- */
.hero-pagina {
  --mx: 0; --my: 0;
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--testata-h) + 120px) 0 clamp(70px, 8vw, 110px);
  background: radial-gradient(120% 120% at 85% 0%, var(--navy-700) 0%, var(--navy-900) 50%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, .78);
}
.hero-pagina .hero__griglia { mask-image: radial-gradient(60% 80% at 80% 30%, #000 10%, transparent 80%); -webkit-mask-image: radial-gradient(60% 80% at 80% 30%, #000 10%, transparent 80%); }
.hero-pagina__corpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: end; }
.briciole { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .86rem; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }
.briciole a:hover { color: #fff; }
.briciole svg { width: 14px; height: 14px; }
.hero-pagina h1 { font-size: var(--t-h1); color: #fff; letter-spacing: -.035em; margin-bottom: 22px; max-width: 14em; }
.hero-pagina__lead { font-size: 1.15rem; max-width: 38em; margin: 0; }
.hero-pagina__marchio { width: 100%; max-width: 380px; justify-self: end; opacity: .9; transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 10px)); transition: transform 1s var(--curva); }
.hero-pagina__marchio .spirale { width: 100%; }

/* ---------- servizi: navigazione a schede ---------- */
.testata.nascosta ~ main .schede-nav { top: 0; }
.schede-nav { position: sticky; top: 68px; z-index: 50; transition: top .45s var(--curva); background: rgba(246, 248, 251, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.schede-nav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; }
.schede-nav ul::-webkit-scrollbar { display: none; }
.schede-nav a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; white-space: nowrap; font-weight: 700; font-size: .92rem; color: var(--tenue); transition: background-color .3s, color .3s; }
.schede-nav a span { font-size: .75rem; color: var(--blu-600); font-weight: 800; }
.schede-nav a:hover { color: var(--inchiostro); background: #fff; }
.schede-nav a.attiva { background: var(--navy-900); color: #fff; }
.schede-nav a.attiva span { color: var(--ambra-400); }

.servizio { padding: clamp(70px, 8vw, 110px) 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 140px; }
.servizio:nth-of-type(even) { background: var(--bianco); }
.servizio__griglia { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.servizio__intro { position: sticky; top: 160px; }
.servizio__numero { font-family: var(--font-accento); font-style: italic; font-size: 5.5rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--blu-500); display: block; margin-bottom: 18px; }
.servizio:nth-of-type(even) .servizio__numero { -webkit-text-stroke-color: var(--arancio-500); }
.servizio__intro h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); margin-bottom: 18px; }
.servizio__intro h2 em { color: var(--blu-600); }
.servizio__intro > p { font-size: 1.08rem; color: var(--tenue); }
.servizio__per { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.servizio__per li { padding: 7px 14px; border-radius: 999px; background: var(--azzurro-50); color: var(--blu-700); font-weight: 700; font-size: .84rem; }
.servizio:nth-of-type(even) .servizio__per li { background: var(--ambra-100); color: var(--arancio-700); }
.servizio__sotto { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin: 0 0 14px; }
.servizio__sotto:not(:first-child) { margin-top: 30px; }
.voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.voce {
  --lx: 50%; --ly: 50%;
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; overflow: hidden; isolation: isolate;
  padding: 22px; border-radius: 16px; background: var(--bianco); border: 1px solid var(--linea);
}
.voce::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--lx) var(--ly), rgba(79, 179, 236, .14), transparent 65%); }
.servizio:nth-of-type(even) .voce { background: var(--carta); }
.voce:hover { transform: translateY(-4px); box-shadow: var(--ombra-m); border-color: rgba(12, 111, 184, .25); }
.voce:hover::before { opacity: 1; }
.voce__icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azzurro-50); color: var(--blu-600); }
.servizio:nth-of-type(even) .voce__icona { background: var(--ambra-100); color: var(--arancio-700); }
.voce__icona svg { width: 22px; height: 22px; }
.voce h3 { font-size: 1.02rem; margin: 2px 0 6px; letter-spacing: -.01em; }
.voce p { margin: 0; font-size: .94rem; color: var(--tenue); line-height: 1.55; }
.procedure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.procedura { position: relative; padding: 22px 20px; border-radius: 16px; background: var(--navy-900); color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.5; overflow: hidden; }
.procedura:nth-child(2) { background: var(--navy-700); }
.procedura:nth-child(3) { background: var(--blu-700); }
.procedura span { position: absolute; right: 14px; top: 4px; font-family: var(--font-accento); font-style: italic; font-size: 3.4rem; line-height: 1; color: rgba(255, 255, 255, .12); }
.procedura h3 { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.procedura p { margin: 0; }
.servizio__norme { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--carta); border: 1px dashed rgba(12, 111, 184, .3); font-size: .88rem; color: var(--tenue); }
.servizio__norme svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--blu-600); }

/* ---------- domande ---------- */
.domande { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.domanda { border-radius: 16px; background: var(--bianco); border: 1px solid var(--linea); overflow: hidden; transition: box-shadow .4s, border-color .3s; interpolate-size: allow-keywords; }
.domanda[open] { box-shadow: var(--ombra-m); border-color: rgba(12, 111, 184, .25); }
.domanda summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; font-weight: 750; font-size: 1.08rem; color: var(--inchiostro); }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary i { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--azzurro-50); transition: background-color .3s, transform .5s var(--curva); }
.domanda summary i::before, .domanda summary i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 2px; border-radius: 2px; background: var(--blu-600); transition: transform .4s var(--curva); }
.domanda summary i::after { transform: rotate(90deg); }
.domanda[open] summary i { background: var(--navy-900); transform: rotate(180deg); }
.domanda[open] summary i::before, .domanda[open] summary i::after { background: #fff; }
.domanda[open] summary i::after { transform: rotate(0); }
.domanda::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--curva), content-visibility .5s allow-discrete; }
.domanda[open]::details-content { block-size: auto; }
.domanda__risposta { padding: 0 26px 24px; color: var(--tenue); }
.domanda__risposta p:last-child { margin: 0; }

/* ---------- contatti: recapiti e modulo sopra la foto ---------- */
.palco {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px;
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 48px); align-items: start;
  padding: clamp(20px, 4vw, 48px); background: var(--navy-950); box-shadow: var(--ombra-l);
}
.palco__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(5, 15, 32, .96) 0%, rgba(10, 29, 56, .9) 45%, rgba(12, 111, 184, .62) 100%); }
.palco__recapiti { color: rgba(255, 255, 255, .78); padding-top: 6px; }
.js .palco__recapiti [data-reveal] { opacity: 1; translate: none; }
.palco__recapiti h2 { color: #fff; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-bottom: 22px; }
.recapiti { display: grid; gap: 12px; margin-bottom: 14px; }
.recapito {
  display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
a.recapito:hover { transform: translateX(6px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.recapito__icona { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(79, 179, 236, .16); color: var(--azzurro-400); transition: transform .6s var(--curva-molla); }
a.recapito:hover .recapito__icona { transform: rotate(-10deg) scale(1.06); }
.recapito:nth-child(even) .recapito__icona { background: rgba(251, 184, 41, .16); color: var(--ambra-400); }
.recapito__icona svg { width: 24px; height: 24px; }
.recapito small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 2px; }
.recapito strong { display: block; color: #fff; font-size: 1.02rem; font-weight: 750; overflow-wrap: anywhere; }
.orari { padding: 22px 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78); position: relative; overflow: hidden; isolation: isolate; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.orari::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 179, 236, .3), transparent 70%); z-index: -1; }
.orari__testa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.orari h3 { color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.orari h3 svg { width: 20px; height: 20px; color: var(--ambra-400); }
.stato { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 750; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.stato--aperto { color: var(--azzurro-200); background: rgba(79, 179, 236, .16); }
.stato--aperto::before { background: var(--azzurro-400); animation: pulsa-blu 2s infinite; }
.stato--chiuso { color: var(--ambra-400); background: rgba(251, 184, 41, .14); }
.stato--chiuso::before { background: var(--ambra-400); }
@keyframes pulsa-blu { 0% { box-shadow: 0 0 0 0 rgba(79, 179, 236, .6); } 70% { box-shadow: 0 0 0 9px rgba(79, 179, 236, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 179, 236, 0); } }
.orari table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.orari td { padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.orari td:last-child { text-align: right; color: #fff; font-weight: 650; }
.orari tr.oggi td { color: var(--ambra-400); font-weight: 800; }
.orari__nota { margin: 12px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .62); }

.modulo { padding: clamp(24px, 3.6vw, 42px); border-radius: 26px; background: var(--bianco); box-shadow: var(--ombra-l); scroll-margin-top: 110px; }
.modulo .etichetta { color: var(--arancio-700); }
.modulo h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 8px; }
.modulo h2 em { color: var(--blu-600); }
.modulo > p:not(.etichetta) { color: var(--tenue); margin-bottom: 24px; }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { position: relative; }
.campo--intero { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 24px 16px 10px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--carta);
  font-size: 1rem; color: var(--inchiostro); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356667d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.campo label { position: absolute; left: 17px; top: 17px; font-size: 1rem; color: var(--tenue); pointer-events: none; transform-origin: left top; transition: transform .25s var(--curva), color .25s; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--blu-500); background: #fff; box-shadow: 0 0 0 4px rgba(79, 179, 236, .18); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label,
.campo select + label { transform: translateY(-9px) scale(.78); color: var(--blu-600); font-weight: 700; }
.campo.errore input, .campo.errore textarea { border-color: var(--arancio-500); background: #fffaf2; }
.campo__errore { display: none; margin-top: 6px; font-size: .84rem; font-weight: 650; color: var(--arancio-700); }
.campo.errore .campo__errore { display: block; }
.consenso { grid-column: 1 / -1; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--tenue); }
.consenso input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blu-600); }
.consenso a { color: var(--blu-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.consenso.errore { color: var(--arancio-700); }
.consenso__errore { grid-column: 1 / -1; margin-top: -8px; }
.consenso.errore + .consenso__errore { display: block; }
.trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__invio { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.modulo__invio small { color: var(--tenue); font-size: .84rem; }
.modulo .bottone[disabled] { opacity: .7; cursor: progress; }
.esito { display: none; margin-top: 18px; padding: 16px 18px; border-radius: 14px; font-weight: 650; }
.esito.mostra { display: block; animation: chip-entra .6s var(--curva) both; }
.esito--ok { background: var(--azzurro-50); color: var(--blu-700); border: 1px solid rgba(12, 111, 184, .25); }
.esito--ko { background: var(--ambra-100); color: var(--arancio-700); border: 1px solid rgba(243, 146, 18, .35); }
.esito a { text-decoration: underline; text-underline-offset: 3px; }

.mappa {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  border-radius: 28px; overflow: hidden; background: var(--navy-900); box-shadow: var(--ombra-l); isolation: isolate;
}
.mappa__scheda {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 100% at 0% 0%, var(--navy-700) 0%, var(--navy-900) 60%, var(--navy-950) 100%); color: rgba(255, 255, 255, .78);
}
.mappa__scheda::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 179, 236, .28), transparent 70%); z-index: -1; }
.mappa__scheda .etichetta { color: var(--ambra-400); }
.mappa__scheda h3 { color: #fff; font-size: 1.35rem; margin-bottom: 20px; }
.mappa__dati { display: grid; gap: 14px; margin-bottom: 26px; }
.mappa__dati li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.mappa__dati svg { width: 20px; height: 20px; margin-top: 3px; color: var(--ambra-400); }
.mappa__dati a { color: #fff; font-weight: 700; }
.mappa__azioni { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.mappa__azioni .bottone { padding: .85em 1.2em; font-size: .92rem; }
.mappa__cornice { position: relative; min-height: 480px; background: var(--carta); }
.mappa__statica { position: absolute; inset: 0; display: block; overflow: hidden; }
.mappa__statica picture, .mappa__statica img { width: 100%; height: 100%; }
.mappa__statica img { object-fit: cover; transition: transform 1.6s var(--curva); }
.mappa__statica:hover img { transform: scale(1.04); }
.mappa__perno { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--grad-arancio); box-shadow: 0 0 0 5px rgba(251, 184, 41, .3), 0 6px 14px rgba(5, 15, 32, .35); }
.mappa__perno::before, .mappa__perno::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(243, 146, 18, .7); animation: onda 2.6s var(--curva) infinite; }
.mappa__perno::after { animation-delay: 1.3s; }
@keyframes onda { from { transform: scale(1); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.mappa__targa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% - 22px)); padding: 9px 14px; border-radius: 12px; background: var(--navy-900); color: #fff; font-weight: 800; font-size: .9rem; line-height: 1.25; text-align: center; white-space: nowrap; box-shadow: var(--ombra-m); }
.mappa__targa small { display: block; font-weight: 600; font-size: .78rem; color: var(--ambra-400); }
.mappa__targa::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--navy-900); transform: rotate(45deg); }
.mappa__crediti { position: absolute; right: 8px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: var(--testo); font-size: .7rem; }

.galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.galleria button { position: relative; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--navy-900); aspect-ratio: 2.3 / 1; }
.galleria button:first-child { grid-column: 1 / -1; aspect-ratio: 2.63 / 1; }
.galleria picture { display: block; width: 100%; height: 100%; }
.galleria img { width: 100%; height: 100%; object-fit: cover; scale: 1.16; transition: scale 1.8s var(--curva), transform 1.2s var(--curva); }
.galleria .visibile img { scale: 1; }
.galleria button:hover img { transform: scale(1.06); }
.galleria button::after { content: attr(data-didascalia); position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(5, 15, 32, .65); color: #fff; font-size: .84rem; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(8px); opacity: 0; transition: opacity .4s, transform .4s var(--curva); }
.galleria button:hover::after, .galleria button:focus-visible::after { opacity: 1; transform: none; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1300px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(5, 15, 32, .88); backdrop-filter: blur(6px); }
.lightbox[open] { animation: chip-entra .5s var(--curva) both; }
.lightbox img { max-height: 86vh; width: auto; border-radius: 18px; box-shadow: var(--ombra-l); }
.lightbox p { color: #fff; text-align: center; margin: 14px 0 0; font-weight: 650; }
.lightbox button { position: absolute; top: -18px; right: -18px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--inchiostro); display: grid; place-items: center; box-shadow: var(--ombra-m); }
.lightbox button svg { width: 20px; height: 20px; }

/* ---------- testo legale ---------- */
.legale { max-width: 820px; }
.legale h2 { font-size: 1.45rem; margin: 2.2em 0 .6em; }
.legale h2:first-child { margin-top: 0; }
.legale ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.legale li { margin-bottom: .4em; }
.legale a { color: var(--blu-700); text-decoration: underline; text-underline-offset: 3px; }
.legale .aggiornato { color: var(--tenue); font-size: .92rem; }

/* ---------- piede ---------- */
.piede { position: relative; background: var(--navy-950); color: rgba(255, 255, 255, .66); padding: clamp(72px, 8vw, 104px) 0 28px; isolation: isolate; font-size: .95rem; overflow-x: clip; }
.piede__onda { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(40px, 6vw, 90px); pointer-events: none; }
.piede__onda path { fill: var(--navy-950); }
.piede__onda .onda-2 { opacity: .45; animation: onda-piede 9s ease-in-out infinite alternate; transform-origin: center bottom; }
@keyframes onda-piede { to { transform: translateX(-2%) scaleY(1.25); } }
.piede__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.piede .marchio__testo { width: 170px; }
.piede__marchio { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.piede__marchio .marchio__sfere { width: 66px; }
.piede__nome { margin-bottom: .6em; }
.piede__nome strong { color: #fff; }
.piede__studio p { font-size: .9rem; line-height: 1.6; }
.piede__piva { color: rgba(255, 255, 255, .5); }
.piede__norme { font-size: .84rem !important; color: rgba(255, 255, 255, .58); }
.piede__norme a { text-decoration: underline; text-underline-offset: 3px; }
.piede h4 { color: #fff; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; margin-bottom: 18px; }
.piede ul { display: grid; gap: 10px; }
.piede a { transition: color .25s; }
.piede a:hover { color: #fff; }
.piede__voce { display: flex; gap: 10px; align-items: flex-start; }
.piede__voce svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--ambra-400); }
.piede__fondo { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 24px; font-size: .84rem; color: rgba(255, 255, 255, .5); }
.piede__fondo a { text-decoration: underline; text-underline-offset: 3px; }
.piede__gigante { position: absolute; right: -2%; bottom: 2%; width: 46%; opacity: .05; z-index: -1; pointer-events: none; }

/* WhatsApp fisso in basso a destra: verde un po' scuro, cosi' l'icona bianca resta leggibile */
.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 81; height: 58px; min-width: 58px; padding: 0 17px;
  display: inline-flex; align-items: center; gap: 0; border-radius: 999px; overflow: hidden;
  background: #1a9e5c; color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 14px 30px -10px rgba(10, 80, 45, .7);
  transition: gap .4s var(--curva), padding .4s var(--curva), background-color .3s, opacity .6s, transform .6s var(--curva-molla);
}
.whatsapp svg { width: 25px; height: 25px; flex: none; }
.whatsapp__testo { max-width: 0; white-space: nowrap; overflow: hidden; transition: max-width .45s var(--curva); }
.whatsapp:hover, .whatsapp:focus-visible { background: #168a50; gap: 10px; padding: 0 20px 0 17px; }
.whatsapp:hover .whatsapp__testo, .whatsapp:focus-visible .whatsapp__testo { max-width: 120px; }
.whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(26, 158, 92, .55); animation: whatsapp-onda 3.2s ease-out infinite; pointer-events: none; }
@keyframes whatsapp-onda { 0% { box-shadow: 0 0 0 0 rgba(26, 158, 92, .55); } 60%, 100% { box-shadow: 0 0 0 16px rgba(26, 158, 92, 0); } }
.js .whatsapp { opacity: 0; transform: translateY(20px) scale(.8); }
.pronto .whatsapp { opacity: 1; transform: none; transition-delay: 0s, 0s, 0s, 1.2s, 1.2s; }
.bottone--whatsapp { background: #1a9e5c; color: #fff; box-shadow: 0 10px 30px -12px rgba(10, 80, 45, .7); }
.bottone--whatsapp:hover { background: #168a50; }
.bottone--whatsapp svg { width: 1.2em; height: 1.2em; }
.recapito--whatsapp .recapito__icona { background: rgba(26, 158, 92, .2) !important; color: #4fd18f !important; }

/* torna su con anello di avanzamento */
.su {
  --p: 0;
  position: fixed; right: 22px; bottom: 92px; z-index: 80; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: var(--inchiostro); background: #fff; box-shadow: var(--ombra-m);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; visibility: hidden;
  transition: opacity .4s, transform .5s var(--curva-molla), visibility .4s;
}
.su.mostra { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.su svg.anello { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.su svg.anello circle { fill: none; stroke-width: 3; }
.su svg.anello .traccia { stroke: var(--linea); }
.su svg.anello .valore { stroke: url(#grad-anello); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.su .freccia-su { width: 20px; height: 20px; transition: transform .4s var(--curva); }
.su:hover .freccia-su { transform: translateY(-3px); }

/* sipario d'apertura a due ante (solo home, una volta per sessione) */
.sipario { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.senza-sipario .sipario, html:not(.js) .sipario { display: none; }
/* se sito.js non arriva o si ferma, dopo qualche secondo il sipario sparisce e i contenuti compaiono comunque */
.sipario { animation: sipario-salvagente 0s 5s forwards; }
@keyframes sipario-salvagente { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.js:not(.pronto) [data-reveal], .js:not(.pronto) [data-split] .parola > span, .js:not(.pronto) .vetrina__slide .vetrina__area,
.js:not(.pronto) .vetrina__slide .vetrina__testo, .js:not(.pronto) .vetrina__slide .hero__azioni, .js:not(.pronto) .spirale circle,
.js:not(.pronto) .whatsapp, .js:not(.pronto) .firma-testo, .js:not(.pronto) .titolare__cornice, .js:not(.pronto) [data-reveal="tendina"] picture,
.js:not(.pronto) .missione__testo, .js:not(.pronto) .missione__firma, .js:not(.pronto) .missione__riquadro .etichetta, .js:not(.pronto) .dichiarazione .w {
  animation: salvagente .6s 5.5s forwards;
}
@keyframes salvagente { to { opacity: 1; transform: none; translate: none; clip-path: none; color: inherit; } }
.sipario__anta { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform 1.15s var(--curva); }
.sipario__anta--sx { left: 0; background: linear-gradient(90deg, var(--navy-950), var(--navy-900)); }
.sipario__anta--dx { right: 0; background: linear-gradient(270deg, var(--navy-950), var(--navy-900)); }
.sipario__anta--sx::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--ambra-400), transparent); opacity: 0; transition: opacity .3s; }
.sipario.via .sipario__anta--sx { transform: translateX(-100%); }
.sipario.via .sipario__anta--dx { transform: translateX(100%); }
.sipario.via .sipario__anta--sx::after { opacity: 1; }
.sipario__centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; transition: opacity .5s, transform .9s var(--curva); }
.sipario .spirale { width: min(320px, 70vw); filter: none; }
.sipario.via .sipario__centro { opacity: 0; transform: scale(.9) translateY(-20px); }
.sipario .spirale circle { animation: sfera-entra .8s var(--curva-molla) both; animation-delay: calc(var(--i) * .045s); }
.sipario .spirale .g-blu circle { --da-x: -80px; }
.sipario .spirale .g-arancio circle { --da-x: 80px; }
.sipario__nome { margin: 0; text-align: center; color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; animation: chip-entra .8s var(--curva) .8s both; }
.sipario__nome small { display: block; margin-top: 4px; font-family: var(--font-accento); font-style: italic; font-weight: 400; font-size: 1.3rem; letter-spacing: 0; color: var(--ambra-400); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .barra-info__pec { display: none; }
}
@media (max-width: 1100px) {
  .menu, .testata__cta { display: none; }
  .hamburger { display: block; margin-left: 10px; }
  html:not(.js) .menu { display: block; margin-left: 0; overflow-x: auto; }
  html:not(.js) .hamburger { display: none; }
  .testata__tel { display: grid; }
  .aree__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fattori__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .credenziali { grid-template-columns: 1fr; }
  .credenziali li { grid-template-columns: 26px 1fr; align-items: center; gap: 14px; }
}
@media (max-width: 960px) {
  .hero { padding-top: calc(var(--testata-h) + 20px); padding-bottom: 130px; min-height: 0; }
  .hero__corpo { grid-template-columns: 1fr; }
  .hero__visivo { order: -1; width: min(100%, 420px); margin: -10px auto -10px; }
  .presentazione__griglia, .titolare__griglia, .metodo__griglia, .obiettivi__griglia, .palco, .servizio__griglia { grid-template-columns: 1fr; }
  .metodo__lato, .servizio__intro, .obiettivi__pannelli { position: static; }
  .principi { grid-template-columns: 1fr; }
  .titolare__foto { max-width: 520px; }
  .invito__scatola { grid-template-columns: 1fr; }
  .invito__azioni { flex-direction: row; flex-wrap: wrap; }
  .hero-pagina__corpo { grid-template-columns: 1fr; }
  .hero-pagina__marchio { display: none; }
  .barra-info { display: none; }
  .procedure { grid-template-columns: 1fr; }
  .mappa { grid-template-columns: 1fr; }
  .mappa__cornice { order: -1; min-height: 380px; }
  .js [data-reveal="sinistra"], .js [data-reveal="destra"] { translate: 0 34px; }
  .pila__carta { top: calc(90px + var(--i) * 16px); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .aree__griglia, .fattori__griglia, .voci, .campi { grid-template-columns: 1fr; }
  .area { min-height: 0; }
  .obiettivi__tessere { gap: 10px; }
  .tessera { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 16px; font-size: .92rem; }
  .tessera svg { width: 42px; height: 42px; padding: 9px; }
  .tessera.attiva::after { top: 22px; margin-top: 0; }
  .scheda-v { padding: 16px 10px 16px 14px; }
  .scheda-v::before { left: 14px; }
  .scheda-v__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vetrina__pausa { width: 52px; }
  .chip { font-size: .74rem; padding: 6px 11px 6px 7px; gap: 7px; border-radius: 13px; }
  .chip small { display: none; }
  .chip__icona { width: 24px; height: 24px; border-radius: 8px; }
  .chip svg { width: 14px; height: 14px; }
  .hero__marca { font-size: .82rem; border-radius: 16px; margin-bottom: 24px; }
  .hero__visivo { width: min(100%, 290px); margin: -18px auto -22px; }
  /* home piu corta sul telefono: missione e tre principi solo da tablet e computer */
  .pagina-home .missione, .pagina-home .principi { display: none; }
  .pagina-home .presentazione__griglia { margin-bottom: 0; }
  .hero-pagina { padding-top: calc(var(--testata-h) + 44px); padding-bottom: 52px; }
  .etichetta--spaziata { letter-spacing: .2em; }
  .recapito small, .titolare__targa small { font-size: .78rem; }
  .pannello h4 { font-size: .8rem; }
  .hero__azioni .bottone { flex: 1 1 100%; }
  .metodo__pitagora { grid-template-columns: 120px 1fr; gap: 18px; }
  .pila__num { font-size: 3.4rem; }
  .titolare__targa { left: 0; bottom: 0; padding: 10px 16px 10px 12px; }
  .titolare__targa img { width: 42px; }
  .piede__griglia { grid-template-columns: 1fr; gap: 30px; }
  .galleria { grid-template-columns: 1fr; }
  .galleria button, .galleria button:first-child { grid-column: auto; aspect-ratio: 16 / 10; }
  .mappa__cornice { min-height: 340px; }
  .marchio__testo { width: 124px; }
  .marchio__sfere { width: 50px; }
  .servizio__numero { font-size: 4rem; }
  .su { right: 17px; bottom: 78px; width: 48px; height: 48px; }
  .whatsapp { right: 14px; bottom: 14px; height: 54px; min-width: 54px; padding: 0 15px; }
  .whatsapp svg { width: 24px; height: 24px; }
  .palco { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.anim-forzate) { scroll-behavior: auto; }
  html:not(.anim-forzate) *, html:not(.anim-forzate) *::before, html:not(.anim-forzate) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js:not(.anim-forzate) [data-reveal], .js:not(.anim-forzate) [data-split] .parola > span, .js:not(.anim-forzate) .spirale circle, .js:not(.anim-forzate) .vetrina__slide.attiva * { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; }
  .js:not(.anim-forzate) [data-reveal="tendina"] picture, .js:not(.anim-forzate) .titolare__foto .titolare__cornice, .js:not(.anim-forzate) .firma-testo { clip-path: none !important; }
  html:not(.anim-forzate) .nastro__binario, html:not(.anim-forzate) .fattori__onde i { animation: none !important; }
  html:not(.anim-forzate) .whatsapp::before { animation: none !important; }
  html:not(.anim-forzate) .sipario { display: none !important; }
  html:not(.anim-forzate) .scheda-v.attiva .scheda-v__barra { animation: none !important; transform: scaleX(1); }
}
@media print {
  .testata, .menu-mobile, .su, .nastro, .hero__rete, .sipario, .mappa, .banda, .schede-vetrina, .fattori__onde, .piede__onda { display: none !important; }
  .hero, .hero-pagina { min-height: 0; padding: 20px 0; background: none; color: #000; }
  .hero h1, .hero-pagina h1, .vetrina__titolo { color: #000; }
}