.acc{--ico:var(--dito);--acc-pad:var(--s-3);--acc-respiro:15px;width:min(55.7vw,880px);margin:clamp(var(--s-6),5.4vw,var(--s-9)) auto 0}

.acc__it{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  align-items:center;min-height:var(--s-9);
  transition:min-height var(--t-band) var(--e-band),max-height var(--t-band) var(--e-band),
             opacity var(--t-band) var(--e-out),background var(--t-band) var(--e-band),
             color var(--t-band) var(--e-band),visibility 0s linear var(--t-band);
}
.acc__it + .acc__it{border-top:1px solid var(--linea)} /* righe separate da un filo, come il resto del sito */
.acc__it:is(.is-open,:focus-within){
  min-height:calc(var(--s-11) * 1.2);background:var(--paper);color:var(--ink);
}
.acc__hd{
  display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  align-self:stretch;min-height:auto;padding:0 var(--filo);color:inherit;
}
.acc__ico{flex:0 0 auto;width:var(--ico);height:var(--ico);display:grid;place-items:center;color:inherit}
.acc__ico svg{width:var(--s-4);height:var(--s-4);overflow:visible}
.acc__ico svg *{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 520ms var(--e-out);transform-origin:50% 50%;
}
.acc__it.is-open .acc__ico svg{animation:ico-draw 620ms var(--e-out) both}
@keyframes ico-draw{from{opacity:.2;transform:scale(.86) rotate(-8deg)}to{opacity:1;transform:none}}
.acc__t{flex:1 1 auto}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-band) var(--e-band)}
/* il pannello chiuso deve sparire anche dai lettori di schermo, non solo
   dagli occhi: con la sola riga di griglia a 0fr il testo restava leggibile
   mentre il pulsante annunciava "compresso". visibility:inherit e non
   visible, cosi' le voci oltre la terza, che sono nascoste sulla voce
   stessa, non tornano visibili. Il ritardo tiene il testo esposto per tutta
   la chiusura, poi lo toglie. */
.acc__in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear var(--t-band)}
.acc__in p{
  padding:var(--acc-respiro);margin:0;text-align:right;
  font-size:max(13px,calc(var(--t-para-md) * .85));line-height:var(--lh-para-md);
  opacity:0;transform:translateY(var(--s-1));
  transition:opacity var(--t-band) var(--e-out),transform var(--t-band) var(--e-out);
}
.acc__it:is(.is-open,:focus-within) .acc__body{grid-template-rows:1fr}
.acc__it:is(.is-open,:focus-within) .acc__in{visibility:inherit;transition-delay:0s}
.acc__it:is(.is-open,:focus-within) .acc__in p{opacity:1;transform:none}
.acc__it:nth-child(n+4){min-height:0;max-height:0;opacity:0;overflow:hidden;visibility:hidden}
.acc.is-open .acc__it{
  min-height:calc(var(--s-11) * 1.2);max-height:var(--s-12);opacity:1;visibility:visible;transition-delay:0s;
}
.acc.is-open .acc__body{grid-template-rows:1fr}
.acc.is-open .acc__in{visibility:inherit;transition-delay:0s}
.acc.is-open .acc__in p{opacity:1;transform:none}

@media (max-width:900px){
  .acc{width:100%}
  .acc__it:is(.is-open,:focus-within){min-height:var(--s-9)}
  .acc.is-open .acc__it{min-height:var(--s-9);max-height:var(--s-13)}
  .acc__hd{gap:var(--s-4);padding:0 var(--filo);min-height:var(--s-7)}
}
/* tolto il @media (max-width:640px) che metteva .acc__hd a min-height var(--s-7):
   piu' in basso, nello stesso identico media, la stessa regola la portava a
   var(--dito), quindi la prima non arrivava mai. Il valore vero, quello del
   dito, resta scritto una volta sola dove sta il resto del telefono. */
@media (prefers-reduced-motion: reduce){
  .acc__it,.acc__body,.acc__in,.acc__in p{transition:none}
  .acc__it.is-open .acc__ico svg{animation:none}
}

@media (hover:hover) and (pointer:fine){
  .acc__it:hover{min-height:calc(var(--s-11) * 1.2);background:var(--paper);color:var(--ink)}
  .acc__it:hover .acc__body{grid-template-rows:1fr}
  .acc__it:hover .acc__in{visibility:inherit;transition-delay:0s}
  .acc__it:hover .acc__in p{opacity:1;transform:none}
}
@media (hover:hover) and (pointer:fine) and (max-width:900px){
  .acc__it:hover{min-height:var(--s-9)}
}

@media (max-width:640px){
  /* sul telefono: icona piccola, domanda e risposta allineate sullo stesso margine,
     respiro uguale sopra e sotto, un filo tra una voce e l'altra */
  .acc{--ico:24px}
  .acc__it{grid-template-columns:minmax(0,1fr);align-items:start;min-height:0;padding-block:var(--s-3)}
  /* le voci chiuse dietro "Read more" non devono lasciare ne' respiro ne' filo */
  .acc:not(.is-open) .acc__it:nth-child(n+4){padding-block:0;border-top-width:0}
  .acc__it:is(.is-open,:focus-within){min-height:0}
  .acc.is-open .acc__it{min-height:0;max-height:640px}
  .acc__hd{grid-column:1;grid-row:1;gap:var(--s-3);padding:0 var(--filo);min-height:var(--dito)}
  .acc__body{grid-column:1;grid-row:2}
  .acc__in p{
    text-align:left;
    padding:var(--s-1) var(--filo) var(--s-2) calc(var(--filo) + var(--ico) + var(--s-3));
  }
}