/* Layout: sito civico a sezioni impilate; pattern PIANIGA INSIEME solo in testata e piè di pagina,
   card ad angoli vivi con ombra piena azzurra, contenuti in colonna max 1120 px.
   Scelta deliberata a tema unico chiaro: è l'identità della lista (carta, nero, arancio, azzurro). */
:root{
  --nero:#111111; --bianco:#FFFFFF; --azzurro:#1BB8DB; --arancio:#F98C2E; --cielo:#E8F8FB;
  --evid:#FFD7B0; --grigio:#5A646A; --linea:#D5DCDF; --carta:#F4F7F8;
  --verde:#2EA345; --rosso:#D72D54; --petrolio:#034D5E;
  --font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--nero);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.pattern{background:var(--bianco) url("/img/pattern_tassello.svg") repeat;background-size:925px 418px;background-position:-60px -20px}

/* elementi del sistema */
.tag{display:inline-block;font-weight:700;text-transform:uppercase;font-size:13px;line-height:1;padding:7px 9px 6px;background:var(--nero);color:var(--bianco);letter-spacing:.03em;white-space:nowrap}
.tag--bordo{background:var(--bianco);color:var(--nero);box-shadow:inset 0 0 0 2px var(--nero)}
.tag--ast{background:var(--arancio);color:var(--nero)} .tag--fav{background:var(--verde);color:var(--nero)} .tag--con{background:var(--rosso);color:var(--bianco)}
.tag--az{background:var(--azzurro);color:var(--nero)}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.box{display:block;width:fit-content;background:var(--nero);color:var(--bianco);font-weight:700;line-height:1.16;padding:0 .2em;white-space:nowrap;outline:1px solid transparent}
.boxes{display:flex;flex-direction:column;align-items:flex-start}
.boxes .box+.box{margin-top:-.05em}
.boxes .box:nth-child(odd){transform:rotate(-1.6deg)} .boxes .box:nth-child(even){transform:rotate(1.3deg)}
.sott{position:relative;z-index:0;white-space:nowrap}
.sott::after{content:"";position:absolute;z-index:-1;left:-.1em;right:-.1em;bottom:-.02em;height:.38em;background:url("/img/pennellata_arancio_lunga.svg") no-repeat center/100% 100%}
.num{position:relative;z-index:0;display:inline-block;font-weight:700;line-height:.9;padding-right:.05em}
.num::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.1em;bottom:-.05em;height:.27em;background:url("/img/pennellata_arancio_corta.svg") no-repeat center/100% 100%}
mark{background:var(--evid);color:inherit;padding:0 .08em}
.card{background:var(--bianco);border:3px solid var(--nero);box-shadow:8px 8px 0 var(--azzurro)}
.riquadro{position:relative;background:var(--bianco);border:3px solid var(--nero);box-shadow:8px 8px 0 var(--azzurro);padding:22px 20px 16px;margin:18px 8px 8px 0;font-weight:500}
.riquadro>.tag{position:absolute;top:0;left:14px;transform:translateY(-50%);font-size:11px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--font);text-decoration:none;padding:13px 18px;background:var(--nero);color:var(--bianco);border:0;cursor:pointer}
.btn--bordo{background:var(--bianco);color:var(--nero);box-shadow:inset 0 0 0 2px var(--nero)}
.btn:hover{background:var(--petrolio)} .btn--bordo:hover{background:var(--cielo);color:var(--nero)}

/* testata */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bianco);border-bottom:3px solid var(--nero)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bianco)}
.barra .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;line-height:1.05}
.marchio img{width:46px}
.menu{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.menu a{font-weight:600;font-size:14px;text-decoration:none;padding:8px 10px}
.menu a:hover{background:var(--cielo)}
.menu a.attivo{background:var(--nero);color:var(--bianco)}
.apri{display:none;margin-left:auto;font:700 14px var(--font);background:var(--nero);color:var(--bianco);border:0;padding:10px 14px;cursor:pointer}
@media (max-width:900px){
  .apri{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bianco);border-bottom:3px solid var(--nero);flex-direction:column;padding:8px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px))}
  .menu.aperto{display:flex}
  .menu a{font-size:17px;padding:12px 6px}
}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--nero)}
.hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;padding-block:72px 80px}
.hero .boxes .box{font-size:clamp(46px,8vw,104px)}
.hero p.lead{font-size:clamp(18px,2.2vw,22px);font-weight:500;max-width:34ch;margin:34px 0 26px}
.hero .azioni{display:flex;gap:12px;flex-wrap:wrap}
.hero .logo{width:min(320px,100%);justify-self:center}
.scr{position:absolute;pointer-events:none}
@media (max-width:760px){.scr-basso{display:none}.hero .wrap{grid-template-columns:1fr;padding-block:48px 56px}.hero .logo{width:180px;justify-self:start;order:-1}}

/* sezioni */
section.sez{padding-block:80px;scroll-margin-top:70px}
section.sez.cielo{background:var(--cielo);border-block:3px solid var(--nero)}
.titsez{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.titsez h2{margin:0;font-size:clamp(32px,5vw,52px);line-height:1.05;text-wrap:balance}
.intro{max-width:62ch;color:var(--grigio);margin:0 0 36px;font-size:18px}

/* pillole */
/* caroselli Instagram incorporati */
.caroselli{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;min-width:0;overflow-anchor:none}
.caroselli *{overflow-anchor:none}
.ig{width:100%;max-width:480px;min-width:0;background:var(--bianco);border:3px solid var(--nero);box-shadow:8px 8px 0 var(--azzurro)}
.ig .instagram-media,.ig iframe{margin:0!important;min-width:0!important;width:100%!important;max-width:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.ig blockquote.instagram-media{padding:40px 20px;text-align:center;font-weight:600}
/* archivio pillole */
.archivio{margin:0 0 34px;border-block:3px solid var(--nero);padding:18px 0 8px}
.archivio h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.anno{margin-bottom:10px}
.anno summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:2px 0}
.anno summary::-webkit-details-marker{display:none}
.anno summary .lbl{font-family:var(--cond);font-style:italic;font-weight:900;font-size:26px;line-height:1}
.anno summary .cont{font-size:13px;font-weight:600;color:var(--grigio)}
.anno summary::after{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;font-weight:700;font-size:18px;line-height:1;background:var(--nero);color:var(--bianco)}
.anno[open] summary::after{content:"−"}
.anno summary:hover .lbl{text-decoration:underline;text-decoration-color:var(--arancio);text-decoration-thickness:3px}
.anno .date{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 6px}
.pil-cta{margin-top:34px;text-align:center}
.anno button{font:600 14px var(--font);padding:8px 12px;background:var(--bianco);color:var(--nero);border:0;box-shadow:inset 0 0 0 2px var(--nero);cursor:pointer}
.anno button:hover{background:var(--cielo)}
.anno button[aria-pressed="true"]{background:var(--nero);color:var(--bianco)}

/* programma */
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filtri button{font:600 14px var(--font);padding:8px 12px;background:var(--bianco);color:var(--nero);border:0;box-shadow:inset 0 0 0 2px var(--nero);cursor:pointer}
.filtri button[aria-pressed="true"]{background:var(--nero);color:var(--bianco)}
.prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.voce{padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.voce img{width:84px;height:84px}
.voce h3{margin:4px 0 0;font-size:19px;line-height:1.25}
.voce p{margin:0;font-size:15px}
.voce .tags{margin-top:auto;padding-top:8px}
.voce[hidden]{display:none}
@media (max-width:960px){.prog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.prog{grid-template-columns:1fr}}
.pdf{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* chi siamo */
.chi{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start}
.foto{aspect-ratio:4/5;background:#C9D3D6 repeating-linear-gradient(45deg,#BAC6CA 0 8px,transparent 8px 30px);display:grid;place-items:center;text-align:center;color:#46535A;font-weight:600;border:3px solid var(--nero);box-shadow:12px 12px 0 var(--azzurro)}
.chi h3{font-size:30px;margin:14px 0 6px;line-height:1.1}
.chi .ruolo{margin-bottom:18px}
.chi p{max-width:62ch}
.priorita{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.squadra{margin-top:40px}
@media (max-width:860px){.chi{grid-template-columns:1fr}.foto{max-width:340px}}

/* valori */
.valori{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:3px solid var(--nero);background:var(--bianco)}
.valore{padding:22px 20px;border-right:3px solid var(--nero);border-bottom:3px solid var(--nero);min-width:0}
.valore:nth-child(4n){border-right:0}
.valore:nth-last-child(-n+4){border-bottom:0}
.valore h3{margin:0 0 4px;font-size:18px}
.valore p{margin:0;font-size:14.5px;color:var(--grigio)}
@media (max-width:860px){.valori{grid-template-columns:1fr 1fr}.valore{border-right:3px solid var(--nero)!important;border-bottom:3px solid var(--nero)!important}.valore:nth-child(2n){border-right:0!important}.valore:nth-last-child(-n+2){border-bottom:0!important}}
@media (max-width:520px){.valori{grid-template-columns:1fr}.valore{border-right:0!important;border-bottom:3px solid var(--nero)!important}.valore:last-child{border-bottom:0!important}}

/* incontri */
.incontri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.incontro{padding:20px;display:flex;flex-direction:column;gap:10px}
.incontro .data{font-family:var(--cond);font-style:italic;font-weight:900;font-size:44px;line-height:1}
.incontro h3{margin:0;font-size:19px}
.incontro p{margin:0;font-size:15px;color:var(--grigio)}
@media (max-width:860px){.incontri{grid-template-columns:1fr}}

/* contatti */
.contatti{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.dati dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:baseline}
.dati dt{margin:0}
.dati dd{margin:0;font-weight:600;font-size:18px;overflow-wrap:anywhere}
.copia{font:600 12px var(--font);margin-left:8px;padding:4px 8px;background:var(--arancio);color:var(--nero);border:0;cursor:pointer;vertical-align:middle}
form.modulo{padding:24px;display:grid;gap:14px}
form.modulo label{font-weight:600;font-size:14px;display:grid;gap:6px}
form.modulo input,form.modulo select,form.modulo textarea{font:400 16px var(--font);padding:11px 12px;border:2px solid var(--nero);background:var(--bianco);color:var(--nero);border-radius:0;width:100%}
form.modulo textarea{min-height:120px;resize:vertical}
.esito{font-weight:600;margin:0}
@media (max-width:860px){.contatti{grid-template-columns:1fr}}

/* piede */
footer{border-top:3px solid var(--nero)}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-block:40px}
footer img{width:110px}
footer p{margin:0;font-size:14px}
footer .soc{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
.nota-prot{background:var(--nero);color:var(--bianco);font-size:13px;text-align:center;padding:8px 16px}
.nota-prot b{color:var(--arancio)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== ottimizzazione smartphone ===== */
@media (max-width:620px){
  body{font-size:16px}
  section.sez{padding-block:52px;scroll-margin-top:64px}
  .titsez{gap:10px;margin-bottom:10px}
  .titsez h2{font-size:32px}
  .intro{font-size:16px;margin-bottom:24px}
  .nota-prot{font-size:12px;padding:6px 12px}
  .barra .wrap{min-height:60px}
  .marchio img{width:40px}
  /* aree di tocco comode (min 44px) */
  .btn{min-height:48px;justify-content:center}
  .apri{min-height:44px}
  .anno button,.filtri button{min-height:44px;padding:10px 14px;font-size:15px}
  .anno summary{min-height:44px;width:100%}
  .anno summary::after{margin-left:auto;width:32px;height:32px}
  .copia{padding:8px 12px;font-size:13px}
  footer .soc .tag{padding:12px 14px;font-size:14px}
  /* apertura */
  .hero .wrap{gap:20px;padding-block:32px 44px}
  .hero .logo{width:112px}
  .hero .scr{width:120px!important;top:-30px!important}
  .hero p.lead{margin:24px 0 22px}
  .hero .azioni{flex-direction:column;align-items:stretch}
  /* pillole */
  .archivio{margin-bottom:26px}
  .anno .date{gap:6px}
  .ig{box-shadow:5px 5px 0 var(--azzurro)}
  .pil-cta .btn{width:100%}
  /* programma: icona accanto al titolo per schede più compatte */
  .prog{gap:16px}
  .voce{display:grid;grid-template-columns:52px 1fr;column-gap:14px;row-gap:8px;padding:16px;align-items:center;box-shadow:5px 5px 0 var(--azzurro)}
  .voce img{width:52px;height:52px}
  .voce h3{margin:0;font-size:18px}
  .voce p,.voce .tags{grid-column:1/-1}
  .voce .tags{padding-top:2px}
  /* chi siamo */
  .chi{gap:24px}
  .foto{aspect-ratio:1/1;max-width:240px;box-shadow:8px 8px 0 var(--azzurro)}
  .chi h3{font-size:26px}
  /* incontri */
  .incontri{gap:16px}
  .incontro{box-shadow:5px 5px 0 var(--azzurro)}
  .incontro .data{font-size:36px}
  .incontro .btn{align-self:stretch}
  /* contatti: etichetta sopra il valore, email senza spezzature */
  .dati dl{grid-template-columns:1fr;gap:4px}
  .dati dt{margin-top:14px}
  .dati dt:first-child{margin-top:0}
  .dati dd{font-size:17px;overflow-wrap:normal;word-break:normal}
  form.modulo{padding:18px;box-shadow:5px 5px 0 var(--azzurro)}
  form.modulo input,form.modulo select,form.modulo textarea{min-height:48px}
  form.modulo .btn{width:100%}
  /* piede */
  footer .wrap{gap:18px;padding-block:32px;text-align:left}
  footer img{width:84px}
}

/* ===== sito a più pagine ===== */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.menu a[aria-current="page"]{background:var(--nero);color:var(--bianco)}
.marchio{color:var(--nero)}

/* testata delle pagine interne */
.testa-pagina{border-bottom:3px solid var(--nero);position:relative;overflow:hidden}
.testa-pagina .wrap{padding-block:46px 40px}
.briciole{font-size:14px;font-weight:600;margin-bottom:14px}
.briciole a{text-decoration:none;border-bottom:2px solid var(--arancio)}
.testa-pagina h1{margin:0}
.testa-pagina h1 .box{font-size:clamp(38px,7vw,76px)}
.testa-pagina p{max-width:60ch;font-size:18px;font-weight:500;margin:22px 0 0}
.testa-pagina .tags{margin-top:16px}
section.sez.prima{padding-top:56px}

/* home: anteprime */
.anteprima-azioni{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chi-ant{padding-block:80px 0;overflow:hidden;border-top:3px solid var(--nero)}
.chi-ant .titsez{justify-content:space-between;align-items:center}
.chi-ant .intro{margin-bottom:30px}

/* due file di foto che scorrono in versi opposti */
.strisce{display:grid;gap:16px;padding-block:6px 80px}
.striscia{overflow:hidden;width:100%}
.traccia{display:flex;gap:16px;width:max-content;will-change:transform}
.traccia img{height:clamp(170px,24vw,280px);width:auto;max-width:none;object-fit:cover;border:3px solid var(--nero);box-shadow:6px 6px 0 var(--azzurro);flex:0 0 auto}
.striscia:nth-child(2) .traccia img{box-shadow:6px 6px 0 var(--arancio)}

/* piè di pagina con mappa del sito */
.piede-menu{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.piede-menu a{font-weight:600;font-size:14px;text-decoration:none;border-bottom:2px solid transparent}
.piede-menu a:hover{border-bottom-color:var(--arancio)}
footer .wrap{grid-template-columns:auto 1fr auto}
footer .col{display:grid;gap:10px}

@media (max-width:620px){
  .testa-pagina .wrap{padding-block:30px 28px}
  .testa-pagina p{font-size:16px;margin-top:16px}
  section.sez.prima{padding-top:36px}
  .chi-ant{padding-top:52px}
  .strisce{gap:12px;padding-bottom:52px}
  .traccia{gap:12px}
  .traccia img{height:150px;box-shadow:4px 4px 0 var(--azzurro)}
  .striscia:nth-child(2) .traccia img{box-shadow:4px 4px 0 var(--arancio)}
  .anteprima-azioni .btn{width:100%}
  .piede-menu{gap:4px 16px}
  .piede-menu a{display:inline-block;padding:6px 0}
}
.anno-fisso{display:flex;align-items:center;gap:10px;min-height:36px}
.anno-fisso .lbl{font-family:var(--cond);font-style:italic;font-weight:900;font-size:26px;line-height:1}
.anno-fisso .cont{font-size:13px;font-weight:600;color:var(--grigio)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}footer .soc{justify-content:flex-start}}
.nota-prot:empty{display:none}