/* variabili.css */
/* Variabili del tema: gli stessi nomi e valori di design/sciolto/sciolto.css (export del 05/10/2026), più le quattro
   del movimento del design definitivo (design/sciolto-def/sciolto.css, 08/10).
   Unico file con colori, caratteri, raggi, scala e spazi: i componenti usano solo queste variabili.
   Line-up chiuso il 05/10 (AA27): Outfit per titoli e testo, bottone a pillola.
   Unica aggiunta al design: "Outfit ripiego" nei caratteri, il ripiego con size-adjust (base.css). */
:root{
  --font-titoli:"Outfit","Outfit ripiego",system-ui,sans-serif;
  --font-testo:"Outfit","Outfit ripiego",system-ui,sans-serif;
  --raggio-bottone:999px;

  /* Colori */
  --bianco:#ffffff;
  --viola:#330066;      /* testo, titoli, footer · su bianco 15,8:1 */
  --magenta:#d60077;    /* unico accento · su bianco 5,1:1 · bianco su magenta 5,1:1 · su lilla 4,6:1 (solo da 18 px) · su viola 3,1:1 (mai testo) */
  --lilla:#f5f2f7;      /* superfici, tinta piatta */
  --testo-2:#5a4d6b;    /* testo secondario · su bianco 7,7:1 · su lilla 7,0:1 */
  --grigio-3:#8c8399;   /* solo testi da 18 px in su ed elementi non testuali · su bianco 3,6:1 */
  --filetto:#e9e4ef;    /* bordi e filetti decorativi */
  --font-glossa:"Cormorant Garamond",Georgia,serif;   /* solo la glossa, corsivo */

  /* Scala dei titoli e del testo (computer → telefono) */
  --h1-hero:clamp(52px,8.5vw,140px);
  --h1:clamp(40px,5vw,68px);
  --h2:clamp(34px,4vw,60px);
  --h3:clamp(22px,2vw,28px);
  --lede:clamp(18px,1.5vw,24px);
  --testo:clamp(17px,1.25vw,18px);
  --testo-s:16px;                        /* mai sotto 16 px */
  --eyebrow:14px;                        /* solo eyebrow e titoli di colonna del footer (AA29) */
  --bottone-testo:16px;

  --interlinea-testo:1.6;
  --misura:640px;

  /* Spazi (multipli di 8) */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
  --sezione:clamp(80px,10vw,140px);
  --margine:clamp(24px,4vw,56px);
  --contenitore:1280px;

  /* Raggi e movimento */
  --raggio-scheda:12px;
  --raggio-campo:10px;
  --durata:0.25s;
  --durata-hero:0.6s;
  /* Entrata a scaglioni (design/sciolto-def/sciolto.css, 07/10): un solo set di valori per tutte le entrate */
  --g-durata:.55s; --g-passo:90ms; --g-salita:18px; --g-curva:cubic-bezier(.2,.7,.2,1);
  --header-alto:72px;
  --header-compatto:56px;
}

/* base.css */
/* Base: caratteri, regole generali, testo e link. Regole da design/sciolto/sciolto.css. */

/* Outfit variabile 300–800, sottoinsieme latino. Il ripiego su Arial ha le metriche di Outfit
   (size-adjust e ascent/descent), così lo scambio di carattere non sposta il testo. */
@font-face{font-family:"Outfit";src:url("https://adsolut.it/wp-content/themes/adsolut/assets/caratteri/outfit-variabile.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit ripiego";src:local("Arial"),local("ArialMT");font-weight:300 500;size-adjust:98.9%;ascent-override:101.11%;descent-override:26.29%;line-gap-override:0%}
@font-face{font-family:"Outfit ripiego";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:96.15%;ascent-override:104%;descent-override:27.04%;line-gap-override:0%}
/* Cormorant Garamond corsivo 500: solo i caratteri della glossa (AA29) */
@font-face{font-family:"Cormorant Garamond";src:url("https://adsolut.it/wp-content/themes/adsolut/assets/caratteri/cormorant-garamond-corsivo-500.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-alto) + var(--sp-2));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bianco);color:var(--viola);font-family:var(--font-testo);font-size:var(--testo);line-height:var(--interlinea-testo)}
*{box-sizing:border-box}
input,textarea,button,select{font-family:var(--font-testo)}
h1,h2,h3,h4{font-family:var(--font-titoli);margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto}

/* Fuoco da tastiera: 2 px con distacco, su ogni elemento */
:focus-visible{outline:2px solid var(--viola);outline-offset:3px;border-radius:4px}
.su-viola :focus-visible,.su-viola:focus-visible{outline-color:var(--bianco)}

/* Movimento ridotto: tutto fermo */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Testo */
.h1-hero{font:800 var(--h1-hero)/0.92 var(--font-titoli);letter-spacing:-0.05em}
.h1-hero .leggero{font-weight:300}
.h1{font:700 var(--h1)/1.0 var(--font-titoli);letter-spacing:-0.04em}
.h2{font:700 var(--h2)/1.02 var(--font-titoli);letter-spacing:-0.04em}
.h3{font:600 var(--h3)/1.15 var(--font-titoli);letter-spacing:-0.02em}
.lede{font:300 var(--lede)/1.4 var(--font-testo);color:var(--testo-2);max-width:var(--misura)}
.testo{font:400 var(--testo)/var(--interlinea-testo) var(--font-testo);max-width:var(--misura)}
.testo-s{font:400 var(--testo-s)/1.5 var(--font-testo)}
.secondario{color:var(--testo-2)}
.punto{color:var(--magenta)}
.unito{display:contents;white-space:nowrap} /* "e-commerce" non va a capo dopo "e-" (inc/aspetto.php). display:contents: dentro un flex o un grid lo span non diventa un elemento a parte, il testo intorno resta un pezzo solo e va a capo; il nowrap arriva alla parola per eredità */
/* La parola chiave: solo grassetto, mai sottolineata (la sottolineatura è dei link; seconda consegna dell'08/10) */
.chiave{font-weight:700;color:inherit}
.lede .chiave{font-weight:600}
.eyebrow{font:500 var(--eyebrow)/1.2 var(--font-testo);letter-spacing:0.22em;text-transform:uppercase;color:var(--magenta)}
.eyebrow .piu{margin-right:0.4em}
.glossa{font:italic 500 clamp(20px,1.7vw,28px)/1.3 var(--font-glossa);color:var(--magenta)}

/* Link */
a{color:var(--viola);text-decoration:none;transition:color var(--durata)}
a:hover{color:var(--magenta)}
.link{text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color var(--durata),text-underline-offset var(--durata)}
.link:hover{color:var(--magenta);text-underline-offset:9px}
.link-ancora{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:var(--testo-s);text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color var(--durata),text-underline-offset var(--durata)}
.link-ancora:hover{color:var(--magenta);text-underline-offset:9px}
.link-freccia{display:inline-flex;align-items:center;min-height:44px;width:fit-content;font-weight:500}

/* Struttura della pagina. L'header è fisso (header.css): .pagina gli lascia lo spazio in cima. */
.pagina{position:relative;padding-top:var(--header-alto);background:var(--bianco);color:var(--viola);font-family:var(--font-testo);overflow-x:clip}
.pagina > main,.pagina > footer{position:relative;z-index:1}
.pagina > canvas[data-particelle]{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}

/* Comparsa allo scorrimento: la classe in-attesa la mette solo lo script (comparsa.js) */
.comparsa{transition:opacity .7s,transform .7s}
.comparsa.in-attesa{opacity:0;transform:translateY(24px)}
@media print{.comparsa.in-attesa{opacity:1;transform:none}}

/* Entrata a scaglioni (grammatica di famiglia, design/sciolto-def/sciolto.css): un blocco .b[data-blocco], i suoi pezzi
   [data-e] entrano in ordine --i, il "+" dell'eyebrow e degli elenchi si disegna, il punto del titolo arriva per ultimo.
   Lo stato nascosto è solo .b.in-attesa, che mette lo script ai blocchi sotto la finestra all'apertura (comparsa.js):
   senza script, con "riduci movimento" e nell'hero tutto è visibile dal primo istante. */
.b [data-e]{transition:opacity var(--g-durata) var(--g-curva),transform var(--g-durata) var(--g-curva);transition-delay:calc(var(--i,0) * var(--g-passo))}
.b.in-attesa [data-e]{opacity:0;transform:translateY(var(--g-salita))}
.b.in-attesa tr[data-e]{transform:none}
.b .punto,.b .eyebrow .piu,.b .elenco-piu li::before{display:inline-block}
.b .punto{transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i,0) * var(--g-passo) + .35s)}
.b .eyebrow .piu,.b .elenco-piu li::before{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i,0) * var(--g-passo) + .2s)}
.b.in-attesa .punto{opacity:0;transform:scale(0)}
.b.in-attesa .eyebrow .piu,.b.in-attesa .elenco-piu li::before{transform:scale(0)}
[data-conta]{font-variant-numeric:tabular-nums} /* i numeri che contano non ballano */
@media print{.b.in-attesa [data-e],.b.in-attesa .punto,.b.in-attesa .eyebrow .piu,.b.in-attesa .elenco-piu li::before{opacity:1;transform:none}}
.contenitore{max-width:var(--contenitore);margin:0 auto;padding:0 var(--margine)}
.sezione{padding-top:var(--sezione)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bottone.css */
/* Bottone: una forma, una scrittura (design/sciolto/sciolto.css). Le classi is-hover e is-focus
   fissano uno stato per la pagina di confronto, come nella scheda dei componenti. */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1.5px solid var(--magenta);border-radius:var(--raggio-bottone);background:var(--magenta);color:var(--bianco);font:500 var(--bottone-testo)/1 var(--font-testo);letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--durata),border-color var(--durata),color var(--durata),box-shadow var(--durata),transform var(--durata)}
.bottone:hover,.bottone.is-hover{background:var(--viola);border-color:var(--viola);color:var(--bianco);transform:translateY(-2px);box-shadow:0 0 0 6px rgba(214,0,119,.16)}
.bottone:focus-visible,.bottone.is-focus{outline:2px solid var(--viola);outline-offset:3px}
.bottone:active{transform:translateY(0);box-shadow:none}
.bottone[disabled],.bottone.is-disabled{background:var(--filetto);border-color:var(--filetto);color:var(--testo-2);cursor:not-allowed;transform:none;box-shadow:none}
.bottone--piccolo{min-height:44px;padding:0 22px}
.bottone--secondario{background:transparent;color:var(--viola);border-color:var(--viola)}
.bottone--secondario:hover,.bottone--secondario.is-hover{background:var(--viola);color:var(--bianco);border-color:var(--viola)}
.bottone--secondario[disabled],.bottone--secondario.is-disabled{background:transparent;border-color:var(--grigio-3);color:var(--testo-2)}
/* su fondo viola */
.su-viola .bottone:focus-visible,.su-viola .bottone.is-focus{outline-color:var(--bianco)}
.su-viola .bottone:hover,.su-viola .bottone.is-hover{background:var(--bianco);border-color:var(--bianco);color:var(--viola);box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.su-viola .bottone--secondario{color:var(--bianco);border-color:var(--bianco)}
.su-viola .bottone--secondario:hover,.su-viola .bottone--secondario.is-hover{background:var(--bianco);color:var(--viola)}
.su-viola .bottone[disabled],.su-viola .bottone.is-disabled{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.su-viola .bottone--secondario[disabled],.su-viola .bottone--secondario.is-disabled{background:transparent;border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.72)}
/* "Parla con Federica": al passaggio la sfumatura dal magenta al viola (seconda consegna dell'08/10) */
.bottone.bottone-federica{background-image:linear-gradient(110deg,var(--magenta) 0 50%,var(--viola) 100%);background-size:200% 100%;background-position:0 0;transition:background-position .5s var(--g-curva),transform .3s ease,box-shadow .3s ease,color .3s ease}
.bottone.bottone-federica:hover,.bottone.bottone-federica:focus-visible{background-image:linear-gradient(110deg,var(--magenta) 0 50%,var(--viola) 100%);background-position:100% 0;border-color:var(--viola);color:var(--bianco)}
.bottone.bottone-federica[disabled]{background-image:none}
.bottone--largo{min-width:min(100%,300px)}
@media (prefers-reduced-motion:reduce){.bottone.bottone-federica{transition:none}}
/* Dispositivi a tocco: la sfumatura è quella del passaggio, ferma (segnalazioni di Elena del 09/10, punto 5) */
@media (hover:none){.bottone.bottone-federica{background-position:100% 0;border-color:var(--viola)}}

/* sezioni.css */
/* Strutture delle pagine (design/sciolto/sciolto.css): colonne, titolo di sezione, elenchi, passi, riga di prova, hero. */
.colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:48px 80px;align-items:start}
.colonne--stretta{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.titolo-sezione{display:flex;flex-direction:column;gap:14px}
.elenco-piu{list-style:none;margin:0;padding:0;display:grid}
.elenco-piu li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--filetto);font:400 var(--testo)/1.5 var(--font-testo)}
.elenco-piu li::before{content:"+";color:var(--magenta);font-weight:500}
.elenco-piu li b{font-weight:600}
.passi{list-style:none;margin:0;padding:0;display:grid;counter-reset:passo}
.passi li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--filetto);font:400 var(--testo)/1.5 var(--font-testo);counter-increment:passo}
.passi li::before{content:counter(passo,decimal-leading-zero);font:500 var(--eyebrow)/1.6 var(--font-testo);letter-spacing:0.22em;color:var(--magenta)}
.passi li b{font-weight:600}
.riga-prova{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin:0;padding:16px var(--margine);border-top:1px solid var(--filetto);border-bottom:1px solid var(--filetto);list-style:none;font:500 var(--testo-s)/1.4 var(--font-testo)}
.riga-prova > *{display:inline-flex;align-items:center;min-height:44px;gap:10px}
.riga-prova a{display:inline-flex;align-items:center;min-height:44px}
.riga-prova img{height:40px;width:auto;display:block}
.hero{display:flex;flex-direction:column;gap:28px;padding:var(--sp-6) var(--margine) var(--sp-6);min-height:520px;justify-content:flex-end}
.hero .h1-hero{max-width:13ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.solo-telefono-spazio{display:none}
/* A+ a punti su telefono nella riga dell'eyebrow (Home, Servizi, pagine servizio, Portfolio, Blog; segnalazioni di
   Elena del 09/10, punto 1, e AA54): il segnaposto tiene il posto alla forma, che particelle-avvio.js aggancia lì e
   misura (raggio 0,4 del lato). Il lato sta solo in --a-piu-lato. Su computer la riga non esiste (display:contents)
   e il segnaposto non c'è. */
:root{--a-piu-lato:140px}
.hero-riga{display:contents}
.a-piu-posto{display:none}

/* Pagine interne: briciole sotto l'header, hero alto quanto il contenuto */
.percorso{padding-top:8px}
.sezione--vicina{padding-top:var(--sp-4)} /* la prima sezione dopo un hero di pagina */
.hero--pagina{min-height:0;justify-content:flex-start;padding-top:var(--sp-3);gap:24px}
.h1-pagina{font:800 var(--h1)/0.98 var(--font-titoli);letter-spacing:-0.045em;max-width:22ch}
/* Pagina di un solo messaggio (/grazie/, 404, 410): riempie la finestra, il footer resta in fondo */
.pagina:has(.hero--avviso){min-height:100vh;display:flex;flex-direction:column}
.pagina:has(.hero--avviso) > main{flex:1 1 auto}
.hero.hero--avviso{padding-top:var(--sp-6);padding-bottom:var(--sezione)}
.hero--avviso .contenuto{display:flex;flex-direction:column;gap:24px;max-width:720px}
.hero--avviso .h1-hero{font-size:clamp(44px,6.5vw,104px)}
.hero--avviso .elenco-piu{max-width:640px}
.hero--avviso :is(.elenco-piu,.lede) .link{font-weight:500}
.hero--avviso .elenco-piu a{padding:12px 0} /* bersaglio da 44 px senza spostare il testo: il margine verticale di un link non cambia la riga */

/* "Dove siamo" e mappa (Home, Parliamone) */
.dove-siamo{display:grid;gap:16px}
.mappa{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:16px;border:1px solid var(--filetto);border-radius:var(--raggio-scheda);background:var(--lilla);color:var(--testo-2);font:400 var(--testo-s)/1.4 var(--font-testo);text-align:center}
.mappa:hover{color:var(--viola)}

@media (max-width:767px){
  .hero{min-height:0;justify-content:flex-start;padding-top:var(--sp-5)}
  .hero .h1-hero{max-width:none}
  .hero .cta .bottone{width:100%}
  .riga-prova{gap:4px 20px}
  .solo-telefono-spazio{display:block;height:220px}
  .dove-siamo .testo a{display:inline-flex;align-items:center;min-height:44px} /* come nel footer: telefono ed email toccabili */
}

/* Hero degli indici (Servizi, Portfolio, Blog) e dei case: come nelle tavole, 24 px sopra anche su telefono */
.hero.hero--indice{padding-top:var(--sp-3);padding-bottom:40px}
/* Hero delle pagine interne del design definitivo: alto quanto la finestra, testo al centro, anche su telefono */
.hero.hero--interna{min-height:min(calc(100svh - var(--header-alto)),820px);justify-content:center;padding-top:var(--sp-3);padding-bottom:40px}
@media (max-width:767px){.hero--indice .solo-telefono-spazio,.hero--interna .solo-telefono-spazio{height:160px}}
@media (max-width:767px){
  .hero.hero--a-piu{min-height:0;justify-content:flex-start}
  .hero--a-piu .hero-riga{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:-12px} /* H1 16 px sotto: 28 di spazio dell'hero meno 12 */
  .hero--pagina.hero--a-piu .hero-riga{margin-bottom:-8px} /* qui lo spazio è 24 */
  .hero--a-piu .hero-riga .eyebrow{max-width:180px}
  .a-piu-posto{display:block;flex:none;width:var(--a-piu-lato);height:var(--a-piu-lato);margin:-8px -6px -8px 0}
}

/* header.css */
/* Header e link "Vai al contenuto" (design/sciolto/sciolto.css); mega menu e menu su telefono in menu.css.
   Differenza dal design: l'header è fisso invece che sticky, con lo spazio riservato da .pagina.
   Così il passaggio da 72 a 56 px non sposta il contenuto sotto. */
.header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-alto);padding:0 var(--margine);background:var(--bianco);transition:height var(--durata),background var(--durata),box-shadow var(--durata)}
.header--compatto{height:var(--header-compatto);background:rgba(255,255,255,.96);border-bottom:1px solid var(--filetto)}
.header .logo{display:inline-flex;align-items:center;min-height:44px}
.header .logo img{height:22px;width:auto;display:block;transition:height var(--durata)}
.header--compatto .logo img{height:18px}
.header nav{display:flex;align-self:stretch;align-items:center;gap:clamp(16px,2.4vw,32px)} /* il mega menu si appoggia all'header, non al menu */
.header .voce{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 var(--testo-s)/1 var(--font-testo);color:var(--viola);position:relative}
.header .voce:hover,.header .voce[aria-expanded="true"]{color:var(--magenta)}
.header .voce::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform var(--durata)}
.header .voce:hover::after,.header .voce[aria-current]::after{transform:scaleX(1)}
.header .voce svg{transition:transform var(--durata)}
.header .voce[aria-expanded="true"] svg{transform:rotate(180deg)}
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}

.salta{position:absolute;left:var(--margine);top:12px;z-index:20;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--raggio-bottone);background:var(--viola);color:var(--bianco);font:500 var(--testo-s)/1 var(--font-testo);transform:translateY(-200%);transition:transform var(--durata)}
.salta:focus-visible,.salta.is-focus{transform:translateY(0);outline-color:var(--magenta)}
.salta:hover{color:var(--bianco)}

.header .solo-telefono{display:none}
@media (max-width:767px){
  .header nav.solo-computer{display:none}
  .header .solo-telefono{display:inline-flex}
  .header:not(.header--compatto) .logo img{height:20px}
}
/* Finestre basse (ingrandimento al 400%, telefoni piccoli in orizzontale): l'header fisso coprirebbe quasi un terzo
   della vista. Lì scorre con la pagina, e le ancore si fermano in cima. */
@media (max-height:300px){
  .header{position:absolute}
  html{scroll-padding-top:var(--sp-2)}
}

/* menu.css */
/* Mega menu "Servizi" su computer e menu su telefono che si apre a cerchio (design/sciolto-def/menu.css, 07/10).
   Senza script il mega menu si apre al passaggio e al fuoco; con lo script (.menu-js sull'header) si apre con la
   classe is-aperto e si chiude con un attimo di ritardo. Differenza dal design: il velo dietro non è sfocato.
   Con "riduci movimento" niente animazioni e la forma a punti è ferma. */
@keyframes vMegaGiu{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vSu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vVelo{from{opacity:0}to{opacity:1}}
@keyframes vCerchio{from{clip-path:circle(0 at var(--x) var(--y))}to{clip-path:circle(150% at var(--x) var(--y))}}

.con-sottomenu{display:flex;align-self:stretch;align-items:center} /* alto quanto l'header: dal link si scende nel pannello senza uscire */
.v-mega{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 100%);overflow:auto;background:var(--bianco);border-bottom:1px solid var(--filetto);box-shadow:0 40px 60px -40px rgba(51,0,102,.35);animation:vMegaGiu .5s var(--g-curva) both;z-index:2;display:none}
.header:not(.menu-js) .con-sottomenu:is(:hover,:focus-within) .v-mega,.con-sottomenu.is-aperto .v-mega{display:block}
.v-mega-griglia{max-width:var(--contenitore);margin:0 auto;padding:36px var(--margine) 28px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}
.v-mega-e{margin-bottom:10px;animation:vSu .45s var(--g-curva) both}
.v-mega-lista{display:flex;flex-direction:column}
.v-mega-voce{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;align-items:center;padding:16px 0;border-top:1px solid var(--filetto);color:var(--viola);animation:vSu .5s var(--g-curva) both;animation-delay:calc(var(--i) * 60ms + 80ms)}
.v-mega-voce:hover{color:var(--viola)}
.v-mega-voce b{font:700 clamp(26px,2.4vw,36px)/1.05 var(--font-titoli);letter-spacing:-0.03em;transition:transform .35s var(--g-curva),color .25s}
.v-mega-n{font:500 13px/1 var(--font-testo);letter-spacing:.18em;color:var(--testo-2);transition:color .25s} /* 13 px: il grigio-3 (3,6:1) vale solo da 18 px */
.v-mega-freccia{font-size:22px;opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .35s var(--g-curva);color:var(--magenta);justify-self:end}
.v-mega-voce.on b{transform:translateX(10px);color:var(--magenta)}
.v-mega-voce.on .v-mega-n{color:var(--magenta)}
.v-mega-voce.on .v-mega-freccia{opacity:1;transform:none}
.v-mega-anteprima{position:relative;overflow:hidden;border-radius:28px;background:var(--viola);color:var(--bianco);min-height:340px;display:flex;align-items:flex-end;padding:32px;animation:vSu .55s var(--g-curva) .12s both}
.v-mega-anteprima:hover{color:var(--bianco)}
.v-mega-cifra{position:absolute;left:28px;top:22px;font:500 13px/1 var(--font-testo);letter-spacing:.2em;color:var(--bianco)} /* magenta su viola 3,1:1: mai testo */
mega-forma{position:absolute;right:-20px;top:-30px;width:340px;height:300px;display:block;pointer-events:none;transition:transform .6s var(--g-curva)}
mega-forma canvas{width:100%;height:100%;display:block}
.v-mega-anteprima:hover mega-forma{transform:scale(1.08)}
.v-mega-testo{position:relative;display:grid;gap:10px}
.v-mega-testo b{font:700 32px/1.05 var(--font-titoli);letter-spacing:-0.03em}
.v-mega-desc{font:400 17px/1.45 var(--font-testo);color:rgba(255,255,255,.85)}
.v-mega-vai{margin-top:10px;font:500 16px/1 var(--font-testo)}
.v-mega-piede{max-width:var(--contenitore);margin:0 auto;padding:14px var(--margine) 22px;display:flex;gap:28px;border-top:1px solid var(--filetto);animation:vSu .5s var(--g-curva) .35s both}
.v-mega-piede a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 var(--testo-s)/1 var(--font-testo);color:var(--viola)}
.v-mega-piede a:hover{color:var(--magenta)}
.v-mega-velo{position:fixed;inset:0;z-index:9;background:rgba(51,0,102,.22);animation:vVelo .4s ease both;pointer-events:none;display:none}
.header:not(.menu-js):has(.con-sottomenu:is(:hover,:focus-within)) ~ .v-mega-velo,.header:has(.con-sottomenu.is-aperto) ~ .v-mega-velo{display:block}
@media (max-width:1000px){.v-mega-griglia{grid-template-columns:1fr}.v-mega-anteprima{display:none}}

/* Menu su telefono: un <dialog> a tutto schermo, viola, che si apre a cerchio dal bottone "Menu" (--x, --y dallo script) */
.menu-telefono{--x:calc(100% - 48px);--y:36px;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--viola);color:var(--bianco);overflow:auto}
.menu-telefono[open]{display:flex;flex-direction:column;animation:vCerchio .6s cubic-bezier(.7,0,.2,1) both}
.menu-telefono::backdrop{background:transparent}
html:has(.menu-telefono[open]){overflow:hidden}
.menu-telefono :focus-visible{outline-color:var(--bianco)}
.menu-telefono:focus,.menu-telefono:focus-visible{outline:none} /* il menu prende il fuoco solo quando si apre al tocco: niente anello sul riquadro */
.v-menu-testa{flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-alto);padding:0 var(--margine)}
.v-menu-testa .logo{display:inline-flex;align-items:center;min-height:44px}
.v-menu-testa .logo img{height:20px;width:auto;display:block;filter:brightness(0) invert(1)}
.v-menu-chiudi{width:44px;height:44px;border-radius:50%;border:0;background:var(--magenta);position:relative;cursor:pointer;animation:vSu .4s var(--g-curva) .3s both}
.v-menu-chiudi span{position:absolute;left:13px;right:13px;top:21px;height:2px;background:var(--bianco);transform:rotate(45deg)}
.v-menu-chiudi span + span{transform:rotate(-45deg)}
.v-menu-nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:12px 24px}
.v-menu-e{font:500 var(--eyebrow)/1 var(--font-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);margin-bottom:10px;animation:vSu .5s var(--g-curva) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
.v-menu-voce{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font:700 clamp(28px,7.5vw,40px)/1.05 var(--font-titoli);letter-spacing:-0.03em;color:var(--bianco);animation:vSu .5s var(--g-curva) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
.v-menu-voce:hover,.v-menu-voce:active{color:var(--magenta)}
.v-menu-voce .v-mega-n{color:var(--magenta)}
.v-menu-t{min-width:0} /* il nome del servizio in un elemento solo: va a capo intero, anche con "e-commerce" unito */
.v-menu-riga{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:18px;animation:vSu .5s var(--g-curva) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
.v-menu-riga a{display:inline-flex;align-items:center;min-height:44px;font:500 18px/1 var(--font-testo);color:rgba(255,255,255,.85)}
.v-menu-riga a:hover,.v-menu-riga a[aria-current]{color:var(--bianco)}
.v-menu-piede{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 24px 32px;animation:vSu .5s var(--g-curva) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
.v-menu-piede .bottone:hover{background:var(--bianco);border-color:var(--bianco);color:var(--viola)}
.v-menu-wa{background:transparent;border:1.5px solid var(--bianco);color:var(--bianco)}

@media (prefers-reduced-motion:reduce){.v-mega,.v-mega *,.v-mega-velo,.menu-telefono,.menu-telefono *{animation:none!important}}

/* footer.css */
/* Footer (design/sciolto/sciolto.css e tavole degli elementi comuni). Titoli di colonna bianchi:
   il magenta su viola non regge il contrasto (3,1:1). */
.footer{background:var(--viola);color:var(--bianco);padding:var(--sp-6) var(--margine) var(--sp-4)}
.footer a{color:var(--bianco);text-decoration:none}
.footer a:hover{color:var(--bianco);text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:4px}
.footer .interno{max-width:var(--contenitore);margin:0 auto}
.footer .colonne-piede{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px 48px}
.footer .titolo-colonna{display:block;font:700 19px/1.2 var(--font-testo);letter-spacing:0.14em;text-transform:uppercase;color:var(--magenta);margin:0 0 20px} /* magenta su viola fa 3,1:1: passa l'AA come testo grande, da 18,66 px in grassetto in su (AA48, punto 7). I link restano bianchi */
.footer .colonna{display:grid;align-content:start;gap:6px;margin:0;padding:0;list-style:none;font:400 var(--testo-s)/1.5 var(--font-testo)}
.footer .logo-piede{height:20px;width:auto;display:block;filter:brightness(0) invert(1);margin-bottom:10px}
.footer .badge-riga{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin:var(--sp-5) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid rgba(255,255,255,.2);list-style:none}
.footer .badge-riga li,.footer .badge-riga a{display:flex}
.footer .badge-riga img{height:48px;width:auto;display:block}
.footer .badge{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.5);border-radius:8px;font:500 var(--testo-s)/1 var(--font-testo);color:var(--bianco)}
.footer .legale{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.2);font:400 var(--testo-s)/1.5 var(--font-testo)}
.footer .legale .link-legali{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer .attenuato{color:rgba(255,255,255,.72)}

/* Su telefono le colonne si impilano e ogni link è alto 44 px (tavola a 390 px) */
@media (max-width:767px){
  .footer{padding:var(--sp-5) var(--margine) var(--sp-4)}
  .footer .colonne-piede{gap:36px}
  .footer .colonna--link{gap:0}
  .footer nav .titolo-colonna{margin-bottom:14px}
  .footer .colonna--link a,.footer .recapiti a,.footer .legale .link-legali a{display:inline-flex;min-height:44px;align-items:center}
  .footer .recapiti .sep{display:none}
  .footer .recapiti .contatti{display:grid;gap:6px}
  .footer .badge-riga{gap:12px 16px}
  .footer .badge-riga img{height:44px}
  .footer .legale{flex-direction:column;gap:12px}
  .footer .legale .link-legali{gap:0 24px}
}

/* chiusura.css */
/* Chiusura di contatto "Parliamone": identica in ogni pagina, con la glossa (elementi comuni §5, AA16). */
.chiusura{padding:var(--sezione) var(--margine);background:var(--bianco)}
.chiusura .interno{max-width:var(--contenitore);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 80px;align-items:end}
.chiusura .titolo{display:flex;flex-direction:column;gap:24px}
.chiusura .h1-hero{font-size:clamp(56px,8vw,120px)}
.chiusura .insieme{white-space:nowrap}
.chiusura .corpo{display:flex;flex-direction:column;gap:28px}
.chiusura .lede{color:var(--viola)}
.chiusura .cta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
@media (max-width:767px){
  .chiusura .interno,.chiusura .corpo{gap:24px}
  .chiusura .h1-hero{font-size:var(--h1-hero)}
  .chiusura .cta{display:grid;gap:12px}
}

/* bolla.css */
/* Bolla WhatsApp: l'unico elemento fisso oltre l'header. Con il banner dei cookie di iubenda aperto
   sale sopra il banner: mai sui suoi bottoni. Su computer il banner è alto 220 px; su telefono, da 360 px di larghezza,
   è alto 160 px (inc/consenso.php, AA45) e la bolla gli sta 16 px sopra. Più stretto il banner si allunga: resta 227 px. */
.bolla-wa{position:fixed;right:16px;bottom:16px;z-index:20;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--magenta);color:var(--bianco);border:0;cursor:pointer;transition:background var(--durata),transform var(--durata),box-shadow var(--durata),bottom var(--durata)}
.bolla-wa:hover{background:var(--viola);color:var(--bianco);transform:translateY(-2px);box-shadow:0 0 0 6px rgba(214,0,119,.16)}
.bolla-wa svg{width:26px;height:26px}
body:has(#iubenda-cs-banner) .bolla-wa{bottom:227px}
@media (min-width:360px) and (max-width:640px){body:has(#iubenda-cs-banner) .bolla-wa{bottom:176px}}

/* pannello.css */
/* Pannello "Parliamone": un <dialog> che si apre da destra sopra la pagina; su telefono a tutto schermo.
   "Chiudi" resta sempre in alto mentre il pannello scorre (tavola a 390 px). */
.pannello{position:fixed;inset:0 0 0 auto;width:100%;max-width:480px;height:100%;max-height:none;margin:0;padding:0 28px 32px;border:0;border-left:1px solid var(--filetto);background:var(--bianco);color:var(--viola);overflow:auto}
.pannello[open]{display:flex;flex-direction:column;gap:24px}
.pannello::backdrop{background:rgba(51,0,102,.35)}
html:has(.pannello[open]){overflow:hidden}
.pannello .testa{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 0 16px;margin-bottom:-16px;background:var(--bianco)}
.pannello .testa .bottone{flex:none}
.pannello .intestazione{display:grid;gap:8px}
.pannello .intestazione .h2{font-size:40px}
.pannello .via{display:grid;gap:12px;padding:20px 0;border-top:1px solid var(--filetto)}
.pannello .via--scrivici{gap:14px}
.pannello .via .h3{font-size:22px}
.pannello .via > .bottone{width:fit-content}
.pannello .chi{display:flex;gap:16px;align-items:center}
.pannello .chi canvas{flex:none}
.pannello .whatsapp{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

@media (max-width:767px){
  .pannello{max-width:none;border-left:0;padding:0 24px 32px}
  .pannello .testa{padding-top:16px}
  .pannello .intestazione{padding-top:4px}
  .pannello .intestazione .h2{font-size:36px}
  .pannello .chi{gap:14px}
  .pannello .via > .bottone{width:auto}
  .pannello .whatsapp{display:grid;gap:12px}
}

/* campi.css */
/* Campi del modulo (design/sciolto/sciolto.css), agganciati al markup che Contact Form 7 stampa (docs/moduli.md).
   Dalla strada C (#35) il foglio di Contact Form 7 non si carica: le sue tre regole funzionali le mette in linea
   il codice dei moduli. Le classi is-focus e is-errore servono alla pagina di confronto. */
.campo{display:grid;gap:8px;font:500 var(--testo-s)/1.4 var(--font-testo);color:var(--viola)}
.campo .wpcf7-form-control-wrap{display:block}
.campo input,.campo textarea{width:100%;min-height:48px;border:1px solid var(--grigio-3);border-radius:var(--raggio-campo);padding:0 16px;font:400 var(--testo-s)/1.4 var(--font-testo);color:var(--viola);background:var(--bianco);transition:border-color var(--durata),box-shadow var(--durata)}
.campo textarea{display:block;padding:12px 16px;min-height:120px;resize:vertical}
.campo input:hover,.campo textarea:hover{border-color:var(--viola)}
.campo input:focus-visible,.campo textarea:focus-visible,.campo.is-focus input{outline:2px solid var(--viola);outline-offset:2px;border-color:var(--viola);border-radius:var(--raggio-campo)}
.campo.is-errore input,.campo.is-errore textarea,.campo [aria-invalid="true"]{border:2px solid var(--magenta)}
.campo .errore,.wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:8px;color:var(--magenta);font:400 var(--testo-s)/1.4 var(--font-testo)}
.campo .errore{margin-top:0}
.campo .aiuto{color:var(--testo-2);font-weight:400}

/* Consenso: casella da 24 px in una riga alta 44 */
.consenso,.modulo .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:12px;min-height:44px;font:400 var(--testo-s)/1.5 var(--font-testo);cursor:pointer}
.consenso input,.modulo .wpcf7-acceptance input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--magenta);border:1px solid var(--grigio-3)}
.modulo .wpcf7-list-item{display:block;margin:0}
.modulo .wpcf7-acceptance:has([aria-invalid="true"]) label{color:var(--magenta)}

/* Avvisi: errore di invio e riepilogo sotto il modulo; invio riuscito */
.avviso,.wpcf7 form.modulo.wpcf7-form .wpcf7-response-output{margin:0;border:1px solid var(--magenta);border-radius:var(--raggio-scheda);padding:16px 20px;font:400 var(--testo-s)/1.5 var(--font-testo);color:var(--viola);background:var(--bianco)}
.avviso--ok,.wpcf7 form.modulo.wpcf7-form.sent .wpcf7-response-output{border-color:var(--viola);background:var(--lilla)}

/* Il modulo: una colonna; il bottone resta largo quanto il testo, su telefono a tutta larghezza */
.modulo{display:grid;gap:14px}
.modulo .hidden-fields-container{display:none}
.modulo .bottone{justify-self:start}
.modulo .wpcf7-spinner{display:none}
.modulo.submitting .bottone{background:var(--filetto);border-color:var(--filetto);color:var(--testo-2);cursor:progress;transform:none;box-shadow:none}
.pannello .campo textarea{min-height:96px}
@media (max-width:767px){.modulo .bottone{justify-self:stretch}}

/* percorso.css */
/* Briciole di pane e indice "In questa pagina" (design/sciolto/sciolto.css). */
.briciole{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font:400 14px/1.4 var(--font-testo);color:var(--testo-2)} /* 14 px (AA48, segnalazioni di Elena del 09/10, punto 6): sotto non si scende */
.briciole a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--testo-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.briciole a::before{content:"";position:absolute;top:0;bottom:0;left:min(0px,(100% - 44px) / 2);right:min(0px,(100% - 44px) / 2)} /* bersaglio largo almeno 44 px anche per "Home" e "Blog", senza spostare il testo */
.briciole a:hover{color:var(--magenta);text-decoration-color:var(--magenta)}
.briciole .sep{color:var(--grigio-3)}
.briciole [aria-current]{color:var(--viola);font-weight:500}
.indice-pagina{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;padding:8px var(--margine);border-top:1px solid var(--filetto);border-bottom:1px solid var(--filetto)}
.indice-pagina .etichetta{font:500 var(--testo-s)/1 var(--font-testo);color:var(--testo-2);margin-right:4px}
.indice-pagina__voci,.indice-pagina__voci li{display:contents}
.indice-pagina__barra{display:none}
@media (max-width:767px){
  .indice-pagina{gap:0 20px}
  .indice-pagina .etichetta{width:100%;padding:8px 0 0}
}
/* Fino a 768 px: barra a pillole ferma sotto l'header (AA48, punto 8). Dal file di Elena struttura e comportamento; colori
   e caratteri del tema, pillole a 16 px e alte 44. Le ancore si fermano sotto header e barra (scroll-padding-top). */
@media (max-width:768px){
  html:has(.indice-pagina){scroll-padding-top:calc(var(--header-compatto) + 63px + 16px)}
  .indice-pagina{position:sticky;top:var(--header-compatto);z-index:9;display:block;padding:0;border-top:0;background:var(--bianco)}
  .indice-pagina .etichetta{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .indice-pagina__voci{display:flex;gap:8px;margin:0;padding:8px 40px 8px var(--margine);list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .indice-pagina__voci::-webkit-scrollbar{display:none}
  .indice-pagina__voci li{display:block;flex:none}
  .indice-pagina .link-ancora{min-height:44px;padding:0 16px;border-radius:999px;background:var(--lilla);color:var(--viola);font:600 var(--testo-s)/1 var(--font-testo);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
  .indice-pagina .link-ancora:hover{color:var(--viola)}
  .indice-pagina .link-ancora[aria-current]{background:var(--magenta);color:var(--bianco)}
  .indice-pagina::after{content:"";position:absolute;top:0;right:0;bottom:3px;width:36px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--bianco));pointer-events:none}
  .indice-pagina__barra{display:block;height:3px;background:var(--lilla)}
  .indice-pagina__barra i{display:block;width:var(--avanzamento,0%);height:100%;border-radius:0 3px 3px 0;background:var(--magenta);transition:width .25s}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){.indice-pagina .link-ancora,.indice-pagina__barra i{transition:none}}
@media (max-width:768px) and (max-height:300px){html:has(.indice-pagina){scroll-padding-top:var(--sp-2)}.indice-pagina{position:relative;top:auto}} /* finestre basse: come l'header, scorre con la pagina */

/* schede.css */
/* Schede, riquadri e tabella (design/sciolto/sciolto.css). */
.scheda{border:1px solid var(--filetto);border-radius:var(--raggio-scheda);background:var(--bianco);overflow:hidden}
.cover{aspect-ratio:4/3;background:var(--lilla);display:flex;align-items:center;justify-content:center;color:var(--testo-2);font:400 var(--testo-s)/1.4 var(--font-testo)}
.riquadro{border:1px solid var(--filetto);border-radius:var(--raggio-scheda);background:var(--lilla);padding:24px 28px}
.filetto-sopra{border-top:1px solid var(--filetto)}

/* Tabella in HTML. Su telefono la variante --impila fa di ogni riga una scheda con le colonne etichettate
   (data-colonna), come nella tavola a 390 px; quella a molte colonne scorre nel suo riquadro. */
.tabella{width:100%;border-collapse:collapse;font:400 var(--testo-s)/1.5 var(--font-testo)}
.tabella th,.tabella td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--filetto)}
.tabella thead th{background:var(--lilla);font-weight:600;border-bottom:1px solid var(--grigio-3)}
.tabella tbody th{font-weight:600}
.tabella-scorri{overflow-x:auto;border:1px solid var(--filetto);border-radius:var(--raggio-scheda)}
@media (max-width:767px){
  .tabella-scorri:has(.tabella--impila){border:0;border-radius:0;overflow:visible}
  .tabella--impila,.tabella--impila tbody{display:grid;gap:12px}
  .tabella--impila thead{display:none}
  .tabella--impila tr{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--filetto);border-radius:var(--raggio-scheda)}
  .tabella--impila th,.tabella--impila td{display:grid;gap:4px;padding:0;border:0}
  .tabella--impila tbody th{font:600 18px/1.15 var(--font-titoli);letter-spacing:-0.02em}
  .tabella--impila td::before{content:attr(data-colonna);color:var(--testo-2)}
  .tabella--impila td + td{padding-top:8px;border-top:1px solid var(--filetto)}
}

/* Scheda progetto e scheda articolo (elementi comuni): tutta la scheda è il link, il testo resta viola */
.griglia-progetti{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px} /* home, portfolio */
.scheda--progetto,.scheda--articolo{display:grid;color:var(--viola)}
.scheda--progetto:hover,.scheda--articolo:hover{color:var(--viola)}
.scheda--progetto .h3,.scheda--articolo .h3{text-wrap:wrap} /* nella tavola sono testo, non titoli bilanciati */
.scheda--progetto .cover img{width:100%;height:100%;object-fit:cover;display:block}
.scheda--progetto .corpo{padding:20px 24px 24px;display:grid;gap:8px}
.scheda--articolo{gap:12px;padding:28px;align-content:start}
@media (max-width:767px){
  .scheda--progetto .corpo{padding:18px 20px 22px}
  .scheda--articolo{padding:22px}
}

/* domande.css */
/* Domande apribili: <details>, si usano da tastiera senza script (design/sciolto/sciolto.css). */
.domande{display:grid;border-bottom:1px solid var(--filetto)}
.domanda{border-top:1px solid var(--filetto)}
.domanda summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;min-height:56px;padding:16px 0;cursor:pointer;font:600 clamp(18px,1.4vw,22px)/1.3 var(--font-titoli);letter-spacing:-0.01em;color:var(--viola)}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary .segno{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--magenta);font:300 30px/1 var(--font-testo);transition:transform var(--durata)}
.domanda[open] summary .segno{transform:rotate(45deg)}
.domanda summary:hover{color:var(--magenta)}
.domanda .risposta{padding:0 56px 24px 0;max-width:var(--misura)}
.domanda .risposta > * + *{margin-top:1em}
@media (max-width:767px){.domanda .risposta{padding-right:0}}

/* riquadri.css */
/* Riquadri numerati (design/sciolto-def, "pc-griglia"): pagine servizio e pagine di testo. Lilla, al passaggio viola
   con l'alone magenta. Il numero di colonne lo dà --colonne. */
.pc-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--colonne,3),minmax(0,1fr));gap:16px}
.pc-box{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:240px;padding:32px;border-radius:28px;background:var(--lilla);color:var(--viola);transition:transform .3s ease,background .3s ease,color .3s ease}
.pc-box::before{content:"";position:absolute;width:380px;height:380px;right:-160px;bottom:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,0,119,.5),rgba(214,0,119,0));opacity:0;transition:opacity .5s ease;pointer-events:none}
.pc-box > *{position:relative}
.pc-n{font:800 72px/.9 var(--font-titoli);letter-spacing:-0.05em}
.pc-t{margin:0 0 10px;font:600 21px/1.25 var(--font-titoli)}
.pc-d{margin:0;font:400 var(--testo-s)/1.5 var(--font-testo)}
@media (hover:hover) and (pointer:fine){
  .pc-box:hover{transform:translateY(-6px);background:var(--viola);color:var(--bianco)}
  .pc-box:hover::before{opacity:1}
  .pc-box:hover .pc-d a{color:var(--bianco)}
}

@media (max-width:900px){.pc-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .pc-griglia{grid-template-columns:minmax(0,1fr)}
  .pc-box{min-height:0;padding:22px;gap:14px}
  .pc-n{font-size:44px}
}
@media (prefers-reduced-motion:reduce){.pc-box,.pc-box::before{transition:none}.pc-box:hover{transform:none}}

/* servizio.css */
/* Pagina servizio, seconda consegna dell'08/10 (design/sciolto-def: sviluppo-ecommerce-shopify, consulenza-ecommerce,
   agenti-vocali-ai, automazioni-ai; sciolto.css "PAGINA SHOPIFY", consulenza.css, agenti.css, automazioni.css).
   Senza script tutto è nello stato finale: schede in fila che scorrono a mano (fino a 640 px una sotto l'altra),
   piani di Shopify uno sotto l'altro, linea del metodo e passi accesi. servizio.js aggancia la fila allo
   scorrimento sopra i 900 px e senza "riduci movimento", altrimenti le fa scorrere a dito con i pallini (AA54).
   I riquadri numerati sono in riquadri.css. Differenze dal design: testo mai sotto i 16 px (nelle schede il design arriva a 13), eyebrow da 14, niente
   scorrimento dentro le schede, su viola l'eyebrow e il "+" sono bianchi (Z13). */
.riga-link a{display:inline-flex;align-items:center;min-height:44px}
/* Riquadro "Esempio reale" (design/sciolto/sciolto.css) */
.esempio{display:grid;gap:12px;padding:28px 32px;border:1px solid var(--filetto);border-radius:var(--raggio-scheda);background:var(--lilla)}
.esempio .etichetta{color:var(--testo-2)}
.esempio .h3{margin-top:0}
.esempio p:empty{display:none}
.sv-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:40px}
.sv-testa .titolo-sezione{max-width:760px}
.sv-intro{max-width:460px;margin:0;font:400 var(--testo)/1.5 var(--font-testo);color:var(--testo-2)}
.sv-sopra{max-width:var(--misura);margin:-16px 0 24px;font:400 var(--testo)/1.5 var(--font-testo)}
.sv-dopo{display:grid;gap:16px;max-width:var(--misura);margin-top:40px}
.sv-dopo .h3{margin-top:16px;padding-top:32px;border-top:1px solid var(--filetto)}

/* Fasce colorate: lo spazio sopra è un margine, così il colore non tocca la sezione bianca di prima */
.cf,.cl,.banda,.ag-c-alto{padding:var(--sezione) 0}
.cf,.cl,.banda,.ag-caso{margin-top:var(--sezione)}
:is(.cf,.cl,.banda,.ag-caso) + :is(.cf,.cl,.banda,.ag-caso){margin-top:0}
.banda,.cl,.ag-c-alto{background:var(--lilla)}
.banda .esempio{background:var(--bianco)}

/* Fila di schede che scorrono di lato. Senza script: scorre a mano, schede bianche */
.cf{background:var(--viola);color:var(--bianco)}
.cf .eyebrow,.cf .eyebrow .piu,.cf .h2{color:var(--bianco)}
.cf .cf-card .esempio .etichetta{color:var(--testo-2)} /* "Esempio reale" nella scheda bianca: la riga sopra lo faceva bianco su lilla (1,1:1) */
.cf .sv-testa{margin-bottom:0}
.cf-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.cf-lede{max-width:640px;margin:0;font:400 var(--testo)/1.5 var(--font-testo);color:rgba(255,255,255,.88)}
.cf-contatore{display:flex;align-items:center;gap:14px;margin:0;font:400 var(--testo-s)/1 var(--font-testo);font-variant-numeric:tabular-nums}
.cf-barra{display:block;width:160px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.cf-barra i{display:block;width:var(--cf,0%);height:100%;background:var(--magenta)}
.cf [hidden]{display:none!important}
.cf-pillole{display:none}
.cf-fila{list-style:none;margin:0;display:flex;align-items:stretch;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(var(--margine),calc((100% - var(--contenitore)) / 2 + var(--margine))) 16px;scroll-padding:0 max(var(--margine),calc((100% - var(--contenitore)) / 2 + var(--margine)));scrollbar-color:rgba(255,255,255,.4) transparent}
.cf-card{flex:0 0 clamp(min(560px,82vw),52vw,780px);display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:28px;background:var(--bianco);color:var(--viola);scroll-snap-align:start;transition:background .4s ease,color .4s ease}
.cf-alto{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cf-num{font:800 clamp(48px,7vh,72px)/.9 var(--font-titoli);letter-spacing:-0.05em}
.cf-cerchio{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;font:400 18px/1 var(--font-testo)}
.cf-corpo{display:grid;gap:12px;margin-top:auto;font:400 var(--testo-s)/1.5 var(--font-testo)}
.cf-h{margin:0 0 4px;font:600 clamp(24px,2.2vw,30px)/1.12 var(--font-titoli);letter-spacing:-0.01em;text-wrap:balance}
.cf-corpo .testo{font-size:var(--testo-s)}
.cf-corpo .elenco-piu li{grid-template-columns:16px minmax(0,1fr);gap:8px;padding:4px 0;border-top:0;font-size:var(--testo-s)}
.cf-corpo .passi li{grid-template-columns:40px minmax(0,1fr);gap:8px;padding:6px 0;font-size:var(--testo-s)}
.cf-corpo .esempio{gap:8px;margin-top:4px;padding:20px 22px}
.cf-corpo .esempio .h3{font-size:20px}
.cf-corpo .tabella-scorri{margin:4px 0}
.cf-corpo .tabella th,.cf-corpo .tabella td{padding:8px 10px;color:inherit}
.cf-piede{display:grid;gap:16px;justify-items:start}
.cf-aiuto{margin:24px 0 0;font:400 var(--testo-s)/1.4 var(--font-testo);color:rgba(255,255,255,.75)}
.cf-nota{display:grid;gap:12px;max-width:var(--misura);margin-top:24px;color:rgba(255,255,255,.88)}
.cf-nota .link,.cf-lede .link{color:var(--bianco)}
/* A dito (fino a 900 px, con "riduci movimento" e dove la fila agganciata non ci sta; AA54): scroll-snap e pallini
   da 44 px al posto della barra di scorrimento. Sul telefono una scheda alla volta (sotto). */
.cf--dita .cf-fila{scrollbar-width:none}
.cf--dita .cf-fila::-webkit-scrollbar{display:none}
.cf--dita .cf-card{scroll-snap-stop:always}
.cf-punti{display:flex;justify-content:safe center;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.cf-punti::-webkit-scrollbar{display:none}
.cf-punto{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.cf-punto::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.6);transition:width .25s,background .25s}
.cf-punto[aria-current]::before{width:22px;background:var(--magenta)}
.cf-punto:focus-visible{outline-color:var(--bianco)}
/* Con lo script: la scheda in vista è bianca, le altre sono velate sul viola */
.cf.is-attivo .cf-card:not(.is-attiva){background:rgba(255,255,255,.07);color:var(--bianco)}
.cf.is-attivo .cf-card:not(.is-attiva) :is(a,.punto),.cf.is-attivo .cf-card:not(.is-attiva) :is(.elenco-piu,.passi) li::before{color:var(--bianco)}
.cf.is-attivo .cf-card:not(.is-attiva) .esempio{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.cf.is-attivo .cf-card:not(.is-attiva) .esempio .etichetta{color:rgba(255,255,255,.8)}
.cf.is-attivo .cf-card:not(.is-attiva) :is(.tabella-scorri,.tabella th,.tabella td){border-color:rgba(255,255,255,.18)}
.cf.is-attivo .cf-card:not(.is-attiva) .tabella thead th{background:rgba(255,255,255,.08)}
/* Agganciata allo scorrimento (sopra i 900 px): la sezione è alta quanto serve e la fila si sposta di lato. Il riquadro
   fermo riempie la finestra sotto l'header; se è più alto, resta ferma la fila e il titolo esce in alto (servizio.js) */
.cf--agganciata{padding:0}
.cf--agganciata .cf-sticky{position:sticky;top:var(--cf-cima,0px);display:flex;flex-direction:column;justify-content:center;min-height:var(--cf-riquadro,0px);padding:24px 0;overflow:hidden;overflow:clip}
.cf--agganciata .cf-fila{width:max-content;overflow:visible;scroll-snap-type:none;padding-bottom:0;will-change:transform}
.cf--agganciata .cf-testa{margin-bottom:min(32px,3vh)}
.cf--agganciata .cf-aiuto{margin-top:min(24px,2.5vh)}

/* Metodo: linea dei passi su lilla. Senza script è accesa; con lo script si accende un passo alla volta */
.cl .sv-testa{margin-bottom:56px}
.cl-timeline{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:20px}
.cl-timeline::before,.cl-timeline::after{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;background:var(--filetto)}
.cl-timeline::after{right:auto;width:calc((100% - 48px) * var(--p,1));background:var(--magenta)}
.cl-timeline::before,.cl-timeline::after{z-index:0} /* la linea sta dietro i cerchi numerati (segnalazioni di Elena, punto 4) */
.cl-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.cl-cerchio{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--magenta);border-radius:50%;background:var(--magenta);color:var(--bianco);font:800 19px/1 var(--font-titoli);letter-spacing:-0.03em;transition:background .35s,border-color .35s,color .35s}
.cl-cerchio .punto{color:var(--viola)}
.cl-box{padding:22px;border-radius:22px;background:var(--bianco);transition:opacity .4s ease}
.cl-t{margin:0 0 6px;font:600 20px/1.3 var(--font-titoli)}
.cl-d{margin:0;font:400 var(--testo-s)/1.5 var(--font-testo)}
.sv-griglia .cl-timeline{margin-top:56px}
.sv-griglia .cl-box{background:var(--lilla)}
.cl-timeline.is-attivo .cl-step:not(.is-acceso) .cl-cerchio{background:var(--bianco);border-color:var(--filetto);color:var(--grigio-3)}
.cl-timeline.is-attivo .cl-step:not(.is-acceso) .cl-cerchio .punto{color:inherit}
.cl-timeline.is-attivo .cl-step:not(.is-acceso) .cl-box{opacity:.65} /* passo spento più chiaro ma leggibile: a .45 il testo era a 2,9:1, a .65 è 5,2:1 */

/* Due colonne con il numero del capitolo */
.colonne-a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:start}
.colonne-a--inversa{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.colonne-a--inversa .titolo-sezione{order:2}
.colonne-a .titolo-sezione{position:sticky;top:calc(var(--header-compatto) + 80px)}
.colonne-a .dx{display:grid;gap:20px;min-width:0;padding-top:clamp(40px,6vw,84px)}
.capitolo{margin-bottom:-24px;font:300 clamp(56px,8vw,120px)/.9 var(--font-titoli);letter-spacing:-0.05em;color:var(--filetto);user-select:none}
.banda .capitolo{color:#ddd5e6}
.sv-righe{display:grid;border-top:1px solid var(--filetto)}
.sv-riga{display:grid;grid-template-columns:minmax(120px,.4fr) minmax(0,1fr);gap:16px 24px;padding:18px 0;border-bottom:1px solid var(--filetto)}
.sv-riga .h3{font-size:22px}

/* Shopify o Shopify Plus: senza script i piani stanno uno sotto l'altro */
.sp-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;align-items:center}
.sp .sv-testa{margin-bottom:28px}
.sp [hidden]{display:none!important}
.sp-switch{position:relative;display:inline-flex;max-width:100%;margin-bottom:28px;padding:5px;border-radius:999px;background:var(--lilla)}
.sp-pillola{position:absolute;top:5px;bottom:5px;left:0;width:var(--w,0);border-radius:999px;background:var(--viola);transform:translateX(var(--x,0));transition:transform .35s cubic-bezier(.6,.1,.2,1),width .35s cubic-bezier(.6,.1,.2,1)}
.sp-switch button{position:relative;min-height:44px;padding:10px 24px;border:0;border-radius:999px;background:transparent;font:500 var(--testo-s)/1.2 var(--font-testo);color:var(--viola);cursor:pointer;transition:color .3s}
.sp-switch button[aria-selected="true"]{color:var(--bianco)}
.sp-altro{display:grid;gap:12px}
.sp-pannelli{display:grid;gap:16px}
.sp-pannello{display:grid;gap:18px;align-content:start;min-height:280px;padding:36px;border-radius:28px;background:var(--lilla);color:var(--viola)}
.sp-pannello--scuro{background:var(--viola);color:var(--bianco)}
.sp-kicker{margin:0;font:500 var(--eyebrow)/1.2 var(--font-testo);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.sp-pannello--scuro .sp-kicker{color:var(--bianco)}
.sp-titolo{margin:0;font:600 30px/1.1 var(--font-titoli)}
.sp-punti{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sp-punti li{position:relative;padding-left:22px;font:400 var(--testo)/1.4 var(--font-testo)}
.sp-punti li::before{content:"+";position:absolute;left:0;font-weight:600;color:var(--magenta)}
.sp-pannello--scuro .sp-punti li::before{color:var(--bianco)}
.sp.is-attivo .sp-pannello{animation:spIn .2s ease}
@keyframes spIn{from{opacity:0}to{opacity:1}}

/* Il nostro caso (Agenti vocali AI) */
.ag-c-alto .sv-testa{margin-bottom:40px}
.ag-c-agenti{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Federica e Sara: lo stesso segno delle schede della Home (96 px, senza disco), che al passaggio gira e si schiarisce
   sul viola (segni.js), e lo stesso movimento della scheda (secondo giro di Elena, AA54) */
.ag-c-agente{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:32px;border-radius:28px;background:var(--bianco);color:var(--viola);transition:background .4s ease,color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.ag-c-agente::before{content:"";position:absolute;width:380px;height:380px;right:-160px;bottom:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,0,119,.5),rgba(214,0,119,0));opacity:0;transition:opacity .5s ease;pointer-events:none}
.ag-c-agente > *{position:relative}
.ag-c-voce canvas{display:block;border-radius:50%}
.ag-c-nome{margin:0 0 12px;font:800 clamp(40px,4vw,60px)/.95 var(--font-titoli);letter-spacing:-0.045em}
.ag-c-agente p{margin:0;font:400 var(--testo-s)/1.5 var(--font-testo);color:var(--testo-2)}
@media (hover:hover) and (pointer:fine){
  .ag-c-agente:hover{background:var(--viola);color:var(--bianco);transform:translateY(-6px)}
  .ag-c-agente:hover p{color:rgba(255,255,255,.88)}
  .ag-c-agente:hover::before{opacity:1}
}
/* Dispositivi a tocco: la scheda sta nello stato del passaggio del mouse (segnalazioni di Elena del 09/10, punto 5) */
@media (hover:none){
  .ag-c-agente{background:var(--viola);color:var(--bianco)}
  .ag-c-agente p{color:var(--bianco)} /* bianco pieno: regge 4,6:1 anche dove c'è l'alone magenta */
  .ag-c-agente::before{opacity:1}
}
.ag-c-prova{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;margin-top:40px;padding-top:32px;border-top:1px solid var(--filetto)}
.ag-c-prova p{margin:0;color:var(--testo-2)}
.ag-c-flusso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:start;padding-top:96px}
.ag-c-sx{position:sticky;top:calc(var(--header-compatto) + 32px);display:grid;gap:16px}
.ag-c-h3{margin:0;font-size:clamp(30px,3.2vw,48px)}
.ag-c-sx .testo{max-width:440px;color:var(--testo-2)}
.ag-c-nodi{list-style:none;margin:16px 0 0;padding:0;display:grid}
.ag-c-nodi li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0}
.ag-c-nodi li:not(:last-child)::after{content:"";position:absolute;left:23px;top:60px;bottom:-12px;width:2px;background:var(--magenta)}
.ag-c-pallino{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--magenta);border-radius:50%;background:var(--magenta);color:var(--bianco);font:800 17px/1 var(--font-titoli)}
.ag-c-nodi b{display:block;font:600 18px/1.25 var(--font-titoli)}
.ag-c-nodi b + span{display:block;font:400 var(--testo-s)/1.4 var(--font-testo);color:var(--testo-2)}
.ag-c-passi{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ag-c-passo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;padding:32px;border-radius:28px;background:var(--lilla);color:var(--viola);transition:opacity .4s ease,background .4s ease,color .4s ease}
.ag-c-num{font:800 56px/.9 var(--font-titoli);letter-spacing:-0.05em}
.ag-c-passo p{margin:6px 0 0;font:400 var(--testo)/1.5 var(--font-testo)}
.ag-c-passo b{display:block;margin-bottom:6px;font:600 21px/1.25 var(--font-titoli)}
.ag-c-passi.is-attivo .ag-c-passo{opacity:.65} /* il passo non ancora letto resta più chiaro ma leggibile: a .55 il testo era a 3,9:1, a .65 è 5,2:1 */
.ag-c-passi.is-attivo .ag-c-passo.is-fatto{opacity:.85}
.ag-c-passi.is-attivo .ag-c-passo.is-acceso{opacity:1;background:var(--viola);color:var(--bianco)}
.ag-c-flusso .sv-dopo{margin-top:24px}

@media (max-width:900px){
  .sv-testa,.cf-testa{flex-direction:column;align-items:flex-start}
  .colonne-a,.colonne-a--inversa,.sp-griglia,.ag-c-flusso{grid-template-columns:minmax(0,1fr)}
  .colonne-a--inversa .titolo-sezione{order:0}
  .colonne-a .titolo-sezione,.ag-c-sx{position:static}
  .colonne-a .dx{padding-top:0}
  .ag-c-flusso{gap:40px;padding-top:64px}
}
@media (max-width:640px){
  .sv-testa{gap:12px;margin-bottom:24px}
  .ag-c-agenti,.ag-c-prova{grid-template-columns:minmax(0,1fr)}
  /* Le schede una sotto l'altra; con lo script scorrono a dito, con le pillole e i pallini (AA48, punto 9) */
  .cf-fila{flex-direction:column;overflow:visible;scroll-snap-type:none;padding:0 var(--margine)}
  .cf-card{flex:none;padding:24px 20px;border-radius:22px}
  .cf-num{font-size:44px}
  .cf-cerchio{display:none}
  .cf-pillole{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding:0 var(--margine);scrollbar-width:none}
  .cf-pillole::-webkit-scrollbar{display:none}
  .cf-pillola{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--bianco);color:var(--viola);font:500 var(--testo-s)/1 var(--font-testo);white-space:nowrap}
  .cf-pillola[aria-current]{background:var(--magenta);color:var(--bianco)}
  .cf--dita .cf-fila{flex-direction:row;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--margine);transition:height .3s ease}
  .cf--dita .cf-card{flex:0 0 100%;scroll-snap-align:start}
  .cl-timeline{grid-template-columns:minmax(0,1fr);gap:0}
  .cl-timeline::before,.cl-timeline::after{left:15px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .cl-timeline::after{bottom:auto;height:calc((100% - 20px) * var(--p,1))}
  .cl-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:10px 0}
  .cl-cerchio{width:34px;height:34px;font-size:16px}
  .cl-timeline.is-attivo .cl-step:not(.is-acceso) .cl-cerchio{color:var(--testo-2)} /* a 16 px il grigio-3 (3,6:1) non basta */
  .sp-switch{display:flex;width:100%}
  .sp-switch button{flex:1;padding:10px 8px}
  .sp-pannello{min-height:0;padding:22px}
  .sv-riga{grid-template-columns:minmax(0,1fr);gap:6px}
  .ag-c-agente{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px}
  .ag-c-passo{gap:16px;padding:22px}
  .ag-c-num{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  .ag-c-agente,.ag-c-agente::before,.cf-card,.cl-cerchio,.cl-box,.ag-c-passo,.sp-pillola,.cf-fila,.cf-punto::before{transition:none}
  .ag-c-agente:hover{transform:none}
  /* con "riduci movimento" il segno resta viola: sul fondo viola sta su un disco lilla, come in Home */
  .ag-c-agente:hover canvas{background:var(--lilla)}
  .sp.is-attivo .sp-pannello{animation:none}
}
@media (hover:none) and (prefers-reduced-motion:reduce){.ag-c-agente canvas{background:var(--lilla)}}

/* dock.css */
/* Dock in basso (design/sciolto-def, sciolto.css "dock fisso in basso"). Differenze dal design: niente fondo
   sfocato (AA41); voci a 16 px e alte 44; l'anello senza la percentuale (10 px nel design); solo sopra i 900 px,
   largo al massimo quanto lascia libera la bolla di WhatsApp, con le voci che scorrono se non ci stanno. */
.dock{position:fixed;left:50%;bottom:22px;z-index:15;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 184px);padding:6px;border-radius:999px;background:var(--viola);transform:translateX(-50%) translateY(120px);opacity:0;visibility:hidden;transition:transform .45s var(--g-curva),opacity .3s,visibility 0s .45s}
.dock.is-visibile{transform:translateX(-50%);opacity:1;visibility:visible;transition:transform .45s var(--g-curva),opacity .3s,visibility 0s}
.dock :focus-visible{outline-color:var(--bianco)}
.dock-anello{flex:none;width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--magenta) calc(var(--p,0) * 360deg),rgba(255,255,255,.15) 0);display:grid;place-items:center}
.dock-anello span{width:28px;height:28px;border-radius:50%;background:var(--viola)}
.dock-voci{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.dock-voci::-webkit-scrollbar{display:none}
.dock-voci a,.dock-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:500 var(--testo-s)/1 var(--font-testo);color:var(--bianco);white-space:nowrap;transition:background .3s,color .3s}
.dock-voci a:hover{color:var(--bianco);background:rgba(255,255,255,.12)}
.dock-voci a.is-attiva{background:var(--bianco);color:var(--viola)}
/* Con lo script il link diventa un <button> (pannello.js): senza bordo e senza aspetto predefiniti del browser. */
.dock-cta{background:var(--magenta);font-weight:600;border:0;appearance:none;cursor:pointer}
.dock-cta:hover{background:var(--bianco);color:var(--viola)}
@media (max-width:899px){.dock{display:none}}
@media (prefers-reduced-motion:reduce){.dock,.dock.is-visibile{transition:none}}

/* federica.css */
/* "Parla con Federica" con l'interfaccia nostra (AA49, parti/federica.php): un <dialog> al centro su computer, a tutto
   schermo su telefono, con i controlli in basso a portata di pollice. Sopra a tutto (dock, bolla, banner dei cookie),
   perché un dialogo modale sta nel livello più alto della pagina. Solo token di variabili.css. */
.federica{width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0 32px 32px;border:0;border-radius:var(--raggio-scheda);background:var(--bianco);color:var(--viola);overflow:auto}
.federica[open]{display:flex;flex-direction:column;gap:16px}
.federica::backdrop{background:rgba(51,0,102,.35)}
html:has(.federica[open]){overflow:hidden}
.federica-testa{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 8px;background:var(--bianco)}
.federica-testa .h3{font-size:22px}
.federica-testa .bottone{flex:none}
.federica-aura{display:flex;justify-content:center}
.federica-aura canvas{width:176px;height:176px}
.federica-stato{min-height:1.6em;text-align:center;font-weight:500}
.federica-stato:empty{min-height:0}
.federica-passo{display:grid;gap:16px}
.federica-consenso{display:grid;gap:10px;padding:20px;border-radius:var(--raggio-scheda);background:var(--lilla)}
.federica-consenso:focus{outline:none}
.federica-consenso .h3{font-size:20px}
.federica-azioni{display:flex;flex-wrap:wrap;gap:12px}
.federica-azioni .bottone{flex:1 1 auto}
.federica [hidden]{display:none}
/* "Revoca il consenso" (AA53): sotto i passi, separato da un filetto, perché non si confonda con i controlli. */
.federica-revoca{display:grid;gap:8px;justify-items:start;padding-top:16px;border-top:1px solid var(--filetto)}
/* Il consenso (AA57). L'aura lascia il posto al testo, che scorre se serve; "Come trattiamo i dati", "Accetta" e
   "Annulla" restano in basso, visibili senza scorrere anche a 320 px, e i due bottoni sono uguali per forma e misura. */
.federica-dati{flex-basis:100%;margin:0}
.federica[data-fase="consenso"] .federica-aura{display:none}
.federica[data-fase="consenso"] .federica-azioni{position:sticky;bottom:-32px;padding:16px 0 32px;margin-bottom:-32px;background:var(--bianco)}
.federica[data-fase="consenso"] .federica-azioni .bottone{flex:1 1 0}

@media (max-width:767px){
  .federica{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0 24px 24px;border-radius:0}
  .federica-testa{padding-top:16px}
  .federica-aura{flex:1;align-items:center;min-height:200px}
  .federica-passo{margin-top:auto}
  .federica-azioni{flex-direction:column}
  .federica[data-fase="consenso"] .federica-passo{margin-top:0}
  .federica[data-fase="consenso"] .federica-azioni{flex-direction:row;bottom:-24px;padding:12px 0 24px;margin-bottom:-24px}
}