/* ═══════════════════════════════════════════════════════════════
   ECHOES — STREET THEME v3 · "BRAND KIT EDITION"
   Layer grafico completo caricato DOPO style.css.
   Conversione fedele a "Echoes Brand Kit.dc.html":
   · ORO #CBA135 protagonista — accenti street (acido/spray) ≤ 10%
   · Display: Anton · Titoli: Bebas Neue · Dettagli: Space Mono · Testi: DM Sans
   · Pattern: halftone oro, onde d'eco (hero), grana pellicola
   index.html (solo card 04 aggiunta), app.js, style.css e la
   pipeline Brevo/Aruba NON sono toccati. Nessun deploy.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. DESIGN TOKENS (dal Brand Kit) ─────────────────────────── */
:root{
  /* oro — protagonista */
  --gold:#CBA135;
  --gold-hi:#EFCC4F;
  --gold-lo:#8F7222;
  --gold-dim:rgba(203,161,53,.12);
  --gold-line:rgba(203,161,53,.26);
  --gold-glow:rgba(203,161,53,.42);

  /* accenti street — max 10% di ogni composizione */
  --acid:#D9FF4B;
  --acid-dim:rgba(217,255,75,.14);
  --spray:#FF4B2B;

  /* asfalto */
  --ink:#0B0A08;
  --ink1:#12100C;
  --ink2:#1A1712;
  --ink3:#26211A;

  /* verde-cemento notturno */
  --teal:#161D18;
  --teal-hi:#232E25;
  --teal-lo:#0F1411;
  --teal-bright:#3A4A3D;
  --teal-line:rgba(22,29,24,.9);

  --cream:#F0EADB;
  --cream2:#E7DFCB;
  --light:#EDE7D6;
  --muted:#8D8674;
  --muted2:#BCB39E;

  /* ruoli tipografici del Brand Kit */
  --fd:'Anton','Bebas Neue',sans-serif;        /* display */
  --ftitle:'Bebas Neue',var(--fd),sans-serif;  /* titoli di sezione */
  --fmono:'Space Mono',monospace;              /* dettagli/label */

  /* motion language */
  --outExpo:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.7,0,.2,1);
  --springy:cubic-bezier(.3,1.45,.45,1);

  /* ombre nette da sticker */
  --hs:6px 6px 0 rgba(0,0,0,.8);
  --hs-sm:4px 4px 0 rgba(0,0,0,.72);
  --hs-gold:5px 5px 0 rgba(203,161,53,.28);
}

/* ── 1. BASE ── */
::selection{background:var(--acid);color:var(--ink)}     /* micro-accento street */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--gold-lo);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* angoli vivi ovunque — vince anche sugli stili inline dei form */
input,select,textarea,button,.btn,.form-input,.info-box,.consent-wrap,
.loc-card,.pillar,.stat-box,.n-card,.social-sede-card,.moment-card,
.cv-upload-area,.tag,.tag-teal{border-radius:0!important}

/* ── 2. GRANA PELLICOLA ── */
body{position:relative}
body::before{
  content:'';position:fixed;inset:-2%;z-index:4000;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainShift .45s steps(2) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}50%{transform:translate(-.6%,.7%)}100%{transform:translate(.7%,-.5%)}}

/* ── 3. CURSORE — mirino (micro-accento acido) ── */
.cursor-dot{border-radius:1px;transform:translate(-50%,-50%) rotate(45deg);background:var(--acid);box-shadow:0 0 12px rgba(217,255,75,.6)}
body.cursor-click .cursor-dot{transform:translate(-50%,-50%) rotate(45deg) scale(.5)}
.cursor-ring{border-radius:2px;border-color:rgba(203,161,53,.6);mix-blend-mode:difference}
body.cursor-hover .cursor-ring{border-radius:2px;border-color:var(--gold-hi)}
body.cursor-text .cursor-ring{border-radius:1px}

/* ── 4. INTRO STAMP (creato da street-fx.js) ── */
#street-intro{
  position:fixed;inset:0;z-index:6000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  overflow:hidden;
}
#street-intro::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(203,161,53,.09) 1px,transparent 1.4px);
  background-size:9px 9px;
}
#street-intro img{height:clamp(54px,9vw,96px);width:auto;animation:siStamp .55s var(--snap) both}
#street-intro .si-word{
  font-family:var(--fd);font-size:clamp(3.4rem,15vw,12rem);line-height:.9;letter-spacing:.03em;
  color:transparent;-webkit-text-stroke:2px var(--gold-hi);text-transform:uppercase;
  animation:siStamp .55s .1s var(--snap) both;
}
#street-intro .si-sub{
  font-family:var(--fmono);font-size:clamp(.6rem,1.6vw,.8rem);letter-spacing:.34em;
  text-transform:uppercase;color:var(--spray);animation:siFade .5s .42s both;
}
#street-intro .si-bar{
  width:min(280px,60vw);height:3px;background:rgba(203,161,53,.18);overflow:hidden;position:relative;
  animation:siFade .4s .3s both;
}
#street-intro .si-bar::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:left;animation:siLoad .9s .35s var(--outExpo) forwards;
}
#street-intro.done{animation:siExit .65s var(--snap) forwards}
@keyframes siStamp{from{opacity:0;transform:scale(1.7) rotate(-5deg)}60%{opacity:1;transform:scale(.96) rotate(.6deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes siFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes siLoad{to{transform:scaleX(1)}}
@keyframes siExit{to{transform:translateY(-102%)}}

/* ── 5. PROGRESS BAR (creata da street-fx.js) ── */
#street-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:6002;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  box-shadow:0 0 12px rgba(203,161,53,.45);
}

/* ── 6. TICKER ── */
.top-ticker{background:var(--ink);border-bottom:1px solid var(--gold-line)}
.ticker-item{font-family:var(--fmono);font-weight:700;letter-spacing:.2em;color:var(--gold-hi)}
.ticker-item::before{content:'▲';color:var(--spray);font-size:.5rem;opacity:.9}

/* ── 7. NAV ── */
#nav.scrolled{background:rgba(11,10,8,.92);backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 1px 0 var(--gold-line),0 12px 40px rgba(0,0,0,.5)}
.nav-links a{font-family:var(--fmono);font-weight:700;letter-spacing:.09em}
.nav-links a:hover{color:var(--gold-hi);animation:glitchText .28s steps(2) 1}
.nav-links a:hover::after{background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.nav-links a.active{color:var(--gold-hi)}
@keyframes glitchText{
  0%,100%{text-shadow:none}
  25%{text-shadow:-2px 0 var(--spray),2px 0 var(--gold-hi)}
  55%{text-shadow:2px 0 var(--spray),-2px 0 var(--gold-hi)}
  85%{text-shadow:-1px 0 var(--gold-hi),1px 0 var(--spray)}
}
.nav-cta{box-shadow:var(--hs-sm)!important;font-family:var(--fmono)}
.nav-cta:hover{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 rgba(0,0,0,.8)!important;background:var(--gold-hi)!important}
/* Accesso all'area riservata — accanto a Community, sempre visibile
   (sta in .nav-right, quindi non sparisce col menu a panino) */
.nav-lock{
  display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;
  border:1px solid var(--gold-line);color:var(--gold);cursor:none;
  transition:background .2s,color .2s,border-color .2s,transform .18s var(--outExpo);
}
.nav-lock:hover{background:var(--gold);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
@media(max-width:960px){.nav-lock{cursor:pointer}}

.lang-btn{font-family:var(--fmono)}
.lang-btn.on{background:var(--gold);color:var(--ink)}
.lang-sw{border-radius:0;padding:0}
.burger span{background:var(--gold)}
.nav-links.open{background:rgba(11,10,8,.98);border-bottom:2px solid var(--gold)}

/* ── 8. BOTTONI — sticker oro, pressione fisica (spec Brand Kit) ── */
.btn{
  border-width:2px;font-family:var(--fmono);font-weight:700;
  box-shadow:var(--hs-sm);
  transition:transform .18s var(--outExpo),box-shadow .18s var(--outExpo),background .2s,color .2s,border-color .2s,letter-spacing .25s;
}
.btn::before{display:none}
.btn:hover{transform:translate(4px,4px);box-shadow:0 0 0 rgba(0,0,0,0);letter-spacing:.16em}
.btn:active{transform:translate(5px,5px) scale(.985)}
.btn-gold{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hi);box-shadow:none}
.btn-ghost{border-color:var(--gold);color:var(--cream)}
.btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-teal{background:var(--ink3);border-color:var(--gold-line);color:var(--cream)}
.btn-teal:hover{background:var(--gold);border-color:var(--ink);color:var(--ink)}

/* ── 9. REVEAL — fluidi, con micro-sfocatura ── */
.rv,.rv2,.rv3,.rv4{opacity:0;transform:translateY(48px) scale(.985);filter:blur(6px)}
.rv {transition:opacity 1.05s var(--outExpo),transform 1.05s var(--outExpo),filter .85s var(--outExpo)}
.rv2{transition:opacity 1.05s .09s var(--outExpo),transform 1.05s .09s var(--outExpo),filter .85s .09s var(--outExpo)}
.rv3{transition:opacity 1.05s .18s var(--outExpo),transform 1.05s .18s var(--outExpo),filter .85s .18s var(--outExpo)}
.rv4{transition:opacity 1.05s .3s var(--outExpo),transform 1.05s .3s var(--outExpo),filter .85s .3s var(--outExpo)}
.rv.on,.rv2.on,.rv3.on,.rv4.on{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
@keyframes pageIn{
  from{opacity:0;transform:translateY(30px) skewY(.5deg)}
  to{opacity:1;transform:translateY(0) skewY(0)}
}
.page.active{animation:pageIn .6s var(--outExpo) both}

/* ── 10. TITOLI — ruoli dal Brand Kit ── */
.s-label{font-family:var(--fmono);color:var(--gold);font-weight:700}
.s-label::before{background:var(--spray);height:2px;width:24px}
.s-label::after{content:'//';color:var(--spray);font-weight:700;margin-left:.15rem}
.s-title{
  font-family:var(--ftitle);                    /* Bebas Neue per i titoli */
  font-size:clamp(3rem,7vw,6.4rem);
  text-transform:uppercase;letter-spacing:.025em;
  text-shadow:4px 4px 0 rgba(203,161,53,.14);
}
/* evidenziatore ORO sulle parole chiave (acido riservato alla community) */
.s-title em,.big-quote em{
  color:var(--ink)!important;background:var(--gold);
  display:inline-block;padding:.02em .14em;
  transform:rotate(-1.4deg);box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.comm-title em{
  color:var(--ink)!important;background:var(--acid);
  display:inline-block;padding:.02em .14em;
  transform:rotate(-1.4deg);box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.comm-title{text-shadow:5px 5px 0 rgba(255,75,43,.15)}
.ph-quote{border-left:4px solid var(--gold)}
.ph-quote em{color:var(--gold-hi);background:none;font-style:normal}
.tag{font-family:var(--fmono);background:var(--gold-dim);color:var(--gold-hi);border-color:var(--gold-line)}

/* ── 11b. VIDEO INTRODUTTIVO DELLA HERO ─────────────────────
   Copre l'intera hero al caricamento, poi svanisce lasciando il
   carosello. Sta DENTRO #hero, quindi non copre la navigazione:
   il sito resta usabile fin dal primo istante. */
/* Il video sta SOTTO al contenuto della hero (logo, claim, pulsanti),
   esattamente come le foto del carosello: fa da sfondo in movimento.
   pointer-events:none così non intercetta i clic sui pulsanti. */
#hero-video-wrap{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--ink);overflow:hidden;
  opacity:1;transition:opacity .9s var(--outExpo);
}
#hero-video-wrap video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* scurito e desaturato: deve restare sfondo, non rubare la scena */
  filter:grayscale(.3) contrast(1.05) brightness(.55);
}
/* stesso velo diagonale usato sulle foto del carosello, per continuità */
#hero-video-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(108deg,rgba(11,10,8,.9) 0%,rgba(11,10,8,.5) 52%,rgba(11,10,8,.2) 100%),
    linear-gradient(to top,rgba(11,10,8,.85),transparent 45%);
}
#hero-video-wrap.esce{opacity:0;pointer-events:none}
#hero-video-wrap.finito{display:none}

#heroVideoSkip{
  position:absolute;right:5vw;bottom:2.2rem;z-index:3;pointer-events:auto;
  font-family:var(--fmono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgba(11,10,8,.55);
  border:2px solid var(--gold-line);padding:.6rem 1.1rem;
  cursor:pointer;backdrop-filter:blur(6px);
  transition:background .2s,color .2s,border-color .2s,transform .18s var(--outExpo);
  opacity:0;animation:skipEntra .5s 1.2s forwards;
}
#heroVideoSkip:hover{background:var(--gold);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
@keyframes skipEntra{to{opacity:1}}

/* Logo, claim e pulsanti restano SEMPRE visibili sopra al video:
   il video è sfondo, non copertura. Nessuna regola li nasconde. */

@media(max-width:640px){
  #heroVideoSkip{bottom:1.4rem;font-size:.6rem;padding:.5rem .9rem}
}
/* NB: il video NON viene nascosto con "riduci movimento".
   Su iPhone quell'impostazione è molto diffusa e faceva sparire il video
   prima ancora che partisse. Essendo uno sfondo scurito, breve e senza
   lampeggi, resta attivo per tutti; le altre animazioni continuano a
   rispettare la preferenza dell'utente. */

/* ── 11. HERO — onde d'eco sul bordo alto (spec Brand Kit) ── */
#hero{position:relative;will-change:transform;overflow:hidden}
#hero::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-radial-gradient(circle at 15% -25%,
    rgba(203,161,53,.075) 0 2px,transparent 2px 52px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 60%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 60%);
}
#hero::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  opacity:.32;mix-blend-mode:overlay;
}
.slide-bg{filter:grayscale(.35) contrast(1.12) saturate(1.05)}
.slide-overlay{background:linear-gradient(108deg,rgba(11,10,8,.94) 0%,rgba(11,10,8,.5) 52%,rgba(11,10,8,.12) 100%)}
.slide-tag{
  font-family:var(--fmono);color:var(--gold-hi);
  border:1px solid var(--gold-line);background:rgba(11,10,8,.55);
  padding:.3rem .7rem;letter-spacing:.2em;
}
.hero-eyebrow{font-family:var(--fmono);color:var(--gold)}
.eyebrow-line{background:var(--spray);height:2px}
.hero-sub{font-family:var(--fmono);font-size:clamp(.82rem,1.5vw,.98rem);color:rgba(240,234,219,.75);letter-spacing:.01em}
.hero-logo img{filter:drop-shadow(0 8px 34px rgba(203,161,53,.22)) drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.sc-cur{color:var(--gold-hi)}
.sdot{border-radius:0;transform:rotate(45deg)}
.sdot.on{background:var(--gold);width:22px;border-radius:0;transform:rotate(0)}
.scroll-cue span{font-family:var(--fmono);color:var(--gold);letter-spacing:.26em}
.scroll-line::before{background:linear-gradient(var(--gold),transparent)}

/* ── 13. CARD SEDI — poster affissi leggermente storti ── */
.locs-grid{gap:1.8rem}
.loc-card{
  border:2px solid var(--ink3);
  box-shadow:var(--hs);
  rotate:-.5deg;
  transition:rotate .45s var(--outExpo),translate .45s var(--outExpo),box-shadow .45s var(--outExpo),border-color .3s;
  transform:translate(var(--mx,0px),var(--my,0px));
}
.locs-grid .loc-card:nth-child(2){rotate:.6deg}
.locs-grid .loc-card:nth-child(3){rotate:-.35deg}
.loc-card:hover{
  rotate:0deg;translate:-5px -5px;
  transform:translate(var(--mx,0px),var(--my,0px));
  box-shadow:11px 11px 0 rgba(0,0,0,.75),var(--hs-gold);
  border-color:var(--gold);
}
.loc-card-bar{height:3px;background:var(--gold)}
.loc-card-photo img{
  width:100%;height:100%;object-fit:cover;opacity:.6;
  filter:grayscale(.85) contrast(1.2) brightness(.9);
  transition:filter .55s var(--outExpo),opacity .45s,transform .7s var(--outExpo);
}
.loc-card:hover .loc-card-photo img{opacity:.95;filter:grayscale(0) contrast(1.05) saturate(1.15);transform:translate(-50%,-50%) scale(1.06)}
.loc-num{font-size:5.2rem;color:rgba(203,161,53,.16);-webkit-text-stroke:1px rgba(203,161,53,.3)}
.loc-card:hover .loc-num{color:rgba(203,161,53,.45)}
.loc-name{letter-spacing:.05em}
.loc-card:hover .loc-name{color:var(--gold-hi)}
.loc-addr{font-family:var(--fmono);font-size:.68rem}
.loc-arrow{font-family:var(--fmono);font-weight:700}
.loc-card:hover .loc-arrow{color:var(--gold-hi)}

/* ── 14. MOOD STRIP ── */
.mood-strip{border-top:3px solid var(--gold);border-bottom:3px solid var(--ink3);transform:skewY(calc(var(--vel,0)*-.5deg));will-change:transform}
.mood-bg{filter:grayscale(.7) contrast(1.18) brightness(.92);transition:filter .5s var(--outExpo),transform .6s var(--outExpo)}
.mood-card:hover .mood-bg{filter:grayscale(0) contrast(1.06) saturate(1.25);transform:scale(1.07)}
.mood-lbl{
  font-family:var(--fmono);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);padding:.28rem .6rem;opacity:.92;
  border-left:3px solid var(--gold);
}
.mood-card:hover .mood-lbl{background:var(--gold);color:var(--ink);border-left-color:var(--ink)}

/* ── 15. WHY GRID — cemento chiaro ── */
.why-grid{background:var(--ink);border-top:3px solid var(--ink);gap:3px}
.why-cell{background:var(--light)}
.why-cell::before{background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--snap)}
.why-cell:hover::before{transform:scaleX(1)}
.why-icon-wrap{background:var(--ink);color:var(--gold-hi);border-radius:0}
.why-cell:hover .why-icon-wrap{background:var(--gold);color:var(--ink);transform:rotate(-4deg) scale(1.12);box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.why-title{color:var(--ink);letter-spacing:.04em}
.why-cell:hover .why-title{color:var(--gold-hi)}
.why-cell:hover p{color:rgba(240,234,219,.9)}

/* ── 16. MOMENT CARDS ──
   Griglia a 2 colonne: ora sono 8 riquadri (bar + tabaccheria) */
.momenti-griglia{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--gold-line);border:1px solid var(--gold-line);
}
@media(max-width:520px){.momenti-griglia{grid-template-columns:1fr}}
.moment-card{background:var(--ink2);border:1px solid transparent}
.moment-card::after{background:var(--gold);height:3px}
.moment-card:hover{background:var(--ink3);border-color:var(--gold-line)}
.moment-icon{filter:grayscale(1) brightness(1.4);transition:filter .3s,transform .3s var(--outExpo)}
.moment-card:hover .moment-icon{filter:none;transform:scale(1.15) rotate(-6deg)}
.moment-title{color:var(--gold-hi)}
.moment-card:hover .moment-title{color:var(--gold-hi)}

/* ── 17. FILOSOFIA — halftone oro (spec Brand Kit) ── */
.phil-section::after,#page-filosofia .section::after,#page-community .section::after,#page-wifi section::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(203,161,53,.1) 1px,transparent 1.4px);
  background-size:9px 9px;opacity:.55;
}
#page-filosofia .section,#page-community .section,#page-wifi section{position:relative}
#page-filosofia .inner,#page-community .comm-inner{position:relative;z-index:1}
.big-quote{text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.7rem)}
.pillar{background:rgba(11,10,8,.4);border:2px solid var(--ink3);border-bottom:3px solid var(--gold);box-shadow:var(--hs-sm)}
.pillar::before{background:var(--gold-hi);height:3px}
.pillar:hover{background:rgba(11,10,8,.7);translate:-4px -4px;transform:none;box-shadow:9px 9px 0 rgba(0,0,0,.6)}
.pillar-title{color:var(--gold-hi)}
.pillar:hover .pillar-title{color:var(--gold-hi)}
.pillar-icon circle,.pillar-icon rect,.pillar-icon path{stroke:#EFCC4F}
.pillar-icon [fill="#C3AB4D"]{fill:#EFCC4F}

/* ── 18. WA STRIP — banner CTA oro (spec Brand Kit) ── */
.wa-strip{
  background:var(--gold);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
}
.wa-title{color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.wa-strip:hover .wa-title{color:var(--ink);letter-spacing:.08em}
.wa-sub{color:rgba(11,10,8,.72);font-family:var(--fmono);font-weight:700;font-size:.74rem}
.wa-strip .btn-gold{background:var(--ink);color:var(--gold-hi);border-color:var(--ink);box-shadow:4px 4px 0 rgba(11,10,8,.35)}
.wa-strip .btn-gold:hover{background:var(--spray);color:var(--cream);box-shadow:none}
.wa-strip .btn-ghost{border-color:var(--ink)!important;color:var(--ink);box-shadow:4px 4px 0 rgba(11,10,8,.25)}
.wa-strip .btn-ghost:hover{background:var(--ink);color:var(--gold-hi);box-shadow:none}

/* ── 19. FOOTER ── */
footer{position:relative;overflow:hidden;border-top:3px solid var(--ink3)}
footer::before{
  content:'ECHOES GROUP';position:absolute;right:-1%;bottom:-4%;z-index:0;pointer-events:none;
  font-family:var(--fd);font-size:clamp(4rem,13vw,11rem);line-height:.9;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(203,161,53,.09);
  transform:translateY(calc(var(--par,0)*-40px));
}
.ft-grid,.ft-bot{position:relative;z-index:1}
.ft-col h4{font-family:var(--fmono);color:var(--gold)}
.ft-col ul a:hover,.ft-contacts a:hover{color:var(--gold-hi)}
.ft-soc a{font-family:var(--fmono);font-weight:700;border:1px solid var(--gold-line);padding:.3rem .55rem}
.ft-soc a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}

/* ── 20. STORIA ── */
.stat-box{border:2px solid var(--ink3);box-shadow:var(--hs-sm);transform:translate(var(--mx,0px),var(--my,0px))}
.stat-box:hover{border-color:var(--gold);translate:-4px -4px;box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.stat-box b{color:var(--gold-hi)}
.stat-box:hover b{color:var(--gold-hi)}
.stat-box span{font-family:var(--fmono)}
.av-ph{border:2px solid var(--ink3);box-shadow:var(--hs)}
.av-ph img{filter:grayscale(.5) contrast(1.12);transition:filter .6s var(--outExpo)}
.about-visual:hover .av-ph img{filter:grayscale(0) saturate(1.1)}
/* stamp circolare oro (spec Brand Kit "Badge & Stamp") */
.av-badge{
  background:var(--gold);border:2px solid var(--ink);
  border-radius:50%!important;box-shadow:var(--hs-sm);
  rotate:calc(3deg + var(--sy,0)*.04deg);
}
.av-badge span{color:var(--ink)}
.av-badge:hover{transform:scale(1.06)}

/* ── 21. WATERMARK OUTLINE per pagina ── */
#page-about>.section::before,#page-menu .section::before,#page-locali>.section::before,
#page-eventi>.section:first-child::before,#page-contatti>.section::before,#page-lavora>.section::before{
  position:absolute;right:2%;top:1.5rem;z-index:0;pointer-events:none;
  font-family:var(--fd);font-size:clamp(4.5rem,16vw,14rem);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(203,161,53,.09);text-transform:uppercase;
  transform:translateY(calc(var(--par,0)*50px));
  will-change:transform;
}
#page-about>.section{position:relative}
#page-about>.section::before{content:'STORIA'}
#page-menu .section{position:relative}
#page-menu .section::before{content:'SERVIZI'}
#page-locali>.section{position:relative}
#page-locali>.section::before{content:'SEDI'}
#page-eventi>.section:first-child{position:relative}
#page-eventi>.section:first-child::before{content:'LIVE'}
#page-contatti>.section{position:relative}
#page-contatti>.section::before{content:'YO.'}
#page-lavora>.section{position:relative}
#page-lavora>.section::before{content:'CREW'}
#page-about .inner,#page-menu .inner,#page-locali .inner,#page-contatti .inner,#page-lavora .inner{position:relative;z-index:1}

/* ── 22. EVENTI / SOCIAL CARDS ── */
.social-sede-card{border:2px solid var(--ink3);box-shadow:var(--hs-sm);rotate:-.4deg;transform:translate(var(--mx,0px),var(--my,0px))}
.social-sedi-grid .social-sede-card:nth-child(2){rotate:.5deg}
.social-sedi-grid .social-sede-card:nth-child(3){rotate:-.3deg}
.social-sede-card:hover{rotate:0deg;translate:-4px -4px;box-shadow:9px 9px 0 rgba(0,0,0,.65);border-color:var(--gold)}
.social-sede-card::before{background:var(--gold);height:3px}
.ssc-num{color:rgba(203,161,53,.2);-webkit-text-stroke:1px rgba(203,161,53,.3)}
.social-sede-card:hover .ssc-num{color:rgba(203,161,53,.45)}
.ssc-name{color:var(--gold-hi)}
.ssc-tag,.ssc-note{font-family:var(--fmono);font-size:.62rem}
.ssc-btn{font-family:var(--fmono);border-width:2px;font-weight:700}
.ssc-btn:hover{transform:translate(3px,0);box-shadow:-3px 3px 0 rgba(0,0,0,.4)}
.ssc-ig{color:var(--gold-hi);border-color:var(--gold-line);background:var(--gold-dim)}
.ssc-ig:hover{background:var(--gold);color:var(--ink)}
.ssc-fb:hover{background:#7eb3e8;color:var(--ink)}
.ssc-wa:hover{background:#6ecb8a;color:var(--ink)}

/* ── 23. FORM — squadrati, focus oro ── */
.form-label{font-family:var(--fmono);color:var(--gold-hi)}
.form-input{border:2px solid var(--ink3);background:var(--ink1)}
.form-input:focus{border-color:var(--gold);background:var(--ink2);box-shadow:4px 4px 0 rgba(203,161,53,.22)}
.s-form input,.s-form select{border:2px solid rgba(203,161,53,.25)}
.s-form input:focus,.s-form select:focus{border-color:var(--gold);box-shadow:4px 4px 0 rgba(203,161,53,.18)}
.consent-wrap{border:2px solid var(--ink3)}
.consent-wrap:hover{border-color:rgba(203,161,53,.45)}
.consent-box{border-radius:0!important}
/* !important: deve vincere sugli stili inline dell'HTML (il consent-box WiFi ha
   background/border scritti inline, che altrimenti nascondono la spunta) */
.consent-wrap input:checked+.consent-box{background:var(--gold)!important;border-color:var(--gold)!important}
.consent-wrap input:checked+.consent-box::after{border-color:var(--ink)!important;opacity:1}
.f-fb.ok{color:var(--gold-hi)}
.info-box{border:2px solid var(--ink3);box-shadow:var(--hs-sm);transform:translate(var(--mx,0px),var(--my,0px))}
.info-box:hover{border-color:rgba(203,161,53,.5);translate:-3px -3px;box-shadow:7px 7px 0 rgba(0,0,0,.55)}
.info-box h4{font-family:var(--fmono);color:var(--gold)}
.c-icon{background:var(--ink3)}
.contact-row:hover .c-icon{background:var(--gold)}
.cv-upload-area{border:2px dashed var(--gold-line)}
.cv-upload-area:hover{border-color:var(--gold)}
.cv-upload-area.dragover{border-color:var(--gold);box-shadow:4px 4px 0 rgba(203,161,53,.25)}

/* ── 24. LOCATION DETAIL ── */
.loc-hero{background:var(--ink1)}
.loc-hero-grid{background-image:linear-gradient(rgba(203,161,53,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(203,161,53,.06) 1px,transparent 1px)}
.loc-big-num{color:transparent;-webkit-text-stroke:2px rgba(203,161,53,.12);transform:translateY(calc(var(--ppy,0px)*.8))}
.loc-hero:hover .loc-big-num{-webkit-text-stroke:2px rgba(203,161,53,.2);color:transparent}
/* Il nome gigante è decorativo e con line-height compresso finiva
   SOPRA al pulsante "Tutti i locali", intercettandone i clic. */
.loc-hero-name{text-shadow:5px 5px 0 rgba(203,161,53,.14);text-transform:uppercase;pointer-events:none}
.loc-back{position:relative;z-index:5;pointer-events:auto}
.loc-hero-sub{font-family:var(--fmono);color:var(--gold)}
.loc-back{font-family:var(--fmono);color:var(--gold)}
.hours-table td:first-child{font-family:var(--fmono);font-size:.64rem}
.hours-table tr:hover{background:var(--ink2)}

/* ── 25. COMMUNITY ── */
.comm-title{text-transform:uppercase}
.perk{font-family:var(--fmono);font-size:.7rem;border:1px solid var(--gold-line);padding:.35rem .7rem}
.perk::before{background:var(--spray);border-radius:0;transform:rotate(45deg)}

/* ── 26. WIFI ── */
.wifi-icon-wrap{border-radius:0;border:2px solid var(--gold-line);background:var(--gold-dim)}
.wifi-icon-wrap path{stroke:#EFCC4F}
.wifi-icon-wrap circle{fill:#EFCC4F}
@keyframes wifiPulse{0%,100%{box-shadow:0 0 0 0 rgba(203,161,53,.35)}50%{box-shadow:0 0 0 16px rgba(203,161,53,0)}}
.wifi-ring{border-radius:0;border-color:rgba(203,161,53,.12);rotate:45deg}

/* ── 27. PRIVACY (fondo chiaro: leggibilità prima di tutto) ── */
#page-privacy .section{background:var(--light)}
.privacy-section h3{color:var(--ink);border-left:4px solid var(--spray);padding-left:.7rem}
.privacy-alert{border-left:4px solid var(--spray)}
#page-privacy .btn-teal{background:var(--ink);color:var(--gold-hi);border-color:var(--ink)}
#page-privacy .btn-teal:hover{background:var(--spray);color:var(--cream)}

/* ── 28. SPRAY RIPPLE al click (accento street, usato da street-fx.js) ── */
.spray-burst{position:fixed;z-index:5998;pointer-events:none;width:8px;height:8px;margin:-4px 0 0 -4px}
.spray-burst i{
  position:absolute;left:0;top:0;width:5px;height:5px;background:var(--gold-hi);
  animation:sprayFly .55s var(--outExpo) forwards;
}
.spray-burst i:nth-child(2n){background:var(--spray);width:4px;height:4px}
.spray-burst i:nth-child(3n){width:3px;height:3px}
@keyframes sprayFly{
  from{transform:translate(0,0) rotate(45deg);opacity:1}
  to{transform:translate(var(--dx,20px),var(--dy,-20px)) rotate(45deg);opacity:0}
}
.spray-ring{
  position:fixed;z-index:5998;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;
  border:2px solid var(--gold-hi);transform:rotate(45deg);opacity:.9;
  animation:sprayRing .5s ease-out forwards;
}
@keyframes sprayRing{to{transform:rotate(45deg) scale(5.5);opacity:0}}

/* ── 29. RESPONSIVE ── */
@media(max-width:960px){
  .loc-card,.social-sede-card,
  .locs-grid .loc-card:nth-child(2),.locs-grid .loc-card:nth-child(3),
  .social-sedi-grid .social-sede-card:nth-child(2),.social-sedi-grid .social-sede-card:nth-child(3){rotate:0deg}
}

/* ── 30. SCROLL MOTION — hook per lo scroll engine di street-fx.js ── */
.hero-body{will-change:transform,opacity}
.slide-ui{will-change:transform,opacity}
.phil-logo-bg{transform:translateY(calc(-50% + var(--ppy,0px)))!important;will-change:transform}
.av-ph img{transform:translateY(var(--ppy,0px)) scale(1.12);will-change:transform}

/* ── 31. CARD "COMING SOON" — Tabaccheria (04) ── */
.loc-coming{cursor:default}
.loc-coming .loc-card-photo{background:var(--ink1)}
.loc-coming .loc-card-photo::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(203,161,53,.1) 1px,transparent 1.4px);
  background-size:8px 8px;
}
.loc-coming .loc-card-bar{background:var(--spray)}
.loc-coming-mark{
  position:absolute;left:50%;top:46%;z-index:3;white-space:nowrap;
  translate:-50% -50%;rotate:-7deg;
  font-family:var(--fd);font-size:1.2rem;letter-spacing:.12em;
  background:var(--acid);color:var(--ink);padding:.4rem 1.1rem;
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  animation:comingBob 3.4s ease-in-out infinite;
}
.loc-coming-mark::before{
  content:'';display:inline-block;width:8px;height:8px;margin-right:.55rem;
  background:var(--spray);border-radius:50%;
  animation:comingBlink 1.1s steps(2) infinite;
}
@keyframes comingBob{0%,100%{translate:-50% -50%;rotate:-7deg}50%{translate:-50% -60%;rotate:-4deg}}
@keyframes comingBlink{50%{opacity:.15}}
.loc-coming .loc-name{color:var(--cream)}
.loc-coming:hover .loc-name{color:var(--gold-hi)}
.loc-coming .loc-arrow{color:var(--muted)}
.loc-coming .loc-num{color:rgba(255,75,43,.2);-webkit-text-stroke:1px rgba(255,75,43,.3)}
.loc-coming:hover .loc-num{color:rgba(255,75,43,.42)}
/* ── GRIGLIA SEDI — le 4 card restano SEMPRE sulla stessa riga ──
   Si restringono con la finestra invece di andare a capo.
   minmax(0,1fr) impedisce che un contenuto lungo le faccia straripare;
   i testi scalano con clamp() così restano leggibili anche da strette. */
.locs-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,1.1vw,1.4rem);
}
.locs-grid .loc-name{font-size:clamp(1.1rem,1.55vw,1.85rem);line-height:1.05}
.locs-grid .loc-num{font-size:clamp(2.4rem,4vw,5.2rem)}
.locs-grid .loc-addr{font-size:clamp(.58rem,.72vw,.7rem);line-height:1.45}
.locs-grid .loc-arrow{font-size:clamp(.54rem,.68vw,.66rem);letter-spacing:.1em}
.locs-grid .loc-body{padding:clamp(.85rem,1.3vw,1.6rem)}
.locs-grid .loc-card:hover .loc-arrow{gap:.5rem;letter-spacing:.14em}
/* due colonne su tablet, una sui telefoni */
@media(max-width:900px){.locs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}}
@media(max-width:560px){.locs-grid{grid-template-columns:1fr}}

/* ── 37. CARD "PERUGIA — COMING SOON ESPLOSIVO" ─────────────
   Progetto separato (paninoteca, azienda diversa): non è una sede
   Echoes Cafè, quindi non è cliccabile e non entra nel database.
   Bomba da fumetto disegnata in CSS, miccia con scintilla animata. */
.loc-boom{cursor:default;border-color:var(--spray)!important}
.loc-boom .loc-card-bar{background:var(--spray)}
.loc-boom:hover{transform:translate(var(--mx,0px),var(--my,0px));box-shadow:var(--hs)}

.loc-boom-scena{
  background:radial-gradient(circle at 50% 65%, #2a1108 0%, var(--ink1) 62%);
  position:relative;overflow:hidden;
}
/* raggi d'esplosione dietro la bomba */
.loc-boom-scena::before{
  content:'';position:absolute;left:50%;top:56%;width:190%;aspect-ratio:1;
  translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,75,43,.13) 0deg 7deg, transparent 7deg 20deg);
  animation:boomRaggi 22s linear infinite;
}
@keyframes boomRaggi{to{rotate:360deg}}

/* corpo della bomba */
.loc-boom-scena::after{
  content:'';position:absolute;left:50%;top:60%;
  width:74px;height:74px;translate:-50% -50%;
  background:radial-gradient(circle at 34% 30%, #4a4238 0%, #14120f 62%);
  border-radius:50%;
  box-shadow:inset -5px -6px 10px rgba(0,0,0,.85), 0 0 0 3px var(--ink), 6px 8px 0 rgba(0,0,0,.5);
  animation:boomBattito 2.4s ease-in-out infinite;
}
@keyframes boomBattito{0%,100%{scale:1}50%{scale:1.05}}

/* miccia accesa: scintilla che pulsa sopra la bomba */
.loc-boom-mark{
  position:absolute;left:50%;top:24%;z-index:4;white-space:nowrap;
  translate:-50% 0;rotate:-6deg;
  font-family:var(--fd);font-size:1.05rem;letter-spacing:.14em;
  background:var(--spray);color:var(--cream);padding:.35rem 1rem;
  box-shadow:5px 5px 0 rgba(0,0,0,.65);
}
.loc-boom-mark::after{
  content:'';position:absolute;left:50%;bottom:-1.5rem;
  width:9px;height:9px;translate:-50% 0;border-radius:50%;
  background:var(--acid);
  box-shadow:0 0 12px 5px rgba(217,255,75,.75);
  animation:boomScintilla .55s steps(2) infinite;
}
@keyframes boomScintilla{0%,100%{opacity:1;scale:1}50%{opacity:.35;scale:.6}}

.loc-boom .loc-num{color:rgba(255,75,43,.28);-webkit-text-stroke:1px rgba(255,75,43,.4)}
.loc-boom .loc-name{color:var(--cream)}
.loc-boom .loc-arrow{color:var(--spray);font-weight:700}

/* Sede senza foto ancora disponibile (Tabaccheria) */
.loc-photo-attesa{
  background:
    radial-gradient(rgba(203,161,53,.13) 1px,transparent 1.4px) 0 0/9px 9px,
    linear-gradient(150deg,var(--ink2),var(--ink1));
}
.loc-photo-attesa::after{
  content:'ECHOES';position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--fd);font-size:2.4rem;letter-spacing:.12em;
  color:transparent;-webkit-text-stroke:1.5px rgba(203,161,53,.22);
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .loc-boom-scena::before,.loc-boom-scena::after,.loc-boom-mark::after{animation:none}
}

/* ── 32. FLOW — deriva titoli, skew da velocità, molla card ── */
.s-title{translate:calc(var(--par,0)*-34px) 0}
.comm-title{translate:calc(var(--par,0)*-24px) 0}
.big-quote{translate:calc(var(--par,0)*26px) 0}
.locs-grid,.social-sedi-grid,.pillars-grid,.stats-grid,.menu-grid,.mpv-grid{
  transform:skewY(calc(var(--vel,0)*-.3deg));
}
.loc-card .loc-num{translate:0 calc(var(--par,0)*14px)}

.locs-grid>.loc-card,.pillars-grid>.pillar,.social-sedi-grid>.social-sede-card,
.why-grid>.why-cell,.moment-card.rv,.moment-card.rv2,.moment-card.rv3,.moment-card.rv4{
  opacity:0;transform:translateY(74px) rotate(1.6deg) scale(.94);filter:none;
  transition:opacity .8s var(--outExpo),transform 1.2s var(--springy);
}
.locs-grid>.loc-card:nth-child(2),.pillars-grid>.pillar:nth-child(2),
.social-sedi-grid>.social-sede-card:nth-child(2),.why-grid>.why-cell:nth-child(2),
.moment-card.rv2{transition-delay:.08s}
.locs-grid>.loc-card:nth-child(3),.pillars-grid>.pillar:nth-child(3),
.social-sedi-grid>.social-sede-card:nth-child(3),.why-grid>.why-cell:nth-child(3),
.moment-card.rv3{transition-delay:.16s}
.locs-grid>.loc-card:nth-child(4),.moment-card.rv4{transition-delay:.24s}
.locs-grid>.loc-card.on,.pillars-grid>.pillar.on,.social-sedi-grid>.social-sede-card.on,
.why-grid>.why-cell.on,.moment-card.on{
  opacity:1;filter:none;
  transform:translate(var(--mx,0px),var(--my,0px)) rotate(0) scale(1);
}
.locs-grid>.loc-card.on:hover{transform:translate(var(--mx,0px),var(--my,0px))}
.pillars-grid>.pillar.on:hover{transform:none}

.locs-grid>.loc-card .loc-card-photo img{scale:1.18;transition:filter .55s var(--outExpo),opacity .45s,transform .7s var(--outExpo),scale 1.4s var(--outExpo)}
.locs-grid>.loc-card.on .loc-card-photo img{scale:1}
.about-visual .av-ph img{scale:1.14;transition:filter .6s var(--outExpo),scale 1.5s var(--outExpo)}
.about-visual.on .av-ph img{scale:1}

/* ── 33. APPLE SCRUB — sezioni che salgono in proporzione allo scroll ── */
.section>.inner{
  transform:translateY(calc(var(--rise,0)*80px));
  opacity:calc(1 - var(--rise,0)*.92);
}
.comm-title{scale:calc(1 + var(--rise,0)*.12);transform-origin:center bottom}
.big-quote{scale:calc(1 + var(--rise,0)*.08);transform-origin:left center}

/* ── 35. NAV RESPONSIVE — passa al menu ☰ prima che le voci si accavallino
   Con 10 voci lunghe la barra sta su una riga solo oltre ~1280px: sotto quella
   soglia i link andavano a capo e si sovrapponevano. Qui, tra 961 e 1280px,
   mostriamo il menu a tendina (stesso comportamento del mobile, già gestito
   da app.js via toggleMenu). Sopra 1280px resta la barra orizzontale piena. */
@media(min-width:961px) and (max-width:1280px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:fixed;top:96px;left:0;right:0;
    background:rgba(11,10,8,.98);
    padding:1.8rem 5vw;border-bottom:2px solid var(--gold);
    gap:1.3rem;z-index:499;backdrop-filter:blur(16px);
    max-height:calc(100vh - 96px);overflow-y:auto;
  }
}

/* pulsante "Eventi e Social" nell'hero:
   - griglia a 2 colonne auto (i due pulsanti sopra si autodimensionano)
   - il pulsante social copre entrambe le colonne (grid-column 1/-1):
     largo ESATTAMENTE quanto i due sopra messi insieme, gap incluso
   - giallo acid con testo nero, per risaltare */
.hero-ctas{display:grid;grid-template-columns:auto auto;gap:.8rem;width:fit-content;justify-content:start;align-items:start}
.hero-cta-social{
  grid-column:1 / -1;
  justify-content:center;
  background:var(--acid)!important;
  color:var(--ink)!important;
  border-color:var(--ink)!important;
}
.hero-cta-social:hover{background:var(--gold-hi)!important;color:var(--ink)!important}
@media(max-width:580px){
  .hero-ctas{display:flex;flex-direction:column;width:auto}
  .hero-cta-social{grid-column:auto}
}

/* ── 36. PAGINA MENÙ — selettore sedi (menu-pubblico.js) ──
   Ogni card porta a menu.html?sede=… : indirizzo dedicato per
   locale, così ogni sede può avere il proprio QR code. */
.sedi-menu-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.sedi-menu-griglia{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sedi-menu-griglia{grid-template-columns:1fr}}

.sede-menu-card{
  display:flex;flex-direction:column;gap:.5rem;
  padding:2rem 1.6rem;text-decoration:none;cursor:none;
  background:var(--ink2);border:2px solid var(--ink3);
  box-shadow:var(--hs);position:relative;overflow:hidden;
  transition:translate .35s var(--outExpo),box-shadow .35s var(--outExpo),border-color .3s,background .3s;
}
.sede-menu-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--outExpo);
}
.sede-menu-card:hover{translate:-5px -5px;box-shadow:11px 11px 0 rgba(0,0,0,.75);border-color:var(--gold);background:var(--ink3)}
.sede-menu-card:hover::before{transform:scaleX(1)}

.sede-menu-num{
  font-family:var(--fd);font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(203,161,53,.35);
  transition:color .3s;
}
.sede-menu-card:hover .sede-menu-num{color:rgba(203,161,53,.25)}
.sede-menu-nome{
  font-family:var(--ftitle);font-size:1.9rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cream);line-height:1.05;
}
.sede-menu-card:hover .sede-menu-nome{color:var(--gold-hi)}
.sede-menu-freccia{
  font-family:var(--fmono);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin-top:.4rem;transition:letter-spacing .3s var(--outExpo)
}
.sede-menu-card:hover .sede-menu-freccia{letter-spacing:.2em}

.sede-menu-card.spenta{cursor:default;opacity:.55;box-shadow:none;border-style:dashed}
.sede-menu-card.spenta:hover{translate:0 0;box-shadow:none;border-color:var(--ink3);background:var(--ink2)}
.sede-menu-stato{
  font-family:var(--fmono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:.4rem;
}
@media(max-width:960px){.sede-menu-card{cursor:pointer}}

.menu-stato{
  padding:3.5rem 1.5rem;text-align:center;
  font-family:var(--fmono);font-size:.8rem;color:var(--muted);
  border:2px dashed var(--gold-line);background:var(--ink1);
}

.menu-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 3.5rem}
@media(max-width:820px){.menu-griglia{grid-template-columns:1fr;gap:2.2rem}}

.menu-sezione{break-inside:avoid}
.menu-sezione-titolo{
  font-family:var(--ftitle);font-size:1.9rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-hi);padding-bottom:.5rem;margin-bottom:.3rem;
  border-bottom:3px solid var(--gold);
}
.menu-sezione-descr{font-family:var(--fmono);font-size:.68rem;color:var(--muted);margin-bottom:1rem;letter-spacing:.06em}
.menu-lista{display:flex;flex-direction:column}

.menu-riga{
  display:flex;align-items:baseline;gap:.7rem;
  padding:.75rem 0;border-bottom:1px solid rgba(203,161,53,.12);
  transition:padding-left .25s var(--outExpo);
}
.menu-riga:hover{padding-left:.5rem}
.menu-riga-testo{flex:1;display:flex;flex-direction:column;min-width:0}
.menu-nome{color:var(--cream);font-size:.98rem;font-weight:500;line-height:1.35}
.menu-descr{color:var(--muted);font-size:.8rem;font-weight:300;line-height:1.5;margin-top:.15rem}
.menu-prezzo{
  font-family:var(--fmono);font-size:.92rem;font-weight:700;color:var(--gold);
  flex-shrink:0;white-space:nowrap;
}
.menu-riga.esaurito .menu-nome,.menu-riga.esaurito .menu-prezzo{opacity:.42}
.menu-riga.esaurito .menu-nome{text-decoration:line-through}
.menu-badge{
  display:inline-block;font-family:var(--fmono);font-size:.54rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--spray);color:var(--cream);padding:.1rem .4rem;
  vertical-align:middle;margin-left:.35rem;text-decoration:none;
}
.menu-aggiornato{
  margin-top:2.5rem;font-family:var(--fmono);font-size:.65rem;
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
@media(max-width:960px){.menu-sede{cursor:pointer}}

/* ── 34. MOTION RIDOTTO ── */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .nav-links a:hover{animation:none}
  #street-intro{display:none}
  .loc-coming-mark,.loc-coming-mark::before{animation:none}
  .rv,.rv2,.rv3,.rv4,
  .locs-grid>.loc-card,.pillars-grid>.pillar,.social-sedi-grid>.social-sede-card,
  .why-grid>.why-cell,.moment-card{transition-duration:.01s;filter:none}
}