/* Confartigianato Agrigento — regole comuni a home e pagine interne.
   Pezzi del logo, piè di pagina (footer.fp) e pulsante «Chiama» sono quelli dei modelli (materiale/modello-home/index.html,
   materiale/modello-pagina/index.html). Il logo piccolo della barra delle pagine interne è in style.css. */

/* ---------- Carattere Barlow Semi Condensed, 300, 500 e 600, dal sito stesso (licenza SIL OFL: ../fonts/OFL.txt) ---------- */
/* Peso 300 (4 novembre 2026): le scritte grandi e sottili delle pagine interne. */
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:300;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-ext-300-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:300;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-300-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-ext-500-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-500-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;
src:url(../fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--blu:#1e3d8f}
/* Niente scorrimento orizzontale, in nessuna pagina (come nel modello). */
body{overflow-x:hidden;overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Pezzi del logo ----------
   --u = unità di misura del logo: 1 pixel del banner originale (898×341).
   Ogni pezzo è messo rispetto al centro del disco bianco: --dx/--dy in pixel del banner.
   --dym = posizione delle scritte sul telefono, centrate sotto il logo.
   Valori per i pezzi vettoriali (assets/logo/*.svg, 3 novembre 2026): riquadri stretti attorno al disegno. */
.pz{position:absolute;display:block;left:calc(50% + var(--dx) * var(--u));top:calc(var(--cy) + var(--dy) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.p-anello{--dx:-116.02;--dy:-95.25;--w:218.9;--h:189.05}
.p-disco{--dx:-46.02;--dy:-45.91;--w:93.33;--h:93.33}
.p-i{--dx:-32.02;--dy:-28.58;--w:9.52;--h:58.14}
.p-a{--dx:-16.36;--dy:-29.91;--w:53.33;--h:58.67}
.p-r1{--dx:129.31;--dy:-40.58;--w:116.33;--h:12.33;--dym:110}
.p-r2{--dx:110.98;--dy:-28.58;--w:152.67;--h:40;--dym:122}
.p-r3{--dx:116.64;--dy:12.09;--w:141.33;--h:8.67;--dym:162.67}
.p-r4{--dx:140.64;--dy:41.75;--w:93.67;--h:9.67;--dym:192.33}
.anello{display:block;width:100%;height:100%}

/* ---------- PIÈ DI PAGINA «il fondo della carta intestata» (scelto dall'utente il 4 novembre 2026, ore 19:47; riga in cima BLU, non a colori) ----------
   Su TUTTE le pagine, home compresa. Fondo carta #f8f9fc con una grana leggerissima. In cima una riga blu di 6 px che si allunga da sinistra.
   In basso a destra il marchio grandissimo IN RILIEVO A SECCO: bianco sul bianco, si vede solo per luce e ombra, e scorrendo la luce cambia direzione.
   A sinistra la «firma»: marchio (il cerchio si disegna come nella testata) + «Confartigianato / Imprese Agrigento» + «Dal 1945 al servizio delle imprese».
   A destra i dati in griglia con etichette piccole: Sede provinciale, Orari, Telefono (con il cellulare), E-mail (con la PEC).
   In fondo la DOPPIA RIGA delle carte intestate, poi C.F., Privacy, Cookie, Instagram e Facebook scritti per esteso (si aprono in una nuova scheda).
   L'arrivo parte quando il piè di pagina entra nello schermo (classi «attesa» e «visto» messe dallo script): si muovono SOLO la riga blu e il cerchio
   del marchio; nome, frase e dati sono subito visibili (giro sugli effetti del 5/11).
   assets/js/piede.js. Senza JavaScript o con «riduci movimento» tutto è già al suo posto. Variabili proprie (--fp-…), così funziona uguale anche nella home.
   Misure da rispettare (corrette nei modelli il 4 novembre 2026 alle 20:05):
   - overflow:clip: con hidden il piè di pagina diventerebbe il contenitore di scorrimento di view(), non si muoverebbe mai rispetto a se stesso
     e la luce del rilievo non cambierebbe scorrendo la pagina (hidden resta per i browser senza clip, che non hanno neanche view());
   - gli azzeramenti dei margini sono scritti con :where(), così non battono le classi: la frase sta 26 px sotto il nome (poi il filo e 22 px) e
     Instagram e Facebook sono spinti a destra (sotto i 900 px tornano a sinistra);
   - sul telefono cambiano solo i margini ai lati di .fp-dentro. */
.fp{--fp-blu:#1e3d8f;--fp-marchio:#02205d;--fp-carta:#f8f9fc;--fp-filo:rgba(30,61,143,.16);--fp-grigio:#5a6480;--fp-inchiostro:#1d2540;--fp-entra:cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden;overflow:clip;isolation:isolate;background:var(--fp-carta);color:var(--fp-inchiostro);font-family:'Barlow Semi Condensed',system-ui,sans-serif;font-weight:500;line-height:1.5}
.fp::before{content:'';position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.36 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05;pointer-events:none}
:where(.fp) ul{list-style:none;margin:0;padding:0}
:where(.fp) :is(p,dl,dd){margin:0}
.fp a{color:var(--fp-blu);text-decoration:none}
.fp a:focus-visible{outline:2px solid var(--fp-blu);outline-offset:3px;border-radius:2px}
.fp-dentro{max-width:1120px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.fp-nastro{height:6px;background:var(--fp-blu);transform-origin:left;transition:transform 1s var(--fp-entra)}
.fp-rilievo{position:absolute;z-index:-1;right:-70px;bottom:-190px;width:600px;height:600px;color:var(--fp-carta);filter:drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px 2px 1.5px rgba(2,32,93,.16));pointer-events:none}
.fp-rilievo .marchio{display:block;width:100%;height:100%}
.fp-alto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding-top:88px;padding-bottom:72px}
.fp-nome{display:flex;align-items:center;gap:22px;font-size:30px;font-weight:600;line-height:1.08;color:var(--fp-marchio)}
.fp-nome .marchio{display:block;flex:none;width:76px;height:76px}
.fp .m-anello{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.fp-motto{max-width:15em;margin-top:26px;padding-top:22px;border-top:1px solid var(--fp-filo);font-size:24px;font-weight:300;line-height:1.25;color:var(--fp-blu)}
.fp-dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px}
.fp-dati div{padding-top:14px;border-top:1px solid var(--fp-filo)}
.fp-dati dt{margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fp-grigio)}
.fp-dati dd{font-size:18px;line-height:1.55;overflow-wrap:anywhere}
.fp-dati a{padding:2px 0;background:linear-gradient(currentColor,currentColor) left calc(100% - 2px) / 0 1px no-repeat;transition:background-size .4s var(--fp-entra)}
.fp-dati a:hover,.fp-dati a:focus-visible{background-size:100% 1px}
.fp-basso{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px;padding-top:26px;padding-bottom:30px;border-top:2px solid var(--fp-marchio);box-shadow:inset 0 3px 0 var(--fp-carta),inset 0 4px 0 var(--fp-marchio);font-size:15px;color:var(--fp-grigio)}
.fp-cf{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fp-legale,.fp-social{display:flex;flex-wrap:wrap;gap:6px 24px}
.fp-social{margin-left:auto}
.fp-legale a{padding:3px 0;text-decoration:underline;text-decoration-color:rgba(30,61,143,.35);text-underline-offset:3px}
.fp-social a{display:inline-flex;align-items:center;margin:-2px 0;padding:2px 0;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.fp-est{flex:none;margin-left:6px;transition:transform .3s var(--fp-entra)}
.fp-social a:hover .fp-est,.fp-social a:focus-visible .fp-est{transform:translate(2px,-2px)}
.fp.attesa:not(.visto) .fp-nastro{transform:scaleX(0)}
.fp.attesa:not(.visto) .m-anello{stroke-dashoffset:1}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
.fp-rilievo{animation:fp-luce linear both;animation-timeline:view();animation-range:entry 0% exit 0%}
}}
@keyframes fp-luce{
from{filter:drop-shadow(-2.5px -2px 0 #fff) drop-shadow(2.5px 2.5px 2px rgba(2,32,93,.18));transform:rotate(-8deg)}
to{filter:drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2.5px 2px rgba(2,32,93,.18));transform:rotate(0)}
}
@media (max-width:900px){
.fp-alto{grid-template-columns:minmax(0,1fr);gap:44px;padding-top:64px;padding-bottom:52px}
.fp-rilievo{width:380px;height:380px;right:-90px;bottom:-60px}
.fp-social{margin-left:0}
.fp-basso{padding-bottom:160px}
}
/* Zone da toccare di almeno 44 × 44 px sul telefono (24 × 24 sul computer), senza cambiare l'aspetto: nei link in riga il padding non sposta niente,
   negli altri lo compensano i margini negativi. */
@media (max-width:720px){
.fp-dentro{padding-left:20px;padding-right:20px}
.fp-dati a{padding:12px 0;background-position:left calc(100% - 12px)}
.fp-legale a{margin:0 -6px;padding:13px 6px}
.fp-social a{margin:-12px -6px;padding:12px 6px}
}
@media (max-width:560px){
.fp-dati{grid-template-columns:minmax(0,1fr);gap:26px}
.fp-nome{font-size:24px;gap:16px}
.fp-nome .marchio{width:60px;height:60px}
.fp-motto{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.fp-nastro,.fp-nome span,.fp-motto,.fp-dati div,.fp .m-anello{transition:none}}

/* ---------- Pulsante «Chiama»: in tutte le pagine, in basso a destra, anche sopra il menu aperto (dentro .azioni, con «Scrivici») ---------- */
.chiama{position:fixed;right:20px;bottom:20px;z-index:30;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--blu);color:#fff;text-decoration:none;font:600 17px/1 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 0 0 2px #fff,0 6px 18px rgba(14,30,80,.35);animation:affiora .5s ease-out 1.2s both}
.chiama:hover{background:#163276}
.chiama:focus-visible{outline:3px solid var(--blu);outline-offset:5px}

/* ---------- «Scrivici» accanto a «Chiama» (deciso dall'utente il 4 novembre 2026): sempre a portata, in TUTTO il sito ----------
   I due pulsanti stanno insieme in basso a destra (contenitore .azioni, fisso): «Scrivici» a sinistra, «Chiama» a destra.
   «Scrivici» porta alla pagina Contatti, che si apre DALL'ALTO, senza saltare al modulo (decisione dell'utente del 4 novembre 2026,
   17:27: i link non devono aprire una pagina già in fondo); nella pagina Contatti, invece, porta giù al modulo (#contattaci).
   È bianco con il bordo blu, così «Chiama» resta il pulsante principale e tutti e due si vedono sia sul bianco sia sul blu. Sul telefono stanno uno sopra l'altro
   («Scrivici» sopra), allineati a destra, così non toccano la Sicilia della home in basso a sinistra.
   Nella pagina Contatti, quando il modulo è sullo schermo, «Scrivici» si nasconde (non serve); il clic porta al modulo e mette
   il cursore nel primo campo. Se nel sito non c'è una pagina Contatti, «Scrivici» non si mostra. */
.azioni{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:10px}
.azioni .chiama{position:relative;top:auto;right:auto;bottom:auto}
.scrivi{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;box-sizing:border-box;border-radius:999px;background:#fff;color:#1e3d8f;text-decoration:none;font:600 17px/1 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.04em;box-shadow:inset 0 0 0 1.5px rgba(30,61,143,.45),0 6px 18px rgba(14,30,80,.18);transition:transform .25s ease,box-shadow .25s ease,opacity .3s ease}
.scrivi svg{flex:none}
.scrivi:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #1e3d8f,0 10px 24px rgba(14,30,80,.22)}
.scrivi:focus-visible{outline:3px solid #1e3d8f;outline-offset:5px}
.scrivi.nascosto{opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
@media (max-width:720px){
.azioni{right:16px;bottom:16px;flex-direction:column;align-items:flex-end;gap:8px}
.scrivi{min-height:56px}
}
@media (prefers-reduced-motion:reduce){.scrivi{transition:none}}

.chiama svg{flex:none;transform-origin:50% 50%;animation:squillo 4s ease-in-out 1.8s 2}
.chiama::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:squillo-alone 4s ease-out 1.8s 2}
/* «affiora» serve alla home (riga #NoiConfartigianato) e a «Chiama» in tutte le pagine. */
@keyframes affiora{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes squillo{0%,16%,100%{transform:rotate(0)}2%,6%,10%{transform:rotate(-15deg)}4%,8%,12%{transform:rotate(15deg)}14%{transform:rotate(-6deg)}}
@keyframes squillo-alone{0%{box-shadow:0 0 0 0 rgba(30,61,143,.55)}40%,100%{box-shadow:0 0 0 16px rgba(30,61,143,0)}}

/* ---------- Telefono: «Chiama» (il piè di pagina ha in fondo 160 px perché «Scrivici» e «Chiama» non coprano niente: .fp-basso) ---------- */
@media (max-width:720px){
.chiama{right:16px;bottom:16px;min-height:56px}
}

/* ---------- Animazioni spente sul dispositivo: «Chiama» compare subito e non squilla ---------- */
@media (prefers-reduced-motion:reduce){
.chiama,.chiama svg,.chiama::after{animation:none}
}