/* Studio Kythera - stile comune a tutte le pagine.
   Font ospitati nel sito, nessuna risorsa esterna, nessun cookie. */

@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"SK Titoli";src:url("../fonts/sk-titoli-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --inchiostro:#0B0D14;
  --ardesia:#3E4456;
  --bianco:#FFFFFF;
  --nebbia:#EEF0F6;
  --viola:#7C5CFF;
  --azzurro:#22D3EE;
  --linea:rgba(11,13,20,.16);
  --linea-lieve:rgba(11,13,20,.07);
  --chiaro:#AEB4C6;
  --sfumatura:linear-gradient(90deg,var(--viola),var(--azzurro));
  --titoli:"SK Titoli","Century Gothic","URW Gothic",system-ui,sans-serif;
  --testi:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bordo:clamp(1.25rem,5vw,3rem);
  --larghezza:68rem;
  --testata:3.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--testi);font-size:1.0625rem;line-height:1.55;color:var(--inchiostro);background:var(--bianco);-webkit-font-smoothing:antialiased;overflow-x:clip}
svg,img{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--viola);outline-offset:3px;border-radius:3px}
[id]{scroll-margin-top:calc(var(--testata) + 1rem)}

h1,h2{font-family:var(--titoli);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,8.4vw,4.75rem);line-height:1.04}
h2{font-size:clamp(1.8rem,5.6vw,2.75rem);line-height:1.1}
h3{font-size:1.125rem;font-weight:600;line-height:1.3}

.salta{position:absolute;left:var(--bordo);top:-5rem;z-index:30;padding:.6rem 1rem;border-radius:999px;background:var(--inchiostro);color:var(--bianco);text-decoration:none}
.salta:focus{top:.6rem}
.scorta{position:absolute;width:0;height:0;overflow:hidden}
.nascosto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.contenuto{width:min(100% - 2*var(--bordo),var(--larghezza));margin-inline:auto}

/* ---------- testata e menu ---------- */
.testata{position:absolute;top:0;left:0;right:0;z-index:20;min-height:var(--testata);display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;padding:0 max(var(--bordo),(100% - var(--larghezza))/2)}
.js .testata{position:fixed}
.testata::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--bianco);border-bottom:1px solid var(--linea);transition:opacity .35s}
.testata__marchio{display:block;width:6.75rem;color:var(--inchiostro);transform-origin:0 0;transition:opacity .25s,visibility .25s}
.testata__marchio svg{width:100%;height:auto}
/* nella Home la testata sta sopra il logo grande: al primo scroll prende il fondo e il nome vola nel marchio */
.testata--sul-logo::before{opacity:0}
.testata--sul-logo .testata__marchio{opacity:0;visibility:hidden;transition:none}   /* nella Home lo scambio con la scritta grande e' istantaneo */
.testata--sul-logo.e-ancorata::before,.testata--sul-logo.e-aperta::before{opacity:1}
.testata.e-aperta::before{background:var(--bianco)}   /* menu aperto sul telefono: fondo pieno, niente testo che traspare */
.testata--sul-logo.e-ancorata .testata__marchio{opacity:1;visibility:visible}

.testata__apri{display:none}
.js .testata__apri{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;margin-left:auto;padding:0;border:0;background:none;font:inherit;font-size:.9375rem;font-weight:600;color:var(--inchiostro);cursor:pointer}
.testata__apri::after{content:"";width:1.15rem;height:.5rem;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.testata.e-aperta .testata__apri::after{height:0;border-bottom:0}

.testata__voci{display:flex;flex-wrap:wrap;align-items:center;margin-left:auto;font-size:.9375rem}
.testata__voci a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.testata__linea{display:none}
.testata__voci a:hover{text-decoration:underline;text-underline-offset:.3em}
.testata__voci a[aria-current="page"],.testata__voci a.e-sezione{font-weight:600}

/* lingue: bandiera e menu a tendina, in alto a destra */
.lingue{position:relative;display:flex;align-items:center}
.lingue__apri{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 .35rem;border:0;background:none;color:inherit;font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.lingue__apri::after{content:"";width:.38rem;height:.38rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-.12rem) rotate(45deg);transition:transform .15s}
.lingue.e-aperto .lingue__apri::after{transform:translateY(.1rem) rotate(-135deg)}
.bandiera{flex:none;width:1.4rem;height:.94rem;border-radius:.15rem;box-shadow:0 0 0 1px rgba(11,13,20,.14)}
.lingue__menu{display:none;position:absolute;top:100%;right:0;z-index:6;min-width:11rem;padding:.4rem;border:1px solid var(--linea);border-radius:.9rem;background:var(--bianco);box-shadow:0 18px 40px -18px rgba(11,13,20,.35)}
.lingue:hover .lingue__menu,.lingue.e-aperto .lingue__menu,html:not(.js) .lingue:focus-within .lingue__menu{display:block}
.lingue__menu a{display:flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:0 .75rem;border-radius:.6rem;text-decoration:none;color:var(--inchiostro)}
.lingue__menu a:hover{background:var(--nebbia)}
.lingue__menu a[aria-current="true"]{font-weight:600}
@media (max-width:47.99rem){
  .lingue{order:2;margin-left:auto}
  .testata__apri{order:3}
  .testata__voci{order:4}
  .testata__apri{margin-left:.25rem}
}
@media (min-width:48rem){.lingue{margin-left:-1rem}.lingue__apri{padding:0}}   /* la bandiera parte dove finisce l'ultima linea */

/* Servizi: menu a tendina con le pagine dei servizi */
.testata__gruppo{position:relative;display:flex;align-items:center}
.testata__tendina{display:none}
.testata__sotto{display:none}

@media (max-width:47.99rem){
  .js .testata__voci{display:none}
  .js .testata.e-aperta .testata__voci{display:flex}
  .testata__voci{flex-basis:100%;flex-direction:column;align-items:stretch;margin:0;padding-bottom:.5rem;font-size:1.0625rem}
  .testata__voci a{min-height:3.25rem;padding:0;border-top:1px solid var(--linea)}
  /* sul telefono le pagine dei servizi stanno sempre sotto Servizi, rientrate */
  .testata__gruppo{display:block}
  .testata__gruppo>a{display:flex}
  .testata__sotto{display:block;padding-left:1rem}
  .testata__sotto a{display:flex;min-height:2.85rem;border-top:1px solid var(--linea-lieve);font-size:1rem;color:var(--ardesia)}
}
@media (min-width:48rem){
  .js .testata__apri{display:none}
  /* voci distribuite su tutto lo spazio dopo il marchio, alla stessa distanza, con una linea a meta':
     gli spazi tra le voci sono elementi elastici tutti uguali; l'ultimo separa Contatti dalla bandiera */
  .testata__voci{flex:1;flex-wrap:nowrap;margin-left:clamp(2rem,5vw,4.5rem)}
  .testata__linea{display:block;flex:1 1 0;min-width:.75rem;height:1.1rem;background:linear-gradient(var(--linea),var(--linea)) center/1px 100% no-repeat}
  /* Home in cima, senza marchio: le voci occupano tutta la larghezza, centrate; poi fanno posto al marchio */
  .testata--sul-logo .testata__voci{transition:margin-left .8s cubic-bezier(.2,.7,.2,1)}
  /* in cima alla Home il marchio non c'e': le voci, bandiera compresa, vanno da un bordo all'altro (6.75rem + 1rem) */
  .testata--sul-logo:not(.e-volo) .testata__voci{margin-left:-7.75rem}
  .js .testata__tendina{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;min-height:2.75rem;margin-right:-.4rem;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  .testata__tendina::before{content:"";width:.42rem;height:.42rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-.12rem) rotate(45deg);transition:transform .15s}
  .testata__gruppo.e-aperto .testata__tendina::before{transform:translateY(.12rem) rotate(-135deg)}
  .testata__sotto{position:absolute;top:100%;left:-1rem;z-index:5;min-width:17rem;padding:.45rem;border:1px solid var(--linea);border-radius:1rem;background:var(--bianco);box-shadow:0 18px 40px -18px rgba(11,13,20,.35)}
  .testata__gruppo:hover .testata__sotto,.testata__gruppo.e-aperto .testata__sotto,html:not(.js) .testata__gruppo:focus-within .testata__sotto{display:block}
  .testata__sotto a{display:flex;min-height:2.75rem;padding:0 .8rem;border-radius:.65rem;white-space:nowrap}
  .testata__sotto a:hover{background:var(--nebbia);text-decoration:none}
}

/* ---------- pulsanti e link ---------- */
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}
.pulsante{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 2rem;border:0;border-radius:999px;background:var(--inchiostro);color:var(--bianco);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s}
.pulsante:hover{background:var(--ardesia)}
.pulsante[disabled]{background:var(--ardesia);cursor:default}
.collegamento{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;text-decoration:none}
.collegamento:hover{text-decoration:underline;text-underline-offset:.3em}
button.collegamento{padding:0;border:0;background:none;color:var(--inchiostro);font:inherit;font-weight:600;cursor:pointer}
.passi__avanti .collegamento{gap:.6rem}
.passi__avanti .collegamento::after{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--sfumatura);transition:width .2s}
.passi__avanti .collegamento:hover::after{width:2.4rem}

/* ---------- testa delle pagine interne ---------- */
.testa-pagina{position:relative;overflow:hidden;overflow:clip;padding:calc(var(--testata) + clamp(2.75rem,9vw,5.5rem)) 0 clamp(2.5rem,7vw,4.5rem);background:linear-gradient(180deg,var(--nebbia),var(--bianco))}
.testa-pagina__orbite{--o:min(120vw,52rem);position:absolute;left:58%;top:50%;width:var(--o);height:var(--o);margin:calc(var(--o)/-2) 0 0 calc(var(--o)/-2.6);pointer-events:none}
.testa-pagina .contenuto{position:relative}
.testa-pagina h1{max-width:16ch}
.sommario{margin-top:1.1rem;max-width:36rem;font-size:clamp(1.0625rem,3.4vw,1.3125rem);color:var(--ardesia);text-wrap:pretty}

/* ---------- blocchi di contenuto ---------- */
.blocco{padding:clamp(3.5rem,9vw,6.25rem) 0}
.blocco--stretto{padding:clamp(2.5rem,7vw,4.5rem) 0}
.blocco--nebbia{background:var(--nebbia)}
.blocco p{max-width:36rem;color:var(--ardesia);text-wrap:pretty}
.blocco h2+p,.blocco p+p{margin-top:1.25rem}
.blocco .nota{margin-top:2rem}
.blocco .nota--larga{margin-top:3rem}
.blocco p+.azioni,.blocco ul+.azioni,.blocco ol+.azioni{margin-top:2.25rem}
.due{display:grid;gap:3rem}
@media (min-width:56rem){.due{grid-template-columns:5fr 6fr;gap:5rem;align-items:start}}

/* tre punti fissi, come tre pianeti sulla stessa orbita */
.orbita{position:relative;display:grid;grid-auto-rows:1fr}
.orbita::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M90 -5Q-20 50 90 105' fill='none' stroke='%230B0D14' stroke-opacity='.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.orbita li{position:relative;padding:0 0 2.25rem 3.75rem}
.orbita li:last-child{padding-bottom:0}
.orbita li::before{content:"";position:absolute;top:.5rem;left:calc(2.5rem*var(--x) - .375rem);width:.75rem;height:.75rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro))}
.orbita li:nth-child(1){--x:.736}
.orbita li:nth-child(2){--x:.38}
.orbita li:nth-child(3){--x:.427}
.orbita p{margin-top:.35rem}

/* passi di un lavoro: e' una sequenza vera, quindi numerata */
.passi{display:grid;gap:0;counter-reset:passo;margin-top:2.5rem;border-top:1px solid var(--linea)}
.passi li{counter-increment:passo;display:grid;grid-template-columns:3.25rem 1fr;gap:0 1rem;padding:1.4rem 0;border-bottom:1px solid var(--linea)}
.passi li::before{content:counter(passo);font-family:var(--titoli);font-weight:700;font-size:1.75rem;line-height:1.05}
.passi p{margin-top:.35rem}

/* elenco dei lavori */
.lavori{margin-top:2.5rem;border-top:1px solid var(--linea)}
.lavori li{display:grid;gap:.15rem 1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--linea)}
@media (min-width:40rem){.lavori li{grid-template-columns:1fr auto;align-items:baseline}}
.lavori__nome{font-family:var(--titoli);font-weight:700;font-size:clamp(1.35rem,4.8vw,2rem);line-height:1.15;letter-spacing:-.01em;text-decoration:none}
a.lavori__nome{text-decoration:underline;text-decoration-color:var(--linea);text-decoration-thickness:2px;text-underline-offset:.2em}
a.lavori__nome:hover{text-decoration-color:currentColor}
.lavori__tipo{color:var(--ardesia)}

/* servizi: ogni scheda porta alla pagina del servizio */
.servizi{display:grid;gap:1.25rem}
@media (min-width:48rem){.servizi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.servizio{display:flex;flex-direction:column;padding:1.75rem;border:1px solid var(--linea);border-radius:1.25rem;background:var(--bianco);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.servizio:hover{border-color:rgba(11,13,20,.4);box-shadow:0 18px 40px -24px rgba(11,13,20,.4)}
.servizio h2{font-size:clamp(1.5rem,4.6vw,2rem)}
.servizio p{margin-top:.9rem}
.servizio__vai{margin-top:auto;padding-top:1.5rem;font-weight:600}
.servizio__vai::after{content:"";display:block;width:2.5rem;height:3px;margin-top:.45rem;border-radius:2px;background:var(--sfumatura);transition:width .2s}
a.servizio:hover .servizio__vai::after{width:4rem}
.titoletto{font-size:clamp(1.3rem,4vw,1.6rem)}

/* cosa ottieni: sei punti, ognuno un pianeta sulla sua linea */
.punti{display:grid;gap:2.25rem 2.5rem;margin-top:2.75rem}
@media (min-width:40rem){.punti{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.punti{grid-template-columns:repeat(3,minmax(0,1fr))}}
.punti li{position:relative;padding-top:1.4rem;border-top:1px solid var(--linea)}
.punti li::before{content:"";position:absolute;top:-.34rem;left:0;width:.68rem;height:.68rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro))}
.blocco .punti p{margin-top:.45rem}

/* vignette dei siti */
.vignette{display:grid;gap:2rem 1.5rem;margin-top:2.5rem}
@media (min-width:40rem){.vignette{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.vignette{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vignette--una{margin-top:0;grid-template-columns:minmax(0,1fr)!important}
.vignetta{display:block;color:inherit;text-decoration:none}
.vignetta__immagine{display:block;overflow:hidden;border:1px solid var(--linea);border-radius:1rem;background:var(--bianco);box-shadow:0 1px 2px rgba(11,13,20,.06),0 20px 40px -26px rgba(11,13,20,.45);transition:transform .2s,box-shadow .2s}
.vignetta img{width:100%;aspect-ratio:720/437;object-fit:cover;object-position:top}
.vignetta__nome{display:block;margin-top:1rem;font-family:var(--titoli);font-weight:700;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
.vignetta__tipo{display:block;margin-top:.15rem;color:var(--ardesia);font-size:.9375rem}
.vignetta:hover .vignetta__immagine{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,13,20,.06),0 26px 44px -26px rgba(11,13,20,.55)}
.vignetta:hover .vignetta__nome{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.elenco{display:grid;gap:.6rem;margin-top:1.25rem;max-width:36rem;color:var(--ardesia)}
.elenco li{position:relative;padding-left:1.5rem}
.elenco li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro))}

/* chi sono */
.chi{display:grid;gap:2.5rem}
@media (min-width:56rem){.chi{grid-template-columns:minmax(0,23rem) minmax(0,1fr);gap:5rem;align-items:center}}
.chi .testo h2{margin-top:0;font-size:clamp(1.8rem,5.2vw,2.6rem)}
.chi .testo h2+p{margin-top:1.25rem;font-size:1.125rem}
.ritratto{position:relative;max-width:23rem;margin:0}
.chi .ritratto{order:-1}   /* la foto viene prima: a sinistra sul computer, subito dopo il titolo sul telefono */
.ritratto img{width:100%;border-radius:1.25rem}
.ritratto::after{content:"";position:absolute;right:-.5rem;top:1.75rem;width:1.1rem;height:1.1rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));box-shadow:0 0 0 .3rem var(--bianco)}

/* invito a scrivere */
.contatto{background:linear-gradient(180deg,var(--bianco),var(--nebbia))}
.contatto__posta{display:inline-block;margin-top:1.5rem;padding-bottom:.45rem;font-size:clamp(1.05rem,4.4vw,1.5rem);font-weight:600;text-decoration:none;overflow-wrap:anywhere;background:var(--sfumatura) 0 100%/100% 3px no-repeat}
.contatto__posta:hover{background-size:100% 5px}

/* ---------- Come lavoro: i passi lungo un'orbita, da toccare ----------
   Con JavaScript un passo alla volta e' aperto e il satellite ci si posa sopra; i passi successivi restano
   in trasparenza. Senza JavaScript i passi sono tutti aperti. */
@media (min-width:56rem){.passi-sezione .percorso__testa{position:sticky;top:calc(var(--testata) + 2rem)}}
.percorso__testa p{margin-top:1rem;max-width:30rem;color:var(--ardesia)}
.percorso__aiuto{display:none;font-size:.9375rem}
.js .percorso__aiuto{display:flex;align-items:center;gap:.6rem}
.js .percorso__aiuto::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro))}
.percorso{--arco:4.25rem;position:relative}
@media (min-width:56rem){.percorso{--arco:6rem}}
.percorso__orbita{position:absolute;left:0;top:0;width:var(--arco);height:100%;overflow:visible}
.percorso__orbita path{fill:none;stroke:var(--inchiostro);stroke-opacity:.2;stroke-width:1.2;vector-effect:non-scaling-stroke}
.passi--orbita{margin-top:0;border-top:0}
.passi--orbita li{position:relative;display:block;padding:1.1rem 0 1.1rem calc(var(--arco) + 1.1rem);border-bottom:0}
.passi--orbita li::before{content:none}
.passi--orbita h3{font-family:var(--titoli);font-weight:700;font-size:clamp(1.2rem,3.6vw,1.45rem);letter-spacing:-.01em}
.passi__apri{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:default}
.passi--orbita p{margin-top:.4rem;color:var(--ardesia)}
.passi__dettaglio{padding-left:.85rem;border-left:2px solid var(--viola)}
.passi__avanti{margin-top:1.1rem}
.passi__avanti{display:none}
.passi__tappa{position:absolute;top:1.1rem;left:calc(var(--arco)*var(--x,.5) - 1rem);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));color:var(--bianco);font-size:.875rem;font-weight:600;box-shadow:0 0 0 .3rem var(--bianco);transition:background-color .4s,color .4s,box-shadow .2s}
.percorso__satellite{display:none;position:absolute;left:0;top:0;z-index:1;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));box-shadow:0 0 1.4rem .35rem rgba(34,211,238,.35),0 0 0 .3rem rgba(124,92,255,.12);pointer-events:none;will-change:transform}
/* con JavaScript */
.percorso.e-attivo .percorso__satellite{display:block}
.percorso.e-attivo .passi__apri{cursor:pointer}
.percorso.e-attivo .passi__apri:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.percorso.e-attivo .passi__tappa{cursor:pointer;background:var(--bianco);color:var(--inchiostro);outline:1px solid rgba(11,13,20,.35);outline-offset:-1px}
.percorso.e-attivo .passi__tappa:hover{box-shadow:0 0 0 .3rem var(--bianco),0 0 0 .5rem rgba(124,92,255,.25)}
.percorso.e-attivo li.e-fatto .passi__tappa{background:var(--inchiostro);color:var(--bianco);outline-color:transparent}
.percorso.e-attivo li:not(.e-attuale) .passi__testo{display:none}
.percorso.e-attivo li.e-attuale .passi__avanti{display:block}
.percorso.e-attivo li.e-dopo>div{opacity:.38;transition:opacity .3s}
.percorso.e-attivo li.e-dopo:hover>div{opacity:.75}
.percorso.e-attivo li.e-attuale .passi__testo{animation:passo-apri .45s cubic-bezier(.2,.7,.2,1)}
@keyframes passo-apri{from{opacity:0;transform:translateY(.5rem)}}

/* A cosa sto attento: righe con titolo e testo */
.principi{margin-top:2.5rem;border-top:1px solid var(--linea)}
.principi li{display:grid;gap:.6rem 3rem;padding:1.75rem 0;border-bottom:1px solid var(--linea)}
@media (min-width:48rem){.principi li{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:baseline;padding:2.25rem 0}}
.principi h3{font-family:var(--titoli);font-weight:700;font-size:clamp(1.35rem,4vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
.principi h3::before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.8rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));vertical-align:.2em}
.blocco .principi p{max-width:none;margin-top:0}

/* Chi sono: il percorso */
.esperienze{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:40rem){.esperienze{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.esperienze{max-width:48rem}}
.esperienze li{position:relative;padding:1.6rem 1.4rem 1.7rem;border:1px solid var(--linea);border-radius:1.1rem;background:var(--bianco)}
.esperienze li::before{content:"";position:absolute;top:-1px;left:1.4rem;width:3rem;height:3px;border-radius:0 0 3px 3px;background:var(--sfumatura)}
.esperienze__tipo{display:block;font-size:.875rem;color:var(--ardesia)}
.esperienze h3{margin-top:.4rem;font-family:var(--titoli);font-weight:700;font-size:clamp(1.25rem,3.6vw,1.45rem);line-height:1.2;letter-spacing:-.01em}
.blocco .esperienze p{margin-top:.35rem;font-size:.9375rem}

/* ---------- pannello di chiusura: scuro, con le orbite ---------- */
.chiusura{position:relative;overflow:hidden;overflow:clip;padding:clamp(2.25rem,6vw,4rem);border-radius:1.5rem;background:var(--inchiostro);color:var(--bianco)}
.chiusura__orbite{position:absolute;right:-12rem;top:50%;width:34rem;height:34rem;margin-top:-17rem;pointer-events:none;opacity:.9}
@media (max-width:39.99rem){.chiusura__orbite{right:-16rem;top:2rem;margin-top:0}}
.chiusura h2,.chiusura p{position:relative;max-width:34rem}
.chiusura p{margin-top:1rem;color:var(--chiaro)}
.blocco .chiusura p{color:var(--chiaro)}
.chiusura .azioni{margin-top:2rem}
.chiusura__nota{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);font-size:.9375rem}
.blocco .chiusura .chiusura__nota{margin-top:2.25rem}
.chiusura__nota a{color:var(--bianco);font-weight:600;text-underline-offset:.25em}
.pulsante--chiaro{background:var(--bianco);color:var(--inchiostro)}
.pulsante--chiaro:hover{background:var(--nebbia)}

/* ---------- Lavori: vetrina delle demo ---------- */
.vetrina{display:grid;gap:clamp(3rem,8vw,5.5rem)}
.vetrina__voce{display:grid;gap:1.75rem;align-items:center}
@media (min-width:56rem){
  .vetrina__voce{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem}
  .vetrina__voce:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .vetrina__voce:nth-child(even) .vetrina__immagine{order:2}
}
.vetrina__immagine{display:block;overflow:hidden;border:1px solid var(--linea);border-radius:1.25rem;background:var(--bianco);box-shadow:0 1px 2px rgba(11,13,20,.06),0 30px 60px -36px rgba(11,13,20,.5);transition:transform .25s,box-shadow .25s}
.vetrina__immagine img{width:100%;aspect-ratio:720/437;object-fit:cover;object-position:top}
.vetrina__immagine:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,13,20,.06),0 36px 64px -34px rgba(11,13,20,.55)}
.vetrina__dove{font-size:.9375rem;font-weight:600;color:var(--ardesia)}
.vetrina__testo h2{margin-top:.35rem;font-size:clamp(1.8rem,5vw,2.6rem)}
.blocco .vetrina__testo h2+p{margin-top:1rem}
.etichette{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.etichette li{padding:.3rem .75rem;border:1px solid var(--linea);border-radius:99rem;background:var(--nebbia);font-size:.8125rem;font-weight:500;color:var(--inchiostro)}
.vetrina__testo .azioni{margin-top:1.75rem}
/* comparsa allo scroll (Libreria di design): solo con JavaScript e senza riduci movimento */
@media (prefers-reduced-motion:no-preference){
  .comparse .vetrina__voce{opacity:0;transform:translateY(2rem);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .comparse .vetrina__voce.e-visibile{opacity:1;transform:none}
}

/* ---------- Chatbot AI: robot e conversazione di esempio ---------- */
@media (min-width:56rem){.due--centro{align-items:center}}
.robot__riquadro{display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem);border-radius:1.5rem;background:linear-gradient(160deg,var(--bianco),var(--nebbia))}
.robot{width:min(100%,24rem);height:auto}
.chat{max-width:30rem;margin:0;border:1px solid var(--linea);border-radius:1.5rem;background:var(--bianco);box-shadow:0 30px 60px -40px rgba(11,13,20,.45);overflow:hidden}
.chat__testa{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea-lieve);background:var(--nebbia)}
.chat__avatar{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;background:var(--bianco);box-shadow:0 0 0 1px var(--linea)}
.chat__avatar .robot{width:100%;transform:scale(1.25) translateY(4%)}
.chat__testa strong{display:block;font-size:.9375rem}
.chat__stato{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--ardesia)}
.chat__stato::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#22C55E}
.chat__msgs{display:grid;gap:.65rem;padding:1.25rem 1.1rem}
.chat__msg{max-width:85%;padding:.7rem .95rem;border-radius:1.1rem;font-size:.9375rem;line-height:1.45}
.chat__msg--assistente{justify-self:start;border:1px solid var(--linea);border-bottom-left-radius:.35rem;background:var(--bianco);color:var(--inchiostro)}
.chat__msg--cliente{justify-self:end;border-bottom-right-radius:.35rem;background:var(--inchiostro);color:var(--bianco)}
.chat__nota{padding:0 1.1rem 1.1rem;font-size:.8125rem;color:var(--ardesia)}
@media (prefers-reduced-motion:no-preference){
  .comparse .chat__msg{opacity:0;transform:translateY(.6rem);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0) * .45s)}
  .comparse .chat.e-visibile .chat__msg{opacity:1;transform:none}
}

/* cose comprese in un servizio: come i punti della Home, frasi brevi */
.punti--brevi li{color:var(--inchiostro)}
@media (min-width:62rem){.punti--quattro{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blocco .due+.punti{margin-top:3rem}

/* ---------- Contatti: contesto accanto al modulo ---------- */
.contatti{background:linear-gradient(180deg,var(--bianco),var(--nebbia))}
.contatti__griglia{display:grid;gap:2rem;align-items:start}
@media (min-width:62rem){.contatti__griglia{grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:3.5rem}.contatti__contesto{position:sticky;top:calc(var(--testata) + 1.5rem)}}
.contatti__contesto{position:relative;overflow:hidden;overflow:clip;padding:2rem 1.75rem;border-radius:1.5rem;background:var(--inchiostro);color:var(--bianco)}
.contatti__contesto .chiusura__orbite{right:-20rem;top:-6rem;margin:0;width:32rem;height:32rem}
.contatti__contesto h2{position:relative;font-size:clamp(1.5rem,4.4vw,1.85rem)}
.contatti__passi{position:relative;display:grid;gap:1rem;margin-top:1.5rem;counter-reset:dopo}
.contatti__passi li{counter-increment:dopo;display:grid;grid-template-columns:1.75rem 1fr;gap:.75rem;color:var(--chiaro)}
.contatti__passi li::before{content:counter(dopo);display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));color:var(--bianco);font-size:.8125rem;font-weight:600}
.contatti__nota,.blocco .contatti__nota{position:relative;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);font-size:.9375rem;color:var(--chiaro)}
.contatti .modulo{max-width:none;padding:clamp(1.5rem,4.5vw,2.75rem);border:1px solid var(--linea);border-radius:1.5rem;background:var(--bianco);box-shadow:0 30px 60px -40px rgba(11,13,20,.35)}
.sezione{display:grid;gap:1.35rem;min-width:0;margin:0;padding:0;border:0}
.sezione+.sezione{padding-top:1.75rem;border-top:1px solid var(--linea-lieve)}
.sezione>legend{display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem;padding:0;font-family:var(--titoli);font-weight:700;font-size:clamp(1.25rem,3.8vw,1.5rem);letter-spacing:-.01em}
.sezione__numero{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--viola),var(--azzurro));color:var(--bianco);font-family:var(--testi);font-size:.875rem;font-weight:600}
.campo textarea::placeholder{color:#8A90A2}
.pulsante--grande{min-height:3.5rem;padding:0 2.5rem;font-size:1.0625rem}

/* ---------- modulo ---------- */
.modulo{display:grid;gap:1.35rem;max-width:42rem}
.modulo__riga{display:grid;gap:1.35rem}
@media (min-width:40rem){.modulo__riga{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:.45rem;align-content:start}
.campo label{font-weight:600;font-size:.9375rem}
.campo__nota{font-weight:400;color:var(--ardesia)}
.campo input,.campo select,.campo textarea{width:100%;min-height:3.25rem;padding:.8rem .95rem;border:1px solid rgba(11,13,20,.5);border-radius:.75rem;background:var(--bianco);font:inherit;color:var(--inchiostro)}
.campo textarea{min-height:9.5rem;resize:vertical}
.campo input[type="date"]{-webkit-appearance:none;appearance:none;display:block;line-height:1.4}
.campo input[type="date"]::-webkit-date-and-time-value{text-align:left}
.campo input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
.campo select{-webkit-appearance:none;appearance:none;padding-right:2.75rem;background:var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B0D14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center/.75rem auto no-repeat}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--viola);outline-offset:1px;border-color:var(--viola);border-radius:.75rem}
.campo--nascosto{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.gruppo{display:grid;gap:1.1rem;min-width:0;margin:0;padding:1.15rem 1.25rem 1.35rem;border:1px solid var(--linea);border-radius:1rem}
.gruppo legend{padding:0 .4rem;margin-left:-.4rem;font-weight:600;font-size:.9375rem}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;max-width:36rem;color:var(--ardesia)}
.consenso input{width:1.4rem;height:1.4rem;margin:.1rem 0 0;accent-color:var(--inchiostro)}
.modulo__esito{max-width:36rem;padding:1rem 1.15rem;border-radius:.75rem;border:1px solid var(--linea);background:var(--nebbia)}
.modulo__esito:empty{display:none}
.modulo__esito[data-tipo="errore"]{border-color:var(--inchiostro)}

/* ---------- testo lungo (privacy) ---------- */
.testo{max-width:40rem}
.blocco .grande{font-family:var(--titoli);font-weight:700;font-size:clamp(1.3rem,3.8vw,1.65rem);line-height:1.25;letter-spacing:-.01em;color:var(--inchiostro);text-wrap:balance}
.testo .grande:first-child{margin-top:0}
.testo h2{margin-top:2.75rem;font-size:clamp(1.4rem,4.4vw,1.75rem)}
.testo h2:first-child{margin-top:0}
.testo p,.testo ul{margin-top:1rem;color:var(--ardesia)}
.testo ul{display:grid;gap:.5rem;padding-left:1.25rem;list-style:disc}

/* ---------- fondo scuro ---------- */
.fondo{padding:clamp(3rem,8vw,5rem) 0 2rem;background:var(--inchiostro);color:var(--bianco);font-size:.9375rem}
.fondo a{text-decoration:none}
.fondo a:hover{text-decoration:underline;text-underline-offset:.3em}
.fondo__griglia{display:grid;gap:2.5rem 3rem}
@media (min-width:40rem){.fondo__griglia{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.fondo__griglia{grid-template-columns:1.5fr 1fr 1.6fr 1fr}}
.fondo__marchio{width:8.5rem;color:var(--bianco)}
.fondo__marchio svg{width:100%;height:auto}
.fondo__motto{margin-top:1.1rem;max-width:15rem;color:var(--chiaro)}
.fondo__titolo{margin-bottom:.6rem;font-weight:600;color:var(--chiaro)}
.fondo__lista a{display:inline-flex;align-items:center;min-height:2.5rem;overflow-wrap:anywhere}
.fondo__profili{display:flex;gap:.85rem;margin-top:.35rem}
.fondo__profili a{display:block;border-radius:22%}
.fondo__profili img{width:2.75rem;height:2.75rem}
.fondo__profili .e-tiktok img{border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.fondo__legale{display:flex;flex-wrap:wrap;gap:.25rem 2rem;align-items:center;margin-top:2.75rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);color:var(--chiaro);font-size:.875rem}
.fondo__legale a{display:inline-flex;align-items:center;min-height:2.5rem;color:var(--bianco)}

html.e-uscita body{display:none}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .testata{view-transition-name:testata}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}