/* 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}}

/* lettura.css */
/* Pagine da leggere, articolo e pagine di testo (design/sciolto-def/articolo.css, trasparenza.css): barra di lettura,
   indice a sinistra che resta in vista, testo a 760 px, passi in righe lilla, riquadro finale su viola. Differenze dal
   design: la barra di lettura è un'animazione CSS legata allo scorrimento (dove non è supportata non c'è); voci
   dell'indice e testi a 16 px, l'etichetta è un eyebrow da 14. */
.ar-barra{position:fixed;left:0;right:0;top:0;height:4px;z-index:60;pointer-events:none}
.ar-barra i{display:block;height:100%;background:var(--magenta);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){.ar-barra i{animation:arBarra linear both;animation-timeline:scroll(root)}}
@keyframes arBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ar-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start;padding-top:56px;padding-bottom:96px}
.ar-layout--senza-indice{grid-template-columns:minmax(0,1fr)}
.ar-indice{position:sticky;top:calc(var(--header-compatto) + 28px);display:grid;gap:14px}
.ar-indice ol{display:grid;gap:4px;margin:0;padding:0;list-style:none;border-left:2px solid var(--filetto)}
.ar-voce{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;align-content:center;min-height:44px;padding:10px 0 10px 16px;margin-left:-2px;border-left:2px solid transparent;font:500 var(--testo-s)/1.35 var(--font-testo);color:var(--testo-2);transition:color .3s,border-color .3s}
.ar-voce-n{font-weight:600;font-variant-numeric:tabular-nums}
.ar-voce:hover{color:var(--viola)}
.ar-voce[aria-current]{color:var(--viola);border-left-color:var(--magenta)}
.ar-voce[aria-current] .ar-voce-n{color:var(--magenta)}
.ar-testo{max-width:760px;display:grid;gap:20px}
.ar-testo h2{font:700 clamp(30px,3vw,42px)/1.08 var(--font-titoli);letter-spacing:-0.035em;margin:48px 0 4px;text-wrap:balance}
.ar-testo > h2:first-child{margin-top:0}
.ar-testo h3{font:700 22px/1.2 var(--font-titoli);letter-spacing:-0.02em;margin:20px 0 -8px}
.ar-testo p,.ar-testo li{font:400 18px/1.65 var(--font-testo)}
.ar-testo .testo{max-width:none}
.ar-testo ol.passi{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:p}
.ar-testo ol.passi li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px;border:0;border-radius:20px;background:var(--lilla);font-size:17px;counter-increment:p;transition:background .3s,color .3s,transform .3s}
.ar-testo ol.passi li::before{content:counter(p) ".";font:800 32px/1 var(--font-titoli);letter-spacing:-0.04em;color:var(--magenta)}
@media (hover:hover) and (pointer:fine){.ar-testo ol.passi li:hover{background:var(--viola);color:var(--bianco);transform:translateX(6px)}}
.ar-fine{display:grid;gap:16px;margin-top:40px;padding:44px;border-radius:32px;background:var(--viola);color:var(--bianco)}
.ar-fine h2{margin:0;color:var(--bianco)}
.ar-fine p{font:400 18px/1.6 var(--font-testo);color:rgba(255,255,255,.88)}
.ar-fine .riga-link{display:flex;flex-wrap:wrap;gap:4px 28px}
.ar-fine .link-ancora{color:var(--bianco);text-decoration:none}
@media (max-width:1000px){.ar-layout{grid-template-columns:1fr;gap:24px;padding-top:24px}.ar-indice{position:static;padding:20px;border-radius:24px;background:var(--lilla)}}
@media (max-width:640px){
  .ar-layout{padding-bottom:48px}
  .ar-testo p,.ar-testo li{font-size:17px}
  .ar-testo ol.passi li{grid-template-columns:40px minmax(0,1fr);padding:14px 16px}
  .ar-fine{padding:26px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){.ar-testo ol.passi li:hover{transform:none}}

/* blog.css */
/* Blog: indice (design/sciolto-def/blog.css) e articolo (design/sciolto-def/articolo.css).
   Indice: schede numerate, la prima larga il doppio e viola; al passaggio la scheda diventa viola e la freccia gira.
   Differenze dal design: la griglia entra con la grammatica dei blocchi e non con un'animazione all'apertura;
   riassunto, firma e nota a 16 px, l'argomento è un eyebrow da 14. */
.bl-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bl-card{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:20px;min-height:340px;padding:28px;border-radius:28px;overflow:hidden;background:var(--lilla);color:var(--viola);transition:transform .4s var(--g-curva),background .4s ease,color .4s ease}
.bl-card::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}
.bl-card:first-child{grid-column:span 2;background:var(--viola);color:var(--bianco)}
.bl-card:first-child .bl-r,.bl-card:first-child .bl-firma{color:rgba(255,255,255,.85)}
.bl-card:first-child .bl-num,.bl-card:first-child .bl-cerchio{color:var(--bianco);border-color:var(--bianco)}
.bl-card:first-child .bl-t{font-size:clamp(32px,3.4vw,52px)}
.bl-card:hover{color:var(--viola)}
.bl-card:first-child:hover{color:var(--bianco)}
.bl-alto{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bl-arg{padding:10px 14px;border-radius:999px;background:var(--bianco);color:var(--viola);letter-spacing:.05em}
.bl-cerchio{flex:none;width:48px;height:48px;margin-left:auto;border-radius:50%;border:1.5px solid var(--viola);display:flex;align-items:center;justify-content:center;font:400 20px/1 var(--font-testo);color:var(--viola);transition:all .4s ease}
.bl-num{font:800 56px/1 var(--font-titoli);letter-spacing:-0.05em;color:var(--viola);transition:color .4s}
.bl-corpo{position:relative;display:grid;gap:10px;align-content:end}
.bl-t{font:700 clamp(22px,2vw,28px)/1.1 var(--font-titoli);letter-spacing:-0.03em;text-wrap:balance}
.bl-r{font:400 var(--testo-s)/1.5 var(--font-testo);color:var(--testo-2);transition:color .4s}
.bl-firma{font:400 var(--testo-s)/1.4 var(--font-testo);color:var(--testo-2);transition:color .4s}
.bl-nota{margin-top:32px;font:400 var(--testo-s)/1.5 var(--font-testo);color:var(--testo-2)}
@media (hover:hover) and (pointer:fine){
  .bl-card:hover{background:var(--viola);color:var(--bianco);transform:translateY(-8px)}
  .bl-card:hover::before{opacity:1}
  .bl-card:hover .bl-num{color:var(--bianco)}
  .bl-card:hover .bl-r,.bl-card:hover .bl-firma{color:rgba(255,255,255,.85)}
  .bl-card:hover .bl-cerchio{background:var(--magenta);border-color:var(--magenta);color:var(--bianco);transform:rotate(-45deg)}
}
.bl-card:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}
@media (max-width:1000px){.bl-griglia{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .bl-griglia{grid-template-columns:1fr;gap:10px}
  .bl-card:first-child{grid-column:auto}
  .bl-card{min-height:0;padding:22px;border-radius:24px}
  .bl-num{font-size:40px}
}

/* Articolo (design/sciolto-def/articolo.css): hero con la firma, "In breve", fonti, articoli collegati. Barra di
   lettura, indice e testo sono in lettura.css. Differenze dal design: la tabella resta una tabella (il design la
   disegna come sei riquadri). */
.hero--articolo > *{max-width:860px}
.hero--articolo .h1-pagina{font-size:clamp(36px,4vw,44px);max-width:860px}
.ar-breve{max-width:720px;padding:28px 32px;border-radius:28px;background:var(--lilla)}
.ar-breve .testo{max-width:none}
.ar-breve b{font-weight:600}
.ar-testo .fonti{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--filetto)}
.ar-testo .fonti b{font-weight:600}
.ar-testo .fonti ul{margin:0;padding-left:20px;display:grid;gap:4px}
.ar-testo .fonti li{font-size:var(--testo-s)}
.ar-testo .collegati b{font-weight:600;color:var(--viola)}
article + .chiusura{padding-top:0}
@media (max-width:640px){
  .ar-breve{padding:22px;border-radius:22px}
}

/* 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}
}