/* ============================================================
   Barra di navigazione del sito — FONTE UNICA.
   Vale per la home e per tutte le pagine interne.
   Il markup lo genera  D:\CLAUDE\sito-strumenti\aggiorna-menu.py
   da  menu-modello.html : non si modifica il menu a mano dentro
   le pagine, si modifica il modello e si rilancia lo script.
   ============================================================ */
.menu{--cornetta:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1.1L6.6 10.8z'/%3E%3C/svg%3E");
      position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);
      backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--linea)}
@media (prefers-color-scheme: dark){ .menu{background:rgba(11,20,32,.95)} }
.menu .barra-menu{max-width:1020px;margin:0 auto;padding:0 32px;
                  display:flex;align-items:center;justify-content:space-between;gap:18px}
.menu ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;overflow-x:auto;
         scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menu ul::-webkit-scrollbar{display:none}
.menu li{margin:0}
/* se le voci non ci stanno, l'ultima sfuma invece di essere tranciata */
.menu .voci{position:relative;flex:1;min-width:0}
.menu .voci.scorre{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 100%);
                   mask-image:linear-gradient(90deg,#000 84%,transparent 100%)}
.menu a{display:block;padding:15px 0;font-family:Poppins,system-ui,sans-serif;font-size:14.5px;
        color:#5b6478;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.menu a:hover{color:var(--navy)}
.menu a.qui{color:var(--blu);border-bottom-color:var(--blu)}
.menu .chiama{flex:0 0 auto;font-weight:600;color:var(--blu);border-bottom:0;padding:12px 0}
.menu .chiama::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
                      background:var(--blu);margin-right:8px;vertical-align:1px}
section, .hero{scroll-margin-top:58px}
/* su telefono il numero diventa un pulsante tondo: serve lo spazio alle voci.
   Le voci devono starci tutte: se una resta tagliata nessuno immagina che si
   possa scorrere, e per il visitatore quella voce non esiste. */
.menu .solo-largo{display:none}
@media(min-width:621px){.menu .solo-largo{display:block}}
.menu .solo-medio{display:none}
@media(min-width:481px){.menu .solo-medio{display:block}}
@media(max-width:620px){
  .menu .barra-menu{gap:10px;padding-left:14px;padding-right:14px}
  .menu ul{gap:7px}
  .menu a{font-size:12px;letter-spacing:-.01em;padding:12px 0}
  .menu .chiama{width:38px;height:38px;border-radius:50%;background:var(--blu);padding:0;
                display:flex;align-items:center;justify-content:center}
  .menu .chiama span{display:none}
  .menu .chiama::before{content:"";width:17px;height:17px;margin:0;border-radius:0;background:#fff;
    -webkit-mask:var(--cornetta) center/contain no-repeat;mask:var(--cornetta) center/contain no-repeat}
}