/* ============================================================
   mosaiko.net — foglio di stile unico.
   Un solo file, niente framework: il sito attuale ne carica 17.
   ============================================================ */

@font-face{font-family:"Titillium";src:url("../fonts/titillium-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Titillium";src:url("../fonts/titillium-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Titillium";src:url("../fonts/titillium-semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Titillium";src:url("../fonts/titillium-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --nero:#0d0e11;
  --scuro:#14161b;
  --carta:#1b1e25;
  --linea:#2b2f39;
  --testo:#eceef2;
  --testo2:#a5abb8;
  --testo3:#767d8b;
  --arancio:#f5952a;
  --arancio-c:#ffb15c;
  --rosso:#e03127;
  --raggio:14px;
  --cont:1240px;
  --sp:clamp(56px,7vw,104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nero);color:var(--testo);
  font-family:"Titillium",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.018em;font-weight:700}
p{margin:0 0 1em}
.cont{max-width:var(--cont);margin:0 auto;padding:0 24px}
.cont.stretto{max-width:820px}
.sez{padding:var(--sp) 0}
.sez-scura{background:var(--scuro)}
.salta{position:absolute;left:-9999px}
.salta:focus{left:16px;top:16px;z-index:99;background:var(--arancio);color:#000;padding:10px 18px;border-radius:8px}
:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}

/* ---------- Testata ---------- */
.testata{position:sticky;top:0;z-index:50;background:rgba(13,14,17,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.testata-in{max-width:var(--cont);margin:0 auto;padding:0 24px;height:92px;display:flex;align-items:center;gap:28px}
.marchio{display:flex;align-items:center;flex-shrink:0}
.marchio-img{height:52px;width:auto}
.nav{display:flex;gap:26px;margin-left:12px;flex:1}
.nav a{font-size:15px;color:var(--testo2);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--testo)}
.nav a[aria-current="page"]{color:var(--testo);border-bottom-color:var(--arancio)}
.testata-az{display:flex;align-items:center;gap:12px}
.lingue{display:flex;gap:2px;border:1px solid var(--linea);border-radius:8px;padding:2px}
.lingue a{font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;color:var(--testo3);letter-spacing:.04em}
.lingue a[aria-current="true"]{background:var(--linea);color:var(--testo)}
.lingue a:hover{color:var(--testo)}
.hamburger{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.hamburger span{width:22px;height:2px;background:var(--testo);display:block;transition:.2s}
.menu-mobile{display:none;flex-direction:column;padding:8px 24px 22px;border-top:1px solid var(--linea)}
.menu-mobile a{padding:13px 0;border-bottom:1px solid var(--linea);font-size:17px}
.menu-mobile-fondo{display:flex;align-items:center;gap:12px;padding-top:16px;flex-wrap:wrap}
.menu-mobile-fondo .btn{padding:9px 15px}
.menu-mobile-fondo .lingue a{padding:5px 10px}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:9px;
  border:1px solid transparent;transition:.16s;white-space:nowrap;cursor:pointer}
.btn-primario{background:var(--arancio);color:#1a1206}
.btn-primario:hover{background:var(--arancio-c)}
.btn-tel{border-color:var(--linea);color:var(--testo2)}
.btn-tel:hover{border-color:var(--testo3);color:var(--testo)}
/* Il numero coperto: finché non si scopre resta in tinta smorzata */
.tel-protetto{cursor:pointer}
.tel-protetto .tel-testo{font-variant-numeric:tabular-nums}
.tel-protetto:not(.tel-aperto) .tel-testo{letter-spacing:.02em}
.btn-fantasma{border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(6px)}
.btn-fantasma:hover{background:rgba(255,255,255,.1)}
.btn-chiaro{border-color:var(--linea);color:var(--testo)}
.btn-chiaro:hover{background:var(--carta)}
.btn-grande{font-size:16px;padding:14px 26px}
.solo-stretto{display:none}

/* ---------- Eroe ---------- */
/* L'altezza e la posizione delle scritte arrivano dal pannello, come
   variabili scritte sul tag: il CSS non sa quante combinazioni ci sono,
   le mette semplicemente dove gli viene detto. */
.eroe{position:relative;min-height:var(--eroe-alta,min(84vh,780px));
  display:flex;align-items:var(--eroe-vert,flex-end);overflow:hidden}
.eroe-sfondo{position:absolute;inset:0;z-index:0}
.eroe-sfondo picture,.eroe-sfondo img{width:100%;height:100%;object-fit:cover}
.eroe::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,14,17,.55) 0%,rgba(13,14,17,.30) 35%,rgba(13,14,17,.94) 100%)}
.eroe-in{position:relative;z-index:2;padding-top:120px;padding-bottom:76px;width:100%;
  display:flex;justify-content:var(--eroe-oriz,flex-start)}
.eroe-testo{max-width:900px}
/* Al centro e a destra il testo si allinea di conseguenza: una riga
   lunga allineata a sinistra dentro una colonna a destra sembra un errore. */
.eroe[data-pos^="centro"] .eroe-testo{text-align:center}
.eroe[data-pos^="centro"] .eroe-bt{justify-content:center}
.eroe[data-pos^="centro"] .eroe-sub{margin-left:auto;margin-right:auto}
.eroe[data-pos^="dx"] .eroe-testo{text-align:right}
.eroe[data-pos^="dx"] .eroe-bt{justify-content:flex-end}
.eroe[data-pos^="dx"] .eroe-sub{margin-left:auto}
/* In alto e in mezzo il respiro va ridistribuito, se no il testo
   resta appiccicato alla testata del sito. */
.eroe[data-pos$="-alto"] .eroe-in{padding-top:150px;padding-bottom:60px}
.eroe[data-pos$="-mezzo"] .eroe-in{padding-top:110px;padding-bottom:100px}
.occhiello{color:var(--arancio);font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px}
.eroe h1{font-size:clamp(38px,6.2vw,68px);margin:0 0 20px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.eroe-sub{font-size:clamp(17px,2.1vw,21px);color:#dfe3ea;max-width:62ch;margin:0 0 32px}
.eroe-bt{display:flex;gap:12px;flex-wrap:wrap}
/* Senza scritte la sfumatura scura non serve piu': copriva il testo,
   e senza testo toglie solo luce alla fotografia. */
.eroe:not(:has(.eroe-in))::after{background:linear-gradient(180deg,rgba(13,14,17,.30) 0%,rgba(13,14,17,0) 40%,rgba(13,14,17,.55) 100%)}

/* ---------- Numeri ---------- */
.numeri{background:var(--arancio);color:#1a1206}
.numeri-griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding-top:34px;padding-bottom:34px}
.numero{display:flex;flex-direction:column;gap:3px;padding-right:20px}
.numero-v{font-size:clamp(30px,3.6vw,42px);font-weight:700;line-height:1;letter-spacing:-.03em}
.numero-u{font-size:.52em;margin-left:3px;font-weight:600}
.numero-e{font-size:13.5px;font-weight:600;opacity:.78;line-height:1.35}

/* ---------- Sezioni ---------- */
.sez-testa{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sez-testa h2,.h-sez{font-size:clamp(25px,3.2vw,34px)}
.h-sez{margin-bottom:26px}
.link-oltre{color:var(--arancio);font-weight:600;font-size:15px}
.link-oltre:hover{color:var(--arancio-c)}

.punti{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.punto h2{font-size:21px;margin-bottom:12px;position:relative;padding-top:20px}
.punto h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--arancio)}
.punto p{color:var(--testo2);margin:0;font-size:16px}

.valori{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.valore h2{font-size:16px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;color:var(--arancio)}
.valore p{color:var(--testo2);font-size:15.5px;margin:0}

/* ---------- Schede lavori ---------- */
.griglia-lavori{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* La foto riempie tutta la scheda e continua sotto le scritte:
   sopra ci passa una sfumatura che va al nero, così il testo si legge
   sempre senza bisogno di un fondo grigio. */
.scheda{position:relative;display:block;border-radius:var(--raggio);overflow:hidden;background:#08090b;
  border:1px solid var(--linea);transition:.18s;aspect-ratio:4/3.35;isolation:isolate}
.scheda:hover{border-color:var(--arancio);transform:translateY(-3px)}
.scheda-img{position:absolute;inset:0;overflow:hidden;background:#000}
.scheda-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.scheda:hover .scheda-img img{transform:scale(1.045)}
.scheda-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,9,11,.95) 0%, rgba(8,9,11,.88) 16%, rgba(8,9,11,.62) 32%,
    rgba(8,9,11,.28) 50%, rgba(8,9,11,.06) 68%, transparent 84%)}
.scheda-testo{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:16px 17px 15px;display:flex;flex-direction:column;gap:3px}
.scheda-fiera{font-weight:700;font-size:16.5px;letter-spacing:.01em;line-height:1.25;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.scheda-citta{color:var(--arancio);font-size:13.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.scheda-cliente{color:var(--testo3);font-size:12.5px;margin-top:4px}

/* ---------- Filtri ---------- */
.filtri{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.filtro{background:var(--carta);border:1px solid var(--linea);color:var(--testo2);
  font-weight:600;font-size:14px;line-height:1;padding:9px 15px;border-radius:99px;cursor:pointer;transition:.15s;font-family:inherit}
.filtro:hover{color:var(--testo);border-color:var(--testo3)}
.filtro.attivo{background:var(--arancio);border-color:var(--arancio);color:#1a1206}
.filtro-n{opacity:.6;font-size:12px;margin-left:3px}
.scheda[hidden]{display:none}
/* mentre il filtro lavora, le schede che escono restano dov'erano
   e la griglia si ricompone sotto di loro */
.scheda-esce{position:absolute;margin:0;pointer-events:none;z-index:1}

/* ---------- Testata di pagina ---------- */
.testa-pagina{padding:64px 0 44px;border-bottom:1px solid var(--linea);background:var(--scuro)}
.briciole{font-size:13px;color:var(--testo3);margin-bottom:18px;display:flex;gap:9px;flex-wrap:wrap}
.briciole a:hover{color:var(--arancio)}
.testa-pagina h1{font-size:clamp(31px,4.6vw,50px);margin-bottom:18px}
.sommario{font-size:19px;color:var(--testo2);max-width:64ch;margin:0}

/* ---------- Fasi ---------- */
.fasi{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:34px;counter-reset:f}
.fase{display:flex;gap:24px}
.fase-n{font-size:15px;font-weight:700;color:var(--arancio);padding-top:4px;flex-shrink:0;letter-spacing:.05em}
.fase h2{font-size:20px;margin-bottom:8px}
.fase p{color:var(--testo2);margin:0;font-size:16px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{padding:19px 0;cursor:pointer;font-weight:600;font-size:17.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--arancio);font-size:24px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--testo2);padding:0 0 20px;margin:0;max-width:70ch}

/* ---------- Lavoro ---------- */
/* ---------- La testata del lavoro: le scritte sulla fotografia ----------
   L'immagine comincia subito sotto la barra del sito e occupa lo
   schermo; briciole, titolo e dati stanno in basso a sinistra su una
   sfumatura, come le schede della griglia. */
.lavoro-eroe{position:relative;width:100%;background:#000;overflow:hidden;isolation:isolate;
  aspect-ratio:var(--pro-s,3/2);max-height:calc(100vh - 92px);min-height:min(560px,74vh);
  display:flex;align-items:flex-end}
.lavoro-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,9,11,.94) 0%, rgba(8,9,11,.86) 14%, rgba(8,9,11,.62) 30%,
    rgba(8,9,11,.26) 48%, rgba(8,9,11,.04) 66%, transparent 80%)}
.lavoro-scritte{position:relative;z-index:2;width:100%;padding-top:44px;padding-bottom:clamp(30px,4.4vw,58px)}
.lavoro-scritte .briciole{margin-bottom:12px;color:#aeb5c2;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.lavoro-scritte .briciole a{color:#cfd4dd}
.lavoro-scritte h1{font-size:clamp(30px,4.4vw,52px);margin-bottom:22px;max-width:20ch;
  text-shadow:0 2px 26px rgba(0,0,0,.6)}
.dati-su-foto{gap:clamp(20px,2.6vw,40px)}
.dati-su-foto dt{color:var(--arancio)}
.dati-su-foto dd{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.dati{display:flex;flex-wrap:wrap;gap:34px;margin:0}
.dati div{display:flex;flex-direction:column;gap:3px}
.dati dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--testo3);font-weight:700}
.dati dd{margin:0;font-size:17px;font-weight:600}
.corpo{font-size:18px;color:var(--testo2)}
.corpo p{margin-bottom:1.15em}
/* ---------- Le diapositive del lavoro ----------
   Una fotografia alla volta, dentro la testata: anche con due sole
   immagini la pagina resta piena, senza griglie sguarnite. */
.diapo-pista{position:absolute;inset:0;z-index:0}
.diapo-el{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .62s ease,visibility 0s linear .62s}
.diapo-el.ora{opacity:1;visibility:visible;transition:opacity .62s ease,visibility 0s}
.diapo-el picture,.diapo-el img{width:100%;height:100%;object-fit:cover;display:block}
.diapo-el.ora img{animation:diapo-respiro 7.5s ease-out both}
@keyframes diapo-respiro{from{transform:scale(1.035)}to{transform:scale(1)}}

.diapo-bt{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
  cursor:pointer;color:#fff;background:rgba(16,17,20,.45);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);transition:.15s;opacity:.55}
.lavoro-eroe:hover .diapo-bt,.diapo-bt:focus-visible{opacity:1}
.diapo-bt:hover{background:var(--arancio);color:#1a1206;border-color:transparent}
.diapo-prima{left:20px}
.diapo-dopo{right:20px}

/* pallini e conteggio in basso a destra, lontani dalle scritte */
.diapo-comandi{position:absolute;right:clamp(16px,3.2vw,44px);bottom:clamp(26px,4vw,52px);z-index:4;
  display:flex;align-items:center;gap:12px}
.diapo-punti{display:flex;gap:7px;padding:7px 11px;border-radius:99px;
  background:rgba(16,17,20,.45);backdrop-filter:blur(8px)}
.diapo-punto{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:.18s}
.diapo-punto:hover{background:rgba(255,255,255,.85)}
.diapo-punto.ora{background:var(--arancio);width:22px;border-radius:99px}
.diapo-conta{font-size:12px;font-weight:700;color:#fff;
  background:rgba(16,17,20,.45);backdrop-filter:blur(8px);
  padding:6px 11px;border-radius:99px;font-variant-numeric:tabular-nums}

@media(max-width:1024px){ .lavoro-eroe{aspect-ratio:var(--pro-t,3/2)} }
@media(max-width:640px){
  .lavoro-eroe{aspect-ratio:auto;height:auto;max-height:none;min-height:min(78vh,620px)}
  .diapo-bt{width:38px;height:38px;opacity:1;top:38%}
  .diapo-prima{left:8px}.diapo-dopo{right:8px}
  .lavoro-scritte{padding-top:120px;padding-bottom:22px}
  .lavoro-scritte h1{margin-bottom:16px}
  .dati-su-foto{gap:16px 22px}
  .dati-su-foto dd{font-size:15.5px}
  .diapo-comandi{right:auto;left:24px;bottom:auto;top:16px}
}

/* ---------- Contatti / modulo ---------- */
.contatti-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.riquadro{background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);padding:26px}
.riquadro h2{font-size:19px;margin-bottom:12px}
.riquadro .grande{font-size:19px;font-weight:600;margin:0 0 8px}
.riquadro a:hover{color:var(--arancio)}
.ruolo{color:var(--arancio);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.minuto{color:var(--testo3);font-size:14px;margin:0}
.modulo{background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);padding:32px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campi label{display:flex;flex-direction:column;gap:7px}
.campi label.pieno{grid-column:1/-1}
.campi span{font-size:13.5px;font-weight:600;color:var(--testo2)}
.campi input,.campi textarea{background:var(--nero);border:1px solid var(--linea);border-radius:9px;
  padding:11px 13px;color:var(--testo);font-size:16px;line-height:1.5;font-family:inherit}
.campi input:focus,.campi textarea:focus{border-color:var(--arancio);outline:none}
.consenso{display:flex;gap:11px;align-items:flex-start;margin:22px 0;font-size:14px;color:var(--testo2)}
.consenso input{margin-top:4px;accent-color:var(--arancio)}
.trappola{position:absolute;left:-9999px}
.nota-modulo{margin-top:20px;color:var(--testo3);font-size:15px}
.nota-modulo a{color:var(--arancio);font-weight:600}

/* ---------- Richiamo finale + piede ---------- */
.richiamo{background:linear-gradient(135deg,var(--arancio) 0%,#e0761f 100%);color:#1a1206;padding:var(--sp) 0;text-align:center}
.richiamo h2{font-size:clamp(27px,3.8vw,40px);margin-bottom:14px}
.richiamo p{font-size:18px;max-width:56ch;margin:0 auto 28px;opacity:.85}
.richiamo-bt{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.richiamo .btn-primario{background:#1a1206;color:var(--arancio)}
.richiamo .btn-chiaro{border-color:rgba(26,18,6,.35);color:#1a1206}
.richiamo .btn-chiaro:hover{background:rgba(26,18,6,.09)}

.pie{background:var(--scuro);border-top:1px solid var(--linea);padding:56px 0 0}
.pie-griglia{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
.pie .gr-titolo{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--testo3);margin-bottom:15px}
.pie ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--testo2)}
.pie a:hover{color:var(--arancio)}
.pie-marchio{height:74px;width:auto;display:block;margin-bottom:18px}
.pie-desc{color:var(--testo3);font-size:14.5px;max-width:34ch;margin:0}
.pie-piva{color:var(--testo3);font-size:12.5px}
/* fra i tre gruppi ci vuole aria: sulla stessa riga 18px li facevano
   sembrare un blocco unico */
.pie-fondo{display:flex;justify-content:space-between;align-items:center;gap:16px 42px;
  padding-top:22px;padding-bottom:26px;border-top:1px solid var(--linea);color:var(--testo3);font-size:13.5px;flex-wrap:wrap}
.lingue-pie{border:0;padding:0;gap:16px}
.lingue-pie a{padding:0;font-size:13.5px;font-weight:400}

/* ---------- Adattamento ---------- */
@media(max-width:1080px){
  .punti{grid-template-columns:1fr;gap:30px}
  .valori{grid-template-columns:repeat(2,1fr)}
  .pie-griglia{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  .nav,.testata-az .btn-tel{display:none}
  .hamburger{display:flex}
  .testata-in{gap:14px;justify-content:space-between}
  .menu-mobile[hidden]{display:none}
  .menu-mobile:not([hidden]){display:flex}
  .griglia-lavori{grid-template-columns:repeat(2,1fr)}
  .numeri-griglia{grid-template-columns:repeat(2,1fr);gap:26px}
  .contatti-griglia{grid-template-columns:1fr}
  .solo-largo{display:none}.solo-stretto{display:inline}
}
@media(max-width:640px){
  body{font-size:16px}
  .marchio-img{height:42px}
  /* Sul telefono nella barra restano marchio, preventivo e menu:
     lingue e telefono scendono dentro il menu, così non straborda. */
  .testata-az .lingue{display:none}
  .testata-az .btn-primario{font-size:13.5px;padding:9px 13px}
  .testata-in{gap:10px;padding:0 16px}
  .griglia-lavori,.campi{grid-template-columns:1fr}
  .valori{grid-template-columns:1fr}
  .pie-griglia{grid-template-columns:1fr;gap:30px}
  .eroe{min-height:74vh}
  .eroe-in{padding-top:90px;padding-bottom:52px}
  .dati{gap:22px}
  .modulo{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ============================================================
   Aggiunte: icone, carosello dell'eroe, ritratti dei referenti
   ============================================================ */

/* ---------- Icone ---------- */
.ico{display:block;color:var(--arancio)}
.punto-ico{display:block;margin-bottom:14px;color:var(--arancio)}
.punto-ico .ico{width:30px;height:30px}
.punto h2{padding-top:0}
.punto h2::before{display:none}

.fase{gap:20px}
.fase-ico{flex-shrink:0;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);border-radius:12px;background:var(--carta);color:var(--arancio);margin-top:2px}
.fase-n{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--testo3);margin-bottom:5px}

/* ---------- Carosello dell'eroe ---------- */
.diapo{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.diapo.attiva{opacity:1}
.diapo picture,.diapo img{width:100%;height:100%;object-fit:cover}
.eroe-punti{position:absolute;right:28px;bottom:26px;z-index:3;display:flex;gap:9px}
.eroe-punti button{width:26px;height:3px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(255,255,255,.34);transition:.2s}
.eroe-punti button[aria-selected="true"]{background:var(--arancio);width:38px}
.eroe-punti button:hover{background:rgba(255,255,255,.62)}

/* ---------- Ritratti dei referenti ---------- */
.persona{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.persona h2{font-size:19px;margin:0 0 3px}
.persona .ruolo{margin:0}
.ritratto{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--linea);background:var(--nero)}
.ritratto-vuoto{display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:19px;letter-spacing:.04em;color:var(--testo3)}

@media(max-width:640px){
  .eroe-punti{right:auto;left:24px;bottom:20px}
  .fase{gap:14px}
  .fase-ico{width:44px;height:44px}
  .fase-ico .ico{width:22px;height:22px}
}
.ritratto-box{flex-shrink:0;line-height:0}


/* Colonne configurabili dai blocchi */
.punti{grid-template-columns:repeat(var(--punti-col,3),1fr)}
.griglia-lavori{grid-template-columns:repeat(var(--lav-col,3),1fr)}
.numeri-griglia{grid-template-columns:repeat(var(--num-col,4),1fr)}
.blocco-immagine{margin:0;overflow:hidden;background:#000}
.blocco-immagine img{width:100%;height:100%;object-fit:cover}
.didascalia{color:var(--testo3);font-size:14.5px;margin:14px 0 0;text-align:center}
.punto h3{font-size:21px;margin-bottom:12px}
.fase h3{font-size:20px;margin-bottom:8px}
.riquadro h3{font-size:19px;margin-bottom:12px}
@media(max-width:1080px){.punti{grid-template-columns:repeat(min(var(--punti-col,3),2),1fr)}}
@media(max-width:920px){.griglia-lavori{grid-template-columns:repeat(min(var(--lav-col,3),2),1fr)}
  .numeri-griglia{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.punti,.griglia-lavori{grid-template-columns:1fr}}

/* --- Griglia libera --- */
.gr{display:grid;grid-template-columns:repeat(var(--gr-col,3),1fr);gap:var(--gr-gap,22px)}
.gr-cella{grid-column:span var(--gr-largo,1);display:flex;flex-direction:column;gap:var(--gr-gap-el,12px);min-width:0}
.gr-riquadri .gr-cella{background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:var(--gr-pad,26px)}
.gr-centro .gr-cella{align-items:center;text-align:center}
.gr-el{min-width:0}
.gr-titolo{margin:0;font-size:18px}
h2.gr-titolo{font-size:24px}
h4.gr-titolo{font-size:15px}
.gr-testo{margin:0;color:var(--testo2)}
.gr-testo.minuto{font-size:13.5px}
/* La cornice ritaglia, la foto dentro può essere ingrandita e spostata */
.gr-imgbox{display:grid;overflow:hidden;border-radius:10px;width:100%;line-height:0}
.gr-imgbox.gr-tonda{border-radius:50%;width:120px;max-width:100%}
.gr-img{grid-area:1/1;width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.gr-icona{color:var(--arancio);display:flex}
.gr-centro .gr-icona{justify-content:center}
.gr-dato{display:flex;flex-direction:column;gap:3px}
.gr-dato .gr-et{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--testo3)}
.gr-dato .grande{font-size:19px;font-weight:600}
.gr-linea{border:0;border-top:1px solid var(--linea);margin:4px 0;width:100%}
@media (max-width:980px){
  .gr{grid-template-columns:repeat(var(--gr-col-t,2),1fr)}
  .gr-cella{grid-column:span 1}
}
@media (max-width:620px){
  .gr{grid-template-columns:repeat(var(--gr-col-m,1),1fr)}
  .gr-cella{grid-column:span 1}
}

/* --- Menu a tendina --- */
.nav-gruppo{position:relative;display:flex}
.nav-voce{display:inline-flex;align-items:center;gap:5px}
.nav-tendina{position:absolute;top:100%;left:-14px;min-width:250px;padding:8px;
  background:rgba(20,22,27,.98);backdrop-filter:blur(14px);
  border:1px solid var(--linea);border-radius:12px;box-shadow:0 18px 42px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s}
.nav-gruppo:hover .nav-tendina,.nav-gruppo:focus-within .nav-tendina{opacity:1;visibility:visible;transform:none}
.nav-tendina a{padding:9px 12px;border-radius:8px;border-bottom:0;font-size:14.5px;white-space:normal}
.nav-tendina a:hover{background:var(--carta);color:var(--testo)}
.nav-tendina a[aria-current="page"]{color:var(--arancio);border-bottom:0}
.menu-mobile-gruppo{display:block;color:var(--testo3);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.12em;padding:14px 0 4px}
.menu-mobile-figlio{padding-left:16px}

/* --- Piè di pagina montato a moduli --- */
.pie-modulo .sez{padding:52px 0 40px}
.pie-modulo .sez-scura{background:transparent}
.pie .gr{gap:38px}
.pie .gr-titolo{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--testo3);margin-bottom:2px}
.pie .gr-dato .grande,.pie .gr-dato span{font-size:15px;font-weight:400;color:var(--testo2)}
.pie .persona h3{font-size:15px;margin:0;text-transform:none;letter-spacing:0;color:var(--testo)}
.pie .persona{gap:0}
.gr-logo{width:auto;display:block;margin-bottom:4px}
.gr-link{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--testo2)}
.gr-link a{color:var(--testo2)}
.gr-link a:hover{color:var(--arancio)}

/* --- Barre di scorrimento --- */
html { scrollbar-width: thin; scrollbar-color: #2f343d transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b2f39; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3d4450; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* --- Scheda persona --- */
.gr-persona{display:flex;align-items:center;gap:14px;min-width:0}
.gr-persona-sotto{flex-direction:column;align-items:flex-start}
.gr-ritratto-box{display:block;overflow:hidden;border-radius:10px;flex:0 0 auto;line-height:0}
.gr-ritratto-box.gr-tonda{border-radius:50%}
.gr-ritratto{width:100%;height:100%;object-fit:cover;display:block}
.gr-persona-testi{display:flex;flex-direction:column;min-width:0}
.gr-pnome{font-weight:700;line-height:1.25}
.gr-pruolo{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--arancio)}
.gr-ptel,.gr-pmail{color:var(--testo2)}
.gr-ptel:hover,.gr-pmail:hover{color:var(--arancio)}
/* L'indirizzo e la partita IVA: stessa colonna del telefono e dell'email,
   cosi' le righe si incolonnano invece di ballare */
.gr-pvia,.gr-pcitta,.gr-pnaz,.gr-ppiva{color:var(--testo2);line-height:1.4}
.gr-ppiva{color:var(--testo3)}

/* Il vecchio riquadro referente: niente spazio morto in fondo */
.persona{display:flex;align-items:center;gap:14px}
.persona p{margin:0}
.persona h3{margin:0}
.persona > div{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ============================================================
   Progettista del ledwall
   I comandi stanno intorno all'immagine: barra sopra, colonna
   corta e appiccicata a destra, numeri in riga sotto. Così la
   foto resta sempre sotto gli occhi.
   ============================================================ */
.pg{background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:16px;margin-bottom:26px;scroll-margin-top:104px}
.pg.in-arrivo{border-color:var(--arancio);box-shadow:0 0 0 3px rgba(245,149,42,.15)}

.pg-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:92px;z-index:20;background:var(--carta);
  padding:8px 0 10px;margin:-8px 0 6px}
.pg-gpagine,.pg-gzoom{display:flex;align-items:center;gap:7px;background:var(--nero);
  border:1px solid var(--linea);border-radius:99px;padding:4px 8px}
.pg-gzoom{margin-left:auto}
.pg-gpagine[hidden]{display:none}
.pg-pag-testo{font-size:12.5px;color:var(--testo2);white-space:nowrap}
.pg-pag-testo b{color:var(--testo)}
.pg-gzoom b{font-size:12.5px;color:var(--testo);min-width:42px;text-align:center}
.pg-tondo{width:26px;height:26px;border-radius:50%;border:1px solid var(--linea);
  background:var(--carta);color:var(--testo);font-size:15px;line-height:1;cursor:pointer;font-family:inherit}
.pg-tondo:hover{border-color:var(--arancio);color:var(--arancio)}
.pg-pallini{display:flex;gap:4px;margin-left:4px}
.pg-pallino{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--linea)}
.pg-pallino.pieno{background:var(--testo3)}
.pg-pallino.ora{background:var(--arancio);transform:scale(1.25)}

.pg-gpareti{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-chip{display:inline-flex;align-items:center;gap:7px;background:var(--nero);
  border:1px solid var(--linea);border-radius:99px;padding:6px 13px;color:var(--testo2);
  font-weight:600;font-size:12.5px;line-height:1;cursor:pointer;font-family:inherit;transition:.14s}
.pg-chip:hover{color:var(--testo);border-color:var(--testo3)}
.pg-chip.attiva{border-color:var(--arancio);color:var(--testo);background:rgba(245,149,42,.10)}
.pg-chip.vuota span{opacity:.6;font-style:italic}
.pg-chip-via{font-size:11px;opacity:.7}
.pg-chip-via:hover{opacity:1;color:#ff8a72}
.pg-chip-piu{border-style:dashed;color:var(--arancio)}

.pg-corpo{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:16px;align-items:start}
.pg-scena{position:relative;min-width:0}
#pg-tela{width:100%;display:block;border-radius:12px;background:#0a0b0d;
  border:1px solid var(--linea);cursor:crosshair;touch-action:none}
#pg-tela.su-angolo{cursor:grab}
#pg-tela.in-mano{cursor:grabbing}

.pg-carica[hidden]{display:none}
.pg-carica{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:24px;color:var(--testo2);
  background:rgba(10,11,13,.72);border-radius:12px;backdrop-filter:blur(2px)}
.pg-invito{margin:0;font-size:17px;font-weight:600;color:var(--testo)}
.pg-minuto{margin:0;font-size:13px;color:var(--testo3);max-width:52ch}
.pg-bottoni{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.pg-guida{margin:10px 0 0;font-size:13.5px;color:var(--testo2);min-height:20px}
.pg-messaggio{position:absolute;left:14px;bottom:14px;margin:0;font-size:13.5px;color:#ffb4a4;
  background:rgba(10,11,13,.9);border-radius:8px;padding:8px 12px}
.pg-attesa-segno{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(10,11,13,.88);padding:12px 20px;border-radius:99px;font-size:14px}
.pg.pg-attesa .pg-attesa-segno{display:block}

/* La colonna resta corta e segue lo scorrimento */
.pg-lato{display:flex;flex-direction:column;gap:14px;background:var(--nero);
  border:1px solid var(--linea);border-radius:12px;padding:14px;
  position:sticky;top:152px;max-height:calc(100vh - 176px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent}
.pg-lato::-webkit-scrollbar{width:9px}
.pg-lato::-webkit-scrollbar-thumb{background:var(--linea);border-radius:9px}
.pg-gruppo h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--arancio)}
.pg-serie,.pg-moduli{display:flex;gap:6px;flex-wrap:wrap}
.pg-moduli{margin-top:6px}
.pg-bt{flex:1 1 46%;display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  background:var(--carta);border:1px solid var(--linea);border-radius:9px;padding:7px 9px;
  color:var(--testo2);cursor:pointer;font-family:inherit;transition:.14s}
.pg-bt strong{font-size:13.5px;color:var(--testo)}
.pg-bt em{font-style:normal;font-size:11px;color:var(--testo3)}
.pg-bt:hover{border-color:var(--testo3)}
.pg-bt.attiva{border-color:var(--arancio);background:rgba(245,149,42,.10)}
.pg-nota{margin:7px 0 0;font-size:12px;color:var(--testo3);line-height:1.45}
.pg-toll.pg-toll-no{color:#ffcf8a}

.pg-misure{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.pg-misure label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--testo2)}
.pg-misure label span{flex:1}
.pg-misure input{width:84px;background:var(--carta);border:1px solid var(--linea);border-radius:8px;
  color:var(--testo);font-weight:600;font-size:13.5px;line-height:1;padding:7px 9px;font-family:inherit;text-align:right}
.pg-misure input:focus{border-color:var(--arancio);outline:none}
.pg-misure em{font-style:normal;font-size:11.5px;color:var(--testo3);width:22px}

.pg-conta{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px;color:var(--testo2)}
.pg-conta span{flex:1}
.pg-conta b{min-width:24px;text-align:center;font-size:14.5px;color:var(--testo)}
.pg-passo-bt{width:26px;height:26px;border-radius:8px;border:1px solid var(--linea);
  background:var(--carta);color:var(--testo);font-size:15px;line-height:1;cursor:pointer;font-family:inherit}
.pg-passo-bt:hover{border-color:var(--arancio);color:var(--arancio)}
.pg-testo-bt{background:var(--carta);border:1px solid var(--linea);border-radius:8px;
  color:var(--testo2);font-weight:600;font-size:12px;line-height:1;padding:8px 10px;cursor:pointer;font-family:inherit;transition:.14s}
.pg-testo-bt:hover{border-color:var(--testo3);color:var(--testo)}
.pg-testo-bt.attiva{border-color:var(--arancio);color:var(--arancio)}
.pg-largo{width:100%}
/* I pulsanti di testo portano la loro icona: con dieci comandi uguali
   in colonna, il disegnino è quello che li fa distinguere al volo. */
.pg-testo-bt{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.pg-ico{flex:0 0 15px;opacity:.85}
.pg-testo-bt.attiva .pg-ico{opacity:1}
.pg-interruttori{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pg-solo-contenuto{display:none}

/* ---------- Diffusori e monitor sul disegno ---------- */
.pg-ogg-scelta select{width:100%;margin-bottom:8px;padding:9px 11px;border-radius:9px;
  background:var(--nero);border:1px solid var(--linea);color:var(--testo);
  font:inherit;font-size:12.5px;cursor:pointer}
.pg-ogg-comandi[hidden]{display:none}
.pg-ogg-comandi{margin-top:14px;padding-top:13px;border-top:1px solid var(--linea)}
.pg-ogg-chi{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--arancio)}
.pg-leva{display:block;margin:0 0 13px}
.pg-leva[hidden]{display:none}
.pg-leva > span{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:11.5px;color:var(--testo3);margin-bottom:5px}
.pg-leva > span em{font-style:normal;font-weight:600;color:var(--testo2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-leva input[type=range]{width:100%;margin:0;accent-color:var(--arancio);height:4px}
/* la prospettiva ha lo zero al centro: un segno lo ricorda */
.pg-leva-mezzo{position:relative;display:block}
.pg-leva-mezzo::after{content:"";position:absolute;left:50%;bottom:-3px;width:1px;height:7px;
  background:var(--linea);pointer-events:none}
.pg-leva-nota{display:block;margin-top:5px;font-style:normal;font-size:11px;
  line-height:1.5;color:var(--testo3)}

/* quello che si chiede senza disegnarlo */
.pg-carrello{margin-top:14px;padding-top:13px;border-top:1px solid var(--linea)}
.pg-carrello h5{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--testo3);font-weight:600}
.pg-car-elenco{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pg-car-elenco li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--testo2);
  background:var(--nero);border:1px solid var(--linea);border-radius:8px;padding:7px 9px}
.pg-car-elenco li span{flex:1}
.pg-car-via{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--testo3);
  font:inherit;font-size:16px;line-height:1}
.pg-car-via:hover{color:var(--arancio)}

/* ---------- Il progetto caricato, in cima alla colonna ---------- */
.pg-gfile[hidden]{display:none}
.pg-file-cassa{border:1px solid var(--linea);border-radius:10px;overflow:hidden;background:var(--nero)}
.pg-file-mini{display:block;width:100%;height:auto;background:#0c0d10}
.pg-file-nome{margin:0;padding:7px 9px;font-size:11.5px;line-height:1.35;color:var(--testo3);
  border-top:1px solid var(--linea);word-break:break-word}
.pg-bt-cambia{margin-top:9px;padding:10px;font-size:12.5px;
  background:rgba(245,149,42,.12);border-color:rgba(245,149,42,.45);color:var(--arancio)}
.pg-bt-cambia:hover{background:rgba(245,149,42,.2);border-color:var(--arancio);color:var(--arancio)}
/* i formati accettati, sotto il pulsante di caricamento */
.pg-formati{margin:12px 0 0;font-size:12px;color:var(--testo3);letter-spacing:.02em}
.pg.pg-con-contenuto .pg-solo-contenuto{display:inline-block}

.pg-formato{margin-top:11px;border-top:1px solid var(--linea);padding-top:11px}
.pg-formato p{margin:0 0 9px;font-size:12px;color:var(--testo2);line-height:1.5}
.pg-formato.pg-formato-no p{color:#ffcf8a}
.pg-proposte{display:flex;flex-direction:column;gap:6px}
.pg-proposta{display:flex;align-items:center;gap:9px;text-align:left;width:100%;
  background:var(--carta);border:1px solid var(--linea);border-radius:10px;padding:7px 9px;
  cursor:pointer;font-family:inherit;transition:.14s}
.pg-proposta:hover{border-color:var(--arancio)}
.pg-mini{display:flex;align-items:center;justify-content:center;width:62px;flex:0 0 62px}
.pg-mini canvas{border-radius:4px;display:block;border:1px solid rgba(255,255,255,.14)}
.pg-prop-testi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pg-prop-testi strong{font-size:12.5px;color:var(--testo);white-space:nowrap}
.pg-prop-testi em{font-style:normal;font-size:11px;color:var(--testo3)}
.pg-prop-usa{font-size:18px;font-weight:700;color:var(--arancio);line-height:1}

.pg-azioni{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:12px}

/* I numeri in riga, sotto la scena */
.pg-fondo{margin-top:12px;border-top:1px solid var(--linea);padding-top:12px}
.pg-numeri{margin:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.pg-numeri div{display:flex;flex-direction:column;gap:1px}
.pg-numeri dt{color:var(--testo3);margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.pg-numeri dd{margin:0;color:var(--testo);font-weight:600;font-size:14px}
.pg-avviso{margin:11px 0 0;font-size:12.5px;color:#ffcf8a;background:rgba(245,149,42,.10);
  border:1px solid rgba(245,149,42,.35);border-radius:8px;padding:9px 11px;line-height:1.45}
.pg-totale{margin:11px 0 0;font-size:13.5px;font-weight:600;color:var(--arancio)}
.pg-fondo .pg-nota{margin-top:9px}

@media(max-width:980px){
  .pg-corpo{grid-template-columns:1fr}
  .pg-lato{position:static;max-height:none;order:2}
  .pg-gzoom{margin-left:0}
}
/* Sul telefono i comandi dello zoom stanno su una riga sola e
   sono più larghi dello schermo: li lasciamo andare a capo. */
@media(max-width:560px){
  .pg-gzoom{flex-wrap:wrap;justify-content:center;border-radius:16px;padding:6px 8px}
  .pg-gzoom > *{flex:0 0 auto}
  .pg-barra{gap:8px}
}

/* ---------- Allegati ---------- */
.allegati{margin-top:20px}
.allegati-zona{display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px dashed var(--linea);border-radius:11px;padding:15px 17px;color:var(--testo2);transition:.15s}
.allegati-zona:hover,.allegati.in-arrivo .allegati-zona{border-color:var(--arancio);background:rgba(245,149,42,.07)}
.allegati-zona strong{display:block;font-size:14.5px;color:var(--testo)}
.allegati-zona em{font-style:normal;font-size:12.5px;color:var(--testo3)}
.allegati-elenco{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.allegati-elenco li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--testo2);
  background:var(--nero);border:1px solid var(--linea);border-radius:8px;padding:8px 11px}
.allegati-elenco .peso{color:var(--testo3);font-size:12.5px;margin-left:auto}
.allegati-elenco .via{background:none;border:0;color:var(--testo3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.allegati-elenco .via:hover{color:#ff8a72}

.modulo-fatto{background:rgba(47,125,79,.14);border:1px solid rgba(47,125,79,.5);color:#b7e7c8;
  border-radius:11px;padding:15px 18px;margin-bottom:22px;font-size:15px}
/* Il messaggio "richiesta ricevuta": arriva davanti a tutto, poi
   sfuma da solo. Il fondo è appena scurito, non blocca la pagina. */
.mk-lampo{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(10,10,12,.55);backdrop-filter:blur(2px);
  animation:mk-lampo-entra .28s cubic-bezier(.16,.84,.44,1) both}
.mk-lampo.va-via{animation:mk-lampo-esce .45s ease forwards;pointer-events:none}
.mk-lampo-carta{position:relative;display:flex;align-items:center;gap:14px;max-width:440px;
  background:#151719;border:1px solid rgba(47,125,79,.55);border-radius:14px;
  padding:20px 46px 20px 22px;color:#d9f2e1;font-size:15.5px;line-height:1.45;
  box-shadow:0 18px 48px rgba(0,0,0,.45);animation:mk-lampo-su .34s cubic-bezier(.16,.84,.44,1) both}
.mk-lampo-carta p{margin:0}
.mk-lampo-segno{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:rgba(47,125,79,.18);color:#79d79b}
.mk-lampo-via{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;color:var(--testo3);text-decoration:none;transition:.15s}
.mk-lampo-via:hover{color:var(--testo);background:rgba(255,255,255,.08)}
@keyframes mk-lampo-entra{from{opacity:0}to{opacity:1}}
@keyframes mk-lampo-esce{to{opacity:0;visibility:hidden}}
@keyframes mk-lampo-su{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mk-lampo,.mk-lampo-carta{animation:none}
  .mk-lampo.va-via{animation:none;display:none}
}

.modulo-errore{background:rgba(180,60,45,.14);border:1px solid rgba(180,60,45,.5);color:#ffc2b5;
  border-radius:11px;padding:15px 18px;margin-bottom:22px;font-size:15px}
.pg-sep{width:1px;height:18px;background:var(--linea);margin:0 2px}
.pg-gvideo{display:flex;align-items:center}
.pg-gvideo[hidden]{display:none}
.pg-fit{margin-top:9px}
.pg-et-mini{display:block;font-size:11px;color:var(--testo3);margin-bottom:5px}
.pg-fit .pg-interruttori{margin-top:0}
/* i tre modi stanno su una riga sola: con l'icona accanto ci vuole
   qualche pixel in meno di respiro, se no «Adatta» va a capo da solo */
.pg-fit .pg-testo-bt{flex:1;gap:5px;padding:8px 5px}
.pg-fit .pg-ico{width:13px;height:13px;flex-basis:13px}

/* ---------- Tabella dei ledwall sotto la scena ---------- */
.pg-tabella{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:4px}
.pg-tabella[hidden]{display:none}
.pg-tabella th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--testo3);font-weight:600;padding:0 12px 7px 0;white-space:nowrap}
.pg-tabella td{padding:9px 12px 9px 0;border-top:1px solid var(--linea);color:var(--testo2);vertical-align:top}
/* la prima colonna respira: il filo arancio della riga scelta le
   arrivava addosso al nome */
.pg-tabella th:first-child,.pg-tabella td:first-child{padding-left:12px}
.pg-tabella tbody tr{cursor:pointer;transition:.12s}
.pg-tabella tbody tr:hover td{color:var(--testo)}
.pg-tabella tbody tr.ora td{background:rgba(245,149,42,.07)}
.pg-tabella tbody tr.ora td:first-child{box-shadow:inset 2px 0 0 var(--arancio)}
.pg-tabella b{color:var(--testo);font-weight:600}
.pg-tabella em{display:block;font-style:normal;font-size:11px;color:var(--testo3);margin-top:1px}
.pg-tabella .pg-avanzo{color:var(--testo3)}
.pg-tabella tfoot td{border-top:1px solid var(--linea);padding-top:10px;
  color:var(--arancio);font-weight:600;font-size:13.5px}
.pg-tabella tfoot[hidden]{display:none}
.pg-et-mini2{display:inline;font-style:normal;font-size:11px;color:var(--testo3);margin-left:4px}
#pg-curva-v{cursor:pointer}
#pg-curva-v:hover{color:var(--arancio)}
#pg-tela.su-parete{cursor:move}
.pg-bt-scuro{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);color:#fff}
.pg-bt-scuro:hover{background:rgba(255,255,255,.2)}
/* Maschere: menu del tasto destro e comandi mentre si disegna */
#pg-tela.in-maschera{cursor:crosshair}
.pg-menu{position:absolute;z-index:8;min-width:190px;padding:5px;border-radius:12px;
  background:rgba(16,17,20,.96);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.pg-menu[hidden]{display:none}
.pg-menu button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;border-radius:8px;
  background:none;color:#fff;font:inherit;font-size:13.5px;cursor:pointer}
.pg-menu button:hover{background:rgba(245,149,42,.22)}
/* in alto: gli oggetti da mascherare stanno quasi sempre in basso */
.pg-mascheraio{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:10px;z-index:7;
  display:flex;gap:6px;padding:6px;border-radius:12px;
  background:rgba(16,17,20,.9);border:1px solid rgba(255,255,255,.14)}
.pg-mascheraio[hidden]{display:none}
.pg-mascheraio{flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px)}
.pg-mascheraio button[disabled]{opacity:.42;cursor:default}
.pg-mascheraio .solo-modifica{display:none}
.pg-mascheraio.modifica .solo-nuova{display:none}
.pg-mascheraio.modifica .solo-modifica{display:inline-block}
.pg-velo{display:flex;align-items:center;gap:7px;padding:0 8px;color:var(--testo2);font-size:12.5px}
.pg-velo input[type=range]{width:96px;accent-color:var(--arancio)}
.pg-velo b{color:#fff;font-size:12.5px;min-width:34px;text-align:right}
@media(max-width:560px){
  .pg-mascheraio{top:6px;gap:4px;padding:4px}
  .pg-mascheraio button{font-size:12px;padding:6px 9px}
  .pg-velo{font-size:11.5px;padding:0 4px}
  .pg-velo input[type=range]{width:70px}
}
@media(max-width:900px){
  .pg-tabella{display:block;overflow-x:auto;white-space:nowrap}
}

/* ============================================================
   Il progettista a tutto schermo.

   Gli stessi comandi di sempre, riordinati: strumenti a sinistra,
   proprietà e livelli a destra, i totali appoggiati sul disegno.
   Niente esce dallo schermo e la foto sta al centro, grande.
   ============================================================ */
html.pg-senza-scorrimento,html.pg-senza-scorrimento body{overflow:hidden}
.pg-titolo{display:none;font-weight:700;font-size:14.5px;letter-spacing:.01em;white-space:nowrap}
.pg-rail,.pg-livelli{display:none}
.pg-questo{display:none}
.pg-pieno-bt svg{flex-shrink:0}
.pg-pieno-bt .pg-i-chiudi{display:none}

.pg-pieno{position:fixed;inset:0;z-index:9000;margin:0;padding:0;border:0;border-radius:0;
  background:var(--nero);display:flex;flex-direction:column;overflow:hidden}
.pg-pieno .pg-titolo{display:block;margin-right:4px}
.pg-pieno .pg-barra{position:static;top:auto;margin:0;padding:9px 14px;background:var(--carta);
  border-bottom:1px solid var(--linea);flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;flex-shrink:0}
.pg-pieno .pg-barra::-webkit-scrollbar{display:none}
.pg-pieno .pg-gpareti{display:none}          /* i ledwall stanno nei livelli */
.pg-pieno .pg-pieno-bt .pg-i-apri{display:none}
.pg-pieno .pg-pieno-bt .pg-i-chiudi{display:inline}

.pg-pieno .pg-corpo{flex:1 1 auto;min-height:0;display:grid;gap:0;
  grid-template-columns:88px minmax(0,1fr) 272px 208px;align-items:stretch}
.pg-pieno .pg-scena{min-height:0;padding:12px;display:flex}
.pg-pieno #pg-tela{flex:1 1 auto;height:100%;border-radius:10px}
.pg-pieno .pg-carica{inset:12px}
.pg-pieno .pg-lato,.pg-pieno .pg-livelli{position:static;top:auto;max-height:none;
  height:100%;min-height:0;overflow-y:auto;border-radius:0;border-width:0 0 0 1px}
.pg-pieno .pg-questo{display:block}
.pg-pieno .pg-guida{margin:0;padding:7px 14px;font-size:12.5px;background:var(--carta);
  border-top:1px solid var(--linea);flex-shrink:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-height:0}
.pg-pieno .pg-fondo{display:none}
.pg-pieno .pg-striscia{display:flex}

/* la colonna degli strumenti */
.pg-pieno .pg-rail{display:flex;flex-direction:column;gap:2px;padding:10px 7px;
  background:var(--carta);border-right:1px solid var(--linea);overflow-y:auto;
  scrollbar-width:none}
.pg-pieno .pg-rail::-webkit-scrollbar{display:none}
.pg-ferro{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;
  border:1px solid transparent;border-radius:9px;background:none;color:var(--testo2);
  font-weight:600;font-size:10px;line-height:1.15;cursor:pointer;text-align:center;transition:.14s}
.pg-ferro span{display:block;max-width:70px}
.pg-ferro:hover{background:var(--nero);color:var(--testo)}
.pg-ferro.attiva{color:var(--arancio);border-color:rgba(245,149,42,.4);background:rgba(245,149,42,.10)}
.pg-ferro-esci{color:var(--testo3)}
.pg-ferro-spento{display:none}
.pg-rail-sep{height:1px;background:var(--linea);margin:6px 4px}
.pg-rail-spinta{flex:1 1 auto}

/* i livelli */
.pg-pieno .pg-livelli{display:flex;flex-direction:column;gap:8px;background:var(--nero);padding:12px 10px}
.pg-livelli h4{margin:0 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--arancio)}
.pg-liv-elenco{display:flex;flex-direction:column;gap:5px}
.pg-liv{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;
  padding:7px 8px;border:1px solid var(--linea);border-radius:9px;background:var(--carta);
  cursor:pointer;transition:.14s;text-align:left;font-family:inherit;color:var(--testo2)}
.pg-liv:hover{border-color:var(--testo3);color:var(--testo)}
.pg-liv.attiva{border-color:var(--arancio);background:rgba(245,149,42,.10);color:var(--testo)}
.pg-liv-testi{min-width:0}
.pg-liv-nome{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-liv-mis{display:block;font-size:10.5px;color:var(--testo3);white-space:nowrap}
.pg-liv-occhio{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:0;padding:0;background:none;color:var(--testo2);cursor:pointer;border-radius:5px}
.pg-liv-occhio:hover{color:var(--arancio);background:rgba(245,149,42,.12)}
.pg-liv.spento{opacity:.5}
.pg-liv-via{border:0;background:none;color:var(--testo3);cursor:pointer;font-size:12px;padding:2px 3px;font-family:inherit}
.pg-liv-via:hover{color:#ff8a72}
.pg-liv-fondo{display:none;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;
  padding:7px 8px;border:1px dashed var(--linea);border-radius:9px;color:var(--testo3);font-size:12.5px}
.pg-pieno .pg-liv-fondo{display:grid}
.pg-liv-fermo{opacity:.5}
.pg-liv-piu{margin-top:2px}

/* i totali appoggiati sul disegno */
.pg-striscia{display:none;position:absolute;left:22px;right:22px;bottom:22px;z-index:6;
  align-items:stretch;gap:0;padding:0;border-radius:11px;overflow:hidden;
  background:rgba(16,17,20,.86);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px);flex-wrap:wrap}
.pg-striscia[hidden]{display:none}
.pg-str-cella{display:flex;flex-direction:column;gap:1px;padding:9px 15px;min-width:0;
  border-left:1px solid rgba(255,255,255,.09)}
.pg-str-cella:first-child{border-left:0}
.pg-str-cella.pg-str-testa{background:rgba(245,149,42,.13)}
.pg-str-et{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--testo3);white-space:nowrap}
.pg-str-v{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap}
.pg-str-testa .pg-str-et{color:var(--arancio)}

/* la scheda dei numeri del ledwall scelto */
.pg-scheda-dati{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:12px}
.pg-scheda-dati dt{color:var(--testo3)}
.pg-scheda-dati dd{margin:0;color:var(--testo);text-align:right;font-weight:600}

@media(max-width:1180px){
  .pg-pieno .pg-corpo{grid-template-columns:74px minmax(0,1fr) 250px}
  .pg-pieno .pg-livelli{display:none}
}
@media(max-width:900px){
  .pg-pieno .pg-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
  .pg-pieno .pg-rail{flex-direction:row;order:3;border-right:0;border-top:1px solid var(--linea);
    padding:5px 6px;overflow-x:auto;gap:0}
  .pg-pieno .pg-rail-spinta,.pg-pieno .pg-rail-sep{display:none}
  .pg-pieno .pg-ferro{padding:6px 8px;font-size:9.5px}
  .pg-pieno .pg-ferro span{max-width:none;white-space:nowrap}
  .pg-pieno .pg-lato{order:2;height:auto;max-height:34vh;border-width:1px 0 0;padding:11px}
  .pg-pieno .pg-scena{order:1;padding:8px}
  .pg-pieno .pg-carica{inset:8px}
  /* i totali in una riga sola che scorre di lato: non mangiano il disegno */
  .pg-striscia{left:10px;right:10px;bottom:10px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .pg-striscia::-webkit-scrollbar{display:none}
  .pg-str-cella{padding:6px 11px;flex:0 0 auto}
  .pg-str-et{font-size:9px}
  .pg-str-v{font-size:12.5px}
}

/* ============================================================
   Il preventivo guidato
   Il modulo è sempre lo stesso: qui c'è solo il vestito dei
   passaggi. Senza la classe .pv-vivo (cioè senza JavaScript)
   tutte le sezioni restano una sotto l'altra, come prima.
   ============================================================ */
.modulo-passi{position:relative}
/* I bottoni e le griglie hanno un display loro: senza questa riga
   l'attributo hidden non basterebbe a nasconderli. */
.modulo-passi [hidden]{display:none !important}
.pv-vivo .pv-passo[hidden]{display:none}
.pv-passo{animation:pv-entra .26s ease}
@keyframes pv-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pv-passo{animation:none}}

/* ---------- La barra del progresso ---------- */
.pv-testa{margin:-6px 0 30px}
.pv-tappe{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px}
.pv-tappa{flex:1;min-width:0}
.pv-tappa-bt{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;padding:4px 2px;
  cursor:pointer;color:var(--testo3);font:inherit;font-size:13.5px;text-align:left}
.pv-tappa-bt:disabled{cursor:default}
.pv-pallino{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--linea);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;transition:.18s}
.pv-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-tappa.aperta .pv-tappa-bt{color:var(--testo2)}
.pv-tappa.fatta .pv-pallino{background:var(--linea);border-color:var(--linea);color:var(--testo)}
.pv-tappa.ora .pv-tappa-bt{color:var(--testo)}
.pv-tappa.ora .pv-pallino{background:var(--arancio);border-color:var(--arancio);color:#1a1206}
.pv-barra{height:3px;background:var(--linea);border-radius:2px;overflow:hidden}
.pv-barra i{display:block;height:100%;background:var(--arancio);border-radius:2px;transition:width .3s ease}
.pv-stato{margin:10px 0 0;font-size:13px;color:var(--testo3)}
.pv-stato b{color:var(--testo2);font-weight:600}
.pv-stato em{font-style:normal;margin-left:8px;color:var(--testo3)}
@media (max-width:700px){
  .pv-tappe{gap:4px}
  .pv-nome{display:none}
  .pv-tappa-bt{justify-content:center}
  .pv-stato em{display:block;margin:2px 0 0}
}

/* ---------- Le domande ---------- */
.pv-domanda{font-size:clamp(21px,2.4vw,27px);margin:0 0 8px}
.pv-domanda-2{font-size:clamp(18px,2vw,21px);margin-top:30px}
.pv-aiuto{color:var(--testo2);font-size:15px;margin:0 0 20px;max-width:62ch}
.pv-nota{font-size:14px;color:var(--testo3);margin:14px 0 0}
.pv-nota a{color:var(--arancio);font-weight:600}
.pv-estero{border-left:2px solid var(--arancio);padding-left:12px;color:var(--testo2)}
.pv-solo-lettori{position:absolute;left:-9999px}

/* ---------- Le schede con la foto ---------- */
.pv-scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.pv-scelta input{position:absolute;opacity:0;width:0;height:0}
.pv-scheda{display:flex;flex-direction:column;height:100%;background:var(--nero);border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;cursor:pointer;transition:.16s}
.pv-scelta:hover .pv-scheda{border-color:var(--testo3)}
.pv-scelta input:checked + .pv-scheda{border-color:var(--arancio);box-shadow:0 0 0 1px var(--arancio) inset}
.pv-scelta input:focus-visible + .pv-scheda{outline:2px solid var(--arancio);outline-offset:2px}
.pv-foto{display:block;aspect-ratio:16/10;background:var(--carta);overflow:hidden}
.pv-foto picture,.pv-foto img{width:100%;height:100%;object-fit:cover}
/* La scheda senza fotografia non resta un buco: un fondo appena
   disegnato, in tinta, e nessuno si accorge che manca qualcosa. */
.pv-foto-vuota{background:
  repeating-linear-gradient(126deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px),
  linear-gradient(150deg,var(--linea),var(--carta))}
.pv-scelta input:checked + .pv-scheda .pv-foto img{filter:none}
.pv-scheda .pv-foto img{filter:saturate(.75) brightness(.86);transition:.2s}
.pv-scelta:hover .pv-scheda .pv-foto img{filter:none}
.pv-testo{padding:11px 13px 13px}
.pv-testo b{display:block;font-size:15px}
.pv-testo em{display:block;font-style:normal;font-size:12.5px;color:var(--testo3);margin-top:2px}

/* ---------- Le pastiglie ---------- */
.pv-pastiglie{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pv-pastiglia{background:var(--nero);border:1px solid var(--linea);color:var(--testo2);
  border-radius:999px;padding:7px 15px;font:inherit;font-size:13.5px;cursor:pointer;transition:.14s}
.pv-pastiglia:hover{border-color:var(--testo3);color:var(--testo)}
.pv-pastiglia.ora{border-color:var(--arancio);color:var(--testo);background:rgba(245,149,42,.1)}

/* ---------- I campi con il suggerimento ---------- */
.pv-campo{display:flex;flex-direction:column;gap:7px;margin-top:22px;position:relative}
.pv-campo > label{font-size:13.5px;font-weight:600;color:var(--testo2)}
.pv-campo input,.pv-campo textarea{background:var(--nero);border:1px solid var(--linea);border-radius:9px;
  padding:12px 14px;color:var(--testo);font:inherit;font-size:16px;width:100%}
.pv-campo input:focus,.pv-campo textarea:focus{border-color:var(--arancio);outline:none}
.pv-elenco{list-style:none;margin:4px 0 0;padding:5px;position:absolute;left:0;right:0;top:100%;z-index:20;
  background:var(--carta);border:1px solid var(--linea);border-radius:11px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:290px;overflow:auto}
.pv-voce{padding:9px 11px;border-radius:8px;cursor:pointer;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pv-voce:hover,.pv-voce.ora{background:var(--linea)}
.pv-voce b{font-weight:600;font-size:15px}
.pv-voce span{color:var(--testo3);font-size:13px}
.pv-voce em{font-style:normal;font-size:11.5px;color:var(--arancio);border:1px solid rgba(245,149,42,.4);
  border-radius:999px;padding:1px 8px;margin-left:auto}
.pv-vuoto{padding:10px 11px;color:var(--testo3);font-size:14px}

/* ---------- La mappa ---------- */
.pv-mappa{position:relative;height:260px;margin-top:18px;border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;background:var(--carta)}
.pv-tasselli{position:absolute;inset:0}
.pv-tassello{position:absolute;width:256px;height:256px;max-width:none;filter:grayscale(.35) contrast(.95) brightness(.82)}
.pv-spillo{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--arancio);border:3px solid var(--nero);box-shadow:0 0 0 6px rgba(245,149,42,.22)}
.pv-citazione{position:absolute;right:0;bottom:0;margin:0;font-size:11px;color:var(--testo2);
  background:rgba(13,14,17,.72);padding:2px 8px;border-radius:8px 0 0 0}
.pv-citazione a{text-decoration:underline}

/* ---------- Il calendario ---------- */
.pv-calendario{margin-top:6px;background:var(--nero);border:1px solid var(--linea);border-radius:12px;padding:16px 16px 18px;position:relative}
.pv-calendario.spento{opacity:.4;pointer-events:none}
.pv-cal-testa{position:absolute;top:14px;right:14px;display:flex;gap:6px}
.pv-cal-bt{background:none;border:1px solid var(--linea);border-radius:8px;color:var(--testo2);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.pv-cal-bt:hover{border-color:var(--testo3);color:var(--testo)}
.pv-cal-mesi{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:760px){.pv-cal-mesi{grid-template-columns:1fr 1fr}}
.pv-mese h4{margin:0 0 12px;font-size:15px;font-weight:600;text-transform:capitalize}
.pv-settimana,.pv-giorni{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pv-settimana span{text-align:center;font-size:11px;color:var(--testo3);padding-bottom:6px}
.pv-giorno{height:38px;background:none;border:0;color:var(--testo);font:inherit;font-size:14px;
  cursor:pointer;border-radius:8px;transition:.12s}
.pv-giorno:hover:not(:disabled){background:var(--linea)}
.pv-giorno:disabled{color:var(--testo3);opacity:.35;cursor:default}
.pv-giorno.dentro,.pv-giorno.forse{background:rgba(245,149,42,.16);border-radius:0}
.pv-giorno.inizio,.pv-giorno.fine{background:var(--arancio);color:#1a1206;font-weight:700}
.pv-giorno.inizio{border-radius:8px 0 0 8px}
.pv-giorno.fine{border-radius:0 8px 8px 0}
.pv-giorno.inizio.fine{border-radius:8px}
.pv-periodo{margin:14px 0 0;font-size:15px;color:var(--arancio);font-weight:600}
.pv-date-vere{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pv-date-vere label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--testo2)}
.pv-date-vere input{background:var(--nero);border:1px solid var(--linea);border-radius:9px;padding:12px 14px;
  color:var(--testo);font:inherit;font-size:16px}
.pv-spunta{display:flex;gap:11px;align-items:center;margin-top:16px;font-size:14px;color:var(--testo2);cursor:pointer}
.pv-spunta input{accent-color:var(--arancio)}

/* ---------- Le due strade del primo passaggio ---------- */
.pv-strade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 22px}
@media (max-width:560px){.pv-strade{grid-template-columns:1fr}}
.pv-strada{display:flex;align-items:flex-start;gap:13px;text-align:left;background:var(--nero);
  border:1px solid var(--linea);border-radius:12px;padding:15px 17px;color:var(--testo2);
  font:inherit;cursor:pointer;transition:.16s}
.pv-strada:hover{border-color:var(--testo3);color:var(--testo)}
.pv-strada.ora{border-color:var(--arancio);color:var(--testo);background:rgba(245,149,42,.07)}
.pv-strada svg{flex:0 0 auto;margin-top:2px;color:var(--arancio)}
.pv-strada b{display:block;font-size:15.5px}
.pv-strada em{display:block;font-style:normal;font-size:12.5px;color:var(--testo3);margin-top:2px}
.pv-sotto{margin:28px 0 10px;font-size:16px;font-weight:600;color:var(--testo)}
.pv-strada-corpo:first-of-type .pv-sotto:first-child{margin-top:6px}

/* ---------- Il formato del contenuto ---------- */
.pv-formati{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.pv-formato{background:var(--nero);border:1px solid var(--linea);border-radius:11px;padding:13px 12px 12px;
  color:var(--testo2);font:inherit;cursor:pointer;transition:.16s;text-align:center}
.pv-formato:hover{border-color:var(--testo3);color:var(--testo)}
.pv-formato.ora{border-color:var(--arancio);color:var(--testo);background:rgba(245,149,42,.07)}
.pv-formato b{display:block;font-size:14px;margin-top:9px}
.pv-formato em{display:block;font-style:normal;font-size:11.5px;color:var(--testo3)}
/* Il rettangolino che fa vedere il formato: sta dentro un riquadro
   fisso, così i formati diversi restano in fila ordinata. */
.pv-quadro{display:grid;place-items:center;height:40px}
.pv-quadro i{display:block;border:1.5px solid currentColor;border-radius:3px;opacity:.75;
  height:min(38px, calc(52px / var(--r)));width:min(52px, calc(38px * var(--r)))}
.pv-formato.ora .pv-quadro i{border-color:var(--arancio);opacity:1}
.pv-serie-detta{margin:8px 0 0;font-size:13.5px}

/* ---------- Le misure consigliate ---------- */
.pv-misure-scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.pv-misura{background:var(--nero);border:1px solid var(--linea);border-radius:11px;padding:12px;
  color:var(--testo2);font:inherit;cursor:pointer;transition:.16s;text-align:center}
.pv-misura:hover{border-color:var(--testo3);color:var(--testo)}
.pv-misura.ora{border-color:var(--arancio);color:var(--testo);background:rgba(245,149,42,.07)}
.pv-misura b{display:block;font-size:15px;margin-top:8px}
.pv-misura em{display:block;font-style:normal;font-size:11.5px;color:var(--testo3);margin-top:1px}
.pv-mini{display:grid;place-items:center;height:34px}
.pv-mini i{display:block;background:currentColor;border-radius:2px;opacity:.28;
  height:min(32px, calc(64px / var(--r)));width:min(64px, calc(32px * var(--r)))}
.pv-misura.ora .pv-mini i{background:var(--arancio);opacity:.85}

/* ---------- La messa a punto, 500 mm alla volta ---------- */
/* La messa a punto: i due numeri a sinistra, i conti a destra.
   Il disegno adesso sta fuori, quindi qui c'è spazio per stendere
   i conti su una riga invece che incolonnarli stretti. */
.pv-messapunto{margin:0;background:var(--nero);border:1px solid var(--linea);
  border-radius:12px;padding:16px}
.pv-mp-numeri{display:flex;flex-direction:column;gap:12px}
/* su schermo stretto la colonna si sdraia e i conti vanno a fianco */
@media (max-width:1000px) and (min-width:761px){
  .pv-mp-numeri{display:grid;gap:14px 26px;align-items:center;
    grid-template-columns:minmax(210px,260px) 1fr}
  .pv-mp-numeri > .pv-mp-riga{grid-column:1}
  .pv-mp-conti{grid-column:2;grid-row:1/3}
}
.pv-mp-riga{display:flex;align-items:center;gap:10px}
.pv-mp-eti{flex:0 0 62px;font-size:13px;color:var(--testo3)}
.pv-mp-riga b{flex:1;text-align:center;font-size:17px;font-variant-numeric:tabular-nums}
.pv-mp-bt{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--linea);background:var(--carta);
  color:var(--testo);border-radius:9px;font-size:19px;line-height:1;cursor:pointer;transition:.14s}
.pv-mp-bt:hover{border-color:var(--arancio);color:var(--arancio)}
.pv-mp-conti{margin:6px 0 0;display:grid;gap:1px;align-content:center;width:100%}
.pv-mp-conti div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--linea)}
.pv-mp-conti dt{font-size:13px;color:var(--testo3)}
.pv-mp-conti dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.pv-mp-bande{margin:10px 0 0;font-size:14px;color:var(--arancio);min-height:1.3em}
.pv-mp-tanto{margin:6px 0 0}
.pv-serie-consiglio{border-left:2px solid var(--arancio);padding-left:12px;color:var(--testo2)}
.pv-forma-nota{border-left:2px solid var(--linea);padding-left:12px}
.pv-pastiglia.spenta{opacity:.38;cursor:not-allowed}
.pv-pastiglia.spenta:hover{border-color:var(--linea);color:var(--testo2)}
.pv-cambia{background:none;border:1px solid var(--arancio);color:var(--arancio);border-radius:999px;
  padding:3px 12px;font:inherit;font-size:13px;cursor:pointer;margin-left:6px;white-space:nowrap}
.pv-cambia:hover{background:rgba(245,149,42,.12)}

/* Il preventivo guidato sta più largo del resto del sito: dentro
   ci vanno il disegno del ledwall, le schede degli accessori e la
   colonna, e a 1240 px si stava stretti. */
.pv-cont{max-width:1580px}
.pv-cont.stretto{max-width:1100px}

/* ---------- Il configuratore: colonna a sinistra ---------- */
.pv-conf{display:grid;grid-template-columns:146px 1fr;gap:0;border:1px solid var(--linea);
  border-radius:14px;overflow:hidden;background:var(--nero);margin-top:20px}
.pv-conf-sola{display:block;border:0;background:none;margin-top:0}
.pv-conf-colonna{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--scuro);
  border-right:1px solid var(--linea)}
.pv-conf-bt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:1px solid transparent;border-radius:11px;padding:13px 6px;
  color:var(--testo3);font:inherit;font-size:12.5px;cursor:pointer;transition:.16s}
.pv-conf-bt:hover{color:var(--testo2);background:rgba(255,255,255,.03)}
.pv-conf-bt.ora{color:var(--arancio);background:rgba(245,149,42,.10);border-color:rgba(245,149,42,.35)}
/* nella colonna l'icona segue il colore della voce: grigia quando
   è spenta, arancione quando è quella aperta */
.pv-conf-bt .ico{width:30px;height:30px;color:inherit}
.pv-conf-pallino{position:absolute;top:8px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--arancio);font-style:normal}
.pv-conf-corpo{padding:22px;min-width:0}
.pv-conf-sola .pv-conf-corpo{padding:0}
.pv-conf-pannello{min-width:0}
.pv-conf-pannello[hidden]{display:none}
.pv-conf-pannello > .pv-sotto:first-child{margin-top:0}
@media (max-width:760px){
  /* sul telefono la colonna si sdraia e diventa una fila da scorrere */
  .pv-conf{grid-template-columns:1fr}
  .pv-conf-colonna{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linea)}
  .pv-conf-colonna::-webkit-scrollbar{height:0}
  .pv-conf-bt{flex:0 0 auto;flex-direction:row;padding:10px 14px;font-size:13px}
  .pv-conf-corpo{padding:16px}
  .pv-conf-pallino{position:static;margin-left:2px}
}

/* Le casse appoggiate sopra il ledwall, nel disegno */
.pv-cassa{position:absolute;z-index:3;pointer-events:none;display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pv-cassa img{display:block;width:100%;height:auto}

/* Quando il video ha il suono acceso, dalle casse partono i cerchi:
   si capisce a colpo d'occhio che stanno suonando davvero. */
.pv-onde{position:absolute;left:50%;top:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .25s}
.pv-cassa.suona .pv-onde{opacity:1}
/* Appena accennati: partono dal bordo della cassa e vanno in fuori,
   così non le passano mai sopra, e restano quasi trasparenti — si
   deve vedere il diffusore, non i cerchi. */
.pv-onda{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);transform:translate(-50%,-50%) scale(1);opacity:0}
.pv-cassa.suona .pv-onda{animation:pv-onda 2.1s ease-out infinite}
.pv-cassa.suona .pv-onda:nth-child(2){animation-delay:.7s}
.pv-cassa.suona .pv-onda:nth-child(3){animation-delay:1.4s}
.pv-cassa.suona img{animation:pv-cassa-batte 2.1s ease-in-out infinite}
@keyframes pv-onda{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.2}
  55%{opacity:.07}
  100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}
}
@keyframes pv-cassa-batte{
  0%,100%{transform:scale(1)}
  8%{transform:scale(1.035)}
  22%{transform:scale(1)}
}
/* chi ha chiesto meno movimento lo ottiene: resta il cerchio fermo */
@media (prefers-reduced-motion: reduce){
  .pv-cassa.suona .pv-onda,.pv-cassa.suona img{animation:none}
  .pv-cassa.suona .pv-onda:first-child{opacity:.5;transform:translate(-50%,-50%) scale(1.3)}
}

/* ---------- Le frecce che restano a galla ---------- */
.pv-guida{position:fixed;inset:0;z-index:60;pointer-events:none}
.pv-guida[hidden]{display:none}
.pv-guida-bt{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 20px;
  border:1px solid var(--linea);background:rgba(20,22,27,.9);color:var(--testo2);
  font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(6px);
  transition:opacity .2s,transform .2s,border-color .16s,color .16s,background .16s}
.pv-guida-sx{left:18px}
.pv-guida-dx{right:18px;background:var(--arancio);border-color:var(--arancio);color:#1a1206}
.pv-guida-sx:hover{border-color:var(--testo3);color:var(--testo)}
.pv-guida-dx:hover{background:var(--arancio-c);border-color:var(--arancio-c)}
.pv-guida-bt:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
/* quando non servono spariscono senza far saltare la pagina */
.pv-guida-bt.via{opacity:0;pointer-events:none}
.pv-guida-sx.via{transform:translateY(-50%) translateX(-14px)}
.pv-guida-dx.via{transform:translateY(-50%) translateX(14px)}
/* sul telefono restano, ma piccole e in basso ai lati: in mezzo
   coprirebbero quello che si sta scegliendo */
@media (max-width:900px){
  .pv-guida-bt{top:auto;bottom:20px;transform:none;padding:12px 16px;font-size:13px}
  .pv-guida-bt span{display:none}
  .pv-guida-sx{left:12px}
  .pv-guida-dx{right:12px}
  .pv-guida-sx.via,.pv-guida-dx.via{transform:none}
}
@media (prefers-reduced-motion:reduce){.pv-guida-bt{transition:opacity .2s}}

/* ---------- Le pieghe: una domanda alla volta ---------- */
.pv-fisarmonica{display:flex;flex-direction:column;gap:10px;margin:20px 0 22px}
.pv-piega{border:1px solid var(--linea);border-radius:12px;background:var(--scuro);overflow:hidden}
.pv-piega.aperta{border-color:rgba(245,149,42,.35);background:rgba(245,149,42,.04)}
.pv-piega-testa{margin:0;font-size:inherit;font-weight:400}
.pv-piega-testa button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  padding:14px 16px;color:var(--testo2);font:inherit;text-align:left;cursor:pointer;transition:color .15s}
.pv-piega-testa button:hover{color:var(--testo)}
.pv-piega.aperta .pv-piega-testa button{color:var(--testo)}
.pv-piega-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--testo3);
  font-variant-numeric:tabular-nums}
.pv-piega.aperta .pv-piega-n{border-color:var(--arancio);background:var(--arancio);color:#1a1206;font-weight:700}
.pv-piega.fatta .pv-piega-n{border-color:rgba(245,149,42,.5);color:var(--arancio)}
.pv-piega-t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pv-piega-eco{margin-left:auto;font-size:13.5px;color:var(--arancio);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
.pv-piega.aperta .pv-piega-eco{display:none}
.pv-piega-freccia{flex:0 0 auto;color:var(--testo3);transition:transform .22s}
.pv-piega.aperta .pv-piega-freccia{transform:rotate(180deg)}
.pv-piega-corpo{padding:2px 16px 18px;animation:pv-apri .26s cubic-bezier(.16,.84,.44,1) both}
/* Le pieghe si chiudono solo dove il JavaScript è vivo: senza,
   resta tutto aperto e il modulo si compila per intero. */
.pv-vivo .pv-piega:not(.aperta) .pv-piega-corpo{display:none}
@keyframes pv-apri{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pv-piega-corpo{animation:none}}

/* passo e forma, uno accanto all'altro */
.pv-due{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pv-due-mezzo{min-width:0}
.pv-sotto-2{font-size:14px;font-weight:600;color:var(--testo2);margin:4px 0 10px}
@media (max-width:820px){.pv-due{grid-template-columns:1fr;gap:6px}}

/* ---------- Le schede degli accessori ---------- */
/* le fotografie dei prodotti sono scure: senza un fondo chiarino
   dietro, nella colonna nera non si vedrebbero */
.pv-conf-ico{width:34px;height:34px;object-fit:contain;display:block;padding:3px;
  border-radius:9px;background:rgba(255,255,255,.07)}
.pv-conf-bt.ora .pv-conf-ico{background:rgba(245,149,42,.16)}
/* Il disegno a sinistra e i numeri del ledwall a destra: messi
   uno sotto l'altro allungavano la pagina per niente. */
/* Il disegno a sinistra, e a destra la colonna: prima i numeri del
   ledwall, sotto il caricamento del contenuto. Il caricamento stava
   sotto al disegno e gli rubava una riga intera: spostato di lato,
   il disegno si prende tutta l'altezza della colonna e viene più
   grande senza togliere niente a nessuno. */
.pv-anteprima{margin-top:4px;display:grid;gap:14px 18px;
  grid-template-columns:1fr minmax(230px,282px);
  grid-template-rows:auto 1fr auto;align-items:start}
.pv-anteprima > #pv-scena{grid-column:1;grid-row:1/3;align-self:stretch;
  height:auto;min-height:clamp(300px,32vw,470px)}
.pv-anteprima > .pv-messapunto{grid-column:2;grid-row:1}
.pv-anteprima > .pv-media{grid-column:2;grid-row:2;margin:0;align-self:start;
  flex-direction:column;align-items:stretch;gap:9px}
.pv-anteprima > .pv-media .pv-carica{justify-content:flex-start;padding:11px 13px;line-height:1.35}
.pv-anteprima > .pv-media .pv-carica span{max-width:100%;white-space:normal;text-align:left}
.pv-anteprima > .pv-media .pv-media-comandi{flex:0 0 auto;justify-content:center}
.pv-anteprima > .pv-mp-bande,
.pv-anteprima > .pv-mp-tanto{grid-column:1/-1;grid-row:auto}
@media (max-width:1000px){
  /* In colonna sola le righe non servono più: sotto il disegno ci va
     subito il caricamento del contenuto, che è la cosa che si vuole
     fare guardando l'anteprima. I numeri vengono dopo. */
  .pv-anteprima{grid-template-columns:1fr;display:flex;flex-direction:column}
  .pv-anteprima > #pv-scena{order:1;height:clamp(240px,26vw,340px);min-height:0}
  .pv-anteprima > .pv-media{order:2;margin-top:12px;flex-direction:row;
    align-items:center;gap:12px 18px}
  .pv-anteprima > .pv-media .pv-carica{justify-content:flex-start}
  .pv-anteprima > .pv-messapunto{order:3}
  .pv-anteprima > .pv-mp-bande{order:4}
  .pv-anteprima > .pv-mp-tanto{order:5}
}

/* Audio: il disegno del ledwall a sinistra, le schede strette a
   destra. Prima stavano sotto e non si vedevano nemmeno. */
.pv-acc-due{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.pv-acc-lista{min-width:0}
.pv-acc-lista .pv-acc-schede{grid-template-columns:1fr;gap:10px}
.pv-acc-lista .pv-acc-gruppo{margin:16px 0 8px}
.pv-acc-lista .pv-acc-gruppo:first-child{margin-top:0}
.pv-acc-invito{font-size:13px;color:var(--testo3);margin:0 0 12px;line-height:1.45}
/* quando ci si trascina sopra una cassa, il disegno lo dice */
.pv-scena.in-arrivo{outline:2px dashed var(--arancio);outline-offset:-6px}
@media (max-width:900px){
  .pv-acc-due{grid-template-columns:1fr}
  .pv-acc-lista .pv-acc-schede{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

.pv-acc-scena{margin:0 0 22px}
/* nel pannello degli accessori il disegno sta un po' più comodo:
   sopra la parete ci vanno le casse */
.pv-acc-scena .pv-scena{margin:0;height:clamp(280px,30vw,420px)}
.pv-acc-gruppo{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--testo3);
  margin:22px 0 10px;font-weight:600}
.pv-acc-schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pv-acc{display:flex;flex-direction:column;gap:12px;border:1px solid var(--linea);border-radius:13px;
  padding:14px;background:var(--scuro);transition:border-color .16s,background .16s}
.pv-acc:hover{border-color:var(--testo3)}
.pv-acc.ora{border-color:var(--arancio);background:rgba(245,149,42,.07)}
.pv-acc-foto{display:flex;align-items:center;justify-content:center;height:140px;border-radius:10px;
  background:var(--nero);overflow:hidden}
.pv-acc-foto img{max-width:100%;max-height:100%;object-fit:contain}
.pv-acc-vuota{background:repeating-linear-gradient(135deg,var(--nero),var(--nero) 9px,#15171d 9px,#15171d 18px)}
.pv-acc-testo{display:flex;flex-direction:column;gap:3px;flex:1}
.pv-acc-testo b{font-size:15px}
.pv-acc-testo em{font-style:normal;font-size:13.5px;color:var(--testo2);line-height:1.45}
.pv-acc-misure{font-size:12.5px;color:var(--testo3);font-variant-numeric:tabular-nums}
.pv-acc-coppia{font-size:12.5px;color:var(--arancio)}
.pv-acc-scelgo{display:flex;align-items:center;gap:9px;border:1px solid var(--linea);border-radius:999px;
  padding:7px 14px;font-size:13.5px;color:var(--testo2);cursor:pointer;align-self:flex-start;transition:.16s}
.pv-acc-scelgo:hover{border-color:var(--arancio);color:var(--arancio)}
.pv-acc-scelgo input{position:absolute;opacity:0;width:0;height:0}
.pv-acc-piu{font-size:16px;line-height:1}
.pv-acc.ora .pv-acc-scelgo{border-color:var(--arancio);background:var(--arancio);color:#1a1206;font-weight:600}
/* senza JavaScript la casella resta una casella vera: si vede lo stesso
   quando è spuntata, perché a comandare è il :checked e non una classe */
.pv-acc-scelgo:has(input:checked){border-color:var(--arancio);background:var(--arancio);color:#1a1206;font-weight:600}
.pv-acc:has(.pv-acc-scelgo input:checked){border-color:var(--arancio);background:rgba(245,149,42,.07)}
/* le schede a metà misura: devono stare in colonna senza mangiarsi la pagina */
.pv-acc-mini{flex-direction:row;align-items:center;gap:11px;padding:10px;cursor:grab}
.pv-acc-mini:active{cursor:grabbing}
.pv-acc-mini .pv-acc-foto{flex:0 0 72px;width:72px;height:72px;border-radius:8px}
.pv-acc-mini .pv-acc-testo b{font-size:13.5px}
.pv-acc-mini .pv-acc-testo em{font-size:12px;line-height:1.35}
/* nella scheda stretta si tiene solo il nome: il resto lo dice
   la riga d'invito qui sopra, e la fotografia parla da sola */
.pv-acc-mini .pv-acc-testo em,.pv-acc-mini .pv-acc-misure,
.pv-acc-mini .pv-acc-coppia{display:none}
.pv-acc-mini .pv-acc-scelgo{padding:5px 11px;font-size:12.5px;margin-left:auto;align-self:center}
.pv-acc-mini.in-mano{opacity:.45}

.pv-acc-quanti{display:flex;align-items:center;gap:8px;align-self:flex-start}
.pv-acc-bt{width:32px;height:32px;border-radius:9px;border:1px solid var(--linea);background:var(--nero);
  color:var(--testo2);font-size:17px;line-height:1;cursor:pointer;transition:.16s}
.pv-acc-bt:hover{border-color:var(--arancio);color:var(--arancio)}
.pv-acc-n{width:56px;text-align:center;padding:6px 4px;border-radius:9px;border:1px solid var(--linea);
  background:var(--nero);color:var(--testo);font:inherit;font-size:15px;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.pv-acc-n::-webkit-outer-spin-button,.pv-acc-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* le linguette dei ledwall dentro una categoria che si sceglie schermo per schermo */
.pv-acc-pareti{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.pv-acc-parete{background:var(--nero);border:1px solid var(--linea);border-radius:999px;padding:7px 15px;
  color:var(--testo2);font:inherit;font-size:13px;cursor:pointer;transition:.16s}
.pv-acc-parete:hover{border-color:var(--testo3);color:var(--testo)}
.pv-acc-parete.ora{border-color:var(--arancio);background:rgba(245,149,42,.08);color:var(--testo)}
.pv-acc-parete i{font-style:normal;color:var(--testo3);margin-left:6px;font-size:12px}
.pv-acc-segno{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--arancio);
  margin-left:8px;vertical-align:middle}
.pv-acc-eti-pareti{font-size:13px;color:var(--testo3);align-self:center;margin-right:4px}

/* ---------- Più di un ledwall: le linguette ---------- */
/* Sono sempre in vista, anche quando il ledwall è uno solo: così
   si vede subito che se ne possono chiedere altri. */
.pv-tab-pareti{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-top:18px}
/* Fuori dalla fisarmonica: qui i ledwall chiesti e «Aggiungi Ledwall»
   si vedono sempre, anche con tutte le pieghe chiuse. */
.pv-tab-fuori{margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--linea)}
.pv-tab{position:relative;display:flex;border:1px solid var(--linea);border-radius:11px;
  background:var(--nero);transition:border-color .18s,background .18s,transform .18s}
.pv-tab:hover{border-color:var(--testo3)}
.pv-tab.ora{border-color:var(--arancio);background:rgba(245,149,42,.08)}
.pv-tab-bt{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;
  border-radius:11px;padding:9px 30px 9px 14px;color:var(--testo2);font:inherit;cursor:pointer}
.pv-tab.ora .pv-tab-bt{color:var(--testo)}
.pv-tab-bt b{font-size:13.5px;font-weight:600}
.pv-tab-bt span{font-size:11.5px;color:var(--testo3);font-variant-numeric:tabular-nums}
/* La croce per togliere: in alto a destra della linguetta */
.pv-tab-via{position:absolute;top:-7px;right:-7px;width:21px;height:21px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--linea);background:var(--nero);color:var(--testo3);
  cursor:pointer;opacity:0;transform:scale(.7);transition:.16s}
.pv-tab:hover .pv-tab-via,.pv-tab.ora .pv-tab-via,.pv-tab-via:focus-visible{opacity:1;transform:none}
.pv-tab-via:hover{border-color:#ff9c8a;color:#ff9c8a;background:rgba(255,120,100,.12)}
.pv-tab-piu{display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px dashed var(--linea);border-radius:11px;padding:9px 15px;color:var(--testo2);
  font:inherit;font-size:13.5px;cursor:pointer;transition:.16s}
.pv-tab-piu:hover{border-color:var(--arancio);color:var(--arancio);border-style:solid}
@media (max-width:560px){
  /* sul telefono le linguette restano in fila e si scorrono col dito:
     impilate una sotto l'altra mangiavano mezza schermata.
     Il padding sopra serve a non tagliare la crocetta. */
  .pv-tab-pareti{gap:10px;flex-wrap:nowrap;overflow-x:auto;padding:9px 2px 4px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pv-tab-pareti::-webkit-scrollbar{height:0}
  .pv-tab,.pv-tab-piu{flex:0 0 auto;scroll-snap-align:start}
  .pv-tab-bt{padding-right:26px}
  .pv-tab-via{opacity:1;transform:none}   /* col dito non c'è il passaggio del mouse */
}

/* Lo scorrimento fra una scheda e l'altra: esce da un lato ed
   entra dall'altro, così si capisce che ci si sta spostando. */
.pv-esce-sx,.pv-esce-dx,.pv-entra-dx,.pv-entra-sx{will-change:transform,opacity}
.pv-esce-sx{animation:pv-esce-sx .17s cubic-bezier(.4,0,1,1) forwards}
.pv-esce-dx{animation:pv-esce-dx .17s cubic-bezier(.4,0,1,1) forwards}
.pv-entra-dx{animation:pv-entra-dx .32s cubic-bezier(.16,.84,.44,1) both}
.pv-entra-sx{animation:pv-entra-sx .32s cubic-bezier(.16,.84,.44,1) both}
@keyframes pv-esce-sx{to{opacity:0;transform:translateX(-26px)}}
@keyframes pv-esce-dx{to{opacity:0;transform:translateX(26px)}}
@keyframes pv-entra-dx{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes pv-entra-sx{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pv-esce-sx,.pv-esce-dx,.pv-entra-dx,.pv-entra-sx{animation:none}
}

/* ---------- La scena: fondale, pavimento, ledwall, persona ---------- */
.pv-scena{position:relative;overflow:hidden;border-radius:12px;background:#0f0d0c;
  height:clamp(240px,26vw,340px);isolation:isolate}
.pv-scena-pieno{position:fixed;inset:0;z-index:9999;height:100vh;height:100dvh;border-radius:0}
.pv-scena-bt{position:absolute;right:10px;top:10px;z-index:5;display:inline-flex;align-items:center;gap:7px;
  background:rgba(13,14,17,.72);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;backdrop-filter:blur(6px)}
.pv-scena-bt:hover{border-color:var(--arancio);color:var(--arancio-c)}
.pv-scena-bt .pv-i-esci{display:none}
/* ---------- I comandi del contenuto, dentro il disegno ----------
   Play, barra di avanzamento, tempo e la levetta «riempi»: stanno in
   basso dentro la scena, così seguono il disegno quando si sposta
   nella scheda Audio o va a tutto schermo. */
.pv-scena-comandi{position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;
  background:linear-gradient(to top,rgba(8,9,11,.92),rgba(8,9,11,.72) 62%,rgba(8,9,11,0));
  color:#fff}
.pv-scena-comandi[hidden]{display:none}
.pv-scena-comandi .pv-play{background:rgba(20,22,27,.8);border-color:rgba(255,255,255,.28);color:#fff}
.pv-scena-comandi .pv-play:hover{border-color:var(--arancio);color:var(--arancio)}
.pv-scena-comandi .pv-avanzamento{flex:1 1 120px;min-width:90px}
.pv-scena-comandi .pv-tempo{color:rgba(255,255,255,.85)}
.pv-int-scena{color:rgba(255,255,255,.9);font-size:13px;margin-left:auto}
.pv-int-scena .pv-leva{background:rgba(255,255,255,.24)}
.pv-int-scena .pv-leva::after{background:#fff}
@media (max-width:640px){
  .pv-scena-comandi{gap:8px;padding:8px 9px}
  .pv-int-scena{font-size:12px;width:100%;margin-left:0}
}

/* L'interruttore dell'audio: sta sul disegno, di fianco al «tutto
   schermo», e si vede solo quando c'è un video e le casse sono al
   loro posto — cioè quando c'è davvero qualcosa da sentire */
.pv-suono{position:absolute;left:10px;top:10px;z-index:5;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--arancio);background:rgba(20,22,27,.72);color:var(--arancio);
  backdrop-filter:blur(6px);transition:.15s}
.pv-suono[hidden]{display:none}
.pv-suono:hover{background:rgba(245,149,42,.2)}
.pv-suono .pv-i-muto{display:none}
.pv-suono.muto{border-color:rgba(255,255,255,.28);color:#cfd3da}
.pv-suono.muto .pv-i-muto{display:block}
.pv-suono.muto .pv-i-suono{display:none}
.pv-scena-pieno .pv-scena-bt .pv-i-esci{display:block}
.pv-scena-pieno .pv-scena-bt .pv-i-entra{display:none}
body.pv-senza-scorrimento{overflow:hidden}
/* i comandi del contenuto, quando la scena è a tutto schermo */
/* A tutto schermo il caricamento del file entra nella stessa barra
   dei comandi, in cima: due strisce in fondo allo schermo, una sopra
   l'altra, erano solo confusione. */
.pv-scena-comandi .pv-media{order:-1;width:100%;margin:0;padding:0 0 6px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff}
.pv-scena-comandi .pv-media .pv-carica{border-color:rgba(255,255,255,.3);color:#fff}
.pv-scena-comandi .pv-media .pv-togli-media{color:rgba(255,255,255,.85)}
.pv-scena-pieno .pv-scena-comandi{padding:14px 18px}
.pv-fondale{position:absolute;left:0;right:0;top:0;height:var(--suolo,72%);
  background-image:var(--legno);
  /* le tavole sono larghe una decina di centimetri: la misura arriva
     dal JavaScript, così restano vere a ogni scala */
  background-size:var(--tavola,90px) 100%;background-position:center bottom;
  filter:brightness(.5) saturate(.85)}
.pv-fondale::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.06) 45%,rgba(0,0,0,.5))}
/* Il pavimento è cemento: quello vero dei padiglioni. Niente foto,
   solo qualche chiazza e i giunti di dilatazione, che tra l'altro
   aiutano a leggere la profondità. */
.pv-pavimento{position:absolute;left:-70%;right:-70%;top:var(--suolo,72%);bottom:-45%;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0 1px,transparent 1px var(--giunto,60px)),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px var(--giunto,60px)),
    radial-gradient(36% 28% at 24% 36%,rgba(255,255,255,.055),transparent 66%),
    radial-gradient(30% 24% at 72% 56%,rgba(255,255,255,.04),transparent 66%),
    radial-gradient(42% 28% at 46% 84%,rgba(0,0,0,.28),transparent 72%),
    linear-gradient(180deg,#303134,#3f4044 38%,#26272a);
  transform:perspective(340px) rotateX(70deg);transform-origin:top center}
/* più si va verso la parete più il pavimento sta in ombra */
.pv-pavimento::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.12) 26%,rgba(0,0,0,.45))}
/* il battiscopa: la riga scura dove il muro incontra il pavimento */
.pv-scena::before{content:"";position:absolute;left:0;right:0;top:var(--suolo,72%);height:3px;
  background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.15));z-index:2;pointer-events:none}
.pv-ombra{position:absolute;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.43),rgba(0,0,0,0));filter:blur(1px)}
/* Niente cornice colorata: un ledwall vero è un rettangolo nero.
   L'ombra dietro serve a staccarlo dalla parete di fondo. */
.pv-parete{position:absolute;background:#08090c;border-radius:2px;overflow:hidden;z-index:3;
  box-shadow:0 0 0 1px rgba(0,0,0,.9), 16px 13px 28px -10px rgba(0,0,0,.52),
             0 22px 34px -20px rgba(0,0,0,.75)}
.pv-parete.accesa{box-shadow:0 0 0 1px rgba(0,0,0,.9), 16px 13px 28px -10px rgba(0,0,0,.49),
  0 0 90px 16px rgba(255,255,255,.13), 0 22px 34px -20px rgba(0,0,0,.75)}
.pv-parete-media{position:absolute;inset:0;background:#000}
.pv-media-dentro{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;background:#000}
.pv-parete-griglia{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
                   linear-gradient(180deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-position:0 0}
.pv-parete-invito{position:absolute;inset:0;margin:0;display:grid;place-items:center;
  color:rgba(255,255,255,.42);font-size:13px;text-align:center;padding:8px;pointer-events:none}
/* «display:grid» batteva il «nascosto» del browser: la scritta d'invito
   restava sopra il video del cliente */
.pv-parete-invito[hidden]{display:none}
.pv-donna{position:absolute;object-fit:contain;object-position:bottom center;z-index:3;
  /* l'ombra segue la sagoma: la stacca dal fondale senza aloni */
  filter:drop-shadow(11px 8px 12px rgba(0,0,0,.42)) drop-shadow(0 3px 5px rgba(0,0,0,.35))}
/* Le quote: linea sottile, trattini alle estremità, misura al centro */
.pv-quota{position:absolute;pointer-events:none;z-index:4}
.pv-quota span{position:absolute;font-size:14.5px;line-height:1;color:rgba(255,255,255,.9);
  background:rgba(13,14,17,.7);padding:3px 7px;border-radius:5px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pv-quota::before,.pv-quota::after{content:"";position:absolute;background:rgba(255,255,255,.5)}
.pv-quota-b{height:1px;background:rgba(255,255,255,.5)}
.pv-quota-b::before,.pv-quota-b::after{width:1px;height:11px;top:-5px}
.pv-quota-b::before{left:0}
.pv-quota-b::after{right:0}
.pv-quota-b span{left:50%;top:50%;transform:translate(-50%,-50%)}
.pv-quota-h{width:1px;background:rgba(255,255,255,.5)}
.pv-quota-h::before,.pv-quota-h::after{height:1px;width:11px;left:-5px}
.pv-quota-h::before{top:0}
.pv-quota-h::after{bottom:0}
.pv-quota-h span{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}

/* ---------- Il tecnico sul posto ---------- */
.pv-assistenza{margin-top:20px;padding:15px 17px;background:var(--nero);border:1px solid var(--linea);border-radius:12px}
.pv-assistenza.bloccata .pv-interruttore{cursor:default}
.pv-assistenza.bloccata .pv-leva{opacity:.65}
.pv-assistenza-detta{margin:9px 0 0}

/* ---------- Il contenuto del cliente ---------- */
/* I comandi del video e l'interruttore stanno staccati dal disegno:
   appiccicati sembravano parte della scena. */
.pv-media{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:18px 0 0}
/* con una fotografia non c'è niente da far partire: restano solo
   il nome del file e il «Togli» */
.pv-media-comandi.senza-video .pv-solo-video{display:none}
/* la stessa regola per la barra dentro il disegno: con una
   fotografia non c'è niente da far scorrere, e play e tempo
   restavano lì a segnare 0:00 */
.pv-scena-comandi.senza-video .pv-solo-video{display:none}
.pv-carica{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;
  color:var(--testo2);border:1px dashed var(--linea);border-radius:9px;padding:8px 13px;transition:.15s}
.pv-carica:hover{border-color:var(--arancio);color:var(--testo)}
.pv-carica svg{color:var(--arancio);flex:0 0 auto}
.pv-carica span{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-media-comandi{display:flex;align-items:center;gap:9px;flex:1 1 240px;min-width:0}
/* con una fotografia i comandi sono solo il «Togli»: non deve
   tirarsi dietro mezza riga vuota */
.pv-media-comandi.senza-video{flex:0 0 auto}
.pv-play{width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:1px solid var(--linea);
  background:var(--carta);color:var(--testo);display:grid;place-items:center;cursor:pointer}
.pv-play:hover{border-color:var(--arancio);color:var(--arancio)}
.pv-play .pv-i-pausa{display:none}
.pv-play.suona .pv-i-pausa{display:block}
.pv-play.suona .pv-i-play{display:none}
.pv-avanzamento{flex:1;min-width:60px;accent-color:var(--arancio);height:4px}
.pv-tempo{font-size:12px;color:var(--testo3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pv-togli-media{background:none;border:0;color:var(--testo3);font:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline}
.pv-togli-media:hover{color:var(--testo)}
/* L'interruttore: una levetta, non una casella da modulo */
.pv-interruttore{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--testo2)}
.pv-interruttore input{position:absolute;opacity:0;width:0;height:0}
.pv-leva{width:38px;height:22px;border-radius:99px;background:var(--linea);position:relative;transition:.18s;flex:0 0 38px}
.pv-leva::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--testo2);transition:.18s}
.pv-interruttore input:checked + .pv-leva{background:rgba(245,149,42,.4)}
.pv-interruttore input:checked + .pv-leva::after{transform:translateX(16px);background:var(--arancio)}
.pv-interruttore input:focus-visible + .pv-leva{outline:2px solid var(--arancio);outline-offset:2px}

/* ---------- Il progettista dentro il passaggio ---------- */
.pv-progetto{margin-top:34px;padding-top:30px;border-top:1px solid var(--linea)}
.pv-progettista{margin-top:16px}
/* Sul telefono il progettista si riprende i margini del modulo:
   la sua barra dei comandi è già stretta di suo e con 22 px per
   lato uscirebbe dallo schermo. */
@media (max-width:700px){
  .pv-progettista{margin-left:-22px;margin-right:-22px}
}


/* ---------- I recapiti: campi alti, icona dentro ---------- */
.campi-recapiti{gap:16px 18px}
.pv-recapito{display:flex;flex-direction:column;gap:7px}
.pv-recapito-eti{font-size:13.5px;font-weight:600;color:var(--testo2)}
.pv-recapito-dentro{position:relative;display:block}
.pv-recapito-dentro svg{position:absolute;left:15px;top:50%;margin-top:-9.5px;
  color:var(--testo3);pointer-events:none;transition:color .16s}
.pv-recapito input{width:100%;background:var(--nero);border:1px solid var(--linea);border-radius:11px;
  padding:15px 16px 15px 46px;color:var(--testo);font:inherit;font-size:16px;line-height:1.3}
.pv-recapito input::placeholder{color:var(--testo3)}
.pv-recapito input:focus{border-color:var(--arancio);outline:none}
.pv-recapito-dentro:focus-within svg{color:var(--arancio)}
/* Il completamento automatico del browser ridipinge il campo di
   bianco: qui lo riportiamo scuro, se no in mezzo al modulo restano
   due caselle chiare che sembrano un errore. */
.modulo input:-webkit-autofill,
.modulo input:-webkit-autofill:hover,
.modulo input:-webkit-autofill:focus,
.modulo textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--testo);
  -webkit-box-shadow:0 0 0 1000px var(--nero) inset;
  box-shadow:0 0 0 1000px var(--nero) inset;
  caret-color:var(--testo);
  transition:background-color 9999s ease-out 0s;
}

/* ---------- Il codice di conferma ---------- */
.pv-codice{margin-top:24px;padding:20px;background:var(--nero);border:1px solid var(--linea);border-radius:12px}
.pv-codice.fatto{border-color:rgba(47,125,79,.55)}
.pv-codice .pv-aiuto{margin-bottom:14px}
.pv-codice-riga{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pv-codice-cifre{display:flex;gap:10px;align-items:center;position:relative}
/* Finche' il codice non e' stato chiesto, la casella non c'e': senza
   questa riga il display:flex qui sopra vince sull'attributo hidden. */
.pv-codice-cifre[hidden]{display:none}
.pv-codice-cifre input{background:var(--carta);border:1px solid var(--linea);border-radius:9px;
  padding:13px 10px;color:var(--testo);font:inherit;font-size:22px;font-weight:600;
  letter-spacing:.30em;text-indent:.30em;   /* la spaziatura finale non spinge fuori l'ultima cifra */
  width:11ch;min-width:150px;text-align:center;font-variant-numeric:tabular-nums}
.pv-codice-cifre input:focus{border-color:var(--arancio);outline:none}
.pv-codice-esito{margin:12px 0 0;font-size:14px;color:var(--testo2);min-height:1.2em}
.pv-codice-esito.bene{color:#8fd8a8;font-weight:600}
.pv-codice-esito.male{color:#ff9c8a}
.pv-codice-esito.prova{color:#f2d79b}

/* ---------- Il riepilogo ---------- */
.pv-riepilogo{margin-top:30px;padding-top:26px;border-top:1px solid var(--linea)}
.pv-riepilogo dl{margin:0;display:grid;gap:2px}
.pv-riepilogo div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--linea)}
.pv-riepilogo dt{color:var(--testo3);font-size:13.5px}
.pv-riepilogo dd{margin:0;font-size:15px}
@media (max-width:560px){.pv-riepilogo div{grid-template-columns:1fr;gap:2px}}

/* ---------- Il piede con i tasti ---------- */
.pv-piede{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--linea)}
.pv-piede .pv-avanti,.pv-piede .pv-invia{margin-left:auto}
.btn-fine{border-color:var(--linea);color:var(--testo2);background:none}
.btn-fine:hover{border-color:var(--testo3);color:var(--testo)}
.pv-errore{margin:0;font-size:14px;color:#ff9c8a;opacity:0;transition:.16s;flex:1}
.pv-errore.si-vede{opacity:1}
@media (max-width:560px){
  .pv-piede{flex-wrap:wrap}
  .pv-errore{order:-1;flex:1 0 100%}
  .pv-piede .pv-avanti,.pv-piede .pv-invia{flex:1}
}

/* ---------- I cartellini di quello che manca ----------
   Rossi, accanto al campo, con la punta rivolta al campo stesso:
   un avviso in fondo alla pagina lascia a caccia. */
.pv-sbagliato{position:relative}
.pv-sbagliato input:not([type=checkbox]),
.pv-sbagliato textarea,
.pv-sbagliato .pv-recapito-dentro{border-color:var(--rosso) !important}
.pv-bolla{display:inline-flex;align-items:center;gap:7px;position:relative;
  /* larga quanto la frase, non quanto il campo: e' un cartellino, non
     una fascia. Dentro una colonna flex va detto a parte. */
  width:max-content;max-width:100%;align-self:flex-start;
  margin-top:9px;padding:7px 12px;border-radius:9px;
  background:var(--rosso);color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;
  box-shadow:0 8px 22px rgba(224,49,39,.3);animation:pv-bolla-entra .22s ease}
.pv-bolla::before{content:"";position:absolute;left:16px;bottom:100%;
  border:6px solid transparent;border-bottom-color:var(--rosso)}
@keyframes pv-bolla-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pv-consenso .pv-bolla,.pv-codice .pv-bolla{margin-left:0}
@media (prefers-reduced-motion:reduce){.pv-bolla{animation:none}}

/* La levetta del consenso: allineata al testo, che è lungo */
.pv-int-consenso{align-items:flex-start;gap:12px;line-height:1.6}
.pv-int-consenso .pv-leva{margin-top:2px;flex:0 0 38px}
.pv-int-consenso a{color:var(--arancio);text-decoration:underline}
.pv-consenso{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;align-items:flex-start}

/* ============================================================
   La finestra della scelta sui cookie

   Sta in basso, non copre la pagina e non impedisce di leggere:
   una scelta si fa meglio se si vede cosa si sta scegliendo.
   ============================================================ */
/* mk-ck-5 */
/* Due schermate: l'avviso in basso (non copre e non blocca) e il
   pannello delle preferenze al centro, che invece è una finestra
   vera perché lì si sta scegliendo. */
.ck{position:fixed;inset:0;z-index:120;pointer-events:none}
.ck[hidden]{display:none}
/* i pulsanti hanno un display loro: senza questo, «hidden» non basta
   a farli sparire */
.ck [hidden]{display:none !important}
.ck > *{pointer-events:auto}

/* ---------- 1 · l'avviso breve ---------- */
.ck-fondo{display:none}
.ck[data-vista="scelte"] .ck-fondo{display:block;position:absolute;inset:0;
  background:rgba(0,0,0,.62);animation:ck-entra .18s ease}
.ck-cassa{position:absolute;left:0;right:0;bottom:0;
  max-width:640px;margin:0 auto 18px;padding:20px 22px;
  background:var(--carta);border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55)}
.ck-titolo{margin:0 0 8px;font-size:17px;padding-right:28px}
.ck-x{position:absolute;top:10px;right:12px;width:30px;height:30px;padding:0;
  border:0;background:none;color:var(--testo2);font-size:22px;line-height:1;cursor:pointer;border-radius:8px}
.ck-x:hover{color:var(--testo);background:rgba(255,255,255,.06)}
.ck-testo{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--testo2)}
.ck-testo b{color:var(--testo)}
.ck-bottoni{display:flex;flex-wrap:wrap;gap:9px}
.ck-bottoni .btn{flex:1 1 auto}
.ck-piede{display:flex;gap:16px;margin:14px 0 0;font-size:12.5px}
.ck-piede a{color:var(--testo3)}
.ck-piede a:hover{color:var(--arancio)}

/* ---------- 2 · il pannello delle preferenze ---------- */
@keyframes ck-entra{from{opacity:0}to{opacity:1}}
@keyframes ck-sale{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.ck-pannello{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;
  width:min(680px,calc(100vw - 34px));max-height:min(86vh,760px);
  background:var(--carta);border:1px solid var(--linea);border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden;animation:ck-sale .2s ease}
.ck-pannello:focus{outline:none}

.ck-pan-testa{display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-bottom:1px solid var(--linea)}
.ck-indietro{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--linea);border-radius:10px;color:var(--testo2)}
.ck-indietro:hover{color:var(--testo);border-color:var(--testo3)}
.ck-pan-policy{margin-left:auto;padding:8px 14px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);
  color:var(--testo2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.ck-pan-policy:hover{color:var(--arancio);border-color:var(--arancio)}
.ck-x-pan{position:static;flex:0 0 30px}

.ck-pan-alto{padding:20px 22px 18px;border-bottom:1px solid var(--linea)}
.ck-pan-titolo{margin:0 0 6px;font-size:19px}
.ck-pan-detta{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--testo2)}
/* «Rifiuta tutto» e «Accetta tutto» hanno lo stesso peso: è la
   regola, e comunque è l'unico modo onesto di chiedere. */
.ck-pan-grossi{display:flex;flex-wrap:wrap;gap:10px}
.ck-grosso{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex:1 1 200px;padding:12px 18px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:99px;
  color:var(--testo);font:inherit;font-size:14.5px;font-weight:700;transition:.15s}
.ck-grosso:hover{background:rgba(255,255,255,.10);border-color:var(--testo3)}
.ck-segno{flex:0 0 17px;color:var(--testo2)}
.ck-grosso:hover .ck-segno{color:var(--testo)}

.ck-elenco{flex:1 1 auto;overflow-y:auto;padding:4px 22px 8px}
.ck-voce{padding:16px 0;border-bottom:1px solid var(--linea)}
.ck-voce:last-child{border-bottom:0}
.ck-voce-testa{display:flex;align-items:center;gap:14px}
.ck-voce-nome{margin:0;font-size:16px;font-weight:700;color:var(--testo)}
.ck-detta-bt{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  padding:6px 2px;background:none;border:0;cursor:pointer;
  color:var(--testo3);font:inherit;font-size:13px;white-space:nowrap}
.ck-detta-bt:hover{color:var(--testo)}
.ck-detta-bt svg{transition:transform .18s}
.ck-detta-bt[aria-expanded="true"] svg{transform:rotate(180deg)}
.ck-voce-detta{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:var(--testo2)}
.ck-voce-nota{margin:8px 0 0;font-size:12.5px;color:var(--testo3)}

/* la levetta del pannello: la stessa del resto del sito */
.ck-leva-cassa{position:relative;display:inline-flex;flex:0 0 44px;cursor:pointer}
.ck-leva-cassa input{position:absolute;opacity:0;width:0;height:0}
.ck-leva{width:44px;height:26px;border-radius:99px;background:var(--linea);
  position:relative;transition:.18s;flex:0 0 44px}
.ck-leva::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--testo2);transition:.18s}
.ck-leva-cassa input:checked + .ck-leva{background:rgba(245,149,42,.42)}
.ck-leva-cassa input:checked + .ck-leva::after{transform:translateX(18px);background:var(--arancio)}
.ck-leva-cassa input:disabled + .ck-leva{opacity:.6}
.ck-leva-cassa.ck-fissa{cursor:default}
.ck-leva-cassa input:focus-visible + .ck-leva{outline:2px solid var(--arancio);outline-offset:2px}

.ck-solo-tecnici{margin:2px 0 14px;font-size:13px;line-height:1.6;color:var(--testo3)}
.ck-solo-tecnici a{color:var(--arancio);text-decoration:underline}

.ck-pan-piede{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 22px;border-top:1px solid var(--linea);background:rgba(0,0,0,.16)}
.ck-pan-privacy{font-size:12.5px;color:var(--testo3)}
.ck-pan-privacy:hover{color:var(--arancio)}
.ck-pan-piede .ck-salva{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .ck-fondo,.ck-pannello{animation:none}
}
/* Il collegamento nel piè di pagina per tornare a scegliere */
/* Le tre voci legali: staccate una dall'altra, se no si leggono come
   una parola sola («Privacy Cookie Preferenze cookie»). Il pulsante
   non deve sembrare un pulsante: è una voce come le altre due. */
.pie-legale{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;font-size:13px}
.pie-legale a,.pie-cookie{color:var(--testo3);padding:4px 0;
  border-bottom:1px solid transparent;text-decoration:none;transition:color .15s}
.pie-cookie{background:none;border:0;border-bottom:1px solid transparent;
  margin:0;font:inherit;font-size:13px;line-height:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:0}
.pie-legale a:hover,.pie-cookie:hover{color:var(--arancio);border-bottom-color:currentColor}
.pie-cookie:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
@media (max-width:640px){
  /* in colonna il respiro lo danno i margini verticali */
  .pie-legale{gap:12px 22px;justify-content:center}
}
@media (max-width:640px){
  .ck-cassa{margin:0;border-radius:16px 16px 0 0;padding:17px 15px}
  .ck-bottoni .btn{flex:1 1 100%}
  /* sul telefono il pannello parte da sotto e sale: si legge meglio
     e il pollice arriva ai pulsanti */
  .ck-pannello{top:auto;bottom:0;left:0;transform:none;width:100%;
    max-height:92vh;border-radius:18px 18px 0 0;animation:none}
  .ck-pan-testa{padding:11px 12px}
  .ck-pan-policy{font-size:12.5px;padding:7px 12px}
  .ck-pan-alto{padding:17px 16px 15px}
  .ck-elenco{padding:2px 16px 6px}
  .ck-grosso{flex:1 1 100%}
  .ck-pan-piede{padding:13px 16px}
  .ck-pan-piede .ck-salva{flex:1 1 100%;margin-left:0;order:-1;justify-content:center}
  .ck-voce-testa{flex-wrap:wrap;gap:10px 12px}
  .ck-voce-nome{flex:1 1 auto}
  .ck-detta-bt{margin-left:0;order:3;flex:1 1 100%}
}

/* Le pagine legali: testo e basta, largo giusto per leggere */
.testo-legale{max-width:760px}
.legale-corpo{font-size:15.5px;line-height:1.75;color:var(--testo2)}
.legale-corpo h2{margin:32px 0 10px;font-size:19px;color:var(--testo)}
.legale-corpo p{margin:0 0 14px}
.legale-corpo a{color:var(--arancio)}
.legale-corpo b{color:var(--testo)}
.elenco-legale{margin:0 0 16px;padding:0;list-style:none}
.elenco-legale li{padding:4px 0}
.tabella-legale{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.tabella-legale th,.tabella-legale td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabella-legale th{color:var(--testo);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.legale-quando{margin:34px 0 0;color:var(--testo3);font-size:13px}

/* ---------- Sul telefono ----------
   Lo schermo è già stretto: il percorso guidato si prende tutta la
   larghezza, con un filo di margine e basta. Ogni riquadro che si
   annidava dentro l'altro toglieva venti pixel a testa. */
@media (max-width:640px){
  .pv-cont{padding:0 8px}
  .pv-cont > .modulo{padding:12px 8px;border-radius:12px}
  .pv-conf-corpo{padding:12px 8px}
  .pv-acc-due{gap:14px}
  /* il pulsante del contenuto non si tronca: va a capo */
  .pv-carica{width:100%;justify-content:flex-start}
  .pv-carica span{max-width:none;white-space:normal;overflow:visible;
    text-overflow:clip;word-break:break-word}
}

/* ============================================================
   Digital signage: «Come funziona» e «Dal computer allo schermo»
   ============================================================ */

.ds-intro{max-width:760px;margin-bottom:clamp(30px,4vw,48px)}
.ds-intro .h-sez{margin-bottom:14px}
.ds-sommario{color:var(--testo2);font-size:17px;margin:0}

/* --- I passaggi illustrati --- */
.ds-passi{display:grid;grid-template-columns:repeat(var(--ds-col,2),1fr);gap:clamp(30px,3.4vw,52px)}
.ds-passo{position:relative;min-width:0}

.ds-visuale{position:relative;aspect-ratio:var(--ds-prop,3/2);border-radius:var(--raggio);overflow:hidden;
  background:#11151d;border:1px solid var(--linea);display:grid;place-items:center}
.ds-visuale picture,.ds-visuale img{width:100%;height:100%}
.ds-visuale img{object-fit:cover}
/* «Si vedono per intero»: niente taglio, la foto sta tutta dentro. */
.ds-intera .ds-visuale img,.ds-intera .fl-visuale img{object-fit:contain;background:#0b0e13}

.ds-dice{display:flex;gap:18px;align-items:flex-start;margin-top:clamp(18px,2vw,26px)}
.ds-ico{color:var(--arancio);flex:none;line-height:0;margin-top:2px}
.ds-ico .ico{width:34px;height:34px}
.ds-parole{min-width:0}
.ds-parole h3{font-size:clamp(17px,1.5vw,20px);text-transform:uppercase;letter-spacing:.035em}
.ds-parole .ds-n{color:var(--arancio)}
.ds-parole p{color:var(--testo2);font-size:16px;margin:8px 0 0}

@media (max-width:820px){
  .ds-passi{grid-template-columns:1fr}
}

/* ============================================================
   I pannelli disegnati.
   Non sono immagini: sono HTML, quindi le scritte si traducono
   e restano nitide. Sono progettati su una tela di 760x380 punti
   e rimpiccioliscono tutti insieme: --q vale 10 punti di quella
   tela, e ogni misura qui sotto e' un suo multiplo.
   ============================================================ */
/* Il pannello disegnato tiene la sua forma (larga il doppio dell'altezza)
   anche dentro un riquadro piu' alto: si mette in mezzo invece di
   stiracchiarsi. Alzare i riquadri serve alle fotografie, non a lui. */
.ds-mock{--q:9px;position:relative;width:100%;aspect-ratio:2/1;max-height:100%;
  background:#151b27;overflow:hidden;border-radius:inherit}
.ds-visuale.ds-con-mock{background:#151b27}
@supports (container-type:inline-size){
  .ds-mock{container-type:inline-size}
  .ds-mock{--q:1.3158cqw}          /* 10 punti su 760 di larghezza */
}
.ds-mock-in{height:100%;display:flex;flex-direction:column;
  padding:calc(var(--q)*1.5) calc(var(--q)*1.5) calc(var(--q)*1.3);
  color:#c9d0dc;line-height:1.35;letter-spacing:0}
.ds-mock .ico{width:1.15em;height:1.15em;flex:none}

.dm-top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--q)*1);
  margin-bottom:calc(var(--q)*1.2)}
.dm-marchio{font-size:calc(var(--q)*1.05);font-weight:700;letter-spacing:.07em;color:#e9edf4}
.dm-stato{font-size:calc(var(--q)*.82);color:#8b94a5;display:inline-flex;align-items:center;white-space:nowrap}
.dm-pallino{width:calc(var(--q)*.5);height:calc(var(--q)*.5);border-radius:50%;
  background:#4ade80;margin:0 calc(var(--q)*.45) 0 calc(var(--q)*.7)}

.dm-corpo{flex:1;display:flex;gap:calc(var(--q)*1.2);min-height:0}
.dm-lato{width:calc(var(--q)*13.6);flex:none;display:flex;flex-direction:column;gap:calc(var(--q)*.3)}
.dm-voce,.dm-esci{display:flex;align-items:center;gap:calc(var(--q)*.7);
  padding:calc(var(--q)*.6) calc(var(--q)*.85);border-radius:calc(var(--q)*.5);
  font-size:calc(var(--q)*.9);color:#98a2b3}
.dm-voce em,.dm-esci em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-voce-on{background:#2563eb;color:#fff}
.dm-esci{margin-top:auto;color:#6d7686}

.dm-carta{flex:1;min-width:0;background:#fff;border-radius:calc(var(--q)*.8);
  padding:calc(var(--q)*1.2) calc(var(--q)*1.4);color:#1f2733;display:flex;flex-direction:column}
.dm-carta-top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--q)*1);
  margin-bottom:calc(var(--q)*.9)}
.dm-carta-top b{font-size:calc(var(--q)*1.1);letter-spacing:.05em;color:#111827}
.dm-bt{display:inline-flex;align-items:center;gap:calc(var(--q)*.4);background:#2563eb;color:#fff;
  font-size:calc(var(--q)*.78);font-weight:600;padding:calc(var(--q)*.5) calc(var(--q)*.9);
  border-radius:calc(var(--q)*.5);white-space:nowrap}

/* --- La playlist --- */
.dm-righe{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.dm-righe li{flex:1;display:flex;align-items:center;gap:calc(var(--q)*.8);
  padding:0 calc(var(--q)*.2);border-top:1px solid #eef1f5;font-size:calc(var(--q)*.92)}
.dm-presa{color:#c8ced9;line-height:0}
.dm-n{color:#9aa3b2;font-size:calc(var(--q)*.82);width:calc(var(--q)*.8)}
.dm-mini{width:calc(var(--q)*2.3);height:calc(var(--q)*1.6);border-radius:calc(var(--q)*.3);flex:none}
.dm-mini-a{background:linear-gradient(135deg,#f7a8b8,#e0637f)}
.dm-mini-b{background:linear-gradient(135deg,#8b45e0,#4a1f9e)}
.dm-mini-c{background:linear-gradient(135deg,#9ecdf3,#4a90d9)}
.dm-mini-d{background:linear-gradient(135deg,#3a3a3a,#000)}
.dm-nome{flex:1;min-width:0;color:#111827;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-col{color:#7b8493;font-size:calc(var(--q)*.82);white-space:nowrap}
.dm-col-sec{width:calc(var(--q)*4.2);text-align:right}
.dm-att{display:flex;gap:calc(var(--q)*.7);color:#b8c0cb;line-height:0}
.dm-piede{display:flex;align-items:center;gap:calc(var(--q)*.5);color:#9aa3b2;
  font-size:calc(var(--q)*.8);padding-top:calc(var(--q)*.9);border-top:1px solid #eef1f5}

/* --- La programmazione della settimana --- */
.dm-schede{display:flex;gap:calc(var(--q)*1.6);font-size:calc(var(--q)*.78);color:#8b93a1;
  border-bottom:1px solid #e8ecf1;margin-bottom:calc(var(--q)*.8)}
.dm-schede span{padding-bottom:calc(var(--q)*.5)}
.dm-scheda-on{color:#2563eb;box-shadow:inset 0 -2px 0 #2563eb}
.dm-cal{width:100%;height:100%;flex:1;border-collapse:collapse;table-layout:fixed;font-size:calc(var(--q)*.72)}
.dm-cal th{color:#8b93a1;font-weight:600;padding-bottom:calc(var(--q)*.4);text-align:center}
.dm-cal td{padding:calc(var(--q)*.16)}
.dm-ora{color:#9aa3b2;width:calc(var(--q)*3.4);font-size:calc(var(--q)*.7)}
.dm-cel{border-radius:calc(var(--q)*.3);text-align:center;padding:calc(var(--q)*.4) calc(var(--q)*.15);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-cel-v{background:#dcf5e4;color:#2f7a4b}
.dm-cel-r{background:#fde4ec;color:#a83a63}
.dm-cel-p{background:#ece0fb;color:#6f40a8}
.dm-cel-a{background:#ddeafd;color:#2f5fa8}

/* ============================================================
   Dal computer allo schermo
   ============================================================ */
/* Tre colonne uguali. Le didascalie restano tutte sulla stessa riga
   anche quando una e' piu' lunga delle altre: le allinea la griglia
   annidata (subgrid), come nel disegno. */
.fl-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,40px)}
.fl-passo{min-width:0;position:relative;display:flex;flex-direction:column;
  gap:clamp(16px,1.8vw,24px)}
@supports (grid-template-rows:subgrid){
  .fl-fila{grid-template-rows:auto auto}
  .fl-passo{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}

.fl-visuale{position:relative;aspect-ratio:var(--ds-prop,3/2);border-radius:var(--raggio);overflow:hidden;
  background:#11151d;border:1px solid var(--linea);display:grid;place-items:center}
.fl-visuale picture,.fl-visuale img{width:100%;height:100%}
.fl-visuale img{object-fit:cover}
.fl-passo-nuvola .fl-visuale{background:none;border:0;overflow:visible;border-radius:0;aspect-ratio:auto}

.fl-dice{display:flex;gap:14px;align-items:flex-start}
.fl-n{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--arancio);
  color:var(--arancio);display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1}
.fl-dice h3{font-size:clamp(16px,1.4vw,19px);text-transform:uppercase;letter-spacing:.035em}
.fl-dice p{color:var(--testo2);font-size:15.5px;margin:8px 0 0}

/* --- La nuvola che respira --- */
.nuvola{width:clamp(120px,62%,190px);margin:0 auto}
.nuvola-dis{width:100%;height:auto;overflow:visible;display:block}
.nv-alone{fill:var(--arancio);transform-box:fill-box;transform-origin:center;
  animation:nv-respira 3.6s ease-in-out infinite}
.nv-corpo{transform-box:fill-box;transform-origin:center;animation:nv-batte 3.6s ease-in-out infinite}
.nv-forma{fill:none;stroke:var(--arancio);stroke-width:3.4;stroke-linejoin:round}
.nv-su,.nv-giu{fill:none;stroke:var(--arancio);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.nv-su{animation:nv-sale 2.8s ease-in-out infinite}
.nv-giu{animation:nv-scende 2.8s ease-in-out infinite .4s}

@keyframes nv-respira{0%,100%{transform:scale(.92);opacity:.07}50%{transform:scale(1.08);opacity:.17}}
@keyframes nv-batte  {0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes nv-sale   {0%,100%{transform:translateY(2px);opacity:.5}45%{transform:translateY(-3px);opacity:1}}
@keyframes nv-scende {0%,100%{transform:translateY(-2px);opacity:.5}45%{transform:translateY(3px);opacity:1}}

/* I tratteggi che entrano ed escono dalla nuvola: solo dove c'e' spazio */
@media (min-width:900px){
  .fl-passo-nuvola .fl-visuale::before,
  .fl-passo-nuvola .fl-visuale::after{
    content:"";position:absolute;top:50%;height:2px;
    background-image:repeating-linear-gradient(90deg,var(--arancio) 0 6px,transparent 6px 13px);
    background-size:13px 2px;opacity:.55;animation:nv-scorre 1.1s linear infinite}
  .fl-passo-nuvola .fl-visuale::before{left:0;right:calc(50% + 78px)}
  .fl-passo-nuvola .fl-visuale::after {right:0;left:calc(50% + 78px)}
}
@keyframes nv-scorre{from{background-position:0 0}to{background-position:13px 0}}

/* Chi ha chiesto meno animazioni al suo computer non le vede: e' una
   richiesta esplicita, e va rispettata anche quando il movimento e' bello. */
@media (prefers-reduced-motion:reduce){
  .nv-alone,.nv-corpo,.nv-su,.nv-giu,
  .fl-passo-nuvola .fl-visuale::before,
  .fl-passo-nuvola .fl-visuale::after{animation:none}
  .nv-alone{opacity:.12}
}

/* ============================================================
   Modulo di contatto semplice (installazioni fisse)
   ============================================================ */
.ct-intro{max-width:640px;margin-bottom:clamp(26px,3.4vw,40px)}
.ct-intro .h-sez{margin-bottom:14px}
.ct-modulo{max-width:840px}
.ct-modulo .campi-recapiti{margin-bottom:4px}
.ct-piede{display:flex;align-items:center;justify-content:flex-end;gap:18px;
  flex-wrap:wrap;margin-top:30px}
.ct-piede .pv-errore{margin:0;flex:1;min-width:180px}

/* Il campo trappola per i robot: fuori dallo schermo, mai letto ad alta voce */
.pv-esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* La risposta dopo l'invio */
.ct-fatto{border:1px solid rgba(79,180,119,.34);background:rgba(79,180,119,.08);
  border-radius:var(--raggio);padding:26px 28px;max-width:640px}
.ct-fatto h3{font-size:21px;margin-bottom:8px;color:#a8e0c0}
.ct-fatto p{margin:0;color:var(--testo2)}

.avviso-modulo{border:1px solid rgba(224,90,79,.34);background:rgba(224,90,79,.08);
  border-radius:11px;padding:14px 17px;color:#ffb0a6;font-size:15px;margin:0 0 24px;max-width:640px}

@media (max-width:640px){
  .ct-piede{justify-content:stretch}
  .ct-piede .btn{width:100%}
}