/* Confartigianato Agrigento — la pagina «Vantaggi e convenzioni» (5 novembre 2026, «i manifesti, spinti al massimo»; quinta voce del «Menu del logo», colore #ED6AA4).
   Modello: materiale/modello-pagina/vantaggi.html, commento «PAGINA «VANTAGGI E CONVENZIONI»», stessi numeri. Pattern della categoria «Vantaggi e convenzioni» (inc/vantaggi.php):
   1. «Vantaggi: perché»: tre pannelli (blu, rosa, bianco); la parola gigante è solo contorno e si riempie da sinistra quando il pannello entra (classe «dentro-vista»).
   2. «Vantaggi: nastro dei marchi»: due file in versi opposti, su blu notte; si muovono SOLO mentre si scorre. Decorativo.
   3. «Vantaggi: come associarsi»: titolo grandissimo, «firmando una delega» evidenziato, foglio di «Delega» dove la firma si disegna (classi «attesa» e «firmata»).
   4. «Vantaggi: vetrina»: la «a» grandissima che ruota scorrendo, i manifesti con la cifra che conta, inclinazione e luce col mouse, il riquadro Stellantis con lo zoom lento, la nota.
   5. «Vantaggi: la guida»: il libretto che si apre un poco, al passaggio o con il tab.
   6. «Vantaggi: proponi una convenzione»: il tagliando con le forbici che corrono lungo il bordo.
   In fondo alla pagina l'invito «Servizio: vuoi saperne di più?» (servizi.css).
   Misure del modello (commento «MISURE»): la parola gigante è calcolata perché «Convenzioni», la più lunga, stia dentro il pannello a ogni larghezza; la cifra dei manifesti arriva
   al massimo a 100 px, così «31,5%» non tocca il bordo; il manifesto «grande» ha la sua misura.

   Si appoggia a sezioni.css (.cs): li carica insieme functions.php, e l'editor (add_editor_style). Con «riduci movimento» non si muove niente; senza JavaScript tutto è al suo posto
   e il valore delle cifre è già scritto. Differenze dal modello:
   - overflow:clip al posto di hidden, ovunque: con hidden ogni sezione diventa il contenitore di scorrimento di view() e nastro, «a» e zoom resterebbero fermi;
   - il .dentro del modello è il margine --bordo delle sezioni; guida e tagliando, che nel modello stanno dentro la vetrina, sono pattern a sé, con lo stesso blu notte:
     gli spazi tra loro sono quelli del modello (80 e 60 px) e 130 px sotto l'ultima, anche se se ne toglie una (:has);
   - --colore-sezione del modello è --sez, che qui vale il rosa anche nell'editor o se la pagina non è nel menu;
   - i colori di pannelli e manifesti vengono dalla posizione, così chi ne aggiunge uno non sceglie niente: i manifesti con lo stesso giro di otto del modello, il riquadro con
     l'immagine non conta. Un browser senza :nth-child(… of …) li mostra tutti blu;
   - «fino al» è un paragrafo a sé (.mx-sopra), per scriverlo nell'editor; il margine di -2 px con lo spazio di 10 del manifesto fa gli 8 px del modello;
   - pulsanti e frecce: blocchi Pulsante e maschere SVG, perché il testo si scrive nell'editor;
   - in più rispetto al modello: su schermi stretti e con «riduci movimento» il libretto resta chiuso anche al tocco e le forbici ferme; la luce solo col mouse;
     il contorno del pulsante del tagliando con il tab è bianco, sul blu notte. */
.cs.mx-perche,.cs.mx-nastro,.cs.mx-come,.cs.mx-vetrina,.cs.mx-sez-guida,.cs.mx-sez-proponi{--sez:var(--colore-sezione, #ed6aa4);--rosa-scuro:#a82e64}

/* ---------- 1 · Perché: le parole giganti si riempiono di colore mentre entrano ---------- */
.cs .mx-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs .mx-p{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;min-height:520px;padding:60px 44px;box-sizing:border-box;overflow:clip}
.cs .mx-p:nth-child(3n+1){background:var(--blu);color:#fff;--pieno:#fff}
.cs .mx-p:nth-child(3n+2){background:var(--sez);color:#02205d;--pieno:#02205d}
.cs .mx-p:nth-child(3n){background:#fff;color:var(--blu);--pieno:var(--blu);box-shadow:inset 0 -1px 0 var(--filo)}
.cs .mx-parola{position:relative;font-size:clamp(48px,calc(7.3vw - 20px),120px);font-weight:600;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--pieno)}
.mx-parola::after{content:attr(data-parola);position:absolute;left:0;top:0;color:var(--pieno);-webkit-text-stroke:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.mx-p.dentro-vista .mx-parola::after,.no-js .mx-parola::after{clip-path:inset(0 0 0 0)}
.mx-p:nth-child(3n+2) .mx-parola::after{transition-delay:.25s}
.mx-p:nth-child(3n) .mx-parola::after{transition-delay:.5s}
.cs .mx-frase{max-width:22em;font-size:22px;line-height:1.4}

/* ---------- 2 · Il nastro dei marchi, legato allo scorrimento ---------- */
.cs.mx-nastro{overflow:clip;padding:26px 0;background:#02205d;color:#fff}
.mx-riga{display:flex;gap:28px;width:max-content;font-size:clamp(28px,3.2vw,46px);font-weight:300;line-height:1.3;white-space:nowrap;will-change:transform}
.mx-riga .sep{color:var(--sez)}
.mx-riga.r2{margin-top:6px;color:rgba(255,255,255,.4);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:.2em;text-transform:uppercase}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
:where(.testo) .mx-riga.r1{animation:nastro-sx linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
:where(.testo) .mx-riga.r2{animation:nastro-dx linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}}
@keyframes nastro-sx{from{transform:translateX(0)}to{transform:translateX(-35%)}}
@keyframes nastro-dx{from{transform:translateX(-35%)}to{transform:translateX(0)}}

/* ---------- 3 · Come associarsi e la delega che si firma ---------- */
.cs.mx-come{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start;padding:120px var(--bordo, 32px)}
.cs .mx-come-tit{font-size:clamp(52px,6.4vw,104px);font-weight:300;line-height:.9;letter-spacing:-.03em;color:var(--blu)}
.cs .mx-come-testo{margin:0 0 40px;font-size:clamp(24px,2.4vw,32px);font-weight:300;line-height:1.4}
.cs .mx-come-testo mark{padding:0 .1em;background:linear-gradient(transparent 58%,var(--sez) 58%);color:inherit;font-weight:500}
.cs .mx-come-testo a{color:inherit}
.cs .mx-delega{position:relative;max-width:520px;padding:26px 30px 30px;border-radius:6px;background:#fff;box-shadow:0 30px 60px -36px rgba(2,32,93,.5),0 1px 0 var(--filo);transform:rotate(-1.5deg)}
.cs .mx-del-et{display:block;margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio)}
.mx-del-righe{display:grid;gap:10px;margin-bottom:18px}
.mx-del-righe i{display:block;height:8px;border-radius:4px;background:#eef0f7}
.mx-del-righe i:nth-child(2){width:86%}
.mx-del-righe i:nth-child(3){width:64%}
.mx-firma{display:block;width:240px;height:auto;margin-left:auto}
.mx-firma path{fill:none;stroke:#02205d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.3,1) .3s}
.mx-come.attesa:not(.firmata) .mx-firma path{stroke-dashoffset:1}
.mx-del-linea{display:block;height:1.5px;margin-top:2px;background:var(--blu)}

/* ---------- 4 · La vetrina ---------- */
.cs.mx-vetrina{position:relative;overflow:clip;padding:120px var(--bordo, 32px) 130px;background:#02205d;color:#fff}
.cs.mx-vetrina:has(+ .mx-sez-guida),.cs.mx-vetrina:has(+ .mx-sez-proponi){padding-bottom:0}
.cs.mx-vetrina > *{position:relative}
.cs.mx-vetrina > .mx-a-fondo{position:absolute;right:-180px;top:-120px;width:760px;height:760px;color:rgba(255,255,255,.04);pointer-events:none}
.mx-a-fondo .marchio{width:100%;height:100%}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){:where(.testo) .mx-a-fondo{animation:gira-a linear both;animation-timeline:view()}}}
@keyframes gira-a{from{transform:rotate(-40deg)}to{transform:rotate(20deg)}}
.cs .mx-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:44px}
.cs .mx-tit{font-size:clamp(52px,6.4vw,100px);font-weight:300;line-height:.9;letter-spacing:-.03em}
.cs .mx-testa p{max-width:420px;font-size:19px;line-height:1.45;color:rgba(255,255,255,.8)}
.cs .mx-muro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(270px,auto);grid-auto-flow:dense;gap:14px;perspective:1200px}
.cs .mx-poster{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border-radius:6px;overflow:clip;background:var(--blu);color:#fff;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .35s var(--entra),box-shadow .35s ease}
/* i colori, da soli: blu, rosa, carta, bianco, poi rosa, blu, bianco, carta, come nel modello */
.cs .mx-poster:nth-child(8n+1 of .mx-poster:not(.mx-foto)),.cs .mx-poster:nth-child(8n+6 of .mx-poster:not(.mx-foto)){background:var(--blu);color:#fff}
.cs .mx-poster:nth-child(8n+2 of .mx-poster:not(.mx-foto)),.cs .mx-poster:nth-child(8n+5 of .mx-poster:not(.mx-foto)){background:var(--sez);color:#02205d}
.cs .mx-poster:nth-child(8n+3 of .mx-poster:not(.mx-foto)),.cs .mx-poster:nth-child(8n+8 of .mx-poster:not(.mx-foto)){background:#f6f7fb;color:var(--blu)}
.cs .mx-poster:nth-child(8n+4 of .mx-poster:not(.mx-foto)),.cs .mx-poster:nth-child(8n+7 of .mx-poster:not(.mx-foto)){background:#fff;color:var(--blu)}
.mx-luce{position:absolute;inset:0;background:radial-gradient(240px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}
@media (hover:hover){
.cs .mx-poster:hover{box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.mx-poster:hover .mx-luce{opacity:1}
}
.cs .mx-grande{grid-column:span 2;grid-row:span 2}
.cs .mx-gruppo{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.cs .mx-sopra{margin-bottom:-2px;font-size:15px;font-weight:600;line-height:.85;letter-spacing:.06em;opacity:.8}
/* sui manifesti rosa niente opacità sui testi piccoli: il contrasto resta sopra 4,5 */
.cs .mx-poster:nth-child(8n+2 of .mx-poster:not(.mx-foto)) :is(.mx-gruppo,.mx-sopra,.mx-sotto p),.cs .mx-poster:nth-child(8n+5 of .mx-poster:not(.mx-foto)) :is(.mx-gruppo,.mx-sopra,.mx-sotto p){opacity:1}
.cs .mx-cifra{font-size:clamp(72px,7.4vw,100px);font-weight:300;line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cs .mx-cifra b{font-weight:300}
.cs .mx-grande .mx-cifra{font-size:clamp(140px,17vw,280px)}
.cs .mx-cifra.senza{font-size:clamp(38px,3.6vw,56px);line-height:1}
.cs .mx-sotto{margin-top:auto}
.cs .mx-sotto h3{margin:0 0 6px;font-size:19px;font-weight:600;line-height:1.2}
.cs .mx-sotto p{font-size:16px;line-height:1.45;opacity:.9}
.cs .mx-grande .mx-sotto h3{font-size:28px}
.cs .mx-grande .mx-sotto p{font-size:20px}
/* il riquadro con i marchi Stellantis */
.cs .mx-foto{grid-column:span 2;padding:0;background:#143b7f}
.cs .mx-foto-img{display:flex;flex-direction:column;height:100%;margin:0}
.mx-foto-zoom{flex:1;overflow:clip}
.cs .mx-foto img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){:where(.testo) .mx-foto img{animation:zoom-lento linear both;animation-timeline:view()}}}
@keyframes zoom-lento{from{transform:scale(1.18)}to{transform:scale(1)}}
.cs .mx-foto figcaption{margin:0;padding:10px 18px 14px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.cs .mx-nota{margin-top:18px;font-size:16px;color:rgba(255,255,255,.7)}

/* ---------- 5 · La guida come un libretto che si apre ---------- */
.cs.mx-sez-guida{padding:120px var(--bordo, 32px) 130px;background:#02205d;color:#fff}
.cs.mx-vetrina + .mx-sez-guida{padding-top:80px}
.cs.mx-sez-guida:has(+ .mx-sez-proponi){padding-bottom:0}
.cs .mx-guida{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:center;padding:48px 52px;border-radius:10px;background:#fff;color:var(--blu)}
.cs .mx-libro{position:relative;aspect-ratio:497/702;perspective:1400px}
.cs .mx-interno,.cs .mx-copertina{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:3px}
.cs .mx-libro img{display:block;width:100%;height:100%;border-radius:3px;object-fit:cover}
.cs .mx-interno{box-shadow:0 30px 50px -26px rgba(2,32,93,.55)}
.mx-pagine{position:absolute;inset:3px -6px -6px 3px;border-radius:3px;background:repeating-linear-gradient(90deg,#fff 0 2px,#e4e7f0 2px 3px);z-index:-1}
.cs .mx-copertina{transform-origin:left center;transform:rotateY(-14deg);box-shadow:8px 0 18px -10px rgba(0,0,0,.35);transition:transform .9s cubic-bezier(.3,1.2,.4,1)}
.cs .mx-guida-et{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rosa-scuro)}
.cs .mx-guida h3{margin:0 0 12px;font-size:clamp(34px,3.4vw,52px);font-weight:300;line-height:1.02}
.cs .mx-guida-meta{margin:0 0 26px;font-size:19px;line-height:1.45;color:var(--inchiostro)}
.cs .mx-azioni{margin:0}
.cs .mx-scarica .wp-block-button__link{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 28px;border:0;border-radius:999px;background:var(--blu);color:#fff;font-size:17px;font-weight:600;line-height:1;letter-spacing:.06em;text-decoration:none;transition:transform .25s var(--entra),box-shadow .25s ease}
.cs .mx-scarica .wp-block-button__link::before{content:'';flex:none;width:20px;height:20px;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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / 20px 20px 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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat}
.cs .mx-scarica .wp-block-button__link:focus-visible{outline:3px solid var(--blu);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
.cs .mx-scarica .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(2,32,93,.7)}
}

/* ---------- 6 · Proponi: il tagliando con le forbici che corrono lungo il bordo ---------- */
.cs.mx-sez-proponi{padding:120px var(--bordo, 32px) 130px;background:#02205d;color:#fff}
.cs.mx-vetrina + .mx-sez-proponi,.cs.mx-sez-guida + .mx-sez-proponi{padding-top:60px}
.cs .mx-proponi{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:40px 44px;border:2px dashed var(--sez);border-radius:10px}
.cs .mx-proponi p{max-width:640px;font-size:26px;font-weight:300;line-height:1.4}
.forbici{position:absolute;left:30px;top:-16px;padding:0 6px;background:#02205d;color:var(--sez);transition:left 1.6s cubic-bezier(.6,0,.3,1)}
.cs .mx-bot .wp-block-button__link{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 28px;border:0;border-radius:999px;background:var(--sez);color:#02205d;font-size:17px;font-weight:600;line-height:1;letter-spacing:.06em;text-decoration:none}
.cs .mx-bot .wp-block-button__link::after{content:'';flex:none;width:22px;height:22px;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='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px 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='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px no-repeat}
.cs .mx-bot .wp-block-button__link:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* ---------- Il libretto che si apre e le forbici che corrono: solo su schermi larghi e con il movimento acceso ---------- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
:where(.testo) .mx-guida:hover .mx-copertina,:where(.testo) .mx-guida:focus-within .mx-copertina{transform:rotateY(-62deg)}
}
@media (prefers-reduced-motion:no-preference){
.mx-proponi:hover .forbici{left:calc(100% - 64px)}
}

/* ---------- Telefono ---------- */
@media (max-width:900px){
.cs .mx-tre,.cs.mx-come{grid-template-columns:minmax(0,1fr);gap:28px}
.cs .mx-p{min-height:300px;padding:44px 24px}
.cs .mx-parola{font-size:clamp(56px,15vw,110px)}
.cs .mx-muro{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs .mx-guida{grid-template-columns:150px minmax(0,1fr);gap:26px;padding:28px 24px}
.cs .mx-copertina{transform:none}
}
@media (max-width:560px){
.cs .mx-muro{grid-template-columns:minmax(0,1fr)}
.cs .mx-grande,.cs .mx-foto{grid-column:auto;grid-row:auto}
.cs .mx-guida{grid-template-columns:minmax(0,1fr)}
.cs .mx-libro{max-width:170px}
}

/* ---------- Riduci movimento: niente si muove e tutto è subito leggibile ---------- */
@media (prefers-reduced-motion:reduce){
.mx-parola::after{clip-path:inset(0 0 0 0);transition:none}
.mx-firma path,.cs .mx-poster,.mx-luce,.cs .mx-copertina,.forbici,.cs .mx-scarica .wp-block-button__link{transition:none}
}