/* ── Identità di marca — rifatta il 17/09/2026 ────────────────────────────
   Palette dal riferimento "brand identity colors and gradients": accento
   blu, superfici chiare, testo su blu notte. Quadri rinascimentali +
   elementi flat minimal, non il tema scuro della versione precedente. */
:root{
  --blu:#115cfa;
  --blu-scuro:#0645d1;
  --bianco:#ffffff;
  --azzurro:#e6f0ff;
  --crema:#f6eedc;
  --notte:#0f2d6b;
  --ardesia:#6b7f9e;
  --bordo:#d9e2f0;
  --chiusura-testo:var(--notte);
  --chiusura-secondario:var(--ardesia);
  --chiusura-bordo:var(--bordo);
  --tortora:#dcc9a7;
  --grad-primario:linear-gradient(180deg,#e8f4ff,#e6f0ff);
  --grad-secondario:linear-gradient(135deg,#f6eedc,#e6f0ff);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-reveal:cubic-bezier(.25,1,.5,1);
  --wrap:1200px;
  --barra-h:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--pagina-fondo,var(--bianco));color:var(--notte);font:400 16px/1.7 system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
html body{transition:background-color 1000ms ease,color 900ms ease}
body.scorre-scuro{--chiusura-testo:#fff;--chiusura-secondario:rgb(255 255 255 / .8);--chiusura-bordo:rgb(255 255 255 / .3)}
body.dialog-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--blu);outline-offset:6px}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:-.02em}
.wrap{width:min(var(--wrap),calc(100% - 100px));margin-inline:auto}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;color:var(--ardesia)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-100px;z-index:100;background:var(--bianco);padding:12px;border-radius:6px}
.skip-link:focus{top:10px}

/* ── Navbar — il marchio ci arriva animato dalla hero (insegna) ─────────── */
/* Su mobile la barra sfumata compare dallo scroll (8px, vedi app.js).
   Su desktop è blu, con testo bianco, e diventa traslucida allo scroll. */
.scorre-barra{
  position:sticky;top:0;z-index:30;
  height:var(--barra-h);padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:transparent;
  box-shadow:none;
  transition:box-shadow 260ms ease,background-color 260ms ease,backdrop-filter 260ms ease;
}
.scorre-barra.scorre-scrollata{
  background:rgb(255 255 255 / .8);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 1px 0 rgb(15 45 107 / .14);
}
.scorre-barra .barra-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  background:var(--blu);color:#fff;padding:13px 26px;border-radius:99px;
  font-size:15px;font-weight:600;letter-spacing:0;line-height:1;white-space:nowrap;
  transition:background-color 200ms;
}
.scorre-barra .barra-cta:hover{background:var(--blu-scuro)}
.scorre-marchio{display:inline-flex;width:40px;flex-shrink:0}
.scorre-marchio svg{display:block;width:100%;height:auto;border-radius:22%}
.scorre-resto{display:flex;align-items:center;gap:30px;font-size:12px;font-weight:600}
.scorre-resto a{padding:10px 0;color:#fff;transition:color 220ms ease}
.scorre-barra.scorre-scrollata .scorre-resto a{color:var(--blu)}

/* ── Voci di menu con tendina — Servizi e Trova la tua categoria ─────────
   Un pulsante al posto del link diretto: cliccandolo appare l'elenco delle
   pagine di quella voce. Il pannello ha sempre sfondo bianco, quindi i suoi
   link restano scuri per conto proprio — !important perché altrimenti
   erediterebbero il bianco/blu che .scorre-resto a usa per il resto della
   barra, pensato per un testo su sfondo trasparente o blu, non su un
   pannello bianco. */
.menu-tendina{position:relative}
.menu-tendina>button{font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px;padding:10px 0}
.menu-tendina>button::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform 200ms var(--ease-out)}
.menu-tendina>button[aria-expanded="true"]::after{transform:rotate(-135deg)}
.tendina{display:none;flex-direction:column}
.menu-tendina>button[aria-expanded="true"]+.tendina{display:flex}
.tendina a{color:var(--notte)!important;font-weight:600}
@media(hover:hover) and (pointer:fine){.tendina a:hover{color:var(--blu)!important}}
.menu-toggle{display:none;width:42px;height:42px;padding:10px}
.menu-toggle span{display:block;height:1.5px;background:var(--blu);margin:6px 0;transition:transform 250ms var(--ease-out),background-color 220ms ease}
#mobile-nav{position:fixed;inset:74px 0 auto;background:var(--bianco);padding:24px 8%;border-bottom:1px solid var(--bordo);z-index:19;overflow-y:auto;max-height:calc(100dvh - 74px)}
#mobile-nav a{display:block;padding:14px 0;font-size:22px}
#mobile-nav .menu-tendina>button{width:100%;justify-content:space-between;padding:14px 0;font-size:22px}
#mobile-nav .menu-tendina>button::after{width:8px;height:8px}
#mobile-nav .tendina{padding-left:18px}
#mobile-nav .tendina a{padding:11px 0;font-size:17px}

/* ── Hero — un solo schermo, marchio fermo in barra, testo in alto ──────── */
/* position:relative + z-index:5 (non overflow:clip: il quadro deve poter
   sconfinare sopra la sezione dopo, non venire tagliato dalla hero) */
/* overflow-x:clip (non overflow:clip): il quadro può essere più largo dello
   schermo sui formati stretti e alti — tagliato ai lati, mai in verticale,
   dove deve poter sconfinare sotto. */
.hero{position:relative;min-height:100svh;z-index:5;overflow-x:clip}
/* Il quadro è un PNG vero (trasparenza sulle nuvole in basso), non uno sfondo
   CSS: a piena larghezza, altezza naturale. Su schermi larghi è più alto di
   uno schermo e sconfina sopra la sezione lavori, che compare fra le nuvole
   dove il PNG è trasparente. var(--fondo-x/--fondo-y): calcolate a runtime
   perché lo schermo blu del quadro finisca al centro della viewport. */
/* Dimensioni impostate a runtime (var(--quadro-w/h/left)) con la stessa
   formula di background-size:cover: sugli schermi larghi la larghezza
   comanda e il quadro sconfina in basso; su quelli stretti e alti comanda
   l'altezza, il quadro si allarga oltre i bordi e si ritaglia ai lati
   invece di lasciare un vuoto sotto. */
.hero-quadro{
  position:absolute;top:calc(var(--barra-h) * -1);left:var(--quadro-left,0);
  width:var(--quadro-w,100%);height:var(--quadro-h,auto);z-index:1;
  pointer-events:none;max-width:none;
}
/* Fondale boreale dietro al quadro, solo nella fascia alta trasparente (il
   vuoto sopra il tetto e, al centro, il varco fra i due loggiati: ~66%
   dell'altezza del quadro nel punto più profondo). Sotto quella quota il PNG
   è opaco (loggiati, tavolo), e nelle nuvole in basso — comprese quelle che
   sconfinano su .sezione-lavori — deve restare il bianco della pagina, non
   il boreale. Palette sempre chiara (stesso azzurro di "Trova la tua
   categoria"), con più scarto fra le fasce per farla leggere in movimento. */
.hero .hero-boreale{
  position:absolute;top:calc(var(--barra-h) * -1);left:var(--quadro-left,0);
  width:var(--quadro-w,100%);height:calc(var(--quadro-h,100vh) * .66);z-index:0;
  pointer-events:none;
  --scorre-boreale-fondo:#e6f0ff;
  --scorre-boreale-bande:repeating-linear-gradient(100deg,
    #e6f0ff 8%,#a3c8ff 28%,#4a80f5 44%,#115cfa 58%,#4a80f5 74%,#a3c8ff 92%);
  --scorre-boreale-forza:.9;
  --scorre-boreale-velo:30px;
  --scorre-boreale-giro:28s;
}
/* Il secondo strato di scorre.css usa mix-blend-mode:difference: con una
   tavolozza scura funziona, ma due chiari quasi uguali si annullano e
   diventano grigi — l'opposto di "resta su colori chiari". Qui torna a una
   sovrapposizione normale. */
.hero .hero-boreale::after{mix-blend-mode:normal}
/* La barra resta in flusso sopra la hero: per non spingere il testo 74px in
   basso, la vetrina sale di un'altezza-barra. `overflow:clip` sta sulla
   vetrina (non sulla hero): contiene testo/velo/scorri a un solo schermo
   senza tagliare il quadro, che è fuori da questo contenitore. */
.hero-vetrina{position:relative;height:100svh;overflow:clip;z-index:2;margin-top:calc(var(--barra-h) * -1)}
.hero-velo{position:absolute;inset:0}
.hero-testo{
  position:relative;z-index:1;padding:22vh 24px 0;text-align:center;color:var(--notte);
}
.hero-testo p{
  font-size:clamp(20px,2.6vw,35px);font-weight:700;line-height:1.4;letter-spacing:-.01em;max-width:38ch;margin-inline:auto;
  text-shadow:none;
}
/* La parola che ruota resta sulla stessa riga della frase fissa quando c'è
   spazio: inline-grid (da solo.css) più questo colore/peso, che deve seguire
   il testo intorno invece di usare i valori di default del modulo. */
.hero-ruota{color:var(--blu);font-weight:inherit}
/* solo.css mette text-align:left sul rotatore (serve altrove): qui invece,
   quando una frase va a capo, le due righe devono restare centrate come il
   resto della hero — due classi battono l'attributo singolo di solo.css. */
.hero-testo .hero-ruota{text-align:center}
.moto-parola{transition:opacity 420ms var(--ease-out)}
.hero-scorri{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--bianco);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85;
}
.hero-scorri:before{content:'';width:1px;height:26px;background:currentColor;opacity:.7;animation:scorri-respiro 2.2s var(--ease-in-out) infinite}
@keyframes scorri-respiro{0%,100%{transform:scaleY(.6);opacity:.35}50%{transform:scaleY(1);opacity:.9}}

/* ── Sezioni non ancora costruite — placeholder visibile solo in anteprima */
/* ── Lavori selezionati ──────────────────────────────────────────────── */
.sezione-lavori{padding:130px 0 120px}
.section-heading{text-align:center;padding:0 24px 55px;max-width:640px;margin-inline:auto}
.section-heading h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px}
.section-heading p{margin-top:16px;color:var(--ardesia);font-size:15px;line-height:1.7}
.section-heading>p:last-child,.categorie-intro>p:last-child,.servizi-intro>p:last-child,
.prezzi-intro>p:last-child,.calcolatore-intro>p:last-child{
  width:80%;max-width:42ch;margin-left:auto;margin-right:auto;text-align:center
}

.filtri{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 50px;padding:0 20px}
.filtri button{padding:9px 20px;border-radius:99px;border:1px solid var(--bordo);font-size:12px;font-weight:600;color:var(--ardesia);transition:background-color 200ms,color 200ms,border-color 200ms}
.filtri button[aria-pressed=true]{background:var(--blu);color:#fff;border-color:var(--blu)}

.lavoro-griglia{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-rows:382px;width:min(1160px,calc(100% - 48px));margin-inline:auto}
/* Velo "vedi di più": sfocatura progressiva alta 100px, sotto il tasto */
.lavoro-griglia::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:100px;z-index:3;
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  -webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000);
  pointer-events:none;transition:opacity 400ms ease;
}
.lavoro-griglia.mostrato::after{opacity:0}
.lavoro-carta{position:relative;border-radius:10px;overflow:hidden;background:var(--azzurro)}
.lavoro-carta[hidden]{display:none}
.lavoro-video{grid-column:span 2}
.lavoro-social{}
.lavoro-apri{display:block;width:100%;height:100%;padding:0;text-align:left;position:relative;overflow:hidden}
.lavoro-apri>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 700ms var(--ease-reveal)}
.lavoro-apri>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 200ms}
.lavoro-carta.is-playing video{opacity:1}
.lavoro-velo{position:absolute;inset:0;background:linear-gradient(0deg,rgb(15 45 107 / .68),transparent 55%);opacity:0;transition:opacity 250ms}
.lavoro-etichetta{position:absolute;left:20px;bottom:18px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity 250ms,transform 250ms var(--ease-out)}
.lavoro-etichetta>span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;opacity:.85}
.lavoro-etichetta strong{font-size:19px;letter-spacing:-.01em}
.lavoro-tag{position:absolute;right:14px;top:14px;font-size:10px;border-radius:30px;padding:5px 11px;background:rgb(255 255 255 / .9);color:var(--notte);opacity:0;transition:opacity 250ms}
.lavoro-logo{background:var(--sfondo,var(--crema))}
.lavoro-video .lavoro-apri>img,.lavoro-video .lavoro-apri>video{object-fit:cover;object-position:top}
.lavoro-logo .lavoro-apri{display:flex;flex-direction:column;justify-content:center}
.lavoro-logo-riquadro{flex:1;display:grid;place-items:center;padding:24px}
.lavoro-logo-riquadro img{max-width:min(72%,460px);max-height:92px;width:auto;height:auto;object-fit:contain}
.lavoro-logo .lavoro-etichetta{position:static;color:var(--notte);opacity:1;transform:none;padding:0 24px 24px}
.lavoro-logo .lavoro-etichetta>span{color:var(--ardesia);opacity:1}

@media(hover:hover) and (pointer:fine){
  .lavoro-apri:hover>img{transform:scale(1.04)}
  .lavoro-apri:hover .lavoro-velo,.lavoro-apri:hover .lavoro-etichetta,.lavoro-apri:hover .lavoro-tag{opacity:1;transform:none}
}
.lavoro-apri:focus-visible .lavoro-velo,.lavoro-apri:focus-visible .lavoro-etichetta{opacity:1;transform:none}

/* ── Dialog di approfondimento ────────────────────────────────────────── */
dialog{border:0;border-radius:10px;width:min(1080px,calc(100% - 48px));max-height:90svh;padding:0;overflow:auto;color:var(--notte);box-shadow:0 30px 100px rgb(15 45 107 / .3)}
dialog::backdrop{background:rgb(15 20 30 / .78)}
.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:28px 32px}
.dialog-top h2{font-size:26px;margin-top:6px}
.dialog-chiudi{font-size:30px;border-radius:50%;width:42px;height:42px;flex-shrink:0;background:var(--azzurro);line-height:1}
#lavoro-media{background:var(--crema)}
#lavoro-media video,#lavoro-media img{width:100%;max-height:60svh;object-fit:contain;display:block;margin:auto}
#lavoro-media .lavoro-logo-riquadro{padding:60px}
#lavoro-media .lavoro-logo-riquadro img{max-height:180px}
.dialog-bottom{padding:24px 32px 30px}
.dialog-bottom p{font-size:14px;color:var(--ardesia);max-width:640px}
body.dialog-open{overflow:hidden}

/* ── Separatori decorativi — full width, centrati sopra la linea di divisione */
.separatore{position:relative;z-index:2;margin:-263px 0 -263px;pointer-events:none;isolation:isolate;overflow:hidden}
/* Questo separatore non deve sconfinare come gli altri due: l'immagine (le
   persone sedute) ha bisogno di aria sopra e sotto, non di sovrapporsi a
   "Lavori" e "Per settore". */
.separatore-persone{margin:56px 0}
.separatore img{width:100%;height:auto;display:block}
/* Risalita ridotta nel "prezzi" che lo precede: quella sezione porta un
   carosello sticky (giostra). Per non sovrapporre il testo del calcolatore
   subito sotto, il padding-top di .calcolatore è alzato di conseguenza. */
.separatore-dopo-giostra{margin-top:-200px}
.separatore.separatore-persone {
  overflow: inherit;
}
/* L'immagine di sfondoX sporge ai lati apposta (mai in verticale, quella
   resta "inherit" come sopra): qui serve che l'asse orizzontale sia sempre
   tagliato, o lo scorrimento scopre il bordo dell'immagine. */
.separatore-persone[data-scorre="sfondoX"] {
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .separatore {
    margin: 0; /* Rimuove i margini negativi */
  }
  .separatore-persone{margin:18px 0}
  .separatore:not(.separatore-persone){height:clamp(88px,27vw,128px);aspect-ratio:auto!important;margin:10px 0}
  .separatore-dopo-giostra{height:clamp(58px,18vw,84px);margin:2px 0}
}


/* ── Toggle "vedi di più" dei lavori ──────────────────────────────────── */
.lavori-azioni{text-align:center;padding:36px 24px 0}
.lavori-toggle{display:inline-flex;align-items:center;gap:9px;padding:13px 30px;border-radius:99px;
  border:1px solid var(--bordo);font-size:14px;font-weight:600;color:var(--notte);
  transition:background-color 200ms,color 200ms}
.lavori-toggle:hover{background:var(--notte);color:#fff}
.lavori-toggle span{transition:transform 200ms}
.lavori-toggle[aria-expanded="true"] span{transform:rotate(180deg)}

@media(max-width:1100px){
  .lavoro-griglia{grid-template-columns:1fr;grid-auto-rows:clamp(220px,62vw,382px)}
  .lavoro-video{grid-column:span 1}
}
@media(max-width:600px){
  .sezione-lavori{padding:90px 0 80px}
  .filtri{gap:8px;margin-bottom:34px}
  .filtri button{padding:8px 16px;font-size:11px}
  .lavoro-griglia{gap:10px;width:calc(100% - 32px)}
  .lavoro-etichetta{opacity:1;transform:none}
  .lavoro-velo{opacity:.55}
}

/* ── Trova la tua categoria — griglia con "prossimità" ─────────────────── */
/* Il colore delle sezioni segue lo sfondo globale della pagina. */
.categorie{padding:110px 0 120px}
.categorie-intro{text-align:center;max-width:560px;margin:0 auto 55px;padding:0 24px}
.categorie-intro .eyebrow{color:var(--notte)}
.categorie-intro h2{font-size:clamp(28px,3.4vw,38px);margin-top:14px;color:var(--notte)}
.categorie-intro p{margin-top:14px;color:var(--notte);font-size:15px}
.categorie-griglia{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  width:min(1200px,calc(100% - 48px));margin-inline:auto;
}
.categoria-carta{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 18px 22px;border-radius:14px;background:var(--bianco);
  border:1px solid var(--bordo);text-align:center;
  transform-origin:center;will-change:transform;
  transition:box-shadow 220ms var(--ease-out),border-color 220ms;
}
.categoria-carta img{width:100%;max-width:210px;height:auto;aspect-ratio:1/1;object-fit:contain}
.categoria-carta span{font-size:18px;font-weight:600;color:var(--notte);letter-spacing:-.01em}
@media(hover:hover) and (pointer:fine){
  .categoria-carta:hover{box-shadow:0 18px 40px rgb(15 45 107 / .1);border-color:var(--blu)}
}
.categoria-carta:focus-visible{box-shadow:0 18px 40px rgb(15 45 107 / .14);border-color:var(--blu)}
@media(max-width:900px){
  .categorie-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:600px){
  .categorie{padding:75px 0 85px}
  .categorie-intro{margin-bottom:38px}
  .categoria-carta{padding:18px 12px 16px;gap:10px}
  .categoria-carta span{font-size:15px}
}

/* ── Servizi — schede impilate (pila) ─────────────────────────────────── */
.servizi{padding:120px 0 0;--scorre-coda:0vh}
.servizi-intro{text-align:center;padding:0 24px 70px;max-width:640px;margin-inline:auto}
.servizi-intro h2{font-size:clamp(30px,3.6vw,44px);margin-top:14px}
.servizi-intro p{margin-top:16px;color:var(--ardesia);font-size:15px;line-height:1.5;max-width:50%;margin:20px auto}

/* La scheda è una sola: posizione sticky e margine vengono da scorre.css
   ([data-scorre="pila"] .scorre-scheda). Qui solo la veste. */
.servizio{
  width:min(920px,calc(100% - 48px));margin-inline:auto;
  height:clamp(420px,66svh,620px);
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  background:var(--bianco);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgb(15 45 107 / .14);
}
.servizio-media{margin:0;position:relative}
.servizio-media img{width:100%;height:100%;object-fit:cover;display:block}
.servizio-corpo{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4.5vw,58px)}
.servizio-num{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--blu)}
.servizio h3{font-size:clamp(24px,2.7vw,34px);margin-top:12px}
.servizio p{margin-top:16px;color:var(--ardesia);font-size:15px;line-height:1.7;max-width:42ch}
.servizio-cta{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13px;font-weight:700;color:var(--blu)}
.servizio-cta span{display:inline-block;transition:transform 220ms var(--ease-out)}
.servizio-cta:hover span{transform:translate(3px,-3px)}

/* ── Clienti — carosello loghi + nuvole ai bordi ──────────────────────── */
/* z-index:2 mantiene le nuvole laterali sopra la sezione successiva. */
.clienti{position:relative;isolation:isolate;z-index:2;padding:120px 0 130px;background:var(--bianco)}
.clienti-intro{text-align:center;padding:0 24px 52px;max-width:640px;margin-inline:auto}
.clienti-intro h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px}
.logo-finestra{overflow:hidden;max-width:1400px;margin:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logo-serie{display:flex;align-items:center;gap:80px;padding:0 40px;flex-shrink:0}
.logo-serie img{height:44px;width:auto;object-fit:contain;opacity:1}
.clienti-intro,.logo-finestra{position:relative;z-index:1}
.nuvola{position:absolute;top:-28%;bottom:-28%;width:230px;pointer-events:none;z-index:0;background-repeat:no-repeat;
  background-size:auto 100%;background-position:center;opacity:1;will-change:transform}
.nuvola-sinistra{left:0px;background-image:url('assets/nuvole/nuvole-sinistra.webp');background-position:left center}
.nuvola-destra{right:0px;background-image:url('assets/nuvole/nuvole-destra.webp');background-position:right center}

/* ── Prezzi — giostra: cinque livelli, da economy a de luxe ─────────────
   Le carte scorrono una sola volta, in linea retta (non in loop) lungo lo
   scroll della sezione: la prima (Economy) comincia già al centro, con
   niente alla sua sinistra; l'ultima (Su misura) ci arriva, con niente alla
   sua destra. Quella al centro si accende con .prezzo-centro, aggiunta e
   tolta dal modulo giostra (scorre.js, versione locale a questo sito) in
   base a quale carta è più vicina al centro — non è un colore fisso su una
   carta sola. Lo sfondo segue il colore globale della pagina;
   .prezzi porta data-scorre="giostra" per le carte. */
.prezzi{position:relative;padding:120px 0 0}
.prezzi-intro{text-align:center;padding:0 24px 12px;max-width:640px;margin-inline:auto;color:var(--notte)}
.prezzi-intro .eyebrow{color:var(--ardesia);margin-top:100px}
.prezzi-intro h2{font-size:clamp(30px,3.6vw,44px);margin-top:14px;color:var(--notte)}
.prezzi-intro p{margin-top:16px;color:var(--ardesia);font-size:15px;line-height:1.5;max-width:60%;margin:20px auto}
.prezzo{position:relative;display:flex;flex-direction:column;width:min(320px,84vw);padding:34px 32px;border-radius:16px;
  background:rgb(255 255 255 / .85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255 / .65);box-shadow:0 18px 50px rgb(15 45 107 / .1);
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,box-shadow 300ms ease}
.prezzo-centro{background:var(--notte);color:#fff;border-color:var(--notte);
  box-shadow:0 30px 80px rgb(15 45 107 / .32)}
.prezzo-etichetta{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:1;
  background:var(--blu);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 16px;border-radius:99px;white-space:nowrap;box-shadow:0 6px 16px rgb(17 92 250 / .35)}
.prezzo-occhiello{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blu)}
.prezzo-centro .prezzo-occhiello{color:rgb(255 255 255 / .6)}
.prezzo h3{font-size:22px;margin-top:12px}
.prezzo-cifra{font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:18px}
.prezzo-cifra small{font-size:22px;font-weight:600;margin-right:4px}
.prezzo-cifra span{font-size:24px;font-weight:600;vertical-align:top;margin-left:2px}
.prezzo-cifra-testo{font-size:32px;letter-spacing:-.01em}
.prezzo-ricorrenza{font-size:13px;color:var(--ardesia);margin-top:8px}
.prezzo-centro .prezzo-ricorrenza{color:rgb(255 255 255 / .65)}
.prezzo-desc{font-size:14px;line-height:1.6;margin-top:18px;color:var(--notte)}
.prezzo-centro .prezzo-desc{color:rgb(255 255 255 / .9)}
.prezzo ul{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--bordo);display:grid;gap:11px;flex:1}
.prezzo-centro ul{border-top-color:rgb(255 255 255 / .16)}
.prezzo li{font-size:13.5px;color:var(--notte);padding-left:22px;position:relative;line-height:1.5}
.prezzo-centro li{color:rgb(255 255 255 / .85)}
.prezzo li:before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blu)}
.prezzo-centro li:before{background:rgb(255 255 255 / .55)}
.prezzo-cta{display:inline-block;margin-top:26px;padding:13px 22px;border-radius:99px;text-align:center;
  font-size:14px;font-weight:600;color:var(--notte);border:1px solid var(--bordo);
  transition:background-color 200ms,color 200ms}
.prezzo-cta:hover{background:var(--notte);color:#fff}
.prezzo-centro .prezzo-cta{background:var(--blu);color:#fff;border-color:var(--blu)}
.prezzo-centro .prezzo-cta:hover{background:var(--blu-scuro)}

/* ── Calcolatore — sfondo globale della pagina.
   Le voci sono etichette con checkbox/radio nativi, non
   componenti su misura: restano accessibili da tastiera senza JS extra. */
.calcolatore{position:relative;padding:210px 0 130px}
.calcolatore-intro{text-align:center;padding:0 24px 50px;max-width:640px;margin-inline:auto;color:var(--notte)}
.calcolatore-intro .eyebrow{color:var(--ardesia)}
.calcolatore-intro h2{font-size:clamp(30px,3.6vw,44px);margin-top:14px;color:var(--notte)}
.calcolatore-intro p{margin-top:16px;color:var(--ardesia);font-size:15px}
body.scorre-scuro .calcolatore-intro,
body.scorre-scuro .calcolatore-intro .eyebrow,
body.scorre-scuro .calcolatore-intro h2,
body.scorre-scuro .calcolatore-intro p{color:#fff}
.calcolatore-corpo{display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"totale totale" "tipo extra";gap:28px;align-items:start;
  width:min(1120px,calc(100% - 48px));margin-inline:auto}
.calcolatore-colonna{grid-area:tipo;display:flex;flex-direction:column;gap:20px}
.calcolatore-corpo>.calcolatore-gruppo{grid-area:extra}
.calcolatore-totale{grid-area:totale}
.calcolatore-gruppo{border:0;padding:22px 24px;margin:0;border-radius:16px;
  background:rgb(255 255 255 / .78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255 / .65)}
.calcolatore-gruppo legend{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blu);padding:0 0 24px}
.calcolatore-voce{display:flex;align-items:center;gap:14px;padding:11px 0;cursor:pointer;
  border-top:1px solid var(--bordo)}
.calcolatore-gruppo legend + .calcolatore-voce{border-top:0}
.calcolatore-voce input{flex-shrink:0;width:19px;height:19px;accent-color:var(--blu)}
.calcolatore-nome{flex:1;font-size:14.5px;color:var(--notte)}
.calcolatore-prezzo{font-size:13px;font-weight:600;color:var(--ardesia);white-space:nowrap}
.calcolatore-prezzo small{font-weight:500}
.calcolatore-totale{position:sticky;top:calc(var(--barra-h) + 18px);z-index:4;padding:26px 32px;border-radius:16px;
  background:var(--notte);color:#fff;text-align:center;box-shadow:0 26px 70px rgb(15 45 107 / .25)}
.calcolatore-totale-etichetta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .6)}
.calcolatore-totale-cifra{font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:14px}
.calcolatore-totale-cifra span{font-size:24px;font-weight:600;vertical-align:top;margin-left:2px}
.calcolatore-totale-mese{margin-top:8px;font-size:14px;color:rgb(255 255 255 / .75)}
#calc-una-tantum {
  font-size: 55px;
}
.calcolatore-cta{display:block;margin-top:26px;padding:14px 22px;border-radius:99px;text-align:center;
  font-size:14.5px;font-weight:600;background:var(--blu);color:#fff;transition:background-color 200ms}
.calcolatore-cta:hover{background:var(--blu-scuro)}
.calcolatore-nota{margin-top:16px;font-size:11.5px;color:rgb(255 255 255 / .55);line-height:1.5}
@media(max-width:820px){
  .calcolatore-corpo{grid-template-columns:1fr;grid-template-areas:"totale" "tipo" "extra"}
  .calcolatore-totale{position:sticky;top:calc(var(--barra-h) + 10px);padding:20px 22px}
  .calcolatore-totale-cifra{font-size:44px;margin-top:9px}
  #calc-una-tantum{font-size:46px}
  .calcolatore-cta{margin-top:17px;padding:12px 18px}
  .calcolatore-nota{display:none}
}

/* ── Contatti — testi coordinati al colore globale della pagina ──────── */
.contatti{color:var(--chiusura-testo);padding:130px 24px;text-align:center;
  transition:color 1000ms ease}
.contatti-interno{max-width:780px;margin-inline:auto}
.contatti .eyebrow{color:var(--chiusura-secondario)}
.contatti h2{font-size:clamp(32px,4.4vw,54px);margin-top:18px}
.contatti-azioni{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px;margin-top:44px}
.contatti-principale{display:inline-block;background:var(--blu);color:#fff;padding:16px 32px;border-radius:99px;
  font-size:16px;font-weight:600;transition:background-color 200ms}
.contatti-principale:hover{background:var(--blu-scuro)}
.contatti-secondaria{color:var(--chiusura-secondario);font-size:15px;border-bottom:1px solid var(--chiusura-bordo);padding-bottom:3px;
  transition:color 200ms,border-color 200ms}
.contatti-secondaria:hover{color:var(--chiusura-testo);border-color:var(--chiusura-testo)}

/* ── Footer — quadro rinascimentale + contatti ────────────────────────── */
.footer{color:var(--chiusura-testo)}
.footer-contenuto{display:grid;grid-template-columns:1.8fr 1fr 1.4fr 1.6fr;gap:44px;
  width:min(1200px,calc(100% - 80px));margin-inline:auto;padding:84px 0 64px}
.footer-quadro{position:relative}
.footer-marchio{display:inline-flex;width:44px}
.footer-marchio svg{display:block;width:100%;height:auto;border-radius:22%}
.footer-brand>p{margin-top:20px;font-size:14px;line-height:1.7;color:var(--chiusura-secondario)}
.footer-col h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--chiusura-secondario);margin-bottom:16px}
.footer-col a,.footer-col p{display:block;font-size:14px;line-height:1.8;color:var(--chiusura-secondario)}
.footer-col a:hover{color:var(--chiusura-testo)}
.footer-fondo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px max(40px,calc((100% - 1200px) / 2)) 24px;font-size:12px;color:var(--chiusura-secondario);
  border-top:1px solid var(--chiusura-bordo)}
.footer-fondo a{color:var(--chiusura-testo)}
.footer-fondo a:hover{text-decoration:underline}

@media(hover:hover) and (pointer:fine){
  .scorre-resto a:hover{color:var(--blu)}
}
@media(min-width:761px){
  .scorre-barra{background:var(--blu)}
  .scorre-barra.scorre-scrollata{background:rgb(255 255 255 / .8);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 1px 0 rgb(15 45 107 / .14)}
  .scorre-barra .scorre-resto a,.scorre-barra .menu-tendina>button{color:#fff}
  .scorre-barra.scorre-scrollata .scorre-resto a,.scorre-barra.scorre-scrollata .menu-tendina>button{color:var(--blu)}
  .scorre-barra .scorre-resto a:hover{color:#fff;text-decoration:underline}
  .scorre-barra.scorre-scrollata .scorre-resto a:hover{color:var(--blu-scuro);text-decoration:underline}
  .scorre-barra .barra-cta{background:var(--bianco);color:var(--blu)}
  .scorre-barra.scorre-scrollata .barra-cta{background:var(--blu);color:#fff}
  .scorre-barra .barra-cta:hover{background:var(--azzurro)}
  .scorre-barra.scorre-scrollata .barra-cta:hover{background:var(--blu-scuro)}
  .scorre-barra a:focus-visible,.scorre-barra button:focus-visible{outline-color:#fff}
  .scorre-barra.scorre-scrollata a:focus-visible,.scorre-barra.scorre-scrollata button:focus-visible{outline-color:var(--blu)}
  /* Il pannello è sempre bianco: fluttua sotto il pulsante, non dentro il
     flusso della barra. */
  .menu .tendina{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:16px;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgb(15 45 107 / .18);padding:10px;min-width:210px;z-index:40}
  .menu .tendina a{display:block;padding:10px 14px;border-radius:8px;font-size:13px}
  .menu .tendina a:hover{background:var(--azzurro)}
}
@media(max-width:760px){
  html{scroll-padding-top:74px}
  :root{--barra-h:64px}
  .scorre-barra{height:64px}
  .scorre-resto{display:none}
  .scorre-barra .barra-cta{display:none}
  .menu-toggle{display:block}
  #mobile-nav{inset:64px 0 auto}
  .hero-testo{padding-top:16vh}
  /* Servizi: la scheda torna una colonna (immagine sopra, testo sotto) */
  .servizi{padding-top:90px}
  .servizi-intro{padding-bottom:50px}
  .servizio,.servizio:nth-of-type(even){grid-template-columns:1fr;height:auto;min-height:0}
  .servizio-media{order:0!important;height:46vw;max-height:260px}
  .servizio-corpo{padding:26px 24px 30px}
  /* Clienti */
  .clienti{padding:90px 0 100px}
  .logo-serie{gap:48px;padding:0 24px}
  .logo-serie img{height:34px}
  .nuvola{display:none}
  /* Prezzi */
  .prezzi{padding:90px 0}
  .prezzi-griglia{grid-template-columns:1fr;max-width:460px}
  .prezzo-evidenza{transform:none}
  .prezzo{width:min(270px,72vw);padding:26px 22px}
  /* Contatti */
  .contatti{padding:100px 22px}
  .contatti-azioni{flex-direction:column;gap:24px}
  /* Footer */
  .footer-contenuto{grid-template-columns:1fr 1fr;gap:36px 24px;width:calc(100% - 44px);padding:64px 0 48px}
  .footer-col:first-child{grid-column:1/-1}
  .footer-fondo{padding:16px 22px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .hero-scorri:before{animation:none}
}

/* riga annuale nelle card prezzi (25/09/2026) */
.prezzo-annuale{font-size:12px;color:var(--ardesia);margin:4px 0 0}
.prezzo-centro .prezzo-annuale{color:rgb(255 255 255 / .55)}

/* doppia azione nelle card prezzi: Ordina (flusso di pagamento) + Contattami (scorre a #contatti) — 25/09/2026 */
.prezzo-azioni{display:grid;gap:6px;margin-top:22px}
.prezzo-azioni .prezzo-cta{margin-top:0}
.prezzo-contatto{display:block;text-align:center;font-size:13.5px;font-weight:600;color:var(--blu);text-decoration:none;padding:9px 10px;border-radius:99px}
.prezzo-contatto:hover{background:rgb(17 92 250 / .08)}
.prezzo-centro .prezzo-contatto{color:#fff}
.prezzo-centro .prezzo-contatto:hover{background:rgb(255 255 255 / .12)}

/* card prezzi: «Procedi» e «Contattaci» affiancati, anche da mobile (25/09/2026) */
.prezzo-azioni{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.prezzo-azioni .prezzo-cta,.prezzo-contatto{margin:0;padding:12px 10px;border-radius:99px;font-size:13.5px;font-weight:600;text-align:center;text-decoration:none;line-height:1.2;white-space:nowrap}
.prezzo-contatto{display:block;color:var(--notte);border:1px solid var(--bordo);background:transparent;transition:background-color 200ms,color 200ms}
.prezzo-contatto:hover{background:var(--notte);color:#fff}
.prezzo-centro .prezzo-contatto{color:#fff;border-color:rgb(255 255 255 / .35)}
.prezzo-centro .prezzo-contatto:hover{background:rgb(255 255 255 / .14)}
.prezzo-azioni .prezzo-cta:only-child{grid-column:1/-1}

/* Preventivo rapido: scelte a sinistra, totale a destra in sticky (desktop); da mobile totale sopra, come prima — 25/09/2026 */
.calcolatore-corpo{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"scelte totale"}
.calcolatore-scelte{grid-area:scelte;display:grid;gap:20px;min-width:0}
.calcolatore-totale{grid-area:totale}
.calcolatore-azioni{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
.calcolatore-azioni .calcolatore-cta{margin-top:0;padding:13px 12px;white-space:nowrap}
.calcolatore-contatto{display:block;padding:13px 12px;border-radius:99px;text-align:center;font-size:14.5px;font-weight:600;color:#fff;border:1px solid rgb(255 255 255 / .35);text-decoration:none;white-space:nowrap;transition:background-color 200ms}
.calcolatore-contatto:hover{background:rgb(255 255 255 / .14)}
@media(max-width:820px){
  .calcolatore-corpo{grid-template-columns:1fr;grid-template-areas:"totale" "scelte"}
  .calcolatore-azioni .calcolatore-cta,.calcolatore-contatto{padding:12px 10px;font-size:14px}
}
/* Tariffe: senza paragrafo introduttivo, su desktop le schede salgono verso il titolo */
@media(min-width:821px){
  .prezzi-intro{padding-bottom:0}
  .prezzi-intro h2{margin-bottom:0}
}
/* Tariffe, desktop: la giostra (alta 100svh, schede centrate) parte più in alto, così le schede stanno a ~36px dal titolo */
@media(min-width:821px){
  .prezzi[data-scorre="giostra"] .scorre-fermo{margin-top:-118px}
}