/* IL MENU DEL TELEFONO — sotto gli 860 px la nav della barra sparisce: al suo posto il bottone a due righe
   (Francesco, 19/10/2026: «un menu hamburger all'altezza delle altre cose che abbiamo fatto in home»).
   · «Scrivimi» ESCE dalla barra ed entra nel pannello, coi dati di Cecina e il «Disponibile» (Francesco, 19/10/2026)
   · ⛔ niente hover: col dito non c'è. Il lavoro sta nel TOCCO (la voce toccata si accende arancio e resta l'ultima ad andare)
     e nell'apertura (src/menu.js)
   · il pannello è il nero di casa, alto quanto lo schermo, e si apre DAL BASSO come le foto (src/comparsa.js: la cornice
     da inset 100% a 0); poi le voci salgono nelle loro maschere col gesto dei titoli, e in fondo i contatti coi pezzi piccoli
   · le voci hanno il corpo dei nomi dei servizi; quella della sezione in cui ti trovi ha il quadratino arancio del cursore
   · la barra resta SOPRA il pannello (z 30 contro 29): logo e X restano dove il dito li ha lasciati
   · ⚠️ il pannello sta FUORI dall'header: la barra si sposta con transform (barra-via), e un fixed dentro un transform
     si sposterebbe con lei
   L'armatura: il bottone esiste solo se src/menu.js è partito (html.con-menu). Senza script resta la barra di prima. */
.burger{display:none}
@media (max-width:860px){
  html.con-menu .barra{grid-template-columns:auto 1fr auto}
  html.con-menu .barra .contatta{display:none}
  html.con-menu .burger{grid-column:3;justify-self:end;display:block;position:relative;width:44px;height:44px;margin-right:-11px;padding:0;
    border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger i{position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;
    transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .burger i:first-child{transform:translateY(-4px)}
  .burger i:last-child{transform:translateY(4px)}
  html.menu-aperto .burger i:first-child{transform:rotate(45deg)}
  html.menu-aperto .burger i:last-child{transform:rotate(-45deg)}
  /* il tocco: il bottone si stringe sotto il dito e torna */
  .burger{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .burger:active{transform:scale(.86);transition-duration:.08s}
  .burger:focus-visible{outline:1px solid var(--arancio);outline-offset:-4px}
}

/* la barra col menu aperto: trasparente sul nero, scritte crema, sempre al suo posto (anche se scorrendo era uscita).
   ⚠️ !important perché le classi del motore (su-carta, barra-scesa…) hanno selettori più lunghi di questo */
html.menu-aperto .barra{color:var(--crema)!important;background:transparent!important;border-color:transparent!important;transform:none!important}

.menu{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;justify-content:space-between;gap:4svh;height:100svh;
  padding:calc(var(--barra) + 5svh) var(--gronda) calc(22px + env(safe-area-inset-bottom));
  background:var(--nero);color:var(--crema);overscroll-behavior:contain}
.menu a{-webkit-tap-highlight-color:transparent}
.menu[hidden]{display:none}

/* le voci: il corpo dei nomi dei servizi, tenuto in altezza perché a 393×640 stiano tutte e quattro con i contatti sotto */
.menu__voci{list-style:none;margin:0;padding:0;display:grid;gap:1.4svh}
.menu__voce{display:flex;align-items:flex-start;width:fit-content;gap:.3em;
  font-weight:500;font-size:min(13.6vw,9.4svh);line-height:.94;letter-spacing:-.055em}
/* il numero è l'esponente del nome, come nella lista dei servizi */
.menu__num{display:flex;align-items:center;gap:7px;margin-top:.55em;font-size:11px;letter-spacing:.03em;color:rgba(245,244,237,.5)}
.menu__num::before{content:"";width:7px;height:7px;background:var(--arancio);transform:scale(0);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.menu__voce[aria-current="true"] .menu__num{color:var(--crema)}
.menu__voce[aria-current="true"] .menu__num::before{transform:scale(1)}
/* il tocco: la voce si accende SUBITO sotto il dito (⛔ transizione all'andata), e resta accesa mentre le altre se ne vanno */
.menu__nome{transition:color .4s cubic-bezier(.16,1,.3,1)}
.menu__voce:active .menu__nome,.menu__voce.scelta .menu__nome{color:var(--arancio);transition-duration:0s}
.menu__voce:focus-visible{outline:1px solid var(--arancio);outline-offset:6px}

/* in fondo, i contatti: le stesse voci dell'hero e del piede, ⛔ inventate */
.menu__piede{position:relative;display:grid;grid-template-columns:1fr auto;gap:18px 16px;padding-top:18px;font-size:11px;line-height:1.5}
/* il filetto sopra i contatti si disegna da sinistra mentre le voci salgono, e si ritira svelto alla chiusura */
.menu__piede::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(245,244,237,.14);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.7,0,.84,0)}
html.menu-aperto .menu__piede::before{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .5s}
.menu__dove{display:grid;gap:12px;align-content:start;color:rgba(245,244,237,.62)}
.menu__dove .stato{color:var(--crema)}
/* il pallino del «Disponibile» qui dentro (prima stava solo nella home: ora il menu c'è su tutte le pagine) */
.menu__dove .stato{display:flex;align-items:flex-start;gap:8px;padding:0;border:0}
.menu__dove .stato i{position:relative;flex:none;width:6px;height:6px;margin-top:calc(.75em - 3px);border-radius:50%;background:var(--arancio)}
.menu__dove .stato i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--arancio);animation:pulsa 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes pulsa{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.menu__dove .stato i::after{animation:none;opacity:0}}
.menu__link{display:grid;gap:6px;justify-items:end;align-content:start}
.menu__link a{padding:2px 0}
.menu__link a:focus-visible{outline:1px solid var(--arancio);outline-offset:3px}
.menu__mail{grid-column:1/-1;justify-self:start;font-family:var(--sans);font-weight:500;text-transform:none;
  font-size:clamp(20px,6vw,30px);letter-spacing:-.03em}
/* «Scrivimi», sceso dalla barra: lo stesso pulsante pieno, qui largo quanto il pannello e in fondo, sotto il pollice.
   Al tocco si accende arancio e la freccia parte in avanti */
.menu__scrivi{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:17px 18px;
  background:var(--crema);color:var(--nero);font-size:12px;letter-spacing:.03em;
  transition:background .4s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.menu__scrivi svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.menu__scrivi:active{background:var(--arancio);transform:scale(.985);transition-duration:0s,.08s}
.menu__scrivi:active svg{transform:translateX(6px);transition-duration:.12s}
.menu__scrivi:focus-visible{outline:1px solid var(--arancio);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.burger,.burger i,.menu__num::before,.menu__piede::before,.menu__scrivi,.menu__scrivi svg{transition:none!important}}