/* ============================================================
   FONT — serviti dal nostro server, non da Google.
   Prima la pagina si fermava ad aspettare fonts.googleapis.com e
   fonts.gstatic.com: due server esterni, due DNS, due handshake TLS
   prima di poter disegnare una sola lettera. Ora arrivano da qui.
   "font-display: swap" fa comparire subito il testo con il carattere
   di sistema, poi lo sostituisce: niente pagina bianca in attesa.
   ============================================================ */
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-var-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Lobster Two';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/lobster-two-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/playfair-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/playfair-700-italic.woff2') format('woff2');
}

/* ============================================================
   VINILES ⚡ Cibo & Musica — San Benedetto del Tronto
   Palette presa dal locale: rosso insegna, crema carta,
   menta parete, azzurro bancone, giallo fulmine.
   ============================================================ */

:root {
  --rosso:        #d33a2c;
  --rosso-scuro:  #a82a1f;
  --crema:        #f7efdc;   /* resta l'inchiostro chiaro sul fondo scuro */
  --crema-scura:  #ece0c5;

  /* Il verde del locale (Pantone 567 C). Da qui in giù il sito è scuro:
     è un club, non una trattoria. Tre gradazioni per dare profondità senza
     usare altri colori — fondo, superfici sollevate, e i pozzi più cupi. */
  --verdone:      #173f35;
  --verdone-alto: #1e5145;   /* schede e pannelli, un gradino sopra il fondo */
  --verdone-cupo: #102c26;   /* campi, incavi, barre */

  --menta:        #c8ded4;
  --azzurro:      #8cc0dd;
  --giallo:       #ffe14d;
  --nero:         #14100e;
  --grigio:       #a6bcb3;   /* testo smorzato SUL VERDE (era scuro: quasi
                                tutti i suoi usi ora stanno su fondo scuro).
                                Schiarito fino a 4,51:1 sul verde dei pannelli:
                                a #9db3aa stava a 4,08 e non passava la soglia
                                di leggibilità per il testo normale. */
  --grigio-scuro: #6b625b;   /* per i pochi elementi rimasti chiari */

  --font-display: 'Anton', 'Arial Black', sans-serif;
  --font-script:  'Lobster Two', cursive;
  --font-label:   'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1180px;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(20, 16, 14, .18);
}

/* ─── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* la barra in alto resta appiccicata: senza questo, saltando a una
     sezione il titolo finisce sotto di lei */
  scroll-padding-top: 74px;
  /* il lampo blu di iOS a ogni tocco non c'entra niente con questo sito */
  -webkit-tap-highlight-color: rgba(211, 58, 44, .15);
}

/* Un elemento con l'attributo `hidden` deve sparire, senza eccezioni.
   Il `display` che assegniamo noi a una classe batte quello del browser,
   e ci siamo già cascati due volte: la foto del drink restava come
   rettangolo vuoto sul lato B, e nel modulo di prenotazione il campo
   "A che ora" compariva vuoto prima ancora di scegliere la fascia.
   Una riga qui vale più di ricordarselo ogni volta. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--crema);
  background: var(--verdone);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.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;
}

/* ─── Tipografia ───────────────────────────────────────────── */
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.05; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rosso);
  margin-bottom: .8rem;
}
.titolo {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.script { font-family: var(--font-script); font-style: italic; font-weight: 700; text-transform: none; }

/* ─── Stagione ─────────────────────────────────────────────────
   Il sito racconta due locali diversi: d'estate il giardino con la
   consolle all'aperto, d'inverno la sala rossa. L'interruttore sta
   nel pannello (/admin/configurazione.html) e arriva da /api/locale.
   Finché non risponde vale l'estate, così non si vede niente di
   sbagliato mentre la pagina carica. ------------------------------ */
/* Nascondo solo quello che NON va mostrato: così ogni elemento si tiene il
   suo display naturale (una griglia resta grid, uno span resta inline).
   Se per qualsiasi motivo l'attributo mancasse si vedrebbe tutto — brutto
   ma leggibile, meglio del contrario. */
body[data-stagione="estate"]  .solo-inverno { display: none; }
body[data-stagione="inverno"] .solo-estate  { display: none; }

.nota-stagione {
  margin-top: 14px; padding-left: 14px;
  border-left: 3px solid var(--rosso);
  font-size: .95rem; color: var(--grigio);
}
.sez--nero .nota-stagione { color: #cdc4b8; }

/* ─── Nastro a scacchi ─────────────────────────────────────── */
.scacchi {
  height: 26px;
  background-image:
    linear-gradient(45deg, var(--rosso) 25%, transparent 25%, transparent 75%, var(--rosso) 75%),
    linear-gradient(45deg, var(--rosso) 25%, transparent 25%, transparent 75%, var(--rosso) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  background-color: var(--verdone);
}

/* ─── Navbar ───────────────────────────────────────────────── */
/* La barra resta chiara di proposito: il logo è inchiostro scuro su
   trasparente (luminosità 0,33) e su fondo scuro sparirebbe. È la stessa
   "carta" su cui poggia il logo grande nell'hero.
   Ma quando il sito è passato al fondo scuro, `body` ha preso colore crema
   e QUESTA barra non dichiarava un colore suo: si prendeva il crema per
   eredità, cioè crema su crema. Da qui in poi il colore se lo dichiara. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 239, 220, .93);
  color: var(--nero);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--nero);
}
.nav-in {
  max-width: var(--max); margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 20px;
}
/* `flex: none` o il logo fa la fine del vaso fra due mobili: dentro un
   contenitore flex che non ci sta, si lascia comprimere fino a sparire.
   Le voci a destra possono stringersi, il nome del locale no. */
.nav-logo { flex: none; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 0; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--rosso); transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border: 2px solid var(--nero); border-radius: 999px;
  background: var(--rosso); color: #fff;
  font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--nero);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Contorno di focus per tutto il sito: giallo sul verde e sul nero.
   Sui tasti gialli un contorno giallo sparirebbe, quindi lì è doppio:
   anello nero attaccato al tasto e giallo fuori. */
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.btn--giallo:focus-visible,
.barra-btn--chiama:focus-visible,
.fascia-chip[aria-pressed="true"]:focus-visible,
.slot-orari button[aria-pressed="true"]:focus-visible,
.drink-lato button[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--nero); outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--giallo);
}
/* Sulle superfici chiare (barra crema in alto, pillola dei contatti,
   riquadro menta di conferma) il giallo sul crema non si vede (~1:1):
   lì il contorno è nero. */
.nav :focus-visible,
.barra-contatto :focus-visible,
.esito.ok :focus-visible { outline-color: var(--nero); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--nero); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nero); }
.btn--ghost { background: var(--crema); color: var(--nero); }
.btn--giallo { background: var(--giallo); color: var(--nero); }
.btn--sm { padding: 9px 18px; font-size: .7rem; box-shadow: 3px 3px 0 var(--nero); }

.nav-toggle { display: none; background: none; border: 0; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--nero); margin: 4px 0; }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Sul telefono `vh` comprende la barra degli indirizzi: quando scompare
     scorrendo, l'hero cambia altezza e la pagina sussulta. `svh` misura lo
     schermo con la barra visibile e resta fermo. Il vh sotto è la riserva
     per i browser vecchi. */
  min-height: 88vh; min-height: 88svh;
  display: grid; place-items: center; text-align: center;
  overflow: hidden; background: var(--nero);
}
.hero-media { position: absolute; inset: 0; }
/* le tre foto in dissolvenza */
.hero-media .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero-media .slide.attiva { opacity: 1; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,14,.45) 0%, rgba(20,16,14,.15) 40%, rgba(20,16,14,.75) 100%);
}
.hero-in { position: relative; z-index: 2; padding: 80px 22px; color: #fff; }
/* Il logo resta quello vero — fulmine giallo, scritta nera — su una
   "targa" color crema, così si legge anche sopra la foto scura. */
.hero-logo {
  width: min(400px, 80vw);
  margin: 0 auto 22px;
  background: var(--crema);
  /* Dentro c'è solo il logo, nessuna scritta. Il colore si dichiara lo
     stesso: è carta chiara, e se un giorno ci si scrive sopra deve
     nascere nero, non ereditare il crema del fondo scuro. */
  color: var(--nero);
  border: 3px solid var(--nero);
  border-radius: 18px;
  padding: 26px 30px 22px;
  box-shadow: 8px 8px 0 var(--rosso), 0 24px 60px rgba(0, 0, 0, .45);
}
.hero-logo img { width: 100%; height: auto; }
.hero-claim {
  font-family: var(--font-script); font-size: clamp(1.6rem, 5vw, 2.8rem);
  color: var(--giallo); margin-bottom: .1em; text-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.hero-sub {
  max-width: 540px; margin: 0 auto 26px; font-size: 1.05rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; z-index: 2;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
  .locale-grid img { transition: none; }
  .locale-grid figure:hover img { transform: none; }
}

/* ─── Sezioni ──────────────────────────────────────────────── */
.sez { padding: 84px 0; }
.sez--menta { background: var(--verdone-alto); }
.sez--nero  { background: var(--nero); color: var(--crema); }
.sez--crema { background: var(--verdone); }
.sez-head { max-width: 640px; margin-bottom: 40px; }
.sez-head p { color: var(--grigio); font-size: 1.03rem; }
.sez--nero .sez-head p { color: #cdc4b8; }
.sez--nero .eyebrow { color: var(--giallo); }
/* `.sez-head p` qui sopra batte `.eyebrow` (è più specifico) e la
   rendeva grigia come il testo normale. Il rosso invece non si può
   usare: sul verde sta a 2,45:1. Il giallo sta a 7:1 sul verde alto,
   9:1 sul verde e 14,5:1 sul nero. */
.sez-head p.eyebrow { color: var(--giallo); }

/* ─── Il locale: griglia foto ──────────────────────────────── */
.locale-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 215px;
}
.locale-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--nero); position: relative; }
.locale-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.locale-grid figure:hover img { transform: scale(1.06); }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
/* Nomi delle foto: pastiglia gialla, quindi inchiostro NERO. Anche questa
   se lo prendeva per eredità dal body e da quando il fondo è scuro
   arrivava crema: crema su giallo, illeggibile. */
.locale-grid .didascalia {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--giallo); color: var(--nero); border: 2px solid var(--nero);
  padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ─── Menu della settimana ─────────────────────────────────── */
.menu-box {
  background: var(--verdone-alto); border: 3px solid var(--crema); border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--rosso); overflow: hidden;
}
.menu-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 26px; border-bottom: 3px dashed var(--crema); background: var(--verdone-cupo);
}
.menu-badge {
  background: var(--rosso); color: #fff; border: 2px solid var(--nero);
  padding: 5px 14px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* Via .menu-week e .menu-updated: il menu non porta più date addosso.
   Resta la nota, l'unica riga che il titolare scrive di suo pugno. */
.menu-note { width: 100%; color: var(--grigio); font-size: .95rem; }
.menu-pages { display: grid; gap: 18px; padding: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Da computer una sola pagina di menu si allargava a tutta la colonna —
   1078px — e con una foto 1094x1438 veniva alta 1417px: quasi due schermate
   per un'immagine sola, da scorrere a vuoto. Qui si limita quanto può
   crescere. Resta comunque cliccabile per aprirla a grandezza piena, che è
   il posto giusto per leggerla tutta. Sotto i 900px non cambia niente: sul
   telefono, dove la colonna è già stretta, andava bene com'era. */
@media (min-width: 900px) {
  .menu-pages {
    grid-template-columns: repeat(auto-fit, minmax(260px, 560px));
    justify-content: center;
  }
}
.menu-pages img, .menu-pages embed {
  /* `height: auto` è quello che trasforma width/height in proporzione:
     il browser tiene il rapporto dichiarato e riserva l'altezza giusta
     anche se la larghezza è 100%. Senza, l'immagine nascerebbe alta
     quanto dice l'attributo e la pagina salterebbe lo stesso. */
  width: 100%; height: auto;
  border: 2px solid var(--crema); border-radius: 8px; background: var(--verdone-cupo);
}
.menu-pages embed { height: 560px; }
.menu-vuoto { padding: 50px 26px; text-align: center; color: var(--grigio); }
.menu-vuoto strong { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--crema); text-transform: uppercase; margin-bottom: 8px; }

/* ─── La sala rossa / dopocena ─────────────────────────────── */
.sala-rossa { position: relative; overflow: hidden; }
.sala-layout {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}
.sala-foto {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'grande grande' 'palle giradischi';
}
.sala-foto figure { margin: 0; border: 2px solid var(--crema); border-radius: var(--radius); overflow: hidden; }
.sala-foto figure:nth-child(1) { grid-area: grande; }
.sala-foto figure:nth-child(2) { grid-area: palle; }
.sala-foto figure:nth-child(3) { grid-area: giradischi; }
.sala-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sala-foto figure:nth-child(1) img { aspect-ratio: 16/10; }
.sala-foto figure:nth-child(2) img,
.sala-foto figure:nth-child(3) img { aspect-ratio: 1/1; }

/* ─── Eventi / locandine ───────────────────────────────────── */
.eventi-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.evento {
  border: 2px solid var(--crema); border-radius: var(--radius); overflow: hidden;
  background: #1e1815; display: block; position: relative;
  transition: transform .2s ease;
}
.evento:hover { transform: translateY(-5px); }
.evento-img { aspect-ratio: 4/5; background: #241d19; }
.evento-img img { width: 100%; height: 100%; object-fit: cover; }
.evento-cap { padding: 12px 14px; font-size: .88rem; color: var(--crema); }
.evento-vedi { color: var(--giallo); font-size: .8rem; letter-spacing: .04em; }
/* locandina senza didascalia: la riga sotto è corta, non serve tutto lo spazio */
.evento-cap--sola-data { display: flex; align-items: baseline; gap: 10px; }
.evento-cap--sola-data .evento-data { margin: 0; }
.eventi-vuoto .ig-link { color: var(--giallo); text-decoration: underline; }
.evento-data { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--giallo); }
.evento-play {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  background: rgba(0,0,0,.6); border-radius: 50%; display: grid; place-items: center; color: #fff;
}
.eventi-vuoto { color: #cdc4b8; padding: 40px 0; text-align: center; }

/* ============================================================
   IL VINILE — Hit Parade interattiva
   ============================================================ */
.hitparade { background: var(--nero); color: var(--crema); padding: 90px 0 100px; overflow: hidden; }
.hp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 46px; align-items: center; }

/* Copertina + disco */
.giradischi { position: relative; width: min(580px, 92vw); margin: 0 auto; aspect-ratio: 1.7 / 1; }

.copertina {
  position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1/1;
  border-radius: 4px; overflow: hidden; z-index: 3;
  box-shadow: 0 22px 44px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
}
.copertina img { width: 100%; height: 100%; object-fit: cover; }
.copertina { cursor: pointer; }
.copertina:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }

/* ─── "Tocca per sfilare il disco" ───────────────────────────────
   Una copertina ferma non dice di essere toccabile. Questa targhetta
   lo dice, e sparisce appena il disco esce: da lì in poi il gesto è
   un altro (girare), e lo spiega la freccia curva sul disco. */
.copertina-invito {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; padding: 8px 14px;
  background: var(--giallo); color: var(--nero);
  border: 2px solid var(--nero); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--nero);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  animation: invitoRespira 2.2s ease-in-out infinite;
}
.copertina-invito svg { width: 14px; height: 14px; flex: none; }
/* uscito il disco, la targhetta non serve più */
.hitparade.estratto .copertina-invito { opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none; }
.copertina-invito { transition: opacity .35s ease, transform .35s ease; }

@keyframes invitoRespira {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .copertina-invito { animation: none; }
}

.disco-wrap {
  position: absolute; top: 0; height: 100%; aspect-ratio: 1/1;
  left: 8%; z-index: 2;
  transition: transform 1s cubic-bezier(.22,.85,.25,1);
  transform: translateX(0);
}
.hitparade.estratto .disco-wrap { transform: translateX(52%); }

.disco {
  width: 100%; height: 100%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #131313 0 2px, #1c1c1c 2px 3px, #141414 3px 5px),
    radial-gradient(circle at 32% 28%, #3a3a3a 0%, #121212 55%);
  box-shadow: 0 20px 44px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.9);
  position: relative;
  cursor: grab;
  touch-action: none;
  display: grid; place-items: center;
}
.disco.dragging { cursor: grabbing; }
/* riflesso della luce */
.disco::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.10) 46%, transparent 58%);
}

/* L'etichetta è la grafica vera del 45 giri: nomi, prezzi e iconcine sono
   già stampati sull'immagine, compreso il foro nero al centro. Qui serve
   solo il cerchio che gira. */
.etichetta {
  width: 62%; height: 62%; border-radius: 50%;
  position: relative; display: grid; place-items: center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .18), 0 2px 10px rgba(0, 0, 0, .35);
}
.etichetta-titoli { position: absolute; inset: 0; }
.etichetta-titoli picture { display: block; width: 100%; height: 100%; }
.etichetta-titoli img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none;
}
/* il foro sta già nella grafica */
.perno { display: none; }

/* L'alone sotto la puntina: prende il posto del titolo che prima si
   coloriva di rosso. Non gira col disco — resta lì dove legge la puntina. */
/* Niente alone colorato sul disco: sporcava la grafica vera dell'etichetta.
   Il punto di lettura lo indica già la puntina gialla sopra al disco. */

/* Puntina */
.puntina {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  z-index: 5; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--giallo);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.hitparade:not(.estratto) .puntina { opacity: 0; }
.puntina { transition: opacity .4s ease .5s; }

/* ─── "Giralo" ──────────────────────────────────────────────────
   Una freccia curva sul bordo del disco. Compare solo quando il disco
   è uscito dalla copertina e sparisce al primo tocco: un invito che
   resta lì dopo che l'hai capito diventa rumore.
   pointer-events: none è obbligatorio — altrimenti si prende il dito
   destinato al disco e il trascinamento non parte. */
.gira-invito {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  fill: none; stroke: var(--giallo); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .75));
  opacity: 0; transition: opacity .5s ease;
}
.hitparade.estratto .gira-invito { opacity: .92; animation: giraInvito 2.8s ease-in-out .8s infinite; }
/* al primo trascinamento (o freccia, o tasto) l'invito ha fatto il suo */
.hitparade.ha-girato .gira-invito { opacity: 0 !important; animation: none; }

/* La freccia accenna il gesto e torna indietro. L'opacità non scende mai a
   zero: un elemento che sparisce e riappare a ogni giro sembra un difetto,
   non un invito. */
.gira-invito { transform-origin: 50% 50%; }
@keyframes giraInvito {
  0%, 100% { transform: rotate(-6deg); opacity: .55; }
  45%      { transform: rotate(9deg);  opacity: 1; }
  70%      { transform: rotate(9deg);  opacity: .9; }
}

/* Chi ha chiesto meno animazioni la vede ferma, non sparita: l'invito
   serve comunque. */
@media (prefers-reduced-motion: reduce) {
  .hitparade.estratto .gira-invito { animation: none; opacity: .92; }
}

/* Pannello drink */
.drink-panel {
  background: #1d1714; border: 2px solid var(--crema); border-radius: var(--radius);
  padding: 26px 26px 22px; position: relative; min-height: 330px;
}
.drink-lato {
  display: inline-flex; gap: 6px; margin-bottom: 18px;
  background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px;
}
.drink-lato button {
  border: 0; background: transparent; color: #cdc4b8; padding: 7px 15px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.drink-lato button[aria-pressed="true"] { background: var(--giallo); color: var(--nero); }

.drink-nome { font-family: var(--font-label); font-size: 2rem; color: var(--crema); line-height: 1.1; margin-bottom: 4px; }
.drink-prezzo { color: var(--giallo); font-family: var(--font-display); font-size: 1.5rem; }
.drink-ing { list-style: none; padding: 0; margin: 18px 0 0; }
.drink-ing li {
  padding: 7px 0; border-bottom: 1px dashed rgba(247,239,220,.22);
  font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; color: #ded5c8;
}
/* La foto sta nella colonna di destra, accanto agli ingredienti.
   Prima era ancorata in basso a destra con position:absolute e, su
   computer, copriva la riga "Trascina il disco…" e il tasto della lista:
   il pannello non sapeva che lei c'era. In griglia lo sa, e le frecce,
   la frase e il tasto passano sotto a tutta larghezza. */
.drink-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
.drink-panel > * { grid-column: 1 / -1; }
.drink-panel > .drink-lato,
.drink-panel > .lista-toggle { justify-self: start; }
.drink-panel > .drink-ing { grid-column: 1; grid-row: 4; }
/* in griglia i margini non si fondono più fra loro: il prezzo teneva il
   suo 1em sopra e sotto e si staccava troppo dagli ingredienti */
.drink-panel > .drink-prezzo { margin: 20px 0 0; }
.drink-foto {
  grid-column: 2; grid-row: 4; align-self: start;
  width: 132px; height: 198px; margin: 18px 0 0 18px;
  border-radius: 8px; overflow: hidden; border: 2px solid var(--crema);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.drink-foto picture { display: block; width: 100%; height: 100%; }
.drink-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Il lato B (analcolici) non ha foto: niente riquadro e niente spazio
   riservato. Serve il selettore con [hidden] perché più avanti, nel blocco
   per telefono, .drink-foto dichiara display:block — e una regola nostra
   batte sempre il display:none che il browser dà agli elementi hidden.
   Senza questo, sul telefono restava un rettangolo vuoto col bordo. */
.drink-foto[hidden] { display: none; }

.drink-nav { display: flex; gap: 10px; margin-top: 22px; }
.drink-nav button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--crema);
  background: transparent; color: var(--crema); font-size: 1.1rem; line-height: 1;
}
.drink-nav button:hover { background: var(--giallo); color: var(--nero); border-color: var(--giallo); }
.hp-hint { font-size: .8rem; color: #a99f93; margin-top: 14px; letter-spacing: .06em; }

/* Classici */
.classici {
  margin-top: 56px; border-top: 1px solid rgba(247,239,220,.2); padding-top: 34px;
  display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 300px; align-items: center;
}
.classici-testo p { max-width: 640px; }
.classici-foto { margin: 0; border: 2px solid var(--crema); border-radius: var(--radius); overflow: hidden; }
.classici-foto img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; }
.classici h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; color: var(--giallo); }
.classici-list {
  display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 16px 0 0; list-style: none;
}
.classici-list li {
  border: 1px solid rgba(247,239,220,.35); border-radius: 999px; padding: 6px 14px;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #ded5c8;
}

/* ─── Fascia prenota ───────────────────────────────────────── */
.fascia-prenota {
  background: var(--rosso); color: #fff; text-align: center; padding: 70px 0;
  position: relative; overflow: hidden; isolation: isolate;
}
/* la foto dei tavoli sotto, tinta di rosso: resta leggibile ma non è più un fondo piatto */
.fascia-sfondo { position: absolute; inset: 0; z-index: -2; }
.fascia-sfondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fascia-prenota::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(211,58,44,.90), rgba(168,42,31,.94));
}
.fascia-prenota .titolo { color: #fff; }
.fascia-prenota p { max-width: 520px; margin: 0 auto 26px; opacity: .95; }

/* ─── Prenotazione (form) ──────────────────────────────────── */
.form-card {
  background: var(--verdone-alto); border: 3px solid var(--crema); border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--nero); padding: 30px;
}
.form-griglia { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--full { grid-column: 1 / -1; }
.campo label { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 1rem; padding: 12px 14px;
  border: 2px solid var(--crema); border-radius: 8px; background: var(--verdone-cupo); color: var(--crema);
}
/* Dice al browser che il campo è scuro: così l'icona del calendario e la
   freccia del menu a tendina si disegnano chiare. Prima erano nere su
   verde cupo, cioè non si vedevano. */
.campo input, .campo select { color-scheme: dark; }

/* ─── Errori sotto al campo ────────────────────────────────────
   Il messaggio sta subito sotto a quello che va corretto, non in fondo
   al passo: su telefono il riquadro in fondo finiva sotto la piega.
   Il rosso dell'insegna sul verde sta a 2,45:1 — per il testo si usa
   un rosa chiaro (6,2:1 sul verde alto), per il bordo il rosso
   schiarito (4:1, sopra la soglia di 3:1 per i contorni). */
.campo [aria-invalid="true"] { border-color: #ff8a7a; }
.fasce-scelta[data-errore] .fascia-chip:not([hidden]),
.slot-orari[data-errore] button { border-color: #ff8a7a; }
.campo .errore-campo { color: #ffc9c1; font-size: .82rem; font-weight: 600; }
.campo .slot-orari + .errore-campo { margin-top: 4px; }

/* La trappola per i robot (vedi prenota.html): fuori dallo schermo, non
   display:none — certi programmi saltano i campi nascosti così. */
.campo-trappola {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
/* La casella facoltativa degli inviti alle serate (vedi prenota.html).
   L'etichetta qui è una frase, non un titoletto: niente maiuscolo né
   spaziatura larga. Tutta la riga è il bersaglio da toccare, non solo il
   quadratino; il giallo dell'insegna segna la spunta. */
.campo-consenso .consenso {
  display: flex; gap: 12px; align-items: flex-start;
  min-height: 44px; padding: 8px 0;
  font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.45;
  cursor: pointer;
}
.campo-consenso .consenso input {
  flex: none; width: 24px; height: 24px; margin: 0; padding: 0;
  accent-color: var(--giallo);
}
.campo-consenso small a { text-decoration: underline; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 3px solid var(--giallo); outline-offset: 1px;
}
.campo small { color: var(--grigio); font-size: .78rem; }
.campo textarea { resize: vertical; min-height: 90px; }
.slot-orari { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-fascia {
  width: 100%; margin: 10px 0 2px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: flex; gap: 10px; align-items: baseline;
}
.slot-fascia span { font-weight: 400; letter-spacing: .04em; color: var(--grigio); }
/* Gli orari erano NERI su verde scuro: rapporto 1,41 su 4,5 richiesto,
   cioè invisibili — e sono i tasti con cui si sceglie a che ora si viene.
   Il motivo: un <button> non eredita il colore del testo dalla pagina, se
   lo prende dal browser, che gli dà nero. Finché il sito era chiaro non si
   notava; col fondo scuro sono spariti. Qui il colore è dichiarato. */
.slot-orari button {
  border: 2px solid var(--crema); background: var(--verdone-cupo); color: var(--crema); border-radius: 999px;
  padding: 8px 15px; font-size: .86rem; font-weight: 600;
}
/* Scelto: stesso giallo della fascia scelta. Prima era nero su verde
   cupo (1,27:1): l'orario selezionato si vedeva MENO degli altri. */
.slot-orari button[aria-pressed="true"] {
  background: var(--giallo); color: var(--nero); border-color: var(--nero);
  box-shadow: 3px 3px 0 var(--nero);
}
.esito { margin-top: 20px; padding: 16px 18px; border-radius: 10px; border: 2px solid var(--nero); display: none; color: var(--nero); }
.esito.ok  { display: block; background: var(--menta);  color: var(--nero); }
.esito.ko  { display: block; background: #ffd9d4; color: var(--nero); }

/* Dopo la conferma: segnarsi la data sul calendario del telefono. */
.calendario {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(20, 16, 14, .28);
}
.calendario span { font-size: .84rem; color: var(--nero); width: 100%; }  /* sul menta: --grigio era ~1.4:1 */
@media (max-width: 480px) { .calendario .btn { flex: 1 1 100%; text-align: center; justify-content: center; } }

/* ─── Prenotazione in tre passi ─────────────────────────────
   Un modulo lungo, sul telefono, si legge come un muro: si vedono
   otto campi e si chiude la pagina. Spezzarlo in tre schermate fa
   vedere ogni volta una domanda sola, e il pallino in alto dice
   quanto manca. */
.stepper { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 26px; }
.step {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grigio); opacity: .55; transition: opacity .25s ease, color .25s ease;
}
.step.attivo { opacity: 1; color: var(--crema); }
.step.fatto  { opacity: 1; color: var(--crema); }
.step-num {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid currentColor; border-radius: 50%;
  background: var(--verdone-cupo); font-size: .8rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.step.attivo .step-num { background: var(--rosso); border-color: var(--nero); color: #fff; transform: scale(1.08); }
.step.fatto  .step-num { background: var(--nero);  border-color: var(--nero); color: var(--giallo); }
/* crema al 50%: 3,2:1 sul verde. Il nero al 25% non si vedeva. */
.step-line { flex: 1; max-width: 44px; height: 2px; background: rgba(247, 239, 220, .5); color: var(--nero); }
.step-nome { display: none; }

.form-step { display: none; }
.form-step.attivo { display: block; animation: passoEntra .28s ease both; }
@keyframes passoEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-step.attivo { animation: none; } }

.step-titolo {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.1; margin: 0 0 4px;
}
.step-sottotitolo { color: var(--grigio); font-size: .92rem; margin: 0 0 22px; }

.step-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.step-nav .btn { flex: 1 1 auto; }
.step-nav .btn--ghost { flex: 0 0 auto; }

/* Le fasce: chip larghe, con sotto la riga che spiega cosa vuol dire.
   "Dopocena" da solo non dice niente a chi non è mai venuto. */
.fasce-scelta { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.fascia-chip {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; background: var(--verdone-cupo); color: var(--crema);
  /* bordo crema smorzato (4,9:1): il nero sul verde cupo stava a 1,27:1 */
  border: 2px solid rgba(247, 239, 220, .55); border-radius: 12px; cursor: pointer;
  font-family: inherit; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fascia-chip strong { font-size: .98rem; font-weight: 700; }
.fascia-chip span   { font-size: .78rem; color: var(--grigio); line-height: 1.35; }
.fascia-chip:hover  { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--nero); }
/* Scelta: il fondo diventa giallo, quindi l'inchiostro deve tornare nero.
   Senza questo `color` restava il crema della riga sopra e la fascia
   scelta — proprio quella — era l'unica che non si leggeva. */
.fascia-chip[aria-pressed="true"] { background: var(--giallo); color: var(--nero); border-color: var(--nero); box-shadow: 4px 4px 0 var(--nero); }
.fascia-chip strong svg { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: 4px; }
.fascia-chip[aria-pressed="true"] span { color: #6a5c00; }
.fascia-chip[hidden] { display: none; }

/* Riepilogo: l'ultimo controllo prima di mandare. */
.riepilogo { border: 2px solid var(--crema); border-radius: 12px; background: var(--verdone-cupo); overflow: hidden; }
.riepilogo dl { margin: 0; }
.riepilogo div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px dashed rgba(247, 239, 220, .4);   /* 3,3:1 */
}
.riepilogo div:last-child { border-bottom: 0; }
.riepilogo dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.riepilogo dd { margin: 0; font-size: 1rem; font-weight: 600; text-align: right; }
.riepilogo .riep-note dd { font-weight: 400; font-size: .9rem; color: var(--grigio); }

@media (max-width: 620px) {
  .stepper { gap: 5px; }
  .step-line { max-width: 26px; }
  .fasce-scelta { grid-template-columns: 1fr; }
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn { width: 100%; }
}

/* ─── Banda foto a tutta larghezza ─────────────────────────── */
.banda-foto { margin: 0; height: 42vh; min-height: 260px; max-height: 460px; overflow: hidden; }
.banda-foto picture { display: block; width: 100%; height: 100%; }
.banda-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }

/* ─── "Aperto ora" ─────────────────────────────────────────── */
.stato-apertura {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 auto 18px; padding: 7px 16px;
  background: rgba(20, 16, 14, .55);
  border: 1px solid rgba(247, 239, 220, .35);
  border-radius: 999px;
  font-size: .84rem; font-weight: 500; color: var(--crema);
  backdrop-filter: blur(6px);
}
.stato-apertura::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: #6bd48a; box-shadow: 0 0 0 3px rgba(107, 212, 138, .25);
}
.stato-apertura[data-aperto="no"]::before {
  background: #d97b6b; box-shadow: 0 0 0 3px rgba(217, 123, 107, .22);
}

/* ─── Chiusura straordinaria (locandina) ───────────────────── */
.avviso-chiusura { padding: 64px 0; }
.avviso-chiusura-in {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.avviso-locandina {
  display: block; border: 2px solid var(--crema); border-radius: 18px;
  overflow: hidden; box-shadow: 6px 6px 0 var(--giallo);
}
.avviso-locandina img { display: block; width: 100%; height: auto; }
.avviso-testo .titolo { margin-bottom: 16px; }
.avviso-testo p:not(.eyebrow) { color: #cdc4b8; font-size: 1.05rem; max-width: 46ch; margin-bottom: 26px; }
@media (max-width: 700px) {
  .avviso-chiusura { padding: 48px 0; }
  .avviso-chiusura-in { grid-template-columns: 1fr; gap: 30px; }
  .avviso-locandina { width: min(100%, 320px); margin: 0 auto; }
  .avviso-testo { text-align: center; }
  .avviso-testo p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
}
.footer li.chiuso.chiuso-straordinario { color: var(--giallo); }

/* Pagina Prenota: lo stesso avviso, in piccolo, sopra al modulo */
.avviso-chiusura-prenota {
  display: flex; gap: 16px; align-items: center;
  margin: 0 0 28px; padding: 14px 18px;
  background: var(--giallo); color: var(--nero);
  border: 2px solid var(--nero); border-radius: 16px; box-shadow: 4px 4px 0 var(--nero);
}
.avviso-chiusura-prenota a { flex: 0 0 64px; border-radius: 8px; overflow: hidden; border: 2px solid var(--nero); }
.avviso-chiusura-prenota img { display: block; width: 100%; height: auto; }
.avviso-chiusura-prenota p { margin: 0; font-size: .98rem; line-height: 1.45; }
.avviso-chiusura-prenota strong { display: block; font-size: 1.05rem; }

/* ─── Lista drink in chiaro ────────────────────────────────── */
.lista-toggle {
  margin-top: 14px; padding: 12px 18px; min-height: 44px;
  background: transparent; color: var(--giallo);
  border: 1px solid rgba(255, 225, 77, .5); border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lista-toggle:hover { background: rgba(255, 225, 77, .12); }
.lista-drink { margin-top: 18px; border-top: 1px solid rgba(247,239,220,.2); padding-top: 16px; }
/* Mentre si legge tutta la lista, la foto del singolo drink non serve. */
.drink-panel.lista-aperta .drink-foto { display: none; }
.lista-drink h4 {
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--giallo); margin: 16px 0 8px;
}
.lista-drink h4:first-child { margin-top: 0; }
.lista-drink ul { list-style: none; padding: 0; margin: 0; }
.lista-drink li { padding: 7px 0; border-bottom: 1px dashed rgba(247,239,220,.16); }
.lista-drink .ld-nome { font-family: var(--font-label); font-size: 1.02rem; color: var(--crema); }
.lista-drink .ld-ing  { display: block; font-size: .82rem; color: #a99f93; letter-spacing: .03em; }

/* ─── Barra di contatto (solo telefono) ────────────────────── */
.barra-contatto { display: none; }
@media (max-width: 720px) {
  /* Una pillola che galleggia sopra la pagina, staccata dai bordi.
     Prima era una fascia attaccata al fondo dello schermo: tagliava il
     sito in due e sembrava la barra di un'altra app. Così invece resta
     un oggetto del sito — bordo nero e ombra piena come tutto il resto —
     e si vede che la pagina continua sotto.
     Il bordo e l'ombra stanno sul contenitore: i tasti dentro sono
     pieni e lisci, altrimenti si sommavano due cornici nere. */
  .barra-contatto {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
    position: fixed; left: 10px; right: 10px; z-index: 80;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    border: 2px solid var(--nero); border-radius: 999px;
    background: rgba(247, 239, 220, .93);
    color: var(--nero);   /* pillola chiara: inchiostro scuro, per lo stesso motivo */
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 0 rgba(20, 16, 14, .14), 0 16px 34px rgba(20, 16, 14, .3);
    transition: transform .28s ease, opacity .28s ease;
  }
  /* Mentre si scorre verso il basso si sta leggendo: la pillola scende
     e lascia lo schermo libero. Torna appena si risale. */
  .barra-contatto.barra-nascosta {
    transform: translateY(calc(100% + 18px)); opacity: 0; pointer-events: none;
  }
  .barra-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 0 10px; min-width: 0;
    border: none; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    transition: transform .12s ease, filter .12s ease;
  }
  .barra-btn:active { transform: scale(.95); filter: brightness(.94); }
  .barra-btn svg { width: 17px; height: 17px; flex: none; }
  .barra-btn--chiama  { background: var(--giallo); color: var(--nero); }
  .barra-btn--wa      { background: var(--menta);  color: var(--nero); }
  .barra-btn--prenota { background: var(--rosso);  color: #fff; }

  /* spazio in fondo, altrimenti la pillola copre l'ultima riga del footer */
  body { padding-bottom: 78px; }
  /* la pillola è alta ~62px e sta a 10px dal fondo: alzato oltre la
     pillola, "↓ Scorri" finiva sopra "Gira il vinile" e ne rubava i tocchi.
     Sul telefono si scorre col dito: la scritta non serve, si nasconde. */
  .hero-scroll { display: none; }

  /* ─── La foto del cocktail sul telefono ───────────────────────
     Prima stava sotto la lista, larga 200 e alta 300: da sola si
     mangiava un terzo di schermo e spingeva il nome del drink sotto
     la piega. Girare il disco e non vedere il risultato è il difetto
     peggiore che poteva avere questa sezione.
     Ora è più piccola e affiancata: il testo le scorre intorno, così
     non occupa una riga tutta sua. */
  /* Niente più float: con la foto affiancata al solo elenco degli
     ingredienti (stessa griglia del computer) sotto non resta il buco
     di 170px che lasciava quando la lista era più corta della foto. */
  .drink-foto { width: 104px; height: 156px; margin: 16px 0 0 14px; border-radius: 10px; }

  /* Il disco era 330px: bello, ma spingeva il nome del drink e la foto
     sotto la piega. Girarlo senza vedere il risultato toglie il senso a
     tutta la sezione. A 270 il disco, il nome e gli ingredienti stanno
     insieme in una schermata (671px contro i 687 utili, tolte la barra
     in alto e la pillola in basso). */
  .giradischi { width: min(300px, 74vw); }

  /* Il pannello respirava come su un monitor: qui ogni pixel verticale
     è uno in meno per il disco. */
  .drink-panel { padding: 20px 18px 18px; min-height: 0; }

  /* La spiegazione lunga sopra il disco ripete quello che c'è già
     scritto sotto al pannello ("Trascina il disco, oppure usa le
     frecce"): due volte la stessa frase, e 70px di schermo buttati. */
  .hitparade .sez-head p { display: none; }
}

/* ─── Contatti / footer ────────────────────────────────────── */
.footer { background: var(--nero); color: var(--crema); padding: 60px 0 30px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1.2fr 1fr 1fr; }
.footer h3, .footer h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--giallo); margin-bottom: 12px; }
.footer p, .footer li { color: #cdc4b8; font-size: .94rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 3px 0; display: flex; justify-content: space-between; gap: 14px; max-width: 280px; }
.footer li.chiuso { color: #8a8078; }
.footer-logo {
  width: 190px; margin-bottom: 16px; display: block;
  /* Il logo è inchiostro nero: su verde stava a 1,9:1. Va sulla carta
     crema, come nella barra in alto e nell'hero. */
  background: var(--crema); border: 2px solid var(--nero); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--rosso);
  color: var(--nero);   /* fondo chiaro: inchiostro dichiarato, non ereditato dal crema del footer */
  padding: 14px 16px 12px;
}
.footer .legenda li { color: #cdc4b8; max-width: 280px; }
.footer .legenda svg { width: 1em; height: 1em; vertical-align: -.12em; margin-right: 4px; }
.slot-fascia svg { width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: 2px; align-self: center; }
.footer .legenda { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(247,239,220,.18); }
.footer-legale { margin-top: 10px; font-size: .8rem; color: #8a8078; }
.footer-bottom {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(247,239,220,.18);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: #8a8078;
}
.social { display: flex; gap: 12px; margin-top: 14px; }
.social a {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--crema);
  display: grid; place-items: center; transition: all .2s ease;
}
.social a:hover { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }

/* ─── <picture> ────────────────────────────────────────────────
   Il wrapper <picture> e' inline per default: dove l'immagine deve
   riempire il contenitore gli passiamo le stesse misure, cosi' le
   regole su <img> continuano a funzionare come prima.
   ------------------------------------------------------------- */
.hero-media picture,
.locale-grid picture,
.copertina picture,
.drink-foto picture { display: block; width: 100%; height: 100%; }
.nav-logo picture,
.hero-logo picture { display: block; }

/* ─── Reveal on scroll ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 940px) {
  .sala-layout { grid-template-columns: 1fr; gap: 30px; }
  .classici { grid-template-columns: 1fr; }
  .classici-foto { max-width: 320px; }
  .hp-layout { grid-template-columns: 1fr; gap: 34px; }
  .giradischi { aspect-ratio: 1 / 1; width: min(420px, 88vw); }
  /* Su schermo stretto il disco non può uscire di lato: esce in verticale.
     Deve uscire verso l'ALTO, non verso il basso.
     Il punto di lettura è la puntina, che sta in cima al disco: se il disco
     scende, la cima resta dietro alla copertina e dell'etichetta si vede
     solo il fondo — cioè il nome opposto a quello scritto nel pannello.
     Uscendo in su si scopre la cima: il nome sotto la puntina è quello
     giusto e si legge dritto, invece che capovolto.
     (È anche il gesto vero: un 45 giri lo sfili verso l'alto.) */
  .copertina { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); height: 74%; }
  .disco-wrap { left: 50%; top: auto; bottom: 0; height: 74%; transform: translateX(-50%); }
  .hitparade.estratto .disco-wrap { transform: translate(-50%, -34%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ─── La barra si richiude prima del resto ─────────────────────
   Misurata: la fila intera — logo + sette voci + PRENOTA — chiede 827px.
   Il menu a panino però scattava solo sotto i 720: fra 721 e 826 le voci
   restavano in fila senza starci, andavano a capo e schiacciavano il logo
   a 1,7px di larghezza, cioè lo facevano sparire. Si vedeva su un portatile
   piccolo, su un tablet in orizzontale o con la finestra non a tutto schermo.
   Non era un difetto di sempre: è nato ieri, aggiungendo la voce EVENTI.
   Qui la soglia è 860, con un margine sopra i 827 misurati. */
@media (max-width: 860px) {
  /* Le voci escono da sotto la barra su un pannello VERDE, non sulla carta
     chiara: qui il colore torna crema, altrimenti si eredita il nero della
     barra e si legge nero su verde. */
  .nav-links {
    position: fixed; inset: 62px 0 auto 0; background: var(--verdone);
    color: var(--crema);
    flex-direction: column; gap: 0; padding: 10px 22px 22px;
    border-bottom: 2px solid var(--nero); display: none;
  }
  .nav-links.aperto { display: flex; }
  /* riga di separazione chiara: su verde quella scura non si vedeva */
  .nav-links a { padding: 12px 0; border-bottom: 1px solid rgba(247,239,220,.18); width: 100%; }
  .nav-links .btn { margin-top: 12px; border-bottom: 2px solid var(--nero); }
  /* il pannello del menu è verde: qui il contorno giallo torna a vedersi */
  .nav-links :focus-visible { outline-color: var(--giallo); }
  .nav-links .btn--giallo:focus-visible { outline-color: var(--nero); }
  /* 44x44 è la misura sotto la quale un polpastrello comincia a sbagliare.
     L'hamburger era 36x37: è il tasto che apre tutto il menu. */
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; }
}

@media (max-width: 720px) {
  .sez { padding: 60px 0; }
  /* gli orari si toccano uno per uno, spesso in fretta e al buio */
  .slot-orari button { min-height: 44px; padding: 8px 16px; }
  /* i recapiti nel footer erano righe di testo alte 17-20px */
  .footer a { display: inline-block; padding: 5px 0; }
  .footer-bottom a { padding: 8px 0; }
  .locale-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .locale-grid .g-wide { grid-column: span 2; }
  .form-griglia { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .menu-pages embed { height: 420px; }
}

/* ─── Eventi privati ───────────────────────────────────────── */
/* Sta su .sez--nero, quindi il fondo è già scuro: qui servono solo le
   schede. Griglia che si adatta da sola — quattro voci in fila sul
   computer, una sotto l'altra sul telefono, senza media query. */
.eventi-lista {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.eventi-lista li {
  background: var(--verdone-alto);
  border: 2px solid var(--crema);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 6px 6px 0 var(--rosso);
  display: flex; flex-direction: column; gap: 8px;
}
.eventi-lista strong {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.08rem; letter-spacing: .02em; color: var(--giallo);
}
.eventi-lista span { font-size: .93rem; color: var(--crema); opacity: .88; line-height: 1.5; }

.eventi-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Sotto i 520px i due tasti vanno a tutta larghezza: mezzo tasto per uno
   si tocca male, ed è il caso più frequente visto che il sito si usa
   quasi solo dal telefono. */
@media (max-width: 520px) {
  .eventi-azioni .btn { flex: 1 1 100%; text-align: center; }
}