/* La Vecchia Posta — stylesheet condiviso
   Palette premium: nero come colore principale (con gradienti di
   continuità tra le tonalità --brown-dark/--brown-dark2/--brown, che
   restano questi nomi per non dover rinominare ogni riferimento nel
   file — ma ora sono scale di nero, non più marrone caldo), terracotta
   come accento di contrasto (--gold/--gold-light, stesso discorso). */
:root{
  --brown-dark:#0a0a0c;   /* nero profondo charcoal — sfondi pieni */
  --brown-dark2:#141418;  /* antracite scuro per elevazione */
  --brown:#2e2e2e;
  --cream:#f6f3ee;        /* neutro chiaro caldo per leggibilità ottimale */
  --cream-light:#faf8f5;
  --gold:#d86036;         /* terracotta ricco e vibrante */
  --gold-light:#ea9c75;   /* terracotta chiaro caldo ad alto contrasto */
  --amber:#f3c168;        /* oro caldo luminoso per stelle e accenti */
  --text:#1a1a1a;
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --font-display:'Fraunces','Palatino Linotype',serif;
  --font-body:'Inter','Segoe UI',sans-serif;
  /* Era 'Great Vibes': 41,8 KB di font scaricati per UNA riga di testo
     (il sottotitolo dell'hero, unico punto in cui era usato in tutto il
     sito). Ora usa il corsivo di Fraunces, già scaricato per i titoli:
     stesso ruolo decorativo, zero peso aggiuntivo. */
  --font-script:'Fraunces','Palatino Linotype',serif;
  --font-label:'Julius Sans One','Inter',sans-serif;
  /* Gradiente UNICO di pagina. Prima esisteva --gradient-dark, applicato
     a ogni singola sezione: ognuna lo faceva ripartire da capo dentro il
     proprio riquadro (stesso nero iniziale, stessi due aloni agli stessi
     angoli), quindi a ogni confine si vedeva un taglio netto e la pagina
     sembrava fatta di blocchi incollati. Questo invece viene dipinto UNA
     volta sull'intera altezza del documento (vedi body::after): il colore
     scorre da cima a fondo senza ripartenze, e gli aloni caldi compaiono
     una volta sola, a tre altezze diverse, non una volta per sezione. */
  --gradient-page:
    /* Innesto: i primi ~16% del layer partono dallo stesso nero pieno
       con cui si chiude la sfumatura dell'hero e solo dopo lasciano
       emergere l'alone caldo. Senza, il layer cominciava di colpo con
       il suo alone acceso contro il nero sopra: proprio quel salto
       disegnava la riga orizzontale al confine. Sta per primo perche'
       i livelli di sfondo si dipingono dall'alto verso il basso della
       lista, e questo deve stare SOPRA gli aloni. */
    linear-gradient(180deg, #0a0a0c 0%, rgba(10,10,12,.86) 5%, rgba(10,10,12,0) 17%),
    radial-gradient(ellipse 1200px 900px at 6% 6%, rgba(234,156,117,.13), transparent 58%),
    radial-gradient(ellipse 1150px 950px at 97% 36%, rgba(216,96,54,.10), transparent 55%),
    radial-gradient(ellipse 1000px 850px at 8% 74%, rgba(216,96,54,.08), transparent 55%),
    linear-gradient(180deg,
      #0a0a0d 0%,
      #101015 20%,
      #15151c 44%,
      #121218 62%,
      #0d0d11 80%,
      #08080a 100%);
}
*{box-sizing:border-box;margin:0;padding:0;}
/* L'attributo hidden ha specificita' bassissima: qualunque regola che
   imposti display (flex, grid, inline-block dei bottoni) lo annulla in
   silenzio. E' successo tre volte in questa pagina — barra dei passi,
   griglia degli orari e tasto Continua restavano a schermo dopo essere
   stati nascosti via JS. Una regola sola, invece di una toppa per
   elemento. */
[hidden]{display:none !important;}
/* overflow-x:hidden SOLO su html, non piu' anche su body: messo sul
   body lo trasforma in un contenitore di scorrimento che pero' non
   scorre (a scorrere e' il viewport). Le animazioni legate allo scroll
   cercano il contenitore piu' vicino, trovavano il body e restavano
   congelate a un valore fisso — misurato: timeline ferma al 71,9%
   qualunque fosse la posizione della pagina. Su html l'overflow viene
   propagato al viewport, che e' esattamente cio' che serve. */
html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  max-width: 100vw;
}
body{
  font-family:var(--font-body);
  /* Sfondo scuro, non più crema: il sito è interamente scuro, e un body
     chiaro sotto significava lampo di crema prima che la foto hero
     carichi, bordo chiaro nell'overscroll, e testo chiaro su fondo
     chiaro se una sezione non dipinge il proprio sfondo.
     color-scheme:dark fa disegnare al browser anche i controlli nativi
     (datepicker, spinner del campo numero, scrollbar) in versione
     scura, invece di rettangoli bianchi in mezzo al form. */
  background:var(--brown-dark);
  color:var(--cream);
  color-scheme:dark;
  line-height:1.65;
  position:relative; /* riferimento per il layer di sfondo qui sotto */
}

/* Il layer che dipinge il gradiente di pagina. E' un solo rettangolo
   alto quanto TUTTO il documento, quindi il gradiente si distribuisce
   sull'intera lunghezza dello scroll: nessuna sezione lo fa ripartire.
   Sta a z-index 0, sotto ai contenuti (che stanno a 1) e sopra alla
   foto fissa dell'hero, che altrimenti si vedrebbe in trasparenza per
   tutta la pagina ora che le sezioni non hanno piu' sfondo proprio. */
body::after{
  content:"";
  position:absolute;left:0;right:0;top:0;bottom:0;
  z-index:0;pointer-events:none;
  background:var(--gradient-page);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
/* Sulla home il layer parte dove finisce l'hero: sopra deve restare
   visibile la foto a tutto schermo. Sulle pagine interne l'intestazione
   ha una foto propria e opaca, quindi puo' partire da zero. */
body.home-zoom-page::after{top:100vh;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:.5px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Focus da tastiera: prima non esisteva NESSUNA regola di focus, quindi
   chi naviga con Tab non vedeva dove si trovava (WCAG 2.4.7).
   :focus-visible e non :focus, così il contorno appare a chi usa la
   tastiera e non a ogni click del mouse. */
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}
/* Salto-al-contenuto: primo stop di Tab, resta invisibile finché non
   riceve focus. Evita di dover attraversare tutta la nav ogni volta. */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:9999;
  background:var(--gold);color:#fff;padding:10px 18px;
  font-family:var(--font-label);font-size:.85rem;letter-spacing:1px;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}
/* Etichetta leggibile dagli screen reader ma non a schermo */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ph{
  background:linear-gradient(135deg,#2a2a2a,#111);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);
  font-size:.85rem;letter-spacing:1px;text-transform:uppercase;
  border:1px dashed rgba(255,255,255,.5);
  text-align:center;padding:14px;
}

/* preloader — nascosto da main.js quando la pagina è pronta, MA con
   fallback in puro CSS: se per qualsiasi motivo il JS non parte (script
   bloccato, errore, connessione lenta al CDN...) questa animazione lo
   nasconde comunque dopo 2.5s. Senza questo fallback, un JS che non
   parte lasciava la pagina bloccata/bianca per sempre — mai bene. */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--brown-dark);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
  animation:preloaderFailsafe 0s 2.5s forwards;
}
#preloader span{
  color:var(--gold);font-size:1.4rem;letter-spacing:3px;text-transform:uppercase;
  opacity:0;animation:fadeText 1.4s ease forwards;
}
@keyframes fadeText{to{opacity:1;}}
@keyframes preloaderFailsafe{to{opacity:0;visibility:hidden;}}
#preloader.hide{opacity:0;visibility:hidden;}

/* Il contenuto della pagina è visibile FIN DA SUBITO (opacity:1 di
   base): il piccolo fade-in è solo un'aggiunta estetica via animazione
   CSS pura, non un cancello che il JS deve aprire. Prima il body
   partiva a opacity:0 e solo main.js lo rendeva visibile — se main.js
   non partiva, la pagina restava bianca per sempre. */
body{animation:bodyFadeIn .5s ease;}
@keyframes bodyFadeIn{from{opacity:0}to{opacity:1}}

/* header */
/* In cima alla pagina l'header non e' una barra: e' una sfumatura che
   si spegne verso il basso. Prima era un rettangolo pieno (.9 opaco) e
   il suo bordo inferiore tagliava la foto dell'hero con una riga netta
   a tutta larghezza. Niente backdrop-filter qui: la sfocatura si ferma
   ai bordi dell'elemento e ricreerebbe esattamente quel bordo. Il
   fondo pieno e la sfocatura tornano appena si scrolla, quando sotto
   non c'e' piu' la foto ma il contenuto e servono davvero a separare. */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,
    rgba(8,7,6,.88) 0%,
    rgba(8,7,6,.64) 45%,
    rgba(8,7,6,.28) 78%,
    rgba(8,7,6,0) 100%);
  color:var(--cream);
  padding:16px 5% 26px;
  display:flex;justify-content:space-between;align-items:center;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
header.scrolled{
  padding:9px 5%;
  background:rgba(6,6,6,.97);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
/* pagina unica, niente nav: solo il logo, centrato — wordmark pulito
   invece di una barra sbilanciata con un solo elemento a sinistra */
.header-logo-only{justify-content:center;}
.header-logo-only .logo{font-size:1.4rem;}
header .logo{font-size:1.3rem;font-weight:bold;letter-spacing:1px;}
header .logo span{color:var(--gold);}
nav a{font-family:var(--font-label);margin-left:24px;font-size:clamp(.95rem,1.05vw,1.15rem);text-transform:uppercase;letter-spacing:1px;position:relative;padding-bottom:4px;}
/* scaleX invece di animare width: stesso effetto a vedersi, ma il
   browser lo compone senza ricalcolare il layout ad ogni frame. */
nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
nav a:hover::after,nav a.active::after{transform:scaleX(1);}
nav a.active{color:var(--gold);}
.nav-toggle{display:none;background:none;border:none;color:var(--cream);font-size:1.6rem;cursor:pointer;}


.btn{
  display:inline-block;background:var(--gold);color:#fff;
  padding:15px 36px;border-radius:0;font-weight:bold;letter-spacing:1px;
  text-transform:uppercase;font-size:clamp(.88rem,.98vw,1.1rem);transition:.25s;
  box-shadow:0 10px 30px rgba(193,80,46,.35);
}
.btn:hover{background:var(--cream);color:var(--brown-dark);transform:translateY(-2px);box-shadow:0 14px 34px rgba(193,80,46,.45);}
.btn-outline{
  display:inline-block;border:1px solid var(--gold);color:var(--cream);
  padding:14px 34px;letter-spacing:1px;text-transform:uppercase;font-size:clamp(.85rem,.94vw,1.05rem);
  transition:.25s;
}
.btn-outline:hover{background:var(--gold);color:var(--brown-dark);}

.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  width:22px;height:36px;border:2px solid var(--gold-light);border-radius:12px;z-index:2;
}
.scroll-cue::before{
  content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;background:var(--gold-light);
  border-radius:2px;transform:translateX(-50%);animation:scrollcue 1.6s ease infinite;
}
@keyframes scrollcue{0%{opacity:1;top:6px;}100%{opacity:0;top:18px;}}

/* ============================================================
   EFFETTO 1 (v2) — Sfondo fisso che zooma per TUTTA la pagina
   ============================================================
   .zoom-bg-fixed  = layer fixed, dietro a tutto (z-index:0), copre
                      l'intero viewport per l'intera durata dello scroll
                      della home. Lo scale() dell'immagine cresce in modo
                      continuo dall'inizio alla fine del documento (vedi
                      un unico ScrollTrigger scrub in animations.js —
                      NIENTE pin, quindi niente dei problemi di
                      blocco/reversibilità che il pin aveva causato).
   .hero-text-wrap  = sezione normale (non pinnata) con solo il testo,
                      sopra il fixed layer; il testo fa fade-out nei
                      primi 100vh di scroll.
   .zoom-seam       = "finestra" trasparente tra una sezione e l'altra:
                      qui il fixed layer torna visibile, da cui l'effetto
                      "a tratti" per tutta la pagina.
   Tutte le sezioni di contenuto hanno sfondo solido (regola sotto) per
   coprire il fixed layer tranne nelle seam. */
/* Confinato all'hero (100vh): richiesta esplicita — "il video che si
   muove lo voglio solo sulla home", non più su tutta la pagina. Fixed
   con altezza fissa invece di inset:0 (che lo farebbe alto quanto
   l'intero viewport per l'intero scroll) — appena l'utente supera
   l'hero, il resto delle sezioni (sfondi pieni, vedi sotto) lo copre. */
.zoom-bg-fixed{
  position:fixed;top:0;left:0;right:0;height:100vh;z-index:0;overflow:hidden;pointer-events:none;
}
.hero-zoom-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1); /* stato iniziale — GSAP anima in continuo per tutto lo scroll */
  will-change:transform;
}
/* La foto hero è un tag immagine, non uno sfondo CSS: qui serve
   object-fit per ottenere lo stesso "riempi e taglia". transform-origin
   al centro-basso, dove nella foto sta la scena viva, così lo zoom si
   stringe verso quella e non verso un angolo vuoto. */
.hero-zoom-photo{width:100%;height:100%;object-fit:cover;background:#000;transform-origin:50% 60%;}

/* Due veli sovrapposti invece di uno solo verticale: il testo hero è
   ancorato a sinistra, e con il solo velo dall'alto la sua leggibilità
   dipendeva da quanto fosse chiara la foto proprio lì. Quello
   orizzontale garantisce il contrasto sotto la colonna di testo
   qualunque foto ci sia dietro, lasciando la destra più aperta. */
.hero-zoom-overlay{
  position:absolute;inset:0;
  background:
    /* Alone caldo in alto a sinistra, dove sta il titolo: e' lo stesso
       accento terracotta del gradiente di pagina, cosi' l'hero e il
       resto del sito hanno la stessa temperatura invece di essere uno
       caldo e l'altro grigio. */
    radial-gradient(ellipse 1100px 800px at 14% 22%, rgba(216,96,54,.11), transparent 62%),
    /* Velo orizzontale sotto la colonna di testo. Piu' passaggi
       intermedi di prima (era .86 → .62 → .12 → 0): con pochi stop il
       salto di luminosita' a meta' schermo si vedeva come una banda. */
    linear-gradient(90deg,
      rgba(8,7,6,.88) 0%,
      rgba(8,7,6,.74) 24%,
      rgba(8,7,6,.52) 42%,
      rgba(8,7,6,.28) 58%,
      rgba(8,7,6,.10) 76%,
      rgba(8,7,6,0) 100%),
    /* Verticale: scuro sopra (sotto l'header) e sotto (verso la fine
       dell'hero), piu' aperto al centro. Prima era una velatura piatta
       .5 → .72 che spegneva la foto in modo uniforme, senza profondita'. */
    linear-gradient(180deg,
      rgba(8,7,6,.66) 0%,
      rgba(8,7,6,.34) 22%,
      rgba(8,7,6,.30) 52%,
      rgba(8,7,6,.48) 80%,
      rgba(8,7,6,.62) 100%);
}
/* Layout asimmetrico invece di tutto centrato: il testo ancorato a
   sinistra in una colonna stretta lascia vedere il video/foto sulla
   destra (non solo "sfondo scurito dietro al testo") — legge come
   una composizione editoriale, non come un hero-template generico
   con tutto impilato al centro. Stesso identico movimento di zoom
   di sempre: qui cambia solo la composizione, zero animazione in più. */
.hero-text-wrap{
  position:relative;z-index:1;height:100vh;min-height:560px;
  display:flex;align-items:center;justify-content:flex-start;
  text-align:left;color:var(--cream);background:transparent;
  padding:0 6% 0 8%;
}
/* Sfumatura in fondo all'hero: la sezione successiva ha uno sfondo
   opaco, quindi scorrendo il suo bordo superiore tagliava la foto con
   una riga netta. Qui la foto si spegne nello stesso nero con cui
   quella sezione inizia, così il passaggio non ha un confine visibile.
   pointer-events:none per non rubare i click ai bottoni sotto. */
/* Era alta 26vh e diventava nero pieno solo all'ultimo pixel: proprio
   sul bordo la foto era ancora un po' visibile, sotto partiva il layer
   di pagina opaco, e il salto si leggeva come una riga netta. Ora e'
   piu' alta e chiude sul nero PRIMA della fine, cosi' gli ultimi
   ~5vh sono gia' dello stesso colore con cui parte il gradiente di
   pagina: il passaggio non ha piu' un confine. */
.hero-text-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46vh;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(10,10,12,.30) 32%,
    rgba(10,10,12,.72) 62%,
    rgba(10,10,12,.95) 82%,
    var(--brown-dark) 90%,
    var(--brown-dark) 100%);
}
.hero-zoom-text{position:relative;z-index:2;max-width:min(39vw,760px);will-change:opacity,transform;}
.hero-zoom-text h1{font-size:clamp(2.2rem,4.44vw,5.6rem);margin-bottom:14px;text-shadow:0 3px 10px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.9);}
/* Fiducia a colpo d'occhio: stelle + recensioni + stato aperto/chiuso,
   PRIMA del sottotitolo — la prima cosa che l'occhio deve trovare
   dopo il nome, non dopo aver letto tutto il resto. */
.hero-trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
  font-size:clamp(.9rem,1vw,1.2rem);margin-bottom:22px;color:var(--cream);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.hero-stars{color:var(--gold-light);letter-spacing:1px;}
.hero-trust-sep{opacity:.5;}
.hero-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:20px;font-size:clamp(.8rem,.89vw,1.05rem);
  background:rgba(8,8,8,.5);
}
.hero-status--demo{color:var(--gold-light);}
/* font-style:italic esplicito: Great Vibes era corsivo per natura e
   non serviva dichiararlo, Fraunces no — senza questo il sottotitolo
   perderebbe del tutto il tono decorativo. Il corsivo 500 è già
   incluso nel caricamento dei font (1,500 nell'URL). */
.hero-zoom-text .sub{font-family:var(--font-script);font-size:clamp(1.8rem,2vw,2.6rem);color:var(--gold-light);margin-bottom:8px;font-style:italic;font-weight:500;text-shadow:0 2px 8px rgba(0,0,0,.7);}
.hero-zoom-text .since{font-size:clamp(.95rem,1.06vw,1.25rem);letter-spacing:2px;text-transform:uppercase;opacity:.98;margin-bottom:34px;text-shadow:0 2px 8px rgba(0,0,0,.7);font-weight:600;}
/* Doppia CTA: prenotare (form) vs chiamare subito (tel:) sono due
   intenti diversi — affiancate, non un bottone unico. */
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-cta-row .btn,.hero-cta-row .btn-outline{margin:0;}

/* Video confinato all'hero (vedi .zoom-bg-fixed sopra): tutte le altre
   sezioni tornano al loro sfondo pieno normale, invece di stare
   trasparenti sopra il video. Le regole "solide" di ogni sezione sono
   già definite più sotto nel file (.specialita, .testi, .contatti,
   .cta-band, footer...) — qui basta assicurarsi che ogni sezione
   copra correttamente il layer fisso dell'hero quando ci scorre sopra
   (position:relative + z-index:1 + uno sfondo pieno di base). */
/* Tema principale: nero e i suoi gradienti ovunque nel sito, non solo
   in qualche sezione — richiesta esplicita dell'utente. Ogni <section>
   parte da questo sfondo scuro sfumato + testo chiaro; le sezioni che
   avevano già un colore esplicito (.specialita, .filiera, .famiglia,
   .contatti...) restano invariate, sono solo ora coerenti col resto. */
/* Nessuno sfondo per sezione: lo dipinge body::after, una volta sola,
   sull'intera pagina. z-index:1 serve solo a stare sopra quel layer. */
section{position:relative;z-index:1;background:transparent;color:var(--cream);}
.hero-text-wrap{background:transparent;} /* l'unica eccezione: qui il video deve vedersi */
.cta-band,footer,.testi,.contatti{position:relative;z-index:1;}

@media(max-width:768px){
  .hero-text-wrap{height:88vh;min-height:480px;}
}

/* hero ridotto per le pagine interne (menù/contatti):
   stesso fixed layer dietro, ma il blocco titolo è più basso — non
   serve un'intera schermata di titolo su pagine di contenuto */
.hero-text-wrap--small{height:54vh;min-height:360px;}

/* etichetta "foto dimostrativa" — riusabile ovunque ci sia una foto
   stock che non è ancora quella reale del locale */
.photo-tag{
  position:absolute;bottom:16px;left:16px;z-index:3;
  font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(8,8,8,.55);color:var(--cream);padding:5px 10px;border-radius:20px;
  pointer-events:none;
}

/* breadcrumb / page header */
/* Il velo scuro sta in un ::before, non nella shorthand background:
   le pagine passano la foto con style="background-image:url(...)"
   inline, che sovrascrive l'intera background-image della regola —
   quindi il gradiente di oscuramento spariva e kicker/breadcrumb
   finivano su foto piena, illeggibili. Come pseudo-elemento il velo
   c'è sempre, qualunque foto venga passata inline. */
.page-header{
  position:relative;
  padding-top:150px;padding-bottom:60px;text-align:center;color:var(--cream);
}
/* La foto sta in ::before, non piu' come sfondo della sezione, per
   poterla mascherare: in fondo si dissolve invece di fermarsi con un
   bordo. Prima l'intestazione chiudeva su un nero pieno e sotto
   ripartiva il gradiente di pagina, piu' caldo: quel salto era una
   riga netta a tutta larghezza. Ora la foto svanisce e sotto continua
   lo stesso gradiente che scorre dietro tutta la pagina.
   L'URL arriva dall'HTML come variabile --hdr-img. */
.page-header::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--hdr-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.5) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.5) 74%,transparent 100%);
}
/* Velo di leggibilita' sopra la foto. Si spegne anch'esso verso il
   basso: se restasse pieno fino al bordo creerebbe la stessa riga che
   stiamo togliendo, solo di un altro colore. */
.page-header::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,6,6,.70) 0%,
    rgba(6,6,6,.78) 50%,
    rgba(6,6,6,.34) 82%,
    rgba(6,6,6,0) 100%);
}
.page-header > *{position:relative;z-index:1;}
.page-header .section-kicker{color:var(--gold-light);}
.page-header h1{color:var(--cream);font-size:clamp(2rem,5vw,3rem);}
.breadcrumb{margin-top:14px;font-size:.85rem;opacity:.9;letter-spacing:.5px;}
.breadcrumb a:hover{color:var(--gold-light);}

section{padding:150px 8%;max-width:1150px;margin:0 auto;}

/* Separatore tra sezioni — pagina unica, sfondo continuo (foto/video
   che zooma dietro a tutto): senza uno sfondo diverso per sezione,
   serve un segnale chiaro di "qui finisce un blocco, inizia il
   prossimo". Linea sottile che sfuma ai lati, non un bordo netto —
   coerente con l'estetica premium, non spezza la continuità visiva. */
.section-sep{
  position:relative;z-index:1;padding:34px 0;
  display:flex;justify-content:center;
  background:transparent;
}
.section-sep span.sep-line{position:relative;z-index:1;}
/* La riga NON è già disegnata: parte a larghezza zero e si apre
   (max-width) quando entra nello schermo — stesso IntersectionObserver
   del sistema .reveal (vedi main.js), solo un'animazione diversa.
   Accompagna l'occhio nel cambio sezione invece di essere un confine
   statico già lì da subito. Solo transform/opacity-equivalenti
   (max-width qui, ma su un elemento larghezza fissa in px, non su
   layout) — leggero, nessun reflow pesante. */
/* Larghezza fissa + scaleX invece di animare max-width: la riga si apre
   uguale, ma senza rimisurare il layout per tutta la durata. */
.sep-line{
  display:block;height:1px;width:280px;max-width:80vw;
  background:linear-gradient(90deg,transparent,var(--gold-light) 50%,transparent);
  opacity:0;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1), opacity .7s ease;
}
.sep-line.visible{transform:scaleX(1);opacity:.6;}
/* pagina unica: gli anchor-link (#storia, #menu...) devono fermarsi
   sotto l'header fisso, non esattamente in cima (altrimenti il titolo
   della sezione resterebbe nascosto dietro la nav) */
section[id]{scroll-margin-top:84px;}

/* CTA fisso — sempre visibile durante lo scroll, per massimizzare le
   conversioni (richiesta esplicita: "aumenti il CTA, la conversione").
   z-index sopra l'header stesso: deve restare cliccabile ovunque. */
.sticky-cta{
  position:fixed;bottom:24px;right:24px;z-index:200;
  background:var(--gold);color:#fff;
  padding:14px 26px;font-family:var(--font-label);font-weight:bold;
  text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, background .2s ease;
}
.sticky-cta:hover{background:var(--gold-light);transform:translateY(-2px);}
@media(max-width:600px){
  /* Su schermi stretti il bottone d'angolo finiva SEMPRE sopra a
     qualcosa (titoli tagliati, testo del footer coperto) — cambia
     forma: barra intera in fondo, fissa, prevedibile. body ha un
     padding-bottom pari alla sua altezza così l'ultimo testo della
     pagina (il footer) non ci finisce sotto. */
  .sticky-cta{
    left:0;right:0;bottom:0;top:auto;width:100%;
    text-align:center;padding:16px;font-size:.85rem;
    box-shadow:0 -6px 24px rgba(0,0,0,.45);
  }
  body{padding-bottom:58px;}
}
.section-title{text-align:center;margin-bottom:10px;color:var(--cream);font-size:clamp(2.2rem,2.5vw,3.2rem);}
.section-kicker{font-family:var(--font-label);text-align:center;color:var(--gold);text-transform:uppercase;letter-spacing:3px;font-size:.85rem;margin-bottom:16px;font-weight:normal;}
.divider{width:60px;height:3px;background:var(--gold);margin:0 auto 44px;}

/* reveal animation */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1.visible{transition-delay:.1s;}
.reveal-delay-2.visible{transition-delay:.22s;}
.reveal-delay-3.visible{transition-delay:.34s;}
.reveal-delay-4.visible{transition-delay:.46s;}

/* ============================================================
   STORIA — layout editoriale a tappe. Sostituisce l'orologio/
   quadrante: sfondo 3D fisso (nastro scultoreo che "vive" — vedi
   initHistoryRibbon3D() in animations.js) dietro a slide editoriali
   (anno gigante + foto + testo) che scorrono in scrub, pinnate come
   prima ma con animazioni di entrata/uscita multi-direzionali GSAP
   invece del semplice fade/scale usato dal quadrante. */
#storia{max-width:none;padding:0;background:transparent;}
/* Niente sfondo proprio: prima aveva un gradiente tutto suo che
   iniziava e finiva dentro il proprio riquadro, quindi disegnava due
   righe orizzontali nette (una in cima e una in fondo al blocco) in
   mezzo al gradiente continuo di pagina. */
.storia-lead{
  position:relative;padding:50px 8% 1px;
  background:transparent;
}
.sep-line-wrap{display:flex;justify-content:center;margin-bottom:30px;}
#storia .section-kicker{font-size:1.05rem;margin-bottom:20px;text-shadow:0 2px 10px rgba(0,0,0,.85);}
#storia .section-title{font-size:clamp(2.4rem,3.4vw,4.4rem);text-shadow:0 3px 16px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.9);}
#storia .divider{margin-bottom:26px;}

/* Sfondo della sezione Storia: prima era nero piatto perche' sopra ci
   stava il nastro 3D a fare da scena. Tolto il nastro, usa lo stesso
   gradiente scuro del resto del sito, cosi' non resta un rettangolo
   piu' spento in mezzo alla pagina. */
#history-section{position:relative;background:transparent;}

/* Pin classico: la sezione resta ferma a schermo mentre si scrolla
   dentro .milestones-pin-wrap — camera 3D e tappe editoriali sono
   guidate 1:1 dallo scroll (self.progress), niente autoplay. Prima
   fetta (~16%) è il reveal ravvicinato/drammatico del nastro; il
   resto è un unico avanzamento in avanti lungo il percorso, un verso
   solo — vedi initHistorySection() in animations.js. */
.milestones-pin-wrap{position:relative;height:280vh;}
.milestones-stage{position:relative;height:100vh;overflow:hidden;z-index:1;}

/* --- Sfondo per tappa ------------------------------------------------
   Quattro livelli sovrapposti, uno per tappa: il JS incrocia le
   opacita' negli ultimi istanti di ogni tappa (vedi setStoriaBg in
   animations.js). Sfocatura + scale(1.12) perche' una foto sfocata
   fino ai bordi lascia una cornice trasparente: ingrandirla la
   nasconde. Luminosita' bassissima: e' un fondale, il testo davanti
   deve restare l'unica cosa leggibile. */
/* La maschera evita che il blocco sfondo+velo cominci e finisca di
   colpo ai bordi della scena: senza, il bordo superiore si vedeva come
   una riga netta contro il gradiente di pagina. */
.storia-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.storia-bg-layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(26px) brightness(.5) saturate(.95);
  transform:scale(1.12);
  opacity:0;
  will-change:opacity;
}
/* Temperatura che scende col passare dei decenni: 1975 caldo/seppia,
   Oggi neutro. E' il gradiente cronologico chiesto, ottenuto senza
   una riga di JS in piu'. */
.storia-bg-layer[data-idx="0"]{filter:blur(26px) brightness(.52) sepia(.55) saturate(1.1);}
.storia-bg-layer[data-idx="1"]{filter:blur(26px) brightness(.51) sepia(.36) saturate(1);}
.storia-bg-layer[data-idx="2"]{filter:blur(26px) brightness(.5) sepia(.18) saturate(.95);}
/* Velo scuro fisso sopra i livelli: senza, il contrasto del testo
   dipenderebbe da quale foto sta passando sotto. */
.storia-bg-veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(7,7,9,.55) 0%, rgba(7,7,9,.74) 58%, rgba(7,7,9,.9) 100%);
}

/* --- Linea del tempo -------------------------------------------------
   Il tratto pieno avanza con scaleY dall'alto invece che con height:
   stessa resa, ma niente ricalcolo di layout a ogni frame di scroll. */
.storia-timeline{
  position:absolute;left:2.6%;top:22%;bottom:22%;
  width:70px;z-index:3;pointer-events:none;
}
.tl-track,.tl-fill{position:absolute;left:0;top:0;bottom:0;width:1px;}
.tl-track{background:rgba(246,243,238,.16);}
.tl-fill{
  background:linear-gradient(180deg,var(--amber),var(--gold-light));
  transform:scaleY(0);transform-origin:top center;
  will-change:transform;
}
.tl-mark{
  position:absolute;left:13px;
  transform:translateY(-50%);
  font-family:var(--font-label);
  /* stesso motivo del tag: 10,6px su 1280 */
  font-size:clamp(.7rem,.72vw,.9rem);
  letter-spacing:1.4px;
  color:rgba(246,243,238,.34);
  white-space:nowrap;
  transition:color .35s ease;
}
.tl-mark::before{
  content:"";position:absolute;left:-13px;top:50%;
  width:7px;height:1px;margin-top:-.5px;
  background:currentColor;
}
.tl-mark[data-idx="0"]{top:0;}
.tl-mark[data-idx="1"]{top:33.33%;}
.tl-mark[data-idx="2"]{top:66.66%;}
.tl-mark[data-idx="3"]{top:100%;}
.tl-mark.done{color:var(--gold-light);}

.milestone-slide{
  position:absolute;inset:0;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;
  padding:0 7%;pointer-events:none;
}
.milestone-slide.active{pointer-events:auto;}

/* Anno gigante — dietro a foto/testo (z-index sotto), semi-trasparente
   e "metallico" (gradiente + text-stroke sottile), scala/entra dal
   basso via JS. */
/* L'anno vive nella fascia BASSA della scena, non al centro. Centrato
   verticalmente era largo ~470px su una scena da 1152 e le cifre
   passavano proprio sotto le righe di testo, rendendo illeggibili
   entrambi. Spostarlo di lato non bastava: finiva tutto dietro alla
   foto, che è opaca, e spariva. Sotto foto e testo c'è invece una
   fascia vuota: lì resta grande e leggibile senza coprire nulla. */
.big-year{
  position:absolute;left:50%;top:80%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(7rem,18vw,13rem);
  line-height:1;white-space:nowrap;
  z-index:1;pointer-events:none;
  /* Tinta unita, non un gradiente ritagliato sui glifi: quella tecnica
     richiede colore trasparente, e con glifi trasparenti l'ombra qui
     sotto veniva disegnata dietro il nulla — inutile proprio dove
     serviva, visto che il problema segnalato era la leggibilità.
     Unica trasparenza rimasta: l'opacity che pilota il JS. */
  color:var(--amber);
  -webkit-text-stroke:1.5px rgba(243,193,104,.45);
  text-shadow:0 4px 30px rgba(0,0,0,.55);
  opacity:0;
  will-change:transform,opacity;
}

.image-wrapper{
  position:relative;z-index:2;grid-column:1;justify-self:end;
  width:100%;max-width:min(36vw,760px);
  will-change:transform,opacity;
}
.image-wrapper img{
  width:100%;height:clamp(400px,26vw,620px);object-fit:cover;border-radius:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.55);display:block;
}

.text-content{
  position:relative;z-index:2;grid-column:2;justify-self:start;
  max-width:min(32vw,660px);
  will-change:transform,opacity;
}
.text-content h3{
  font-family:var(--font-display);font-size:clamp(2rem,2.3vw,3rem);color:var(--gold-light);
  margin-bottom:16px;text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.text-content p{
  font-family:var(--font-body);font-size:clamp(1.3rem,1.45vw,1.8rem);line-height:1.65;
  color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* Slide alterne (indici dispari): foto a DESTRA, testo a SINISTRA —
   direzioni di entrata invertite gestite in JS, qui solo l'ordine
   griglia in modo che la foto sia sempre "vicina" al proprio lato di
   ingresso. */
/* grid-row:1 esplicito su entrambi. Con la sola grid-column, nelle
   tappe a colonne invertite l'auto-placement piazzava la foto in
   colonna 2 e poi, non tornando indietro, spingeva il testo in una
   SECONDA riga: foto in alto, testo in basso addosso all'anno gigante.
   Le tappe pari sembravano a posto solo perché lì l'ordine coincideva
   con quello naturale. */
.milestone-slide .image-wrapper,
.milestone-slide .text-content{grid-row:1;}
.milestone-slide[data-idx="1"] .image-wrapper,
.milestone-slide[data-idx="3"] .image-wrapper{grid-column:2;justify-self:start;}
.milestone-slide[data-idx="1"] .text-content,
.milestone-slide[data-idx="3"] .text-content{grid-column:1;justify-self:end;text-align:right;}

/* Anche per chi ha "riduci animazioni" attivo nel sistema: animations.js
   esce subito in quel caso, quindi senza questa regola le 4 tappe
   restavano tutte sovrapposte (sono absolute+inset:0, le posiziona il
   JS) e l'anno gigante invisibile (opacity:0 di partenza). Riusiamo lo
   stesso layout impilato già collaudato per mobile invece di
   inventarne un altro. */
@media(max-width:800px), (prefers-reduced-motion: reduce){
  .milestones-pin-wrap{height:auto;}
  /* Qui il JS non gira: lo sfondo resterebbe a opacity:0 (livelli
     invisibili ma comunque scaricati) e la linea del tempo a scaleY(0),
     cioe' una riga grigia che non avanza mai. Meglio toglierli: le
     tappe impilate hanno gia' l'anno scritto sopra ognuna. */
  .storia-bg, .storia-timeline{display:none;}
  .milestones-stage{
    position:relative;height:auto;overflow:visible;
    display:flex;flex-direction:column;gap:60px;padding:30px 0 50px;
  }
  .milestone-slide{
    position:relative;inset:auto;opacity:1;pointer-events:auto;
    display:flex;flex-direction:column;gap:18px;padding:0 6%;
    transform:none;clip-path:none;filter:none;
    /* Senza questo resta l'align-items:center della griglia desktop:
       foto e testo si allargano per tutta la colonna, l'anno no (e'
       largo quanto le cifre) e finiva centrato in mezzo a un blocco
       allineato a sinistra. */
    align-items:stretch;
  }
  .milestone-slide[data-idx] .image-wrapper,
  .milestone-slide[data-idx] .text-content{grid-column:auto;justify-self:auto;text-align:left;}
  .big-year{position:static;transform:none;opacity:.85;font-size:3rem;margin-bottom:8px;text-align:left;}
  .image-wrapper,.text-content{max-width:none;width:100%;transform:none !important;opacity:1 !important;}
  .image-wrapper img{height:240px;}
}

/* ============================================================
   GOCCIA D'ACQUA — riferimento dato dall'utente: una goccia lucida,
   rotonda, con una macchia di luce morbida che si sposta sopra la
   superficie (specular highlight), non un bordo che ondeggia. Niente
   più filtri SVG sul bordo: qui è un radial-gradient chiaro (la
   "macchia di luce") che va alla deriva lentissima sopra un fondo
   vetroso scuro, più angoli arrotondati (una goccia non ha spigoli). */
/* Semplificato: prima 3 gradienti sovrapposti + blur(16)+saturate(150%)
   — troppa decorazione per "linee pulite". Ora un solo fondo
   semi-trasparente scuro + bordo sottile, coerente col resto nero del
   sito invece di un effetto "vetro" a sé stante. */
.glass-box{
  border-radius:14px;
  background:rgba(18,18,22,.72);
  border:1px solid rgba(234,156,117,.22);
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.glass-box:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.4);}

/* Percorso immersivo — versione "collage contenuto": non più una foto
   gigante a schermo intero per volta, ma 3 foto piccole ancorate in
   posizioni diverse dello schermo (non centrate/impilate). Mentre
   scrolli, ognuna a turno cresce leggermente e si mette a fuoco
   (protagonista del momento), le altre restano visibili ma piccole e
   sfumate sullo sfondo — un collage vivo, non un'invasione a pieno
   schermo. Pin breve (300vh/3 = 100vh a foto). */
.flythrough-pin-wrap {
  position: relative;
  height: 220vh;
  /* Serve esplicitamente: e' un <div>, non una <section>, quindi non
     prendeva lo z-index:1 della regola sulle sezioni e finiva sotto al
     layer di sfondo di pagina (body::after), che lo copriva del tutto. */
  z-index: 1;
}
.flythrough-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  perspective: 1200px;
}

/* Sfondo luminoso d'ambiente */
.flythrough-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 550px at 25% 35%, rgba(216, 96, 54, 0.22), transparent 60%),
    radial-gradient(ellipse 800px 500px at 75% 65%, rgba(234, 156, 117, 0.18), transparent 60%);
  filter: blur(40px);
  /* Gli aloni riempivano il riquadro fino al bordo: sul bordo inferiore
     dello stage si interrompevano di netto e si vedeva una riga. La
     maschera li spegne prima di arrivare ai bordi. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  z-index: 0;
}

/* Header di sezione pinnato in alto */
.flythrough-header {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  width: 90%;
  max-width: 560px;
}
.flythrough-header .section-title {
  font-size: clamp(1.6rem, 2.56vw, 3.4rem);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
  margin-bottom: 4px;
}
.flythrough-header .section-kicker {
  margin-bottom: 6px;
}
.flythrough-header .divider {
  margin: 8px auto 0;
  width: 40px;
  height: 2px;
}

/* Linea ondulata di fondo — il "binario" su cui scorrono le carte.
   Sottile e poco contrastata: deve suggerire il percorso, non
   competere con le foto. Path generato da JS (vedi HTML). */
.flythrough-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.flythrough-wave .wave-path {
  stroke: rgba(234, 156, 117, 0.28);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Schede: NON più sovrapposte al centro a tutta larghezza, ma piccole
   e distribuite lungo la linea — scorrono orizzontalmente da destra a
   sinistra seguendo l'onda mentre scrolli (posizione calcolata in JS).
   left/top a 0: tutto il posizionamento passa da una sola transform,
   più fluida di animare left/top (che forzano layout ad ogni frame). */
.flythrough-img {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(215px, 19vw, 360px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.flythrough-img.active {
  z-index: 3;
}
.flythrough-img .img-inner {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(234, 156, 117, 0.4);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75), 0 0 35px rgba(216, 96, 54, 0.22);
}
/* Formato verticale: con le carte piccole un 4/3 lasciava troppa poca
   altezza e la didascalia in sovrimpressione copriva quasi tutta la
   foto. In verticale la didascalia occupa solo la fascia bassa. */
.flythrough-img img {
  width: 100%;
  aspect-ratio: 3/3.9;
  object-fit: cover;
  display: block;
}

/* Carte didascalia Glassmorphic integrate all'interno della foto */
.flythrough-caption.glass-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 11px 13px; /* compatto: le carte ora sono piccole, il padding di prima mangiava metà foto */
  background: linear-gradient(180deg, rgba(14, 14, 18, 0.55) 0%, rgba(10, 10, 14, 0.96) 100%);
  border: none;
  border-top: 1px solid rgba(234, 156, 117, 0.35);
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 4;
}
.caption-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.step-num {
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: clamp(0.72rem, 0.8vw, 1rem);
  color: var(--amber);
  font-weight: bold;
  letter-spacing: 1px;
}
.caption-tag {
  /* Senza questo "03 / 04" e "IL PIATTO SIMBOLO" si spezzavano su due
     righe dentro carte strette. */
  white-space: nowrap;
  /* Il minimo del clamp era .6rem = 9,6px: su un portatile da 1280 la
     parte in vw non arriva mai a superarlo. */
  font-size: clamp(0.7rem, 0.66vw, 0.86rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(216, 96, 54, 0.22);
  color: var(--gold-light);
  padding: 3px 9px;
  border-radius: 12px;
}
.flythrough-caption h3 {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.13vw, 1.45rem);
  color: var(--cream);
  margin-bottom: 4px;
}
.flythrough-caption p {
  font-size: clamp(0.76rem, 0.84vw, 1.06rem);
  line-height: 1.35;
  color: rgba(246, 243, 238, 0.92);
}
/* Prezzo su riga propria sotto al nome del piatto. In linea col
   titolo andava a capo solo su alcune carte (nomi corti restavano
   accanto, i nomi lunghi no): il prezzo finiva a
   un'altezza diversa in ogni carta. Riga dedicata = stessa
   posizione sempre. */
.dish-price {
  display: block;
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  color: var(--gold-light);
  margin-top: 3px;
}

/* Link al menu' completo: in basso a SINISTRA. A destra ci finiva
   sotto il bottone fisso "Prenota", che lo copriva a meta'. */
.flythrough-link {
  position: absolute;
  bottom: 26px;
  left: 6%;
  z-index: 6;
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 0.9vw, 1rem);
  letter-spacing: 1px;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(234, 156, 117, 0.45);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.flythrough-link:hover {
  color: var(--cream);
  border-color: var(--cream);
}

/* Indicatori di avanzamento */
.flythrough-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 12px;
}
/* Il pallino occupa sempre lo spazio della sua forma allungata: quello che
   cambia è solo il disegno interno (transform + opacity). Così l'indicatore
   che segue lo scorrimento non ricalcola il layout a ogni passaggio. */
.nav-dot {
  width: 32px;
  height: 12px;
  position: relative;
  background: none;
  border: 0;
}
.nav-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(234, 156, 117, 0.4);
  transform: scaleX(0.375);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.nav-dot.active::after {
  transform: scaleX(1);
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 0 0 12px var(--gold-light);
}

/* Stesso motivo del blocco storia sopra: con "riduci animazioni" il JS
   non parte e le carte restano a opacity:0 → sezione completamente
   vuota. Qui diventano una colonna statica leggibile. */
@media(max-width: 800px), (prefers-reduced-motion: reduce) {
  .flythrough-wave { display: none; }
  .flythrough-pin-wrap { height: auto; padding: 60px 0; background: transparent; }
  .flythrough-stage { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 40px; padding: 0 6%; }
  .flythrough-header { position: relative; top: auto; left: auto; transform: none; width: 100%; margin-bottom: 20px; }
  .flythrough-cards-container { position: relative; top: auto; left: auto; transform: none; width: 100%; display: flex; flex-direction: column; gap: 32px; }
  /* Le carte erano larghe 215px anche qui: e' la misura pensata per
     l'animazione desktop, dove ne scorrono tre affiancate. In colonna
     su un telefono diventavano francobolli con il testo a 12px.
     Qui occupano la colonna, con un tetto perche' su un tablet largo
     una foto da 700px sarebbe sproporzionata. */
  /* Niente !important: una dichiarazione !important batte QUALUNQUE
     animazione, comprese quelle legate allo scroll piu' in basso in
     questo file — le carte restavano ferme a opacita' 1 e l'effetto
     non partiva mai. Gli stili inline che il JS lascia sulla versione
     desktop vengono ripuliti da initPulisciMobile() in animations.js
     quando si passa a schermo stretto. */
  .flythrough-img {
    position: relative; opacity: 1; transform: none;
    width: 100%; max-width: 460px; margin: 0 auto;
  }
  /* Formato piu' largo: in verticale stretto la foto e' giusta perche'
     la carta e' piccola, ma a tutta colonna diventerebbe altissima. */
  .flythrough-img img { aspect-ratio: 4/3.4; }
  /* I testi della didascalia scalano con la larghezza dello schermo
     (vw): su schermi stretti finivano sul minimo del clamp, cioe'
     9-12px. Qui tornano a misure da lettura. */
  .flythrough-caption { padding: 14px 16px; }
  .flythrough-caption h3 { font-size: 1.2rem; }
  .flythrough-caption p { font-size: .95rem; }
  .caption-tag { font-size: .7rem; }
  .step-num { font-size: .8rem; }
  .dish-price { font-size: .95rem; }
  .flythrough-nav { display: none; }
  /* Qui lo stage e' una colonna normale: il link torna nel flusso in
     fondo alla lista, altrimenti resterebbe ancorato sopra le carte. */
  .flythrough-link { position: relative; bottom: auto; left: auto; align-self: flex-start; }
}

.menu-item{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;border-bottom:1px dotted rgba(193,80,46,.4);padding-bottom:8px;}
.menu-item .name{font-weight:bold;color:var(--cream);}
.menu-item .desc{display:block;font-size:.85rem;color:rgba(246,243,238,.88);font-weight:normal;}
.menu-item .price{white-space:nowrap;color:var(--gold-light);font-weight:bold;}
.menu-note{text-align:center;margin-top:34px;font-style:italic;color:rgba(246,243,238,.90);font-size:clamp(.92rem,1.02vw,1.2rem);}
.menu-highlight{
  padding:26px;margin-bottom:34px;
}
.menu-highlight h3{color:var(--gold-light);margin-bottom:8px;font-size:1.3rem;}
.menu-highlight p{color:var(--cream);opacity:.98;line-height:1.6;}

.stars{color:var(--amber);margin-bottom:10px;font-size:.95rem;text-shadow:0 0 10px rgba(243,193,104,.4);}
/* badge recensioni Google — link a una ricerca Google reale (non dati
   inventati), stelle statiche finché non colleghiamo un widget con le
   recensioni vere del profilo Google Business del locale. */

/* whatsapp CTA — alternativa a bassa frizione al form/telefono.
   Niente più verde brand WhatsApp (fuori palette, unico colore
   "esterno" nel sito): stesso trattamento nero+oro del resto. */
.whatsapp-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--cream);border:1px solid var(--gold);
  padding:13px 28px;font-weight:bold;letter-spacing:.5px;font-size:.9rem;
  margin-top:10px;transition:.25s;
}
.whatsapp-btn:hover{background:var(--gold);color:#fff;transform:translateY(-2px);}

/* contatti */
.contatti{background:transparent;color:var(--cream);}
.contatti .section-title{color:var(--cream);}
.contatti-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

/* La scheda del locale: quattro voci separate da una riga sottile,
   niente riquadri dentro riquadri. Lo stesso principio dell'elenco del
   menù — poche linee, blocchi distinti. */
.scheda-locale{display:flex;flex-direction:column;}
.info-block{
  padding:22px 0;
  border-bottom:1px solid rgba(246,243,238,.09);
}
.info-block:first-child{padding-top:0;}
.info-block:last-child{border-bottom:0;}
.info-block h3{
  color:var(--gold);margin-bottom:8px;
  font-family:var(--font-label);font-size:.76rem;
  text-transform:uppercase;letter-spacing:1.6px;
}
.info-block p{opacity:.97;margin-bottom:6px;}
.info-block .link-inline{font-size:.84rem;}

/* Orari incolonnati: turno a sinistra, orario a destra. Prima erano
   tre righe separate da <br>, e "Cena: 19:30 - 22:00" andava letto
   parola per parola per capire dove finiva una e cominciava l'altra. */
.orari-lista{list-style:none;margin:0 0 6px;padding:0;max-width:300px;}
.orari-lista li{
  display:flex;justify-content:space-between;gap:18px;
  padding:6px 0;font-size:.94rem;
}
.orari-lista li + li{border-top:1px solid rgba(246,243,238,.07);}
.orari-lista span:last-child{
  color:rgba(234,156,117,.85);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Le voci della scheda salgono una dopo l'altra mentre si scorre.
   Non e' un ritardo a tempo: ciascuna e' legata alla PROPRIA posizione
   nella pagina, quindi il ritmo lo detta il dito. Fermi lo scorrimento
   a meta' e la voce resta a meta'. Come nel resto del sito, nessun
   ciclo che parte da solo. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes schedaEntra{
      from{ opacity:0; transform:translateY(28px); }
      to  { opacity:1; transform:none; }
    }
    .info-block{
      animation:schedaEntra linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 26%;
    }
  }
}
/* Sta in una griglia a due colonne accanto a una colonna di testo
   piu' alta: senza align-self la mappa veniva tirata all'altezza del
   vicino e diventava una fessura verticale 396x693. Ora tiene la sua
   forma e si ferma in alto. */
.map-wrap{
  border-radius:0;overflow:hidden;box-shadow:var(--shadow);
  align-self:start;aspect-ratio:4/3;
}
/* Niente min-height: insieme all'aspect-ratio diventa una larghezza
   minima (340 x 4/3 = 453px) e su un telefono da 375 la pagina non ci
   sta piu'. Il browser allora rimpicciolisce TUTTO il sito per farcelo
   entrare: caratteri, tasti, ogni cosa. La forma la decide il rapporto,
   la dimensione la decide la colonna. */
.map-wrap iframe{width:100%;height:100%;border:0;display:block;}
/* Sul telefono la colonna e' stretta: con 4/3 la mappa veniva alta
   248px, una fessura orizzontale. Quadrata occupa lo stesso spazio in
   larghezza ma si legge. */
@media (max-width:640px){ .map-wrap{aspect-ratio:1/1;} }

form.contact-form{display:grid;gap:16px;margin-top:10px;}
.contact-form .field,
#booking-form .field{display:grid;gap:6px;}
.contact-form label,
#booking-form .field label{
  font-family:var(--font-label);font-size:.78rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gold-light);
}
.contact-form .req{color:var(--amber);}
.form-required-note{font-size:.78rem;color:rgba(246,243,238,.6);margin-top:-4px;}
.contact-form input,.contact-form textarea,
#booking-form .field input,#booking-form .field textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(193,80,46,.4);color:var(--cream);
  padding:13px 14px;border-radius:0;font-family:inherit;font-size:.95rem;
  width:100%;
}
/* Il bordo colorato da solo non basta come stato di focus: aggiunge
   contrasto ma non è percepibile da chi distingue male i colori. */
.contact-form input:focus-visible,.contact-form textarea:focus-visible,
#booking-form .field input:focus-visible,#booking-form .field textarea:focus-visible{
  border-color:var(--amber);
}
.contact-form input::placeholder,.contact-form textarea::placeholder,
#booking-form input::placeholder,#booking-form textarea::placeholder{color:rgba(243,233,218,.5);}
.contact-form textarea{resize:vertical;min-height:110px;}
#booking-form textarea{resize:vertical;min-height:70px;}
/* Il selettore data nativo su fondo scuro resta bianco: color-scheme
   dice al browser di disegnarlo in versione scura. */
#booking-form input[type="date"]{color-scheme:dark;min-height:46px;}
.contact-form button{cursor:pointer;border:none;font-family:inherit;}

/* CTA band — gradiente di nero per continuità col resto della pagina,
   il terracotta resta solo sul bottone (accento, non sfondo) */
.cta-band{
  background:transparent;color:var(--cream);
  text-align:center;padding:70px 8%;
}
.cta-band h2{color:var(--cream);margin-bottom:14px;font-size:1.9rem;}
.cta-band p{margin-bottom:26px;opacity:.95;}

/* Il footer non riparte da un nero proprio: scurisce soltanto il
   gradiente di pagina che scorre sotto, cosi' l'ultimo confine e' una
   sfumatura e non una riga. */
footer{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.6) 100%);color:#b5b5b5;padding:50px 8% 24px;font-size:.9rem;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1150px;margin:0 auto 30px;}
.footer-grid h3{color:var(--gold);margin-bottom:12px;font-size:1rem;text-transform:uppercase;letter-spacing:1px;}
.footer-grid p,.footer-grid a{display:block;margin-bottom:8px;opacity:.95;}
.footer-grid a:hover{color:var(--gold-light);}
.footer-bottom{text-align:center;border-top:1px solid rgba(193,80,46,.25);padding-top:20px;max-width:1150px;margin:0 auto;}
footer .cuori{color:var(--gold);}

@media(max-width:800px){
  /* #nav, non 'nav' generico: la regola colpiva QUALUNQUE <nav> della
     pagina. La barra delle portate nel menu' e' un <nav> anche lei, e
     si ritrovava impilata in colonna e nascosta come se fosse il menu'
     a tendina del telefono. */
  #nav{position:fixed;top:58px;left:0;right:0;background:var(--brown-dark2);flex-direction:column;
    padding:20px;display:none;}
  #nav.open{display:flex;}
  /* Aree toccabili da almeno 44px: prima le voci di menu erano alte 24px
     e il pulsante ☰ 23x34 — bersagli sotto la soglia minima, faticosi da
     centrare col pollice (WCAG 2.5.8). */
  #nav a{margin:2px 0;padding:12px 0;min-height:44px;display:flex;align-items:center;}
  .nav-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-5px;}
  .footer-grid a{padding:9px 0;min-height:44px;display:flex;align-items:center;margin-bottom:0;}
  .storia,.contatti-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:80px 6%;}
  .page-header{padding-top:120px;}

  /* Su mobile tutto va in colonna singola: senza più due colonne
     affiancate a "diluire" lo spazio visivamente, i blocchi finiscono
     impilati stretti uno sull'altro. Più margine tra le sotto-sezioni
     (non tra le sezioni principali, quello lo fa già .section-sep). */
  .storia{gap:50px;}
  .timeline{margin-top:44px !important;}
  .timeline .t-item{margin-bottom:36px;}
  .contatti-grid{gap:48px;}
  .info-block{margin-bottom:34px;}
}
@media(max-width:480px){
  /* prima diventava una sola colonna: 6 foto intere una sotto l'altra
     erano uno scroll infinito. 2 colonne più strette restano leggibili
     e dimezzano la lunghezza della sezione. */
  .gallery-grid{gap:8px;}
  .gallery-item{height:150px;}
}

/* ============================================================
   POTENZIAMENTO EFFETTI & TRANSIZIONI DI LUSSO
   ============================================================ */

/* 1. Transizione tra le pagine (Page Transition Overlay) */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(circle at center, rgba(193, 80, 46, 0.25) 0%, rgba(13, 13, 13, 0.98) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}
#page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 2. Cursore Personalizzato Magnetico */
/* Il centraggio sul puntatore NON può stare qui: main.js scrive
   transform inline ad ogni frame per seguire il mouse, e l'inline
   vince sempre sulla regola CSS — il translate(-50%,-50%) veniva
   cancellato e cerchio e puntino restavano spostati di mezza
   dimensione rispetto al cursore vero. Ora il centraggio è dentro la
   transform scritta dal JS.
   L'ingrandimento all'hover usa la proprietà `scale`, indipendente da
   `transform`: così convive con la transform inline (che prima
   azzerava anche lo scale del puntino, mai entrato in funzione) ed è
   animabile senza toccare width/height, che invece costringono a
   rimisurare l'elemento ad ogni fotogramma della transizione. */
#custom-cursor, #custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  /* La POSIZIONE sta nella proprietà `translate` (scritta dal JS), lo
     SCALE dentro `transform`. L'ordine conta: il browser applica
     translate -> rotate -> scale -> transform, quindi con lo scale in
     una proprietà separata finiva per moltiplicare anche la
     traslazione di posizionamento — a scale 1.61 il cerchio si
     ritrovava a (x*1.61, y*1.61), cioè sempre più in basso a destra
     quanto più il mouse era lontano dall'origine. Con la posizione in
     `translate` (applicata prima) lo scale agisce solo sulla forma. */
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  will-change: translate;
}
#custom-cursor {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(224, 138, 95, 0.6);
  background: rgba(193, 80, 46, 0.05);
  box-shadow: 0 0 15px rgba(193, 80, 46, 0.15);
}
#custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--gold-light);
  box-shadow: 0 0 8px var(--gold-light);
}
/* Stato magnetico / Hover per Cursore */
body.cursor-hover #custom-cursor {
  /* 58px partendo da 36px. Lo scale sta DOPO la centratura dentro la
     stessa transform, così ingrandisce attorno al centro senza
     spostare il cursore dal mouse (vedi nota nella regola base). */
  transform: translate(-50%, -50%) scale(1.61);
  border-color: var(--gold-light);
  background: rgba(193, 80, 46, 0.12);
  box-shadow: 0 0 25px rgba(224, 138, 95, 0.35);
}
body.cursor-hover #custom-cursor-dot {
  transform: translate(-50%, -50%) scale(1.8);
  background: var(--gold);
}
@media (hover: none) or (pointer: coarse) {
  #custom-cursor, #custom-cursor-dot { display: none !important; }
}

/* 3. Effetto Spotlight / Refraction sulle Card .glass-box */
.glass-box {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.glass-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 138, 95, 0.18), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.glass-box:hover::after {
  opacity: 1;
}

/* 4. Pulsanti con Shimmer Light.
   .sticky-cta è ESCLUSO dal position:relative: essendo più in basso nel
   file vinceva sul suo position:fixed (stessa specificità), e il CTA
   "Prenota" tornava nel flusso finendo sopra il logo in cima alla
   pagina — su ogni pagina e a ogni larghezza. position:fixed è già di
   per sé un contesto di posizionamento, quindi lo shimmer funziona
   comunque. Niente will-change: qui l'animazione parte solo al passaggio
   del mouse, tenerlo sempre attivo su ogni bottone è un costo perenne
   per un beneficio occasionale. */
.btn, .btn-outline, .whatsapp-btn {
  position: relative;
}
.btn, .btn-outline, .sticky-cta, .whatsapp-btn {
  overflow: hidden;
}
.btn::before, .btn-outline::before, .sticky-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover::before, .btn-outline:hover::before, .sticky-cta:hover::before {
  left: 140%;
}

/* 5. Miglioramento Accordion con risposta tattile */
  position: relative;
}
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  /* scaleX: compositing puro, niente ricalcolo di layout (vedi nav a::after) */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
  transform: scaleX(1);
}


/* ==========================================================
   PRENOTAZIONE — percorso in 3 passi
   Bersagli grandi e selezione a tocco: il modulo si compila con
   il pollice, senza tastiera, fino all'ultimo passo. Ogni campo
   in piu' e' una prenotazione persa, quindi qui ce ne sono due
   soli obbligatori (nome, telefono) e il resto e' facoltativo.
   ========================================================== */
.booking{max-width:660px;margin:0 auto;}

.bk-progress{
  display:flex;gap:8px;list-style:none;margin:0 0 18px;padding:0;
}
.bk-progress li{
  flex:1;text-align:center;font-family:var(--font-label);
  font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(246,243,238,.38);padding-top:12px;position:relative;
  transition:color .3s ease;
}
.bk-progress li::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:rgba(246,243,238,.14);border-radius:2px;
  transition:background .35s ease;
}
.bk-progress li.on{color:var(--gold-light);}
.bk-progress li.on::before{background:linear-gradient(90deg,var(--gold),var(--gold-light));}

#booking-form{padding:28px 26px 30px;}
.bk-step{border:0;padding:0;margin:0;display:none;}
.bk-step.is-on{display:block;}
.bk-q{
  font-family:var(--font-display);font-size:1.25rem;color:var(--cream);
  margin:0 0 14px;padding:0;
}
.bk-step .bk-q:not(:first-child),
.bk-resto > .bk-q:first-child{margin-top:26px;}

.chip-row{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-family:var(--font-body);font-size:.95rem;
  /* 46px di altezza: sotto i ~44px il tocco sbaglia bersaglio */
  min-height:46px;padding:0 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(246,243,238,.16);
  color:var(--cream);border-radius:10px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.chip:hover{border-color:rgba(234,156,117,.6);}
.chip.on{
  background:var(--gold);border-color:var(--gold);
  color:#fff;font-weight:700;
}
.bk-date-field{margin-top:12px;}
.bk-date-field label{font-size:.85rem;opacity:.75;}
.field-hint{display:block;margin-top:5px;font-size:.8rem;opacity:.6;}
.opt{opacity:.6;font-weight:400;}

.bk-consent{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:18px;font-size:.88rem;line-height:1.45;
  opacity:.9;cursor:pointer;
}
.bk-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold);flex:0 0 auto;}

.bk-actions{display:flex;align-items:center;gap:14px;margin-top:24px;}
.bk-actions .btn{flex:1;}
.bk-back{
  background:none;border:0;color:var(--cream);opacity:.65;
  font-family:inherit;font-size:.9rem;cursor:pointer;padding:10px 0;
}
.bk-back:hover{opacity:1;}
/* Il tasto ora sta dentro .bk-resto, non piu' figlio diretto del
   passo: senza questo selettore tornava largo quanto il testo. */
.bk-step > .btn,
.bk-resto > .btn{margin-top:24px;width:100%;}
.bk-warn{min-height:1.2em;margin-top:10px;font-size:.85rem;color:var(--gold-light);}

.bk-summary{margin:0 0 20px;display:grid;gap:1px;background:rgba(246,243,238,.10);
  border:1px solid rgba(246,243,238,.10);border-radius:12px;overflow:hidden;}
.bk-summary > div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 15px;background:rgba(10,10,14,.55);}
.bk-summary dt{font-family:var(--font-label);font-size:.74rem;letter-spacing:1.2px;
  text-transform:uppercase;opacity:.6;}
.bk-summary dd{margin:0;text-align:right;}

/* Erano tutte e tre sulla stessa riga separate da un punto: quando
   "Copia il riepilogo" andava a capo, il separatore restava appeso in
   fondo alla riga precedente. Ora sono tre elementi impilati. */
.bk-alt{
  margin-top:16px;font-size:.85rem;opacity:.75;line-height:1.6;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.bk-alt-titolo{opacity:.85;}
.bk-alt a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;}
/* .bk-copy e' il BOTTONE "copia il riepilogo"; .link-inline e' un
   normale link di testo con lo stesso aspetto. Prima il link della
   mappa riusava .bk-copy: stessa resa, ma cercando "il bottone copia"
   si finiva sull'elemento sbagliato. */
.bk-copy,
.link-inline{background:none;border:0;color:var(--gold-light);font-family:inherit;
  font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;}

.bk-done h3{font-family:var(--font-display);font-size:1.7rem;color:var(--gold-light);margin-bottom:12px;}
.bk-done-text{margin-bottom:14px;}
.bk-done-note{font-size:.88rem;opacity:.75;margin-bottom:22px;}
.bk-done-note a{color:var(--gold-light);}

/* Stato apertura calcolato dagli orari veri (vedi statoApertura in
   main.js): prima era una frase fissa che diceva "aperto" anche di
   lunedi', giorno di chiusura. */
.stato-apertura::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:#8a8a8a;
}
.stato-apertura.is-aperto::before{background:#4ec27a;box-shadow:0 0 8px rgba(78,194,122,.8);}
.stato-apertura.is-chiuso::before{background:#c9683f;}

/* Mappa: segnaposto finche' non la si chiede (vedi initMapConsent) */
.map-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;height:100%;min-height:300px;padding:30px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(246,243,238,.18);border-radius:14px;
}
.map-placeholder p{font-size:.86rem;opacity:.72;max-width:34ch;line-height:1.55;}
.map-load{
  font-family:var(--font-label);letter-spacing:1px;font-size:.85rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(234,156,117,.5);
  color:var(--gold-light);padding:12px 20px;border-radius:10px;cursor:pointer;
  /* misurato a 41px: sotto i 44 il tocco sul telefono manca il bersaglio */
  min-height:46px;
  transition:background .25s ease,color .25s ease;
}
.map-load:hover{background:var(--gold);border-color:var(--gold);color:#fff;}

@media(max-width:640px){
  #booking-form{padding:22px 18px 24px;}
  /* "Invia su WhatsApp" spezzato su due righe dentro un bottone
     schiacciato accanto a "Indietro": qui il bottone prende la riga
     intera e il ritorno indietro va sotto. */
  .bk-actions{flex-direction:column-reverse;align-items:stretch;gap:8px;}
  .bk-actions .btn{width:100%;}
  .bk-back{align-self:flex-start;}
  .chip{flex:1 1 calc(33.333% - 6px);padding:0 10px;text-align:center;}
  /* I tre giorni stanno in riga come i numeri: a piena larghezza
     ciascuno occupava una riga sua e il modulo si allungava di 120px
     per tre parole corte. Il minimo evita che un "Mercoledi'" venga
     schiacciato. ("turno" era rimasto qui da una versione precedente
     del modulo: quel campo non esiste piu'.) */
  .chip-row[data-field="giorno-rapido"] .chip{
    /* Larghezza dal contenuto, poi si allargano a riempire la riga:
       una base fissa al 33% mandava a capo il terzo giorno, e una base
       piu' stretta avrebbe tagliato un nome lungo come "Mercoledi'". */
    flex:1 1 auto;
  }
  /* .64rem faceva 10,2px: sotto la soglia di leggibilita' comoda. */
  .bk-progress li{font-size:.72rem;letter-spacing:.4px;}
}

/* Intestazione senza foto (pagine di solo testo, es. privacy): stessa
   struttura, ma senza il livello immagine da mascherare. */
.page-header--plain::before{display:none;}
.page-header--plain::after{display:none;}
.page-header--plain{padding-top:130px;padding-bottom:30px;}

/* Pagina legale: colonna stretta, misura di riga leggibile. */
.testo-legale{max-width:760px;}
.testo-legale h2{
  font-family:var(--font-display);font-size:1.5rem;color:var(--gold-light);
  margin:38px 0 12px;
}
.testo-legale h2:first-of-type{margin-top:0;}
.testo-legale p,.testo-legale li{
  font-size:1rem;line-height:1.75;color:rgba(246,243,238,.88);margin-bottom:12px;
}
.testo-legale ul{padding-left:20px;margin-bottom:16px;}
.testo-legale a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;}

/* Rimando alle recensioni nell'hero: era un voto numerico inventato,
   ora è un link verificabile. */
.hero-reviews{
  color:var(--gold-light);
  border-bottom:1px solid rgba(234,156,117,.45);
  padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease;
}
.hero-reviews:hover{color:var(--cream);border-color:var(--cream);}

/* Badge sul piatto: segnala i piatti firma e quelli a margine più alto.
   Chi legge un menù lungo si aggrappa a un segnale, altrimenti sceglie
   per prezzo — che è esattamente quello che non vogliamo. */
.dish-badge{
  display:inline-block;vertical-align:middle;margin-left:8px;
  /* .62rem faceva 9,9px anche su monitor: un maiuscoletto spaziato a
     quella misura si guarda, non si legge. */
  font-family:var(--font-label);font-size:.72rem;letter-spacing:1px;
  text-transform:uppercase;white-space:nowrap;
  background:rgba(216,96,54,.20);color:var(--gold-light);
  border:1px solid rgba(234,156,117,.35);
  padding:3px 8px;border-radius:20px;
}

/* Orari selezionabili ogni 15 minuti, raggruppati per turno. */
.bk-orari{display:grid;gap:16px;}
.slot-group{display:grid;gap:8px;}
.slot-label{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold-light);opacity:.85;
}
.chip--ora{min-width:74px;padding:0 12px;font-variant-numeric:tabular-nums;}
/* Orari troppo vicini per prenotare online: restano visibili (far
   sparire delle scelte confonde) ma chiaramente non selezionabili. */
.chip--ora:disabled{
  opacity:.3;cursor:not-allowed;text-decoration:line-through;
  border-color:rgba(246,243,238,.10);
}
.chip--ora:disabled:hover{border-color:rgba(246,243,238,.10);}

/* Pannello "qui serve la telefonata": gruppi numerosi e prenotazioni
   dell'ultimo minuto. Prende il posto del resto del modulo invece di
   affiancarlo, così non si compila un percorso che non porta a nulla. */
.bk-telefono{
  margin-top:20px;padding:20px;
  background:rgba(216,96,54,.10);
  border:1px solid rgba(234,156,117,.34);
  border-radius:14px;
}
.bk-telefono p{margin-bottom:16px;line-height:1.55;}
.bk-telefono .btn{display:block;text-align:center;margin-bottom:10px;}
.bk-telefono .whatsapp-btn{display:block;text-align:center;}

/* Orario al completo: il numero resta leggibile e sotto compare il
   perché. Un bottone spento e basta lascia pensare a un guasto. */
.chip--ora{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;}
.chip-pieno{
  font-family:var(--font-label);font-size:.55rem;letter-spacing:.8px;
  text-transform:uppercase;opacity:.9;margin-top:2px;
}
/* La barratura vale per l'orario, non per la parola: barrata anche
   quella, "completo" era illeggibile. */
.chip--ora:disabled .chip-pieno{color:var(--gold-light);text-decoration:none;}


/* Su schermi touch i link scritti in mezzo al testo restano alti quanto
   la riga (17-27px): sotto le dita si sbaglia bersaglio. Qui si allarga
   l'area toccabile senza cambiare l'aspetto — su mouse resta identico. */
/* Anche in base alla larghezza, non solo al tipo di puntatore: alcuni
   tablet si dichiarano con puntatore fine, e la regola non li
   raggiungerebbe. */
@media (pointer: coarse), (max-width: 1024px) {
  .hero-reviews,
  .flythrough-link,
  .footer-bottom a,
  .breadcrumb a,
  .bk-alt a,
  .bk-copy,
  .link-inline,
  .testo-legale a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Il footer ha i link uno sotto l'altro: con il padding aggiunto
     servono meno margini, o la colonna raddoppia di altezza. */
  .footer-grid a { padding: 8px 0; margin-bottom: 0; }
  /* Misurato a 36px anche col padding: e' un <button> con testo piccolo,
     quindi serve un minimo esplicito. */
  .bk-copy { min-height: 44px; }
  /* Il numero di telefono nella scheda Contatti era alto 20px: e' il
     tasto piu' importante della pagina su un telefono. */
  /* Vale per tutti i collegamenti della scheda, non solo il telefono:
     Instagram e Facebook erano alti 19px, meta' di un polpastrello. */
  .info-block a { display: inline-block; padding: 10px 0; min-height: 44px; }
  .bk-alt a { min-height: 44px; }
  /* La casella di consenso e' avvolta nella sua etichetta, quindi si
     tocca anche scrivendo — ma il quadratino da 18px resta il punto
     che l'occhio cerca. Su touch va ingrandito. */
  .bk-consent input { width: 24px; height: 24px; }
  /* Misurate a 9,9px su telefono: sotto gli 11px una scritta in
     maiuscoletto spaziato diventa un disegno, non una parola. */
  .dish-badge { font-size: .7rem; padding: 3px 9px; }
  .photo-tag { font-size: .72rem; }
}

/* ==========================================================
   SCHERMI BASSI E LARGHI (tablet in orizzontale, portatili 16:9
   piccoli). Qui restano attive le animazioni desktop — e devono
   restarci, sono la parte migliore del sito — ma gli elementi erano
   dimensionati sull'altezza di un monitor: con 768px di altezza la
   foto della tappa (alta 400px fissi) arrivava a coprire l'anno
   gigante. Misurato: sovrapposizione di 62px.
   Nessuna di queste regole tocca gli schermi alti: la soglia e'
   l'altezza, non la larghezza.
   ========================================================== */
@media (min-width: 801px) and (max-height: 820px) {
  /* La foto ora segue l'altezza dello schermo invece di un valore
     fisso pensato per i monitor. */
  .image-wrapper img { height: clamp(230px, 40vh, 420px); }
  .text-content p { font-size: clamp(1.05rem, 1.3vw, 1.4rem); }
  .text-content h3 { font-size: clamp(1.5rem, 2vw, 2.2rem); margin-bottom: 10px; }
  /* Anno piu' contenuto e piu' in basso: resta la firma visiva della
     sezione, ma nella fascia libera sotto foto e testo. */
  .big-year { font-size: clamp(4.5rem, 11vw, 8rem); top: 84%; }

  /* Le carte NON vanno strette: il problema era l'altezza, non la
     larghezza. Al primo tentativo le avevo portate a 190px e la
     didascalia andava a capo ovunque ("Tagliatelle al / tartufo").
     Qui sono anzi un filo piu' larghe del desktop stretto, cosi' il
     nome del piatto sta su una riga sola. */
  .flythrough-img { width: clamp(240px, 23vw, 320px); }
  .flythrough-header { top: 7%; }
}

/* ==========================================================
   MOVIMENTO SU TELEFONO
   Le animazioni desktop sono costruite su GSAP con pin e scrub: sul
   telefono il pin combatte con la barra del browser che si apre e si
   chiude durante lo scroll, e il risultato salta. Per questo qui
   erano semplicemente spente, e la pagina risultava piatta.
   Queste invece sono animazioni CSS legate allo scroll
   (animation-timeline): le calcola il compositore, non il JavaScript,
   quindi restano fluide anche su telefoni vecchi e non costano un
   byte in piu'. Nessun autoplay: si muovono solo se scorri tu.
   Chi ha un browser che non le supporta vede il layout statico di
   prima, che resta perfettamente leggibile.
   ========================================================== */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* --- Piatti: ogni carta sale ed entra a fuoco --- */
    @keyframes cartaEntra {
      from { opacity: 0; transform: translateY(46px) scale(.94); }
      to   { opacity: 1; transform: none; }
    }
    .flythrough-img {
      animation: cartaEntra linear both;
      animation-timeline: view();
      /* Finisce presto: la carta è già ferma e leggibile quando arriva
         a metà schermo, non continua a muoversi mentre la leggi. */
      animation-range: entry 5% cover 32%;
    }
    /* La foto dentro la carta scorre un po' più lenta della carta:
       è quello che dà la sensazione di profondità, non l'ingresso. */
    @keyframes fotoParallasse {
      from { transform: scale(1.18) translateY(-3%); }
      to   { transform: scale(1.06) translateY(3%); }
    }
    .flythrough-img img {
      animation: fotoParallasse linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* --- Storia: l'anno entra di lato, poi resta fermo ---
       Primo tentativo: anno appiccicato in alto (position:sticky)
       mentre la tappa scorreva sotto. Bello finche' non arrivava il
       titolo: restando fisso finiva SOPRA "Le radici", illeggibili
       tutti e due. Con sticky la sovrapposizione e' inevitabile,
       perche' il resto del blocco continua a scorrergli sotto.
       Ora l'anno ha un ingresso suo — scivola da sinistra e si ferma
       al suo posto — e nessuno gli passa addosso. */
    .milestone-slide { position: relative; }
    @keyframes annoEntra {
      from { opacity: 0; transform: translateX(-26px); }
      to   { opacity: .92; transform: none; }
    }
    .big-year {
      align-self: flex-start;
      text-shadow: 0 2px 18px rgba(7,7,9,.9);
      animation: annoEntra linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    /* L'anno appeso passa proprio sopra l'etichetta della foto, che sta
       anch'essa in basso a sinistra: spostata a destra nelle sole
       tappe della Storia. */
    .milestone-slide .photo-tag { left: auto; right: 12px; }

    @keyframes tappaEntra {
      from { opacity: 0; transform: translateY(34px); }
      to   { opacity: 1; transform: none; }
    }
    .milestone-slide .image-wrapper,
    .milestone-slide .text-content {
      animation: tappaEntra linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* --- Linea del tempo: solo il binario, senza le date ---
       Le date qui sarebbero doppie: ogni tappa ha già il suo anno
       scritto grande sopra. Resta il filo che avanza, a dire a che
       punto dei 50 anni sei. */
    .storia-timeline {
      display: block;
      position: absolute;
      left: 10px; top: 0; bottom: 0;
      width: 2px;
    }
    .tl-mark { display: none; }
    .tl-track, .tl-fill { width: 2px; }
    @keyframes filoAvanza { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .tl-fill {
      animation: filoAvanza linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 92%;
    }
  }
}

/* ==========================================================
   TESTI E HERO SU TELEFONO
   Difetto di fondo: l'hero e' costruito come colonna stretta a
   sinistra (max-width:39vw) perche' sul monitor la foto deve
   restare scoperta a destra. Su un telefono da 375px quella
   regola lasciava al testo appena 146px — misurati — quindi le
   scritte sembravano enormi rispetto allo spazio, i bottoni
   uscivano dal loro riquadro e nulla risultava allineato.
   Qui la colonna torna piena e i corpi tornano a proporzioni da
   telefono: diversi valori erano minimi di clamp calibrati sul
   desktop (28,8px per il sottotitolo, 20,8px nei racconti).
   ========================================================== */
@media (max-width: 640px) {
  /* --- Hero: colonna piena, non piu' 39vw --- */
  .hero-zoom-text { max-width: 100%; }
  .hero-text-wrap { padding: 0 7%; }
  .hero-zoom-text h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin-bottom: 10px; }
  .hero-zoom-text .section-kicker { font-size: .74rem; letter-spacing: 1.6px; }
  .hero-trust { font-size: .85rem; gap: 6px 14px; margin-bottom: 16px; }
  /* Era 28,8px: piu' grande della riga del titolo su tre righe. */
  /* Selettore con .hero-zoom-text davanti: la regola originale ha due
     classi, e la mia con una sola perdeva il confronto — restava a
     28,8px, piu' alta della riga del titolo. */
  .hero-zoom-text .sub { font-size: 1.32rem; line-height: 1.25; }
  /* Stessa storia del sottotitolo: serviva la doppia classe. Tutto
     maiuscolo e in grassetto pesava piu' del titolo stesso; qui torna
     a fare da didascalia, che e' il suo ruolo. */
  .hero-zoom-text .since {
    font-size: .82rem; letter-spacing: 1.4px; font-weight: 500;
    opacity: .9; margin-bottom: 26px;
  }
  /* I due bottoni si dividono la riga invece di impilarsi stretti. */
  .hero-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-cta-row .btn, .hero-cta-row .btn-outline {
    flex: 1 1 auto; text-align: center; padding: 14px 18px; font-size: .82rem;
  }

  /* --- Racconto della Storia: erano corpi da monitor --- */
  .milestone-slide h3 { font-size: 1.55rem; margin-bottom: 10px; }
  .milestone-slide p { font-size: 1.02rem; line-height: 1.6; }
  .big-year { font-size: 2.6rem; }

  /* --- Intestazioni di sezione --- */
  .section-title { font-size: 1.62rem; }
  .section-kicker { font-size: .72rem; }
  #storia .section-title { font-size: 1.7rem; }
  #storia .section-kicker { font-size: .76rem; }
}

/* Colonna dell'hero anche sui tablet in verticale: la larghezza da
   monitor (39vw) lascia 299px su uno schermo da 768, e il sottotitolo
   finisce su tre righe in mezzo a spazio vuoto. La scala tipografica
   ridotta resta invece riservata ai telefoni (<=640px): su un tablet i
   corpi grandi ci stanno e si leggono bene. */
@media (min-width: 641px) and (max-width: 800px) {
  .hero-zoom-text { max-width: min(86vw, 620px); }
  .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
}

/* ==========================================================
   GALLERIA — griglia (contenuto base) + sfera 3D
   ========================================================== */
#galleria{position:relative;z-index:1;}
.galleria-intro{
  text-align:center;font-size:.9rem;opacity:.6;font-style:italic;
  margin:-10px auto 30px;max-width:44ch;
}
.galleria-scena{position:relative;}

/* Griglia a mosaico: e' quello che si vede senza JavaScript, con
   WebGL assente o con le animazioni ridotte. Deve reggere da sola. */
.galleria-griglia{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  grid-auto-rows:150px;
}
.galleria-griglia figure{margin:0;overflow:hidden;border-radius:14px;}
.galleria-griglia img{width:100%;height:100%;object-fit:cover;display:block;}
/* Qualche riquadro piu' alto: un mosaico a celle tutte uguali sembra
   un foglio di francobolli. */
.galleria-griglia figure:nth-child(3n+1){grid-row:span 2;}

/* --- Sfera 3D --- */
.galleria-3d{
  position:relative;
  height:min(78vh,680px);
  border-radius:18px;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%, rgba(216,96,54,.10), transparent 62%);
}
.galleria-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none;}
.galleria-canvas.in-trascinamento{cursor:grabbing;}
/* La scritta passava sopra le foto e diventava illeggibile: qui ha un
   fondo scuro suo, come una targhetta. */
.galleria-aiuto{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  font-family:var(--font-label);font-size:.74rem;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(246,243,238,.72);
  background:rgba(7,7,9,.62);padding:8px 16px;border-radius:20px;
  backdrop-filter:blur(6px);
  pointer-events:none;transition:opacity .4s ease;text-align:center;
  white-space:nowrap;max-width:92%;
}
.galleria-3d.a-fuoco .galleria-aiuto,
.galleria-aiuto.gia-capito{opacity:0;}

.galleria-fuoco{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  background:linear-gradient(180deg,rgba(7,7,9,0),rgba(7,7,9,.82));
}
.galleria-titolo{font-family:var(--font-display);font-size:1.15rem;color:var(--cream);}
/* Al posto del tasto: una riga che dice come si torna indietro. */
.galleria-suggerimento{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(246,243,238,.55);white-space:nowrap;
}

@media(max-width:640px){
  .galleria-griglia{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:8px;}
  .galleria-3d{height:52vh;border-radius:14px;}
  /* nowrap + testo lungo = frase tagliata a meta' sul bordo destro */
  .galleria-aiuto{
    font-size:.72rem;letter-spacing:.6px;bottom:12px;
    white-space:normal;line-height:1.5;padding:8px 14px;max-width:86%;
  }
  .galleria-fuoco{padding:14px 16px;}
  .galleria-titolo{font-size:1rem;}
}

/* ==========================================================
   PAGINA MENÙ — stesso trattamento della home
   ========================================================== */

/* Barra azioni sotto il titolo: stato reale del locale + i due modi
   per chiudere la cosa. Prima il menù non aveva nessuna via d'uscita
   se non tornare in cima o scendere fino al footer. */
.azioni-rapide{
  /* Serve esplicitamente: e' un <div>, non una <section>, quindi non
     eredita lo z-index:1 delle sezioni e finiva sotto al layer di
     sfondo della pagina (body::after), che lo copriva. Stesso identico
     inciampo gia' capitato con la fascia dei piatti in home. */
  position:relative;z-index:1;
  max-width:1150px;margin:0 auto;padding:26px 8% 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.azioni-rapide-tasti{display:flex;gap:10px;flex-wrap:wrap;}
.azioni-rapide .btn,.azioni-rapide .btn-outline{padding:12px 20px;font-size:.8rem;}

/* Salto rapido fra le portate: resta appiccicato sotto l'intestazione
   mentre si scorre, così la scelta della portata è sempre a portata
   di pollice. */
.menu-salta{
  position:sticky;top:56px;z-index:5;
  display:flex;gap:8px;overflow-x:auto;
  /* Stessa ragione della testata: vetro smerigliato invece di una
     fascia piena che stonava col gradiente della pagina. */
  padding:10px 18px;margin:0 -18px 20px;
  background:rgba(12,12,16,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:14px;
  /* la barra scorre di lato senza mostrare la sua barra di scorrimento */
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.menu-salta::-webkit-scrollbar{display:none;}
.menu-salta button{
  flex:0 0 auto;min-height:42px;padding:0 16px;
  font-family:var(--font-label);font-size:.78rem;letter-spacing:1.1px;
  background:rgba(255,255,255,.05);border:1px solid rgba(246,243,238,.16);
  color:var(--cream);border-radius:22px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.menu-salta button:hover,.menu-salta button.attivo{
  background:var(--gold);border-color:var(--gold);color:#fff;
}

/* Piatti con foto: la miniatura sta a sinistra, il prezzo resta in
   fondo a destra come nelle righe senza foto — così la colonna dei
   prezzi non si spezza a metà elenco. */
/* Lo scarto per l'intestazione fissa e la barra delle portate: il
   salto si ferma qui sotto invece di infilare il titolo dietro di
   loro. Vale anche per le ancore digitate a mano. */
.lst-portata{scroll-margin-top:124px;}

.menu-item.con-foto{align-items:center;}
.piatto-foto{
  width:76px;height:76px;object-fit:cover;border-radius:10px;
  flex:0 0 auto;border:1px solid rgba(234,156,117,.28);
}
.menu-item.con-foto > div{flex:1;}

@media(max-width:640px){
  .azioni-rapide{padding:20px 6% 0;gap:12px;}
  .azioni-rapide .btn,.azioni-rapide .btn-outline{flex:1;text-align:center;}
  .menu-salta{top:52px;padding:9px 14px;margin:0 -14px 16px;}
  .piatto-foto{width:62px;height:62px;}
}

/* ==========================================================
   IL PERCORSO DEL MENÙ — le carte scorrono lungo un'onda
   Stessa meccanica della fascia piatti in home, ma con tutti i
   piatti e i cartelli delle portate in mezzo.
   ========================================================== */
.percorso-pin{
  position:relative;z-index:1;
  /* La lunghezza dello scorrimento cresce col numero di tappe: con
     un'altezza fissa, 18 carte sarebbero sfrecciate via in un lampo. */
  /* Alzata da 52 per due motivi: la rincorsa della prima carta allunga
     il tragitto e, a parita' di altezza, avrebbe accelerato tutto il
     resto; e il passaggio davanti agli occhi va tenuto lento. */
  height:calc(var(--tappe) * 58vh);
}
.percorso-stage{
  position:relative;height:100vh;overflow:hidden;
  background:radial-gradient(ellipse 900px 600px at 50% 55%, rgba(216,96,54,.09), transparent 60%);
}
.percorso-onda{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.onda-linea{stroke:rgba(234,156,117,.22);stroke-width:1.5;}
.percorso-carte{position:absolute;inset:0;}
/* Su schermo grande i raggruppamenti per portata spariscono del tutto:
   le carte tornano figlie dirette e il JS le dispone lungo l'onda come
   prima. display:contents rimuove il riquadro, non il contenuto. */
.pc-gruppo,.pc-fila{display:contents;}

.pc-carta{
  position:absolute;top:0;left:0;
  /* Piu' contenute: cosi' due o tre carte convivono in scena e il
     percorso si legge come una fila, non come una carta alla volta. */
  width:clamp(215px,20vw,290px);
  border-radius:18px;overflow:hidden;
  background:rgba(14,14,18,.92);
  border:1px solid rgba(234,156,117,.28);
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  will-change:transform,opacity;
}
.pc-foto img{width:100%;aspect-ratio:4/2.9;object-fit:cover;display:block;}
.pc-testo{padding:12px 14px 14px;}
.pc-testo h3{
  font-family:var(--font-display);font-size:1.02rem;color:var(--cream);
  line-height:1.25;margin-bottom:5px;
}
.pc-testo p{font-size:.85rem;line-height:1.4;color:rgba(246,243,238,.8);margin-bottom:8px;}

/* Cartello di portata: nessuna foto, solo la parola. Serve a dare il
   respiro fra un gruppo di piatti e l'altro. */
.pc-cartello{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;text-align:center;
  width:clamp(180px,17vw,240px);aspect-ratio:1/1;
  background:linear-gradient(160deg,rgba(216,96,54,.22),rgba(14,14,18,.95));
  border-color:rgba(234,156,117,.5);
}
.pc-portata{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2.2rem);
  color:var(--cream);
}
.pc-sotto{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold-light);
}

/* Quanto manca alla fine del percorso */
.percorso-avanzamento{
  position:absolute;left:8%;right:8%;bottom:26px;height:2px;
  background:rgba(246,243,238,.14);border-radius:2px;
}
.percorso-avanzamento span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}

/* --- Il percorso sul telefono ---------------------------------
   Qui il pin di GSAP non entra: combatte con la barra del browser che
   si apre e si chiude durante lo scorrimento e il risultato salta.
   Stesso spirito con un'altra tecnica: le carte salgono una dopo
   l'altra, guidate dallo scroll con animazioni CSS calcolate dal
   compositore. Nessuna libreria coinvolta. */
@media (max-width: 800px) {
  .percorso-pin{height:auto;}
  .percorso-stage{
    height:auto;overflow:visible;
    display:flex;flex-direction:column;align-items:center;gap:26px;
    padding:40px 6% 30px;
  }
  .percorso-onda,.percorso-avanzamento{display:none;}
  .percorso-carte{position:relative;inset:auto;display:flex;flex-direction:column;gap:26px;width:100%;}

  /* Una riga per portata: il cartello fa da titolo, sotto i piatti si
     sfogliano col dito. Cosi' la pagina scende da 5,3 schermate a
     circa 2, e il gesto e' quello nativo del telefono. */
  .pc-gruppo{display:block;width:100%;}
  .pc-fila{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    /* le carte partono a filo del testo ma la riga arriva ai bordi
       dello schermo: cosi' la carta seguente resta tagliata sul bordo
       e si capisce che ce n'e' un'altra */
    margin:0 -6%;padding:2px 6% 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-padding-left:6%;
  }
  .pc-fila::-webkit-scrollbar{display:none;}
  .pc-fila .pc-carta{
    flex:0 0 76%;max-width:300px;margin:0;
    scroll-snap-align:start;
  }
  .pc-carta{
    position:relative;top:auto;left:auto;
    opacity:1;transform:none;pointer-events:auto;
    /* Terza riduzione: si era partiti da 385px d'altezza (il 47% dello
       schermo), poi 296 (36%). Con 18 tappe da attraversare servono
       carte che stiano in un quarto di schermo, cosi' se ne vedono due
       per volta e il percorso non diventa una maratona. */
    width:100%;max-width:300px;margin:0 auto;
  }
  .pc-foto img{aspect-ratio:16/9;}
  .pc-cartello{
    aspect-ratio:auto;padding:14px 16px;width:100%;max-width:none;
    margin-bottom:12px;
    flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;
    text-align:left;
  }
  .pc-testo{padding:10px 12px 12px;}
  .pc-testo h3{font-size:.98rem;line-height:1.2;}
  .pc-testo p{font-size:.8rem;margin-bottom:5px;}
  .pc-portata{font-size:1.35rem;}
  /* .66rem faceva 10,6px */
  .pc-sotto{font-size:.72rem;letter-spacing:1.2px;}
  .percorso-carte{gap:14px;}
}

/* --- Il volo del percorso sul telefono -------------------------
   Qui il telefono smette di essere una versione ridotta e fa la
   stessa cosa del computer: la scena resta ferma sotto il dito e
   i piatti attraversano lo schermo venendo dal fondo, uno dopo
   l'altro, mentre la pagina scorre.
   Il motore non è GSAP — il suo "pin" litiga con la barra del
   browser che si apre e chiude — ma le animazioni guidate dallo
   scorrimento, che il compositore calcola da solo. Se il browser
   non le conosce, o se il visitatore ha chiesto meno movimento,
   resta in piedi la versione a righe che si sfogliano col dito
   scritta qui sopra: nessuno resta con una pagina vuota. */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (transform-style: preserve-3d) {
    .percorso-pin{
      /* quanto scorrimento vale una tappa: il ritmo del volo */
      height:calc(var(--tappe) * 40svh);
      /* La fetta di ciascuna carta. Il +2.5 tiene conto di due code:
         il respiro iniziale e la coda dell'ultima carta, che dura
         quasi tre fette. Senza, l'ultima sfilerebbe oltre la fine del
         tratto agganciato e resterebbe piantata in mezzo allo schermo. */
      --passo:calc(100% / (var(--tappe) + 1.75));
      /* Un attimo di respiro prima che parta il primo cartello: la
         scena si aggancia, l'occhio si assesta, poi comincia il volo.
         Corto di proposito — un'attesa lunga sarebbe schermo vuoto, e
         il rallentamento vero sta nelle prime due tappe qui sotto. */
      --avvio:calc(var(--passo) * 0.15);
      /* la linea del tempo condivisa: la leggono le carte e la
         barra dell'avanzamento, così vanno esattamente insieme */
      view-timeline-name:--percorso;
      view-timeline-axis:block;
    }
    .percorso-stage{
      position:sticky;top:0;
      height:100svh;overflow:hidden;
      display:block;padding:0;
      perspective:1000px;
    }
    /* I raggruppamenti per portata spariscono come sul computer:
       le carte tornano una fila sola dentro la scena. */
    .pc-gruppo,.pc-fila{display:contents;}
    .percorso-carte{
      position:absolute;inset:0;display:block;
      transform-style:preserve-3d;
    }

    @keyframes pcVolo {
      0%   { opacity:0;
             transform:translate3d(-50%,-50%,-900px) translateY(120px) rotateX(18deg) rotateY(-14deg); }
      22%  { opacity:1; }
      50%  { opacity:1;
             transform:translate3d(-50%,-50%,0) rotateX(0deg) rotateY(0deg); }
      74%  { opacity:1; }
      100% { opacity:0;
             transform:translate3d(-50%,-50%,330px) translateY(-90px) rotateX(-16deg) rotateY(11deg); }
    }
    .percorso-carte .pc-carta{
      position:absolute;left:50%;top:50%;margin:0;
      /* Il tetto serve al telefono; sul tablet, largo il doppio, un
         tetto da telefono lasciava la carta sperduta in mezzo allo
         schermo. Cresce con la finestra e si ferma a 420. */
      width:min(72vw,420px);max-width:none;
      pointer-events:none;
      animation:pcVolo linear both;
      animation-timeline:--percorso;
      /* Ogni carta ha la sua fetta di scorrimento, spostata di una
         tappa rispetto alla precedente e lunga quasi due: le fette
         si sovrappongono, così in scena non c'è mai il vuoto fra
         un piatto e il successivo.
         La misura è "contain", non "cover": per un blocco più alto
         dello schermo copre esattamente il tratto in cui la scena
         resta agganciata. Con "cover" le prime carte volavano via
         mentre la sezione stava ancora salendo, e chi arrivava si
         trovava il primo piatto già passato. */
      animation-range:
        contain calc(var(--avvio) + var(--i) * var(--passo))
        contain calc(var(--avvio) + var(--i) * var(--passo) + 2.6 * var(--passo));
    }
    /* Le prime due tappe — il cartello "Antipasti" e il piatto che lo
       segue — attraversano con calma: e' il momento in cui si capisce
       che cosa sta succedendo. Confronto esatto sull'attributo, non
       "contiene": "--i:1" sarebbe l'inizio anche di 10, 11 e 12. */
    .percorso-carte .pc-carta[style="--i:0"],
    .percorso-carte .pc-carta[style="--i:1"]{
      animation-range:
        contain calc(var(--avvio) + var(--i) * var(--passo))
        contain calc(var(--avvio) + var(--i) * var(--passo) + 4 * var(--passo));
    }
    .percorso-carte .pc-cartello{
      /* fondo pieno: il cartello sta davanti e il piatto che arriva
         dal fondo non deve trasparirci dentro */
      background:linear-gradient(160deg,rgba(96,38,20,.98),rgba(12,12,16,1));
      width:min(60vw,340px);aspect-ratio:1/1;
      flex-direction:column;justify-content:center;align-items:center;
      text-align:center;gap:6px;padding:20px;margin:0;
    }
    .pc-foto img{aspect-ratio:4/3;}

    /* Quanto manca alla fine: in un tratto lungo serve sapere a che
       punto si è. Scala orizzontale, non larghezza: nessun ricalcolo
       di layout mentre si scorre. */
    .percorso-avanzamento{display:block;}
    @keyframes pcAvanza { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .percorso-avanzamento span{
      width:100%;transform-origin:left;
      animation:pcAvanza linear both;
      animation-timeline:--percorso;
      /* stessa misura delle carte, altrimenti la barra direbbe 82%
         proprio quando l'ultimo piatto è appena sfilato */
      animation-range:contain 0% contain 100%;
    }
  }
}

/* ==========================================================
   LISTINO — l'elenco sotto il percorso
   Poche parti, molto respiro, blocchi ben separati. Le righe
   entrano una dopo l'altra mentre si scorre: l'animazione la
   calcola il compositore (animation-timeline), non il JavaScript.
   ========================================================== */
/* Molto piu' aria fra una portata e l'altra che fra due piatti della
   stessa portata: e' la distanza a dire dove finisce un gruppo e ne
   inizia un altro. Prima erano 54px contro 0 fra le righe, e l'occhio
   non trovava il confine. */
.listino{display:flex;flex-direction:column;gap:86px;}

/* Sono elementi <section>, quindi prendevano la regola globale delle
   sezioni: 80px di padding e margin:0 auto. In una colonna flex quei
   margini automatici assorbono lo spazio libero, e ogni portata si
   restringeva quanto il suo contenuto — misurato: 272, 317, 317 e 268
   pixel. Da li' i prezzi che non cadevano sulla stessa colonna.
   Qui la regola generale viene azzerata. */
.lst-portata{
  position:relative;
  width:100%;max-width:none;margin:0;padding:0;
}
/* Testata della portata: nome grande, e a destra quanti piatti e in
   che fascia di prezzo — l'informazione che fa decidere se vale la
   pena leggere quella sezione. */
/* La testata resta appesa sotto la barra delle portate mentre scorri
   quella sezione: cosi' in qualunque punto ti fermi sai sempre se stai
   leggendo i primi o i secondi. Era il difetto principale — le righe
   scorrevano via e il titolo spariva in cima. */
.lst-testa{
  position:sticky;top:114px;z-index:3;
  display:flex;align-items:baseline;
  /* Il fondo sfoca cio' che ci passa sotto invece di coprirlo con un
     rettangolo pieno: quello si vedeva come una striscia grigia
     incollata sopra la pagina, con i bordi netti e un colore che non
     combaciava con lo sfondo (che qui e' un gradiente). */
  background:rgba(12,12,16,.62);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  /* Il testo resta allineato alle righe sotto, la fascia respira di
     lato: prima le lettere partivano a tre pixel dal bordo. */
  /* 18 di respiro per la fascia + 20 di rientro delle righe: cosi' il
     nome della portata parte esattamente sopra i nomi dei piatti,
     invece che 20px piu' a sinistra. */
  padding:14px 18px 14px 38px;margin:0 -18px 12px;
  border-radius:12px;
  border-bottom:1px solid rgba(234,156,117,.22);
}
.lst-testa h3{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.1vw,2rem);
  color:var(--gold-light);letter-spacing:.5px;
}

.lst-voci{list-style:none;margin:0;padding:0;}
/* Una riga = tre informazioni su una griglia fissa: il prezzo cade
   sempre sulla stessa colonna, in tutte le portate. E' quello che fa
   sembrare ordinato un elenco. */
.lst-voce{
  display:grid;
  grid-template-columns:1fr auto;
  /* Il prezzo scende sulla riga della descrizione invece di stare in
     una colonna tutta sua accanto al nome: resta leggibile, ma non
     forma piu' una colonna che invita a scorrere i numeri dall'alto in
     basso e a scegliere il piatto piu' economico. */
  grid-template-areas:"nome nome" "desc prezzo";
  gap:4px 18px;
  padding:22px 0 22px 20px;
  border-bottom:1px solid rgba(246,243,238,.09);
  position:relative;
}
.lst-voce:last-child{border-bottom:0;}
/* Il trattino verticale a sinistra: unico segno grafico della riga,
   si accende al passaggio. Niente riquadri, niente sfondi. */
.lst-voce::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.lst-voce:hover::before{transform:scaleY(1);}

.lst-nome{
  grid-area:nome;
  font-family:var(--font-body);font-weight:700;font-size:1.1rem;
  color:var(--cream);letter-spacing:.2px;
}
/* La nota accanto al nome non deve mai spezzarsi: andando a capo
   sfondava la riga e spingeva giu' la descrizione. */
.lst-nota{
  display:inline-block;white-space:nowrap;
  font-family:var(--font-label);font-style:normal;
  font-size:.66rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-light);margin-left:8px;vertical-align:middle;
  border:1px solid rgba(234,156,117,.3);border-radius:20px;padding:2px 8px;
}
.lst-desc{grid-area:desc;font-size:.86rem;color:rgba(246,243,238,.55);line-height:1.5;}
.lst-prezzo{
  grid-area:prezzo;align-self:end;
  /* Stesso peso della descrizione: il prezzo si legge quando lo cerchi,
     non salta addosso mentre leggi il piatto. */
  font-family:var(--font-label);font-size:.92rem;color:rgba(234,156,117,.85);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  /* Larghezza minima e allineamento a destra: senza, la colonna dei
     prezzi si sposta di qualche pixel a ogni riga (misurato: "€ 6" e
     "€ 14" non cadevano sulla stessa verticale) ed e' proprio quel
     disallineamento a far sembrare disordinato un elenco. */
  min-width:4.6ch;text-align:right;
}

@media(max-width:640px){
  .listino{gap:64px;}
  .lst-testa{top:110px;padding:12px 14px 12px 30px;margin:0 -14px 10px;}
  .lst-voce{padding:18px 0 18px 16px;gap:4px 12px;}
  .lst-nome{font-size:1.04rem;}
  .lst-desc{font-size:.84rem;}
  .lst-prezzo{font-size:.9rem;}
  .lst-testa h3{font-size:1.4rem;}
}

/* Ingresso a cascata: ogni riga arriva poco dopo la precedente. Il
   ritardo lo porta la variabile --n scritta nell'HTML, così non serve
   una regola per riga. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes lstEntra {
      from { opacity:0; transform:translateY(14px); }
      to   { opacity:1; transform:none; }
    }
    .lst-testa,.lst-voce{
      animation:lstEntra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }
  }
}

/* Seconda strada sotto il bottone della fascia finale: chi non vuole
   compilare nulla chiama, e resta comunque dentro il percorso invece di
   tornare indietro a cercare il numero. */
.cta-alt{margin-top:14px;font-size:.88rem;opacity:.7;}
.cta-alt a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;}