/* ==========================================================================
   FLAVORE RISTORANTE — one page
   ==========================================================================
   TIPOGRAFIA — LIBERTINUS SANS, tondo e corsivo.
   Il riferimento (11elevenbar) usa OPTIMA: scaricando i loro due woff2 e
   leggendone i name record si vede che è la copia di SISTEMA di macOS
   (Linotype, versione 13.0d1e2, marchio Heidelberger Druckmaschinen).
   Nessuna licenza webfont copre quel file: copiare la loro scelta vuol dire
   copiare l'illecito e metterlo sul dominio del cliente. Optima legale costa
   ~230 $/anno per due soli stili, un dominio, con un contatore di pageview
   installato nel sito, da rinnovare per sempre.
   Libertinus Sans discende da Linux Biolinum, disegnata dichiaratamente come
   sostituto libero di Optima, e Google la classifica nella stessa categoria
   (Sans Serif — Glyphic): stesse aste svasate, stesso carattere inciso.
   OFL 1.1, self-hostata, 28 KB in tre tagli.
   IL CORSIVO — e qui stava l'errore del primo giro. Il corsivo di Optima NON
   è calligrafico: è un romano inclinato che tiene le svasature del tondo.
   Accostargli un Cormorant Garamond (corsivo garaldo) è un errore di
   CATEGORIA, non di gusto: è ciò che faceva sembrare la pagina generata.
   Qui il corsivo è quello del font stesso, disegnato insieme al tondo.
   Colori dal coordinato Canva del cliente: bosco #3b4e3b · rame #c38848.
   ========================================================================== */

@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-400-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --notte:#141414;
  --bosco:#3b4e3b;
  --rame:#c38848;
  --crema:#f7f3f0;
  --inchiostro:#231f20;

  /* Optima è installata di sistema su macOS e iOS: USARLA da lì è legale,
     perché la licenza web serve a SERVIRE il file, non a leggerlo dal device.
     Su Mac e iPhone si vede il carattere del riferimento; altrove entra
     Libertinus, self-hostata, che è nata come suo sostituto libero. */
  --sans:Optima, 'Optima nova', 'Libertinus Sans', Candara, ui-serif, Georgia, serif;
  --corsivo:Optima, 'Optima nova', 'Libertinus Sans', Candara, ui-serif, Georgia, serif;

  --display:clamp(2.55rem, 7.2vw, 5.4rem);
  --titolo:clamp(1.85rem, 3.5vw, 2.9rem);
  --corpo:clamp(1.05rem, .42vw + .96rem, 1.19rem);
  --minuta:.78rem;

  --respiro:clamp(5.5rem, 10vw, 9.5rem);
  --largo:74rem;

  /* Qui non c'è un menu: l'unico elemento fisso in alto è il monogramma.
     La misura serve alle pagine di servizio (privacy, cookie), dove il
     titolo non deve finire sotto di lui. */
  --header-h:72px;

  --carta-w:clamp(84px, 10.5vw, 158px);
  --carta-h:calc(var(--carta-w) * 1.4);
  /* il marchio sta nel varco e il blocco marchio+scritta è alto quanto le carte */
  --marchio-w:calc(var(--carta-h) * .68);
  --marchio-h:calc(var(--marchio-w) * 1.042);
  --marchio-y:calc(50vh - var(--marchio-h) / 2 - 2.1rem);
  --marchio-scala:calc(46 / 148);   /* 148px nel varco → 46px nella header */

  --curva:cubic-bezier(.5, 0, 0, 1);        /* misurata sul riferimento */
  --curva-ui:cubic-bezier(.32, .72, 0, 1);
}

*,*::before,*::after{box-sizing:border-box}

/* Taglio orizzontale su ENTRAMBI, com'e' la regola. Era finito solo sul body
   perche' su html disattivava lo scroll-snap in Safari iOS — ma lo snap e'
   stato tolto il 12 agosto, quindi il motivo dell'eccezione non esiste piu' e
   l'eccezione se ne va con lui. Serve davvero: la striscia dei sei verticali
   e' piu' larga della finestra per costruzione. */
html,body{overflow-x:clip;touch-action:pan-y}
html{scroll-behavior:auto}    /* MAI `smooth` con Lenis: i due si annullano e la pagina non scorre */

/* ── CSS richiesta da Lenis — canonica, non toccare ─────────────────────── */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* Lo scatto obbligatorio (scroll-snap-type: y mandatory) è stato TOLTO il
   12 agosto: sul telefono, dopo un salto o uno scorrimento lungo, riportava
   indietro alla sezione precedente. Le sezioni restano alte quanto lo
   schermo — quindi si vede una foto per volta — ma lo scroll è libero, e le
   animazioni vivono solo dove servono davvero: apertura, manifesto, collage. */

body{
  margin:0;
  background:var(--notte);
  color:var(--crema);
  font-family:var(--sans);
  font-size:var(--corpo);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{max-width:100%;display:block}
a{color:inherit}

/* ── grana: pellicola fissa, mai su un contenitore che scorre ─────────────── */
.grana{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* niente mix-blend-mode: un livello FISSO a schermo pieno che si fonde
     obbliga il compositore a rifondere tutto il viewport a ogni fotogramma,
     ed e' la prima causa di scorrimento a scatti sui dispositivi lenti.
     A 4,5%% di opacita' la differenza fra overlay e normale non si vede. */
}

/* Il velo del salto e' stato TOLTO: una dissolvenza al nero e' uno stacco,
   non un passaggio. Il salto ora si nasconde invece di mascherarsi — vedi
   `salta il manifesto` in js/animazioni.js. */

.salta{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%);
  z-index:80; background:var(--crema); color:var(--inchiostro);
  padding:.7rem 1.2rem; border-radius:999px; font-size:var(--minuta);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:top .3s var(--curva-ui);
}
.salta:focus{top:1rem}

/* ── IL marchio: uno solo, e viaggia ─────────────────────────────────────
   Parte grande dentro il varco della striscia e trasla fino alla header.
   Niente secondo logo che compare in dissolvenza: era il difetto del primo
   giro — per un istante se ne vedevano due. */
.marchio{
  position:fixed; top:0; left:50%; z-index:50;
  width:var(--marchio-w);
  transform-origin:50% 0;
  transform:translate(-50%, var(--marchio-y)) scale(1);
  opacity:.97;
}
.marchio img{width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
/* nel piede il logo c'è già, per intero: quello fisso in alto si toglie di mezzo */
html.nel-piede .marchio{opacity:0;pointer-events:none;transition:opacity .5s var(--curva)}
.marchio:focus-visible{outline:2px solid var(--rame);outline-offset:6px}

/* ══════════════════════════════════════════════════════════════════════════
   APERTURA
   ═════════════════════════════════════════════════════════════════════════ */
/* L'apertura è alta ESATTAMENTE una schermata: così il manifesto prende lo
   schermo intero al termine della corsa del marchio, nello stesso fotogramma.
   È il rapporto del riferimento — che non lega il logo alla sezione dopo, lo
   lega all'hero: coincidono perché l'hero è alto 100svh. */
.apertura{position:relative;height:100dvh}
.apertura__corsa{display:none}

.apertura__scena{
  position:sticky; top:0;
  height:100dvh; min-height:34rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

.apertura__sfondo{position:absolute;inset:0;z-index:0}
.apertura__sfondo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.apertura__sfondo::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(78% 62% at 50% 44%, rgba(20,20,20,.28), rgba(20,20,20,.82) 78%),
    linear-gradient(to bottom, rgba(20,20,20,.55), rgba(20,20,20,.25) 34%, rgba(20,20,20,.9));
}

/* la striscia: tre verticali, il varco del marchio, tre verticali */
.striscia{
  position:absolute; z-index:2; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:clamp(8px,1vw,16px);
}
.striscia__varco{width:var(--carta-w);flex:0 0 auto}
.striscia__carta{
  width:var(--carta-w); height:var(--carta-h); flex:0 0 auto;
  border-radius:3px; overflow:hidden;
  background:#0b0b0b;
  box-shadow:0 18px 46px -22px rgba(0,0,0,.9);
  will-change:transform,opacity;
}
.striscia__carta video{width:100%;height:100%;object-fit:cover}

/* Il nome sta in alto ed è l'h1: sotto il logo non c'è più nulla, così il
   marchio non si sovrappone a niente mentre viaggia. */
.apertura__nome{
  position:absolute; z-index:3; top:clamp(1.6rem,4vh,2.8rem); left:50%;
  transform:translateX(-50%); margin:0; white-space:nowrap;
  font-size:var(--minuta); letter-spacing:.3em; text-transform:uppercase;
  color:var(--rame); font-weight:400;
}
.apertura__occhiello{
  position:absolute; z-index:3; top:clamp(1.6rem,4vh,2.8rem); left:50%;
  transform:translateX(-50%); margin:0; white-space:nowrap;
}

.apertura__base{
  position:absolute; z-index:3; left:50%; bottom:clamp(1.8rem,5vh,3.4rem);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1.05rem;
  width:min(92vw, 34rem); text-align:center;
}

/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTO — le frasi una per volta sul video
   ═════════════════════════════════════════════════════════════════════════ */
.manifesto{position:relative;background:var(--notte)}

.palco{
  position:sticky; top:0; height:100dvh; min-height:32rem;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.palco__fondale{position:absolute;inset:0;background:var(--notte);overflow:hidden}
/* L'alone è il fotogramma della clip, sfocato e spento: riempie lo schermo
   dietro al verticale senza accendere un secondo decoder video. Due strati
   che si alternano, così il cambio è una dissolvenza e non uno stacco. */
.palco__alone{
  position:absolute; inset:-8%;
  background-position:50% 50%; background-size:cover; background-repeat:no-repeat;
  /* 58px di sfocatura a schermo pieno si ri-rasterizzano a ogni cambio
     di poster: otto volte dentro il manifesto, mentre si scorre. A 30px il
     costo cala di circa quattro volte e l'alone resta un alone. */
  filter:blur(30px) saturate(.8) brightness(.42);
  transform:scale(1.06);
  opacity:0; transition:opacity 3s var(--curva);
  will-change:opacity;
}
.palco__alone.attiva{opacity:1}
.palco__fondale::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(58% 54% at 50% 46%, rgba(195,136,72,.16), transparent 70%);
}
.palco__vetro{
  position:relative;
  height:min(86vh, 100%); aspect-ratio:406/720;
  border-radius:4px; overflow:hidden; background:#0b0b0b;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.95);
}
.palco__clip{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 3s var(--curva);   /* 3s: la curva del riferimento */
}
.palco__clip.attiva{opacity:1}
.palco__velo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,20,20,.62), rgba(20,20,20,.3) 40%, rgba(20,20,20,.78));
}

/* Il testo NON scorre. Ogni frase resta inchiodata al centro dello schermo
   mentre il suo "passo" di scroll le passa attraverso: si vede solo da ferma,
   entra e esce in dissolvenza. Il video dietro continua a correre. */
/* I passi cominciano DOPO la schermata del palco, mai sopra: finche' il palco
   sta salendo il video e' tagliato dal bordo, e una frase accesa li' si legge
   su mezzo video. Misurato prima della correzione: a 0,2 schermate dall'arrivo
   la prima frase era gia' a opacita' 1 con 105px di video ancora fuori campo.
   Il prezzo e' una schermata in piu' di scorrimento, che vale come battuta
   d'attesa: il video pieno resta solo per un attimo, poi entra la prima frase. */
/* La coda in fondo serve al PALCO, non al testo: uno `sticky` si libera sempre
   UNA schermata prima della fine del suo blocco di contenimento, e quel blocco
   e' il CONTENT BOX del manifesto — il padding del manifesto sta fuori e non
   conta (provato: violazione identica). Allungando qui, dentro il flusso, il
   video resta piantato finche' l'ottava frase se n'e' andata.
   Da 80 a 40dvh il 13 agosto: con i keyframe anticipati l'ultima frase se ne
   va allo 0,28 dell'ultima schermata invece che allo 0,52, quindi meta' della
   coda era scorrimento a vuoto — quello che si doveva "far scorrere via". */
.battute{position:relative;z-index:2;padding-bottom:40dvh}
/* 0,72 schermate per frase: è il passo misurato sul riferimento */
.passo{min-height:100dvh;height:100dvh;view-timeline-name:--passo;view-timeline-axis:block}

.battuta{
  position:sticky; top:50%;
  transform:translateY(-50%);
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:.35rem;
  text-align:center;
  padding:0 clamp(1.4rem,6vw,3rem);
  /* -2, -2, -2, poi -4: da 28,8 a 20,8 al massimo su desktop */
  font-size:clamp(.75rem, 1.45vw, 1.3rem);
  font-weight:400; line-height:1.5;
  max-width:min(92vw, 40rem);
  text-shadow:0 2px 26px rgba(0,0,0,.75);
  will-change:opacity,transform;
}
.battuta--terzina span{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   IMMERSIONE — il collage che si attraversa
   ═════════════════════════════════════════════════════════════════════════
   Geometria misurata sul riferimento (11elevenbar, sezione "immersion").
   Sette strati a schermo pieno, non una griglia: si scala LO STRATO con
   origine al centro dello schermo, mai il gruppo di foto insieme.
   La formula che governa tutto:
     centro_finale = centro_schermo + (centro_foto - centro_schermo) * scala
   La centrale ha offset zero, quindi cresce e resta ferma. Le altre sono
   decentrate: la stessa scala le spinge fuori, e più sono lontane più
   corrono. Ognuna ha la SUA scala finale — è l'unica variabile, il resto
   è geometria. Nessun blur, nessuna opacità, nessuna prospettiva 3D:
   il riferimento non ne usa, e non servono.                              */
.immersione{position:relative;height:300vh;background:var(--notte);view-timeline-name:--immersione;view-timeline-axis:block}
.immersione__pannello{position:sticky;top:0;height:100dvh;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%, #1c1a18, var(--notte) 72%)}

.strato{position:absolute;inset:0;transform-origin:center center;will-change:transform}
.strato img{position:absolute;width:100%;height:100%;object-fit:cover}
.strato > img{position:absolute}

/* posizione della foto DENTRO il proprio strato, in vw/vh */
.strato[data-foto="prima"]   img{top:20vh;left:10vw;width:18vw;height:24vh}
.strato[data-foto="seconda"] img{top:0vh; left:30vw;width:22vw;height:31vh}
.strato[data-foto="terza"]   img{top:26vh;left:72vw;width:12vw;height:18vh}
.strato[data-foto="quarta"]  img{top:46vh;left:72vw;width:24vw;height:25vh}
.strato[data-foto="quinta"]  img{top:69vh;left:20vw;width:30vw;height:23vh}
.strato[data-foto="sesta"]   img{top:69vh;left:52vw;width:18vw;height:31vh}
/* la centrale: il suo centro cade esattamente sul centro dello schermo
   (33vh + 34vh/2 = 50vh · 30vw + 40vw/2 = 50vw) */
.strato--centro img{top:33vh;left:30vw;width:40vw;height:34vh}
.strato--centro{z-index:2}

.immersione__invito{
  position:absolute; z-index:10; left:50%; bottom:clamp(2.2rem,7vh,4.6rem);
  transform:translate(-50%,0) scale(1);
  transform-origin:center center;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  text-align:center; width:min(92vw,34rem);
}
.immersione__invito::before{
  content:''; position:absolute; inset:-3.4rem -9rem -4.6rem; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 58%, rgba(20,20,20,.94), rgba(20,20,20,0) 74%);
}
.immersione__invito .bottone{margin-top:1.4rem}

/* ══════════════════════════════════════════════════════════════════════════
   FASCE DI CONTENUTO
   ═════════════════════════════════════════════════════════════════════════ */
/* Lo sfondo pieno NON e' decorazione: le bande restano inchiodate in cima per
   tutta la durata di <main>, quindi qualunque sezione trasparente si porta
   dietro la foto della terrazza e la sua frase. Successo davvero, sulle
   recensioni: si leggeva "La sera entra dalle vetrate" sotto le schede. */
.fascia{background:var(--notte);padding-block:var(--respiro);position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;content-visibility:auto;contain-intrinsic-size:auto 900px}
.fascia--bosco{background:var(--bosco)}
/* Sfumature LEGGERE attorno al verde. Il primo giro le aveva a 177 e 240px:
   a quella misura smettono di essere un raccordo e diventano una banda, che
   si vede piu' del taglio che dovevano nascondere. Qui stanno a 28 e 32px:
   la riga netta se ne va, la sfumatura non si nota. */
.fascia--bosco::before{
  content:''; position:absolute; top:0; left:0; right:0; height:28px;
  background:linear-gradient(to bottom, var(--notte), rgba(59,78,59,0));
  pointer-events:none; z-index:0;
}
.fascia--bosco > *{position:relative;z-index:1}
.dentro{width:min(92vw, var(--largo));margin-inline:auto}
.dentro--stretto{width:min(92vw, 44rem)}

.occhiello{
  font-size:var(--minuta); letter-spacing:.3em; text-transform:uppercase;
  color:var(--rame); font-weight:700; margin:0 0 1.6rem;
}
.fascia--bosco .occhiello{color:#e6c9a4}   /* rame su bosco non regge il contrasto */

.titolo{
  font-family:var(--sans); font-weight:400;
  font-size:var(--titolo); line-height:1.14; letter-spacing:-.005em;
  margin:0 0 1.5rem; text-wrap:balance;
}


.corsivo{
  font-family:var(--corsivo); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2.2vw, 1.75rem); line-height:1.4;
  color:var(--rame); margin:1.8rem 0 0;
}
.fascia--bosco .corsivo{color:#e9cfae}
.servizio{
  font-size:var(--minuta); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(247,243,240,.62); margin:.2rem 0 0;
}
.servizio a{color:var(--rame);text-decoration:none;border-bottom:1px solid rgba(195,136,72,.4)}


/* ── IL BOTTONE ──────────────────────────────────────────────────────────
   Misurato sul riferimento (11elevenbar, "Reserve a Table"), non inventato:
     border-radius 0 · 1px solid bianco · fondo trasparente
     font-size 10px · peso 400 · letter-spacing NORMAL · nessun maiuscolo
     padding 12px 24px · transizione su opacità e colore del bordo
   La pillola arrotondata con testo MAIUSCOLO e tracking largo — quella che
   avevo messo per tre giri — è la firma di ogni template: è esattamente il
   motivo per cui il sito sembrava fatto in casa. Qui il bottone è un
   rettangolo con un filo intorno, e si riempie al passaggio senza
   cambiare forma.                                                          */
.bottone{
  display:inline-block; position:relative; isolation:isolate;
  padding:.85rem 1.7rem; border-radius:0;
  border:1px solid rgba(247,243,240,.75);
  background:transparent; color:var(--crema);
  font-family:inherit; font-size:.94rem; font-weight:400;
  letter-spacing:normal; text-transform:none; text-decoration:none;
  cursor:pointer; overflow:hidden;
  transition:color .3s ease, border-color .3s ease;
}
.bottone::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--crema); transform:translateY(100%);
  transition:transform .45s var(--curva);
}
.bottone:hover,.bottone:focus-visible{color:var(--inchiostro);border-color:var(--crema)}
.bottone:hover::before,.bottone:focus-visible::before{transform:translateY(0)}
.bottone:focus-visible{outline:2px solid var(--rame);outline-offset:3px}
@media (hover: none){
  .bottone:active{color:var(--inchiostro)}
  .bottone:active::before{transform:translateY(0)}
}

/* ── domande ─────────────────────────────────────────────────────────────── */
.domande{margin-top:2.5rem;border-top:1px solid rgba(247,243,240,.14)}
.domande details{border-bottom:1px solid rgba(247,243,240,.14)}
.domande summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.4rem 1.35rem 0; position:relative;
  font-size:1.06rem; font-weight:400; transition:color .3s ease;
}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{
  content:''; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1px solid var(--rame); border-bottom:1px solid var(--rame);
  transform:rotate(45deg); transition:transform .4s var(--curva-ui);
}
.domande details[open] summary::after{transform:rotate(-135deg)}
.domande summary:hover{color:var(--rame)}
/* Accordion vero: una aperta alla volta, apertura morbida, mai lo scatto 0-100
   (regola globale 11 del Flow 17). La riga di griglia va da 0fr a 1fr invece
   che l'altezza da 0 a scrollHeight: stesso gesto, ma senza transizione su una
   proprietà di layout — che il detector anti-slop boccia, con ragione. */
.faq-slide{display:grid;grid-template-rows:0fr;transition:grid-template-rows .44s cubic-bezier(.22,.61,.36,1)}
.domande details[open] .faq-slide{grid-template-rows:1fr}
.domande details[open].si-chiude .faq-slide{grid-template-rows:0fr}
.faq-dentro{overflow:hidden;min-height:0}
.domande details p{margin:0 0 1.5rem;color:rgba(247,243,240,.82);max-width:44rem}
@media (prefers-reduced-motion: reduce){
  .faq-slide{transition:none}
}

/* ── piede ───────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   RECENSIONI — il muro si riscrive da solo
   ═════════════════════════════════════════════════════════════════════════ */
/* Il contenuto lo mette sito-recensioni-sync.py dalla scheda Google vera.
   Nessuna schema.org qui: marcare recensioni prese da terzi, o le proprie
   recensioni sul proprio sito, e' contro le linee guida dei rich result. */
#recensioni{text-align:center}
.voto{
  display:flex; align-items:baseline; justify-content:center;
  gap:.7rem; flex-wrap:wrap; margin:0 0 clamp(2.2rem,4vw,3.4rem);
}
.voto__stelle{color:var(--rame);letter-spacing:.18em;font-size:1.05rem}
.voto__numero{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;color:var(--crema)}
.voto__conto{font-size:.86rem;color:rgba(247,243,240,.6)}

/* CAROSELLO da bordo a bordo, E TRASCINABILE.
   Prima era un `transform` dentro un `overflow:hidden`: scorreva bene da solo
   ma non si poteva toccare — un transform non si trascina, quindi al clic
   l'unica cosa che sapeva fare era fermarsi. Ora e' un contenitore che scorre
   DAVVERO, e l'avanzamento automatico sposta `scrollLeft` invece del
   transform: cosi' il dito, il trackpad e il trascinamento col mouse lavorano
   sulla stessa cosa che muove l'automatismo, e non si contendono niente.
   La pista contiene due volte lo stesso gruppo: arrivati a un gruppo si
   sottrae la sua larghezza e il giro riparte senza salto. */
.recensioni{
  position:relative; width:100%;
  overflow-x:auto; overflow-y:hidden;
  text-align:left;
  /* il body e' `pan-y` per bloccare lo scorrimento laterale della PAGINA:
     qui serve l'eccezione, se no il dito non puo' spostare le schede */
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;              /* la barra la nascondiamo, il gesto resta */
  -ms-overflow-style:none;
  cursor:grab;
}
.recensioni::-webkit-scrollbar{display:none}
.recensioni.si-trascina{cursor:grabbing;scroll-behavior:auto}
.recensioni__pista{display:flex;width:max-content}
.recensioni__gruppo{display:flex;gap:clamp(1rem,1.8vw,1.5rem);padding-right:clamp(1rem,1.8vw,1.5rem)}

/* I bordi si spengono con una maschera invece che con due riquadri sovrapposti:
   dentro un contenitore che scorre, due riquadri assoluti scorrerebbero via
   col contenuto. La maschera sta sul contenitore, che non si muove. */
.recensioni{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.recensioni__velo{display:none}

@media (prefers-reduced-motion: reduce){
  .recensioni__gruppo[aria-hidden="true"]{display:none}
}
.recensione{
  flex:0 0 auto; width:clamp(15.5rem, 21vw, 19rem);
  margin:0; padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid rgba(247,243,240,.14);
  background:rgba(247,243,240,.028);
  display:flex; flex-direction:column; gap:.9rem;
}
.recensione__stelle{margin:0;color:var(--rame);letter-spacing:.2em;font-size:.82rem}
.recensione blockquote{
  margin:0; font-size:.95rem; line-height:1.65; color:rgba(247,243,240,.88);
  /* rete di sicurezza: la regola di selezione tiene i testi sotto i 240
     caratteri, ma una recensione fatta di righe corte puo' comunque allungare
     la scheda e sfasare tutta la fila. Qui si taglia a sei righe. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
  overflow:hidden;
}
.recensione figcaption{
  margin-top:auto; font-size:var(--minuta); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(247,243,240,.52);
}
#recensioni .servizio{margin-top:clamp(1.8rem,3vw,2.6rem)}

.piede{content-visibility:auto;contain-intrinsic-size:auto 500px;background:var(--inchiostro);padding-block:clamp(3.5rem,7vw,5.5rem);text-align:center;min-height:100dvh;display:flex;align-items:center}
.piede__marchio{width:78px;height:auto;margin:0 auto 2.6rem;opacity:.9}
.piede__colonne{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  font-size:.92rem;line-height:1.7;color:rgba(247,243,240,.72);text-align:center;
}
.piede__colonne strong{color:var(--crema);font-weight:700}
.piede__colonne a{color:#e6c9a4;text-decoration:none}
.piede__azione{margin:2.8rem 0 0}
.piede__righe{
  margin:2.4rem 0 0;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;
  font-size:var(--minuta);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,243,240,.5);
}
.piede__righe a{color:rgba(247,243,240,.7);text-decoration:none}
.piede__righe a:hover{color:var(--crema)}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO — scroll-driven nativo, zero JS sul thread principale
   ═════════════════════════════════════════════════════════════════════════ */
@keyframes disperdi{
  0%   {transform:translate(0,0) scale(1);opacity:1}
  100% {transform:translate(calc(var(--verso,1) * 46vw), calc(var(--salto,0) * 22vh)) scale(.82);opacity:0}
}
/* Il marchio non sparisce e non ne compare un secondo: è lo STESSO che
   scivola dal varco della striscia fino alla header, e si rimpicciolisce
   mentre sale. transform-origin in alto, così arriva preciso sotto il bordo. */
@keyframes marchio-va{
  0%   {transform:translate(-50%, var(--marchio-y)) scale(1)}
  100% {transform:translate(-50%, 1.05rem) scale(var(--marchio-scala))}
}
@keyframes scritta-esce{
  0%,34% {opacity:1}
  100%   {opacity:0}
}
@keyframes invito-entra{
  from {opacity:0;transform:translate(-50%, 1.8rem);pointer-events:none}
  to   {opacity:1;transform:translate(-50%, 0);pointer-events:auto}
}
/* translateX(-50%) va ripetuto dentro i keyframe: l'animazione sostituisce
   il transform di base, e senza questo il blocco esce dal centro. */
@keyframes svanisce{
  0%,52% {opacity:1;transform:translateX(-50%) translateY(0)}
  100%   {opacity:0;transform:translateX(-50%) translateY(2.5rem)}
}
/* La frase è invisibile mentre il suo passo viaggia, e si accende SOLO quando
   è incollata al centro: chi guarda la vede sempre ferma, mai salire. */
/* Passo alto uno schermo: la frase è incollata al centro dal 25% al 75%
   della corsa, e si accende solo lì dentro. */
@keyframes battuta{
  /* la sfocatura interpolata su testo si ri-rasterizza a ogni fotogramma:
     tolta. Restano opacita' e scivolata, che vivono sul compositore.
     Tutto il ciclo e' anticipato di 12 punti (era 24/32/68/76): la frase
     entra 0,24 schermate prima. Anticipata TUTTA, non solo l'entrata —
     spostare solo l'inizio avrebbe messo due frasi in scena insieme, che e'
     l'opposto di "una alla volta". La permanenza resta identica: 36 punti. */
  0%,12%   {opacity:0;transform:translateY(calc(-50% + 1.1rem))}
  20%,56%  {opacity:1;transform:translateY(-50%)}
  64%,100% {opacity:0;transform:translateY(calc(-50% - 1.1rem))}
}
/* una scala finale per strato: è l'unica variabile del sistema */
@keyframes strato-prima  {to{transform:scale(4)}}
@keyframes strato-seconda{to{transform:scale(4.5)}}
@keyframes strato-terza  {to{transform:scale(5)}}
@keyframes strato-quarta {to{transform:scale(4.25)}}
@keyframes strato-quinta {to{transform:scale(5.5)}}
@keyframes strato-sesta  {to{transform:scale(4.75)}}
@keyframes strato-centro {to{transform:scale(3.2)}}
@keyframes invito-immersione{
  from{opacity:0;transform:translate(-50%,0) scale(.7)}
  to  {opacity:1;transform:translate(-50%,0) scale(1)}
}
@keyframes cola-via{to{transform:translateY(8%);opacity:.3}}
@keyframes scorri-foto{
  from{transform:translateY(-3%)}
  to  {transform:translateY(3%)}
}
/* la sezione coperta arretra: e' cio' che si legge come profondita' */
/* SOLO scorrimento verticale, niente scala. La scala faceva avanzare la foto
   mentre la sezione arretrava: due movimenti opposti nello stesso istante,
   e si legge come un errore. Lo scorrimento non ha un "avanti" e un
   "indietro", quindi non puo' contraddire l'arretramento. */
@keyframes avvicina{
  from{transform:translateY(-4.5%)}
  to  {transform:translateY(4.5%)}
}
@keyframes arretra{
  0%   {transform:scale(1)}
  25%  {transform:scale(.997)}
  50%  {transform:scale(.987)}
  75%  {transform:scale(.958)}
  100% {transform:scale(.92)}
}
/* La perdita di colore parte MOLTO piano e finisce piu' chiara di prima
   (0,72 -> 0,6). Il primo 40% della corsa vale appena 0,12: cosi' anche un
   browser che aggiorna la timeline a scatti — iOS Safari durante l'inerzia —
   cade su valori intermedi invece di saltare da chiaro a grigio. */
@keyframes spegni{
  0%   {opacity:0}
  25%  {opacity:.04}
  50%  {opacity:.16}
  75%  {opacity:.36}
  100% {opacity:.6}
}
@keyframes congeda{
  from{opacity:.65;transform:translateY(0)}
  to  {opacity:0;transform:translateY(.8rem);visibility:hidden}
}
@keyframes emergi{
  from {opacity:0;transform:translateY(2.6rem)}
  to   {opacity:1;transform:translateY(0)}
}

.striscia__carta[data-verso="-3"]{--verso:-1;--salto:-.55}
.striscia__carta[data-verso="-2"]{--verso:-.72;--salto:.4}
.striscia__carta[data-verso="-1"]{--verso:-.44;--salto:-.3}
.striscia__carta[data-verso="1"] {--verso:.44;--salto:.34}
.striscia__carta[data-verso="2"] {--verso:.72;--salto:-.42}
.striscia__carta[data-verso="3"] {--verso:1;--salto:.5}

@supports (animation-timeline: scroll()){
  .striscia__carta{
    animation:disperdi linear both;
    animation-timeline:scroll(root);
    animation-range:0 92vh;
  }
  .striscia__carta[data-verso="-1"],.striscia__carta[data-verso="1"]{animation-range:6vh 100vh}
  .striscia__carta[data-verso="-2"],.striscia__carta[data-verso="2"]{animation-range:3vh 96vh}

    .apertura__nome,.apertura__base{
    animation:svanisce linear both;
    animation-timeline:scroll(root);
    animation-range:0 70vh;
  }
  /* power2.inOut di GSAP è una CUBICA, non una quadratica: l'equivalente
     CSS è cubic-bezier(.645,.045,.355,1). Corsa = una schermata esatta. */
  .marchio{
    animation:marchio-va both cubic-bezier(.645,.045,.355,1);
    animation-timeline:scroll(root);
    animation-range:0 100dvh;
  }
  .apertura__nome{animation-range:0 46dvh}
  .striscia__carta{animation-range:0 86dvh}
  .striscia__carta[data-verso="-1"],.striscia__carta[data-verso="1"]{animation-range:6vh 94dvh}
  .striscia__carta[data-verso="-2"],.striscia__carta[data-verso="2"]{animation-range:3vh 90dvh}
}

@supports (animation-timeline: view()){
  .battuta{
    animation:battuta linear both;
    animation-timeline:--passo;      /* la timeline è del PASSO: la battuta è sticky
                                        e la sua view() resterebbe ferma */
    animation-range:cover 0% cover 100%;
  }
  .collage__invito{
    animation:invito-entra linear both;
    animation-timeline:--collage;
    animation-range:cover 58% cover 74%;
  }
  .strato{animation:linear both;animation-timeline:--immersione;animation-range:contain 0% contain 100%}
  .strato[data-foto="prima"]  {animation-name:strato-prima}
  .strato[data-foto="seconda"]{animation-name:strato-seconda}
  .strato[data-foto="terza"]  {animation-name:strato-terza}
  .strato[data-foto="quarta"] {animation-name:strato-quarta}
  .strato[data-foto="quinta"] {animation-name:strato-quinta}
  .strato[data-foto="sesta"]  {animation-name:strato-sesta}
  .strato--centro{animation-name:strato-centro}
  /* l'invito è l'unico con una curva non lineare, come nel riferimento */
  .immersione__invito{
    animation:invito-immersione both cubic-bezier(.215,.61,.355,1);
    animation-timeline:--immersione;
    animation-range:contain 55% contain 88%;
  }
  /* coda: finita la corsa, la sola foto centrale cola via mentre la sezione esce */
  .strato--centro img{
    animation:cola-via linear both;
    animation-timeline:--immersione;
    animation-range:exit 0% exit 100%;
  }
  .banda__foto{
    animation:scorri-foto linear both;
    animation-timeline:--banda;
    animation-range:cover 0% cover 100%;
  }
  /* La profondita' NON puo' nascere dalla sezione stessa: inchiodata in cima
     non entra mai nella fase di uscita, e l'animazione resta ferma al primo
     fotogramma (misurato: scala 1 e ombra 0 per tutta la corsa).
     La comanda una SONDA alta zero, piazzata nel flusso prima di ogni banda:
     quella scorre davvero. `timeline-scope` la rende leggibile alla sezione.
     Ogni sonda sta davanti alla sezione che COPRE, mai davanti a quella che
     viene coperta: la terrazza la copre l'immersione, non la mappa. */
  main{timeline-scope:--s2,--s3,--su,--r2,--r3}
  .sonda--ultima{view-timeline-name:--su}
  #cucina + .respiro{view-timeline-name:--r2}
  #terrazza + .respiro{view-timeline-name:--r3}
  .sonda--2{view-timeline-name:--s2}   /* davanti alla terrazza: comanda la cucina */
  .sonda--3{view-timeline-name:--s3}   /* davanti all'immersione: comanda la terrazza */

  /* l'avvicinamento vive sul respiro: e' li' che prima non succedeva niente */
  #cucina .banda__foto  {animation:avvicina linear both;animation-timeline:--r2;animation-range:cover 0% cover 72%}
  #terrazza .banda__foto{animation:avvicina linear both;animation-timeline:--r3;animation-range:cover 0% cover 72%}
  #cucina .banda__scatto  {animation:arretra linear both;animation-timeline:--s2;animation-range:entry -50% entry 100%;transform-origin:50% 40%}
  #cucina .banda__ombra   {animation:spegni  linear both;animation-timeline:--s2;animation-range:entry -50% entry 100%}
  #terrazza .banda__scatto{animation:arretra linear both;animation-timeline:--s3;animation-range:entry -50% entry 100%;transform-origin:50% 40%}
  #terrazza .banda__ombra {animation:spegni  linear both;animation-timeline:--s3;animation-range:entry -50% entry 100%}

  /* "Salta il manifesto" se ne va all'arrivo dell'ULTIMA frase: da li' in poi
     non c'e' piu' niente da saltare, e restare acceso costringe a scorrerlo
     via. La sonda sta davanti all'ultimo passo: la sua fase di entrata dura
     esattamente una schermata, e la frase si accende allo 0,24 — il bottone
     e' gia' fuori allo 0,22. */
  .salta-guscio{animation:congeda linear both;animation-timeline:--su;animation-range:entry 6% entry 22%}
  .fascia .occhiello,
  .fascia .titolo,
  .fascia .domande,
  .banda__parola > *,
  .mappa__parola > *{
    animation:emergi linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 46%;
  }
}

/* Fallback per chi non ha le timeline native (Firefox): la classe la mette il JS */
@supports not (animation-timeline: scroll()){
  /* SENZA timeline da scroll (Firefox) le battute non hanno chi le accende e
     si vedevano TUTTE E OTTO insieme, sovrapposte sullo stesso punto: il
     manifesto era illeggibile. `.battuta` non aveva `opacity` di base, quindi
     valeva 1. Qui partono spente e le accende una alla volta l'osservatore
     che gia' sceglie quale clip suonare — nessun codice nuovo, solo la classe. */
  .battuta{opacity:0;transition:opacity .8s var(--curva)}
  .battuta.in-scena{opacity:1}

  .striscia__carta{transition:transform 1.1s var(--curva), opacity 1.1s var(--curva)}
  .marchio,.apertura__nome{transition:transform 1.1s var(--curva), opacity 1.1s var(--curva)}
  .apertura__nome,.apertura__base{transition:opacity .7s var(--curva)}
  .strato{transform:scale(1)}
  html.oltre-apertura .striscia__carta{
    transform:translate(calc(var(--verso,1) * 46vw), calc(var(--salto,0) * 22vh)) scale(.82);
    opacity:0;
  }
  html.oltre-apertura .marchio{transform:translate(-50%, 1.05rem) scale(var(--marchio-scala))}
  html.oltre-apertura .apertura__nome{opacity:0}
  html.oltre-apertura .apertura__occhiello,
  html.oltre-apertura .apertura__base{opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */
/* Il riferimento sotto i 1024px spegne la corsa del marchio. Da noi resta
   accesa: Fausto la vuole anche da telefono (12 agosto). Le misure sono in
   svh, così la barra del browser che si ritrae non sposta il traguardo. */
@media (max-width:900px){
          .piede__colonne{grid-template-columns:1fr;gap:1.8rem}
}

@media (max-width:768px){
  .fascia{padding-block:clamp(4.2rem,13vw,6rem)}
  .dentro{width:calc(100vw - 2.4rem)}
  .dentro--stretto{width:calc(100vw - 2.4rem)}
  .nastro{width:calc(100vw - 2.4rem)}

  /* su mobile il verticale è già il formato dello schermo: riempie */
  .palco__vetro{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  /* L'altezza sta sul PASSO, mai sulla frase: una frase alta quanto lo schermo
     si incolla in cima al proprio riquadro e finisce fuori centro. È il difetto
     che si vedeva solo da telefono (12 agosto). */

  .battuta{font-size:clamp(.75rem,3.57vw,1.1rem)}

  .tessera{width:min(66vw,20rem)}
  .tessera--centro{width:min(84vw,26rem)}
  .collage{height:260vh}

  .apertura__marchio img{height:calc(var(--carta-h) * .92)}
  .voce{padding:1.8rem 1.5rem}
}

@media (max-width:520px){
  :root{--carta-w:clamp(66px, 20vw, 96px)}
  .striscia{gap:6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÀ — obbligatorio, senza questo il gate non passa
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *{animation-timeline:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .striscia__carta,.apertura__nome,.apertura__base{opacity:1}
  .battuta{opacity:1;transform:translateY(-50%);filter:none}
  .marchio{transform:translate(-50%, 1.05rem) scale(var(--marchio-scala))}
  .immersione__invito{opacity:1;transform:translate(-50%,0) scale(1)}
  .strato--centro{transform:scale(1.6)}
  .marchio{opacity:.95}
  .palco__clip.attiva{opacity:1}
}

::selection{background:var(--rame);color:var(--inchiostro)}

@media print{
  .grana,.marchio,.striscia,.palco,.collage{display:none}
  body{background:#fff;color:#000}
  .fascia,.chiusa{padding-block:1.5rem;background:#fff}
  .titolo,.testo,.occhiello{color:#000}
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDE — il sito parla per foto e video, il testo è rado
   ═════════════════════════════════════════════════════════════════════════ */
/* Le sezioni si COPRONO, non si susseguono: ognuna resta inchiodata in cima
   mentre la successiva le scivola sopra. Cosi' non esiste piu' un momento in
   cui si vede il bordo fra due foto — c'e' sempre un'immagine a schermo pieno,
   e il passaggio e' un movimento invece che un taglio.
   Mentre viene coperta, la foto sotto si allontana (scala 1 → 0,92) e si
   spegne: e' quello che da' la profondita'. */
/* Il bordo d'attacco non deve essere una riga. Un `box-shadow` sfocato verso
   l'alto lo risolverebbe, ma e' un blur da ~88px ridipinto a ogni fotogramma
   su un elemento a schermo pieno: e' lo scatto, non la fluidita'.
   Qui la sfumatura sta DENTRO la sezione che copre, in cima: e' un livello
   piatto, composto dalla GPU, costo di rasterizzazione zero. Funziona perche'
   la sezione sotto in quel momento e' gia' spenta al 72%: i due lati del
   taglio sono entrambi quasi neri, e la riga non si vede piu'. */
.stacco-cima{
  position:absolute; top:0; left:0; right:0; height:16vh;
  background:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,0));
  pointer-events:none; z-index:4;
}
/* Il bordo SOTTO le FAQ: la foto nasce dal verde, non dal nero — passare dal
   nero faceva un buco scuro fra due colori. 32px, quasi impercettibile. */
.mappa .stacco-cima{
  height:32px;
  background:linear-gradient(to bottom, var(--bosco), rgba(59,78,59,0));
}
.sonda{height:0;width:100%;pointer-events:none}
/* Il respiro e' scorrimento in piu' DOPO una banda, durante il quale la banda
   resta inchiodata e nessuno la copre: senza, ogni sezione aveva esattamente
   una schermata di vita e il testo passava prima che si potesse leggere. */
.respiro{height:45dvh;width:100%;pointer-events:none;view-timeline-axis:block}
/* Il respiro serviva a dare tempo di leggere, ma era tempo MORTO: misurato,
   in 650px di scorrimento la foto si spostava di 4,4px e la sezione dopo
   restava tutta sotto il bordo. Lo scroll non aveva effetto, poi in una
   schermata succedeva tutto. Ora il respiro e' meta' e porta un avvicinamento
   della foto: ogni pixel di scorrimento produce movimento visibile. */
.banda{
  position:sticky; top:0; height:100dvh;
  background:var(--notte); overflow:clip;
  view-timeline-name:--banda; view-timeline-axis:block;
}
/* Le bande sono alte quanto lo schermo e si toccano: prima erano 78vh e 92vh,
   e fra una foto e l'altra si apriva il fondo nero — lo stacco che pesava.
   Dentro, la foto è più grande della cornice e scorre piano: così il passaggio
   da una sezione all'altra è un movimento continuo, mai un taglio. */
.banda__scatto{
  position:relative; display:block; width:100%; height:100%; min-height:26rem;
  padding:0; border:0; margin:0; overflow:hidden; cursor:default;
  background:var(--notte); color:var(--crema); font:inherit; text-align:left;
}

button.banda__scatto{cursor:pointer}
.banda__foto,.banda__video{
  position:absolute; inset:-6% 0; width:100%; height:112%;
  object-fit:cover; will-change:transform;
}
.banda__video{opacity:0;transition:opacity 1.4s var(--curva)}
button.banda__scatto:hover .banda__video,
button.banda__scatto:focus-visible .banda__video{opacity:1}
/* la velatura deve reggere anche sotto una foto chiarissima: il piatto della
   bistecca è quasi bianco, e l'occhiello in rame ci spariva sopra */
/* Il velo segue il testo. Prima scuriva il FONDO al 94% e lasciava il centro
   al 20%, perche' li' stava il testo: spostandolo al centro, "Apri la carta"
   e' finito nel punto piu' chiaro della foto e non si leggeva piu'.
   Ora il punto scuro e' al centro, e i bordi restano scuri quanto basta a
   raccordarsi con la sezione che copre. */
.banda__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(20,20,20,.66) 0%, rgba(20,20,20,.32) 20%, rgba(20,20,20,.46) 50%, rgba(20,20,20,.34) 80%, rgba(20,20,20,.66) 100%),
    radial-gradient(64% 38% at 50% 50%, rgba(20,20,20,.34), transparent 72%);
}
.banda__ombra{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--notte); opacity:0;
}
/* Senza `timeline-scope` la timeline con nome non si risolve e un'animazione
   con fill:both salta al FOTOGRAMMA FINALE: la sezione resterebbe grigia per
   sempre. Meglio nessun effetto che un difetto permanente. */
@supports not (timeline-scope: --x){
  .banda__ombra{display:none}
  .banda__scatto{transform:none !important}
}

/* ── SUL TOCCO l'effetto NON e' legato allo scroll ───────────────────────
   Su desktop la corsa legata allo scroll e' morbida: misurata, passo massimo
   0,064 di opacita' fra un campione e l'altro, e Fausto conferma che funziona.
   Su iOS lo stesso identico CSS si vede a scatti, perche' durante l'inerzia
   del dito Safari aggiorna le timeline da scroll a intervalli grossi: non e'
   la curva a essere sbagliata, e' il campionamento. Allungare il range non
   serve — l'ho provato, ed e' rimasto a scatti.
   Qui, sul touch, la stessa transizione la fa una `transition` con durata
   propria: e' morbida per costruzione, perche' non dipende piu' da quanti
   fotogrammi il browser decide di darle mentre il dito lascia andare.       */
@media (hover: none){
  .banda__ombra,
  .banda__scatto{
    animation:none !important;
  }
  .banda__ombra{
    opacity:0;
    transition:opacity 1s cubic-bezier(.33,0,.2,1);
  }
  .banda__scatto{
    transform:scale(1);
    transition:transform 1s cubic-bezier(.33,0,.2,1);
  }
  .banda.coperta .banda__ombra{opacity:.6}
  .banda.coperta .banda__scatto{transform:scale(.92)}
}
/* AL CENTRO, non in fondo. In fondo era illeggibile per costruzione: il
   bordo basso e' esattamente il primo pezzo che la sezione successiva copre,
   quindi il testo spariva prima di essere letto — e quello della cucina porta
   il bottone del menu, che e' la cosa piu' importante della pagina.
   Sulla CUCINA a stare esattamente a meta' pagina e' il BOTTONE, non il
   blocco: il blocco centrato lasciava il bottone sopra il centro, perche'
   sotto di lui c'erano altre due righe a fare peso. Qui il bottone e'
   ancorato al 50% e i testi partono da sotto. */
.banda__parola{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:0 1.4rem; text-align:center;
  /* il testo si porta la sua protezione: sopra una foto viva il velo da solo
     o e' troppo poco per leggere, o e' troppo e ammazza il piatto */
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
/* NIENTE `transform` per centrare, qui: su `.banda__parola > *` gira
   l'animazione `emergi` con fill both, e un'animazione SOVRASCRIVE il
   transform dichiarato — misurato: matrix identita', bottone fuori centro di
   mezza altezza. Si centra col flex, che l'animazione non tocca.
   Terrazza (senza bottone): il blocco resta in flusso e il flex lo centra. */
.banda__testi{display:flex;flex-direction:column;align-items:center;gap:.5rem}
/* Cucina: i testi ESCONO dal flusso, cosi' il flex centra il solo bottone —
   che e' quello che deve stare esattamente a meta' pagina. */
#cucina .banda__invito{margin:0}
#cucina .banda__testi{
  position:absolute; left:0; right:0; top:calc(50% + 2.6rem);
  padding:0 1.4rem;
}
.banda__titolo{
  font-size:clamp(1.9rem,4.6vw,3.4rem); font-weight:400; line-height:1.1;
  letter-spacing:-.005em; text-wrap:balance; max-width:20ch;
}
/* Sta SOPRA la riga dei piatti e pesa come un bottone vero: prima era un
   filetto di testo rame sottolineato, sul fondo del blocco, e su una foto a
   schermo pieno spariva. Stesso rettangolo del resto del sito. */
.banda__invito{
  margin:0 0 .9rem; order:-1;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; isolation:isolate; overflow:hidden;
  padding:.85rem 1.7rem; border-radius:0;
  border:1px solid rgba(247,243,240,.85);
  background:rgba(20,20,20,.32); color:var(--crema);
  font-size:.94rem; letter-spacing:normal; text-transform:none;
  transition:color .3s ease, border-color .3s ease;
}
.banda__invito::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--crema); transform:translateY(100%);
  transition:transform .45s var(--curva);
}
button.banda__scatto:hover .banda__invito,
button.banda__scatto:focus-visible .banda__invito{color:var(--inchiostro);border-color:var(--crema)}
button.banda__scatto:hover .banda__invito::before,
button.banda__scatto:focus-visible .banda__invito::before{transform:translateY(0)}
@media (hover: none){
  button.banda__scatto:active .banda__invito{color:var(--inchiostro)}
  button.banda__scatto:active .banda__invito::before{transform:translateY(0)}
}
button.banda__scatto:focus-visible{outline:2px solid var(--rame);outline-offset:-6px}

/* ── salta il manifesto ──────────────────────────────────────────────────── */
/* misure del riferimento: 13px, tracking .12em, opacità .65 → 1 */
/* La guida sta DENTRO le battute e appiccicata in fondo allo schermo: prima
   il bottone viveva nel palco, e i passi del manifesto gli passavano sopra
   mangiandosi il tocco (col mouse passava, col dito no). */
.salta-guscio{
  position:sticky; top:calc(100dvh - 4.6rem); z-index:8;
  height:0; display:flex; justify-content:center; pointer-events:none;
}
.salta-guscio > *{pointer-events:auto}
.salta-manifesto{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--crema); opacity:.65; text-decoration:none;
  padding:.6rem 1rem;
  transition:opacity .35s ease, color .35s ease;
}
.salta-manifesto:hover,.salta-manifesto:focus-visible{opacity:1}
.salta-manifesto:focus-visible{text-decoration:underline;text-underline-offset:.25em}
.salta-manifesto__freccia{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;border:1px solid rgba(247,243,240,.28)}

/* ── mappa: facciata, Google entra solo al clic ──────────────────────────── */
.mappa{position:sticky;top:0;height:100dvh;background:var(--notte);overflow:clip;view-timeline-name:--banda;view-timeline-axis:block}
/* Sul piede NESSUNA sfumatura: la foto finisce e comincia il piede, netto. */
.mappa__facciata{position:relative;height:100%;min-height:24rem;overflow:hidden}
.mappa__facciata img{width:100%;height:100%;object-fit:cover}
.mappa__facciata iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mappa__velo{position:absolute;inset:0;background:linear-gradient(to right, rgba(20,20,20,.9), rgba(20,20,20,.35))}
.mappa__parola{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:.6rem;
  padding:0 clamp(1.4rem,8vw,7rem); max-width:42rem;
}
.mappa__indirizzo{margin:0 0 .8rem;font-size:clamp(1.45rem,2.6vw,2rem);font-weight:400;line-height:1.3;text-wrap:balance}
.mappa__parola .servizio{margin-top:.9rem;text-transform:none;letter-spacing:0;font-size:.82rem}

/* ── il menù a popup ─────────────────────────────────────────────────────── */
.menu{
  border:0; padding:0; background:transparent; color:var(--crema);
  max-width:min(94vw,46rem); width:100%; max-height:88vh;
}
.menu:focus{outline:none}
.menu::backdrop{background:rgba(10,10,10,.82);backdrop-filter:blur(10px)}
.menu__foglio{
  position:relative; background:var(--bosco); border-radius:20px;
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.6rem,5vw,3.4rem) clamp(2.2rem,4vw,3rem);
  max-height:88vh; overflow-y:auto; text-align:center;
  border:1px solid rgba(247,243,240,.14);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
}
.menu__chiudi{
  position:absolute; top:1rem; right:1rem; width:2.4rem; height:2.4rem;
  display:grid; place-items:center; border-radius:999px; cursor:pointer;
  background:rgba(247,243,240,.08); border:1px solid rgba(247,243,240,.16);
  color:var(--crema); transition:background-color .3s ease;
}
.menu__chiudi:hover{background:rgba(247,243,240,.18)}
.menu__marchio{width:56px;height:auto;margin:0 auto 1.4rem;opacity:.9}
.menu__titolo{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;margin:0 0 1.8rem;line-height:1.15}
.menu__corpo{text-align:left;margin-bottom:2rem}
.menu__gruppo{margin:0 0 2rem}
.menu__gruppo h3{
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:#e6c9a4;font-weight:700;margin:0 0 .9rem;
}
.menu__piatto{display:flex;justify-content:space-between;gap:1.4rem;padding:.55rem 0;border-bottom:1px solid rgba(247,243,240,.1)}
.menu__piatto span:first-child{font-weight:400}
.menu__piatto span:last-child{color:#e6c9a4;white-space:nowrap}
.menu .bottone{margin-inline:auto;display:block;width:max-content}

@media (max-width:768px){
  .mappa__parola{align-items:center;text-align:center;max-width:none}
  .mappa__velo{background:linear-gradient(to top, rgba(20,20,20,.92), rgba(20,20,20,.4))}
}

/* ── dettaglio del menù ──────────────────────────────────────────────────── */
.menu__lista{list-style:none;margin:0;padding:0}
.menu__nome{display:block;font-weight:400}
.menu__nota{display:block;font-size:.92rem;color:rgba(247,243,240,.66);line-height:1.5}
.menu__allergeni{display:block;font-size:.68rem;letter-spacing:.1em;color:rgba(247,243,240,.4);margin-top:.15rem}
.menu__piatto{align-items:flex-start;padding:.75rem 0}
.menu__coda{margin:1.6rem 0 .6rem;font-size:.86rem;color:rgba(247,243,240,.68);text-align:center}
.menu__allergeni-nota{margin:0;font-size:.76rem;line-height:1.6;color:rgba(247,243,240,.45);text-align:center}

.banda__riga{
  margin-top:.5rem; max-width:34ch;
  font-size:clamp(.95rem,1.3vw,1.1rem); color:rgba(247,243,240,.82); line-height:1.6;
}
.immersione__titolo{
  margin:0; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:400; line-height:1.15;
  text-shadow:0 2px 30px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.7);
}
.immersione__invito .occhiello{margin:0 0 .5rem}

/* ══════════════════════════════════════════════════════════════════════════
   BANNER COOKIE — le sue regole vivevano nel CSS vecchio: senza, il banner
   finisce in fondo al documento e non lo vede nessuno. Garante 2024: la X
   equivale al rifiuto, e "Rifiuta" pesa quanto "Accetta".
   ═════════════════════════════════════════════════════════════════════════ */
[data-cookie-banner]{
  position:fixed; left:50%; bottom:1rem; transform:translateX(-50%);
  z-index:1000; width:min(94vw, 40rem);
  background:rgba(23,29,23,.96);
  border:1px solid rgba(247,243,240,.16);
  color:var(--crema); padding:1.6rem 1.5rem 1.4rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  font-size:.92rem; line-height:1.6;
}
[data-cookie-banner] p{color:rgba(247,243,240,.82)}
[data-cookie-banner] a{color:#e6c9a4}
[data-cookie-banner] .close-x{
  position:absolute; top:.6rem; right:.7rem; width:2rem; height:2rem;
  background:transparent; border:0; color:rgba(247,243,240,.6);
  font-size:1.3rem; line-height:1; cursor:pointer;
}
[data-cookie-banner] .close-x:hover{color:var(--crema)}
[data-cookie-banner] button[data-action]{
  flex:1 1 auto; min-width:8rem;
  padding:.7rem 1.1rem; border-radius:0; cursor:pointer;
  font-family:inherit; font-size:.88rem; letter-spacing:normal;
  background:transparent; color:var(--crema);
  border:1px solid rgba(247,243,240,.6);
  transition:background-color .3s ease, color .3s ease;
}
[data-cookie-banner] button[data-action]:hover{background:var(--crema);color:var(--inchiostro)}
[data-cookie-banner] .btn-accept{border-color:var(--crema)}
[data-cookie-banner] button:focus-visible{outline:2px solid var(--rame);outline-offset:3px}
@media (max-width:520px){
  [data-cookie-banner]{bottom:0;width:100%;border-left:0;border-right:0;border-bottom:0}
  [data-cookie-banner] button[data-action]{flex:1 1 100%}
}

.piede__firma{
  margin:1.6rem 0 0; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,243,240,.6);
}
.piede__firma a{color:rgba(247,243,240,.72);text-decoration:none;border-bottom:1px solid rgba(247,243,240,.28)}
.piede__firma a:hover{color:var(--crema);border-color:var(--crema)}