/* Confartigianato Agrigento — la pagina «Le categorie» (testo dell'utente del 5 novembre 2026; quarta voce del «Menu del logo», colore #F6A66A).
   Modello: materiale/modello-pagina/categorie.html, stessi numeri. Pattern della categoria «Le categorie» (inc/categorie.php):
   1. «Categorie: dodici»: il 12 grandissimo (decorativo) con la lineetta arancio, accanto alla frase.
   2. «Categorie: ruota delle dodici ore», stile «QUADRANTE NOTTURNO»: tutta la sezione su blu che sfuma verso il blu del marchio; anello bianco
      sottile, i minuti a puntini, le dodici ore in arancio; la lancetta arancio parte dal centro.
      - Senza JavaScript, e nell'editor, è un ELENCO semplice (nome + mestieri), su blu.
      - Schermo largo: i NOMI attorno all'anello; passando (solo con il mouse), cliccando o con il tab si sceglie; la lancetta ruota fino alla voce
        con un piccolo rimbalzo; al centro «03 / 12», il nome grande e i mestieri. La prima voce è scelta all'apertura.
      - Telefono (sotto 900 px): QUADRANTE con i NUMERI 1–12 sull'anello, in bottoni tondi da 40 px, con 44 px da toccare (trasparenti, quello scelto arancio con il numero
        blu); al centro numero, nome e mestieri; si tocca un numero, si scorre col dito sul quadrante (sinistra/destra) o si usano le frecce sotto.
      - Arrivo: se la sezione non è già sullo schermo, l'anello si disegna e le voci compaiono in senso orario (classi «attesa» e «visto»).
      - La scritta «Tocca un numero o scorri» sparisce (dissolvenza, lo spazio resta) dopo la prima scelta fatta dal visitatore.
   3. «Categorie: movimenti»: Donne Impresa e Giovani Imprenditori, testo a sinistra, i due loghi su cartoncini bianchi a destra. Fondo chiaro.
   In fondo alla pagina l'invito «Servizio: vuoi saperne di più?» (servizi.css).

   Si appoggia a sezioni.css (.cs, etichette): li carica insieme functions.php, e l'editor (add_editor_style). Differenze dal modello, solo tecniche:
   - ogni voce è un gruppo .cd-item (nel modello un li): i ruoli di elenco, quadrante, lancetta, frecce e contenitore .cd-centro li aggiunge
     inc/categorie.php, i bottoni assets/js/categorie.js;
   - il .dentro del modello è il margine --bordo delle sezioni;
   - --colore-sezione del modello è --sez, che qui vale l'arancio anche nell'editor o se la pagina non è nel menu: la ruota è su blu e con il blu
     di riserva di .cs non si vedrebbe;
   - la freccia verso il sito di Confartigianato è una maschera SVG, perché il testo si scrive nell'editor. */
.cs.cat-intro,.cs.cd,.cs.mv{--sez:var(--colore-sezione, #f6a66a)}

/* ---------- Categorie: dodici ---------- */
.cat-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;padding:100px var(--bordo, 32px) 72px}
.cs .cat-dodici{position:relative;padding-bottom:18px;font-size:clamp(120px,15vw,210px);font-weight:300;line-height:.8;letter-spacing:-.05em;color:var(--blu)}
.cs .cat-dodici::after{content:'';position:absolute;left:6px;bottom:0;width:64px;height:4px;border-radius:2px;background:var(--sez)}
.cs .cat-frase{max-width:760px;font-size:clamp(28px,3vw,40px);font-weight:300;line-height:1.25;color:var(--blu);text-wrap:pretty}

/* ---------- Categorie: ruota delle dodici ore ---------- */
.cs .cat-scopri{margin-top:40px;font-size:20px;color:rgba(255,255,255,.75);text-align:center}
.cs .cat-scopri a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--sez);text-decoration-thickness:2px;text-underline-offset:4px}
.cs .cat-scopri a:focus-visible{outline-color:#fff}
.cs .cat-scopri a::after{content:'';display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-1px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat}
/* la ruota: meccanica */
.cd{padding:80px var(--bordo, 32px) 90px;background:radial-gradient(70% 60% at 50% 42%,#2d52ad 0,#1e3d8f 45%,#02205d 100%);color:#fff}
.cs .cd-lista{border-top:1px solid rgba(255,255,255,.2)}
.cs .cd-item{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.cs .cd-voce{margin:0 0 6px;font-size:28px;font-weight:300;color:#fff}
.cs .cd-num,.cs .cd-nome{display:none}
.cs .cd-mestieri{font-size:18px;line-height:1.5;color:rgba(255,255,255,.86)}
.cd-anello,.cd-lancetta{display:none}
.cd-frecce{display:none}
.cd.ruota .cd-ruota{--S:600px;--Ra:calc(var(--S) * .4167);--Rl:calc(var(--Ra) + 22px);position:relative;width:var(--S);height:var(--S);margin:0 auto;touch-action:pan-y}
.cd.ruota .cd-anello{display:block;position:absolute;left:0;top:0;width:var(--S);height:var(--S);overflow:visible}
.cd-anello .disegna{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.cd .a-anello{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5}
.cd .a-minuti{fill:rgba(255,255,255,.28)}
.cd .a-tacche line{stroke:var(--sez);stroke-width:2.5;stroke-linecap:round}
.cd.ruota .cd-lancetta{display:block;position:absolute;left:calc(var(--S) / 2);top:calc(var(--S) / 2);width:calc(var(--Ra) - 26px);height:3px;margin-top:-1.5px;border-radius:2px;transform-origin:0 50%;transform:rotate(calc(var(--sel,0) * 30deg - 90deg));background:linear-gradient(90deg,rgba(246,166,106,0) 0,rgba(246,166,106,.25) 40%,var(--sez) 100%);transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.cd.ruota .cd-ruota::after{content:'';position:absolute;left:calc(var(--S) / 2 - 5px);top:calc(var(--S) / 2 - 5px);width:10px;height:10px;border-radius:50%;background:var(--sez);box-shadow:0 0 0 4px rgba(246,166,106,.25)}
.cd.ruota .cd-lista{position:absolute;inset:0;border:0}
.cd.ruota .cd-item{position:absolute;left:0;top:0;padding:0;border:0;--a:calc(var(--i) * 30deg - 90deg)}
.cd.ruota .cd-voce{position:absolute;left:calc(var(--S) / 2 + cos(var(--a)) * var(--Rl));top:calc(var(--S) / 2 + sin(var(--a)) * var(--Rl));margin:0;white-space:nowrap;transform:translate(calc(-50% + cos(var(--a)) * 50%),calc(-50% + sin(var(--a)) * 50%));transition:opacity .5s ease calc(.4s + var(--i) * 60ms)}
.cd.ruota .cd-voce button{padding:6px 8px;border:0;border-radius:6px;background:none;font:500 19px/1.2 'Barlow Semi Condensed',system-ui,sans-serif;color:rgba(255,255,255,.62);cursor:pointer;transition:color .25s ease,background .25s ease,box-shadow .25s ease}
.cd-voce .cd-n{display:none}
.cd.ruota .cd-voce button:hover,.cd.ruota .attiva .cd-voce button{color:#fff}
.cd.ruota .attiva .cd-voce button{font-weight:600;box-shadow:inset 0 -2px 0 var(--sez)}
.cd.ruota .cd-voce button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cd.ruota .cd-centro{position:absolute;left:calc(var(--S) / 2);top:calc(var(--S) / 2);width:calc(var(--S) * .6);transform:translate(-50%,-44%);text-align:center;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .6s var(--entra),visibility 0s .45s}
.cd.ruota .attiva .cd-centro{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .45s ease .1s,transform .6s var(--entra) .1s,visibility 0s}
.cd.ruota .cd-num{display:block;font-size:13px;font-weight:600;letter-spacing:.24em;color:var(--sez)}
.cd.ruota .cd-nome{display:block;margin:10px 0 14px;font-size:46px;font-weight:300;line-height:1;color:#fff}
.cd.ruota .cd-mestieri{font-size:19px}
.cd.ruota.attesa:not(.visto) .disegna{stroke-dashoffset:1}
.cd.ruota.attesa:not(.visto) .cd-voce{opacity:0}

/* ---------- Categorie: movimenti ---------- */
.mv{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center;padding:100px var(--bordo, 32px);background:var(--carta, #f6f7fb)}
.cs .mv-testo .etichetta{margin-bottom:28px}
.cs .mv-frase{font-size:26px;font-weight:300;line-height:1.4;color:var(--inchiostro)}
.cs .mv-frase a{color:var(--blu);font-weight:600;text-decoration:underline;text-decoration-color:var(--sez);text-decoration-thickness:2px;text-underline-offset:4px}
.cs .mv-loghi{display:grid;gap:16px}
.cs .mv-logo{margin:0}
.cs .mv-logo img{display:block;width:100%;height:auto;box-sizing:border-box;padding:26px 34px;background:#fff;box-shadow:0 18px 40px -28px rgba(2,32,93,.45)}

/* ---------- Telefono ---------- */
@media (max-width:899px){
.cat-intro{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:64px;padding-bottom:48px}
.cd{padding-top:48px;padding-bottom:64px}
.cd.ruota .cd-ruota{--S:min(calc(100vw - 40px),380px)}
.cd.ruota .a-tacche{display:none}
.cd.ruota .cd-lancetta{width:calc(var(--Ra) - 22px)}
.cd.ruota .cd-voce{left:calc(var(--S) / 2 + cos(var(--a)) * var(--Ra));top:calc(var(--S) / 2 + sin(var(--a)) * var(--Ra));transform:translate(-50%,-50%)}
.cd.ruota .cd-voce .cd-t{display:none}
.cd.ruota .cd-voce .cd-n{display:block}
/* si vedono da 40 px e si toccano da 44: il bordo trasparente fa parte della zona da toccare, il fondo si ferma al suo interno */
.cd.ruota .cd-voce button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:50%;background:rgba(255,255,255,.08);background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);font-size:17px;font-weight:600;color:#fff}
.cd.ruota .cd-voce button:focus-visible{outline-offset:0}
.cd.ruota .attiva .cd-voce button{background:var(--sez);background-clip:padding-box;color:#02205d;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.cd.ruota .cd-centro{width:calc(var(--S) * .56)}
.cd.ruota .cd-num{font-size:12px}
.cd.ruota .cd-nome{margin:6px 0 10px;font-size:clamp(22px,6.4vw,30px)}
.cd.ruota .cd-mestieri{font-size:15px;line-height:1.4}
.cd.ruota .cd-frecce:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:380px;margin:14px auto 0}
.cd-frecce button{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.cd-frecce button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* la scritta sparisce con una dissolvenza dopo la prima scelta fatta dal visitatore; lo spazio resta, così la pagina non salta */
.cs .cd-suggerimento{font-size:14px;color:rgba(255,255,255,.7);transition:opacity .6s ease,visibility 0s .6s}
.cd-frecce.usata .cd-suggerimento{opacity:0;visibility:hidden}
.cs .cat-scopri{font-size:17px}
.cs .cat-scopri a{padding:12px 0}
.mv{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:72px;padding-bottom:72px}
.cs .mv-frase{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.cd-anello *,.cd-voce,.cd-centro,.cd-lancetta,.cd-suggerimento{transition:none !important}}