/* ==========================================================================
   BINARIO 5 — lounge bar & bistrot, Alessandria
   Tema scuro unico. Palette derivata dal materiale reale del cliente:
   il nero e il salvia del logo, il bronzo della carrozza, l'oro dei divanetti.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKEN */
:root {
  /* colore */
  --c-fondo:        #12100e;
  --c-fondo-alt:    #17140f;
  --c-superficie:   #1d1a15;
  --c-superficie-2: #24201a;
  --c-bordo:        #322c23;
  --c-bordo-forte:  #4a4133;

  --c-testo:        #f2eee6;
  --c-testo-soft:   #b3aa9a;
  --c-testo-tenue:  #7d7466;

  --c-brand:        #aba998;   /* salvia del logo */
  --c-brand-scuro:  #231f20;   /* nero del logo */
  --c-accento:      #c9a227;   /* oro dei divanetti */
  --c-accento-alto: #e3bf4b;
  --c-caldo:        #d98b3f;   /* ambra del tramonto */

  /* tipografia */
  --f-display: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --f-testo:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-nota:    var(--f-display);

  --fs-xs:   clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-s:    clamp(.86rem, .82rem + .2vw, .95rem);
  --fs-m:    clamp(1rem, .96rem + .25vw, 1.12rem);
  --fs-l:    clamp(1.18rem, 1.05rem + .6vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --fs-3xl:  clamp(2.4rem, 1.5rem + 4.6vw, 5.2rem);

  --lh-stretto: 1.05;
  --lh-normale: 1.35;
  --lh-largo:   1.7;

  /* spazio */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem; --s-12: 8rem;

  --r-s: 4px; --r-m: 10px; --r-l: 18px; --r-pill: 999px;

  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.32);
  --sh-alta: 0 20px 60px rgba(0,0,0,.5);

  --t-veloce: .18s; --t-normale: .32s; --t-lenta: .6s;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-morbido: cubic-bezier(.4,0,.2,1);

  --z-nav: 100; --z-flottante: 90; --z-modale: 200;

  --w-contenuto: 1180px;
  --w-stretto: 760px;
  --w-largo: 1440px;
}

/* ---------------------------------------------------------------- BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;   /* via il lampo grigio di Android */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* toglie l'attesa di 300ms che iOS mette prima di considerare un tocco un clic */
a, button { touch-action: manipulation; }

/* ---------------------------------------------------------------- RISPOSTA AL DITO
   Ogni cosa premibile si abbassa di un soffio e risale. È il riscontro che sul
   telefono sostituisce l'hover: senza, il sito sembra un foglio stampato.
   Solo transform, mai sotto .972 o sui bordi arrotondati compare la scalettatura. */
.btn:active, .card:active, .canale:active, .galleria button:active,
.qa__d:active, .audio-btn:active, .wa:active, .nav__logo:active {
  transform: scale(.972);
  transition-duration: .09s;
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-testo);
  font-family: var(--f-testo);
  font-size: var(--fs-m);
  line-height: var(--lh-largo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: var(--lh-stretto);
  letter-spacing: .01em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-l); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
a { color: inherit; }
img, video, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--c-accento); color: #17140f; }

:focus-visible {
  outline: 2px solid var(--c-accento-alto);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modale);
  background: var(--c-accento); color: #17140f; padding: var(--s-3) var(--s-5);
  font-weight: 600; border-radius: 0 0 var(--r-m) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- LAYOUT */
.wrap { width: min(100% - 2.5rem, var(--w-contenuto)); margin-inline: auto; }
.wrap-stretto { width: min(100% - 2.5rem, var(--w-stretto)); margin-inline: auto; }
.wrap-largo { width: min(100% - 2rem, var(--w-largo)); margin-inline: auto; }

section { padding-block: var(--s-11); }
@media (max-width: 640px) { section { padding-block: var(--s-9); } }

.sezione-alt { background: var(--c-fondo-alt); }

/* saltando a un'ancora, il titolo non deve finire nascosto sotto la barra fissa */
section[id], [id^="qa"] { scroll-margin-top: 92px; }

/* TARGA DI BANCHINA — l'etichetta sopra ogni titolo non è più un trattino con del
   testo: è la targhetta smaltata delle stazioni, cornice sottile e due bulloncini.
   È il pezzo che fa leggere tutto il resto come un sistema e non come una serie
   di trucchi: si ripete identico su ogni sezione di ogni pagina. */
.occhiello {
  font-family: var(--f-nota);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-5);
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: .42em .9em;
  border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r-s);
  background: rgba(171,169,152,.05);
  position: relative;
  line-height: 1;
}
/* i due bulloncini */
.occhiello::before, .occhiello::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 3px;
  border-radius: 50%; background: var(--c-brand); opacity: .5; transform: translateY(-50%);
}
.occhiello::before { left: 5px; }
.occhiello::after  { right: 5px; }
.occhiello { padding-inline: 1.15em; }
.testa.centro .occhiello { align-self: center; }
@media (max-width: 400px) { .occhiello { font-size: .7rem; letter-spacing: .16em; } }

.testa { max-width: 46ch; margin-bottom: var(--s-8); }
.testa.centro { margin-inline: auto; text-align: center; }
.testa.centro .occhiello { justify-content: center; }

.sotto { color: var(--c-testo-soft); font-size: var(--fs-l); line-height: 1.45; }

/* ---------------------------------------------------------------- PULSANTI */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-display); font-size: var(--fs-s); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  padding: .95em 1.9em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-veloce) var(--ease-out),
              background-color var(--t-normale) var(--ease-morbido),
              border-color var(--t-normale) var(--ease-morbido),
              color var(--t-normale) var(--ease-morbido);
}

.btn-oro { background: var(--c-accento); color: #17140f; font-weight: 600; }

.btn-linea { border-color: var(--c-bordo-forte); color: var(--c-testo); }

.btn-gruppo { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------------------------------------------------------------- NAV */
/* Altezza FISSA, non più padding che si stringe. Prima la barra animava `padding`
   e il logo animava `height`: sono misure, e ricalcolavano il layout dell'intera
   pagina a ogni fotogramma di scorrimento. In più l'altezza che cambiava faceva
   ballare la rotaia, che è agganciata al bordo di sotto. Ora si muove solo il
   colore (che è disegno, non misura) e il logo si stringe con uno scale. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  height: 76px; padding-block: 0;
  transition: background-color var(--t-normale) var(--ease-morbido),
              box-shadow var(--t-normale) var(--ease-morbido);
}
.nav.compatta {
  background: rgba(18,16,14,.94);
  box-shadow: 0 1px 0 var(--c-bordo);
}
.nav__riga { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 100%; }
.nav__logo img { height: 42px; width: auto; transform-origin: left center; transition: transform var(--t-normale) var(--ease-morbido); }
.nav.compatta .nav__logo img { transform: scale(.81); }   /* .81 x 42 = 34px, come prima */
@media (max-width: 640px) { .nav { height: 66px; } }

.nav__menu { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav__menu a {
  text-decoration: none; font-family: var(--f-display); font-size: var(--fs-s);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-testo-soft);
  position: relative; padding-block: 4px;
  transition: color var(--t-veloce) var(--ease-morbido);
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--c-accento); transition: width var(--t-normale) var(--ease-out);
}
.nav__menu a[aria-current="page"] { color: var(--c-testo); }
.nav__menu a[aria-current="page"]::after { width: 100%; }

.nav__cta { margin-left: var(--s-2); }

.burger {
  display: none; background: none; border: 0; cursor: pointer; padding: var(--s-2);
  width: 44px; height: 44px;
}
.burger span {
  display: block; height: 2px; width: 26px; background: var(--c-testo); margin: 5px auto;
  transition: transform var(--t-normale) var(--ease-out), opacity var(--t-veloce);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Il pannello mobile non esiste finché non serve: su desktop non deve comparire mai. */
.menu-mobile { display: none; }
body.blocco { overflow: hidden; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav__menu, .nav__cta { display: none; }
  .menu-mobile {
    position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
    background: var(--c-fondo); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--s-5);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-normale) var(--ease-morbido),
                transform var(--t-normale) var(--ease-out), visibility var(--t-normale);
  }
  .menu-mobile.aperto { opacity: 1; visibility: visible; transform: none; }
  .menu-mobile a {
    font-family: var(--f-display); font-size: var(--fs-xl); text-transform: uppercase;
    letter-spacing: .08em; text-decoration: none; color: var(--c-testo);
  }
  .menu-mobile .btn { margin-top: var(--s-4); }
}

/* ---------------------------------------------------------------- HERO */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12,10,9,.92) 0%, rgba(12,10,9,.72) 45%, rgba(12,10,9,.42) 100%),
    linear-gradient(to top, rgba(12,10,9,.95) 0%, rgba(12,10,9,0) 45%);
}
.hero__contenuto { position: relative; padding-block: var(--s-12) var(--s-10); }
.hero h1 { max-width: 15ch; margin-bottom: var(--s-5); }
.hero .sotto { max-width: 40ch; margin-bottom: var(--s-7); }

/* ---------------------------------------------------------------- BINARIO DI AVANZAMENTO
   Sotto la barra in alto corre un filo di rotaia con le traversine, e sopra ci
   cammina la carrozza. Avanza in proporzione a quanto si è scorso: è insieme un
   dettaglio del mondo del locale e un'informazione utile («quanto manca?»).
   La posizione arriva dal JS con la variabile --avanzamento (da 0 a 1). */
/* tutta dentro la barra: sporgendo di sotto, il treno finiva a metà sul contenuto
   della pagina e si leggeva il testo attraverso il disegno */
.rotaia {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
  pointer-events: none; overflow: hidden;
  container-type: inline-size;   /* serve alla corsa esatta, qui sotto */
}
.rotaia::before {                       /* la rotaia */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--c-bordo-forte) 12%, var(--c-bordo-forte) 88%, transparent);
}
.rotaia::after {                        /* le traversine */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background-image: repeating-linear-gradient(to right, var(--c-bordo) 0 1px, transparent 1px 14px);
  opacity: .5;
}
.rotaia__treno {
  position: absolute; bottom: 0; left: 0; height: 15px; width: auto;
  color: var(--c-accento);
  /* il moto è solo un transform: nessun reflow, resta fluido anche sui telefoni lenti */
  transform: translate3d(calc(var(--avanzamento, 0) * (100vw - 54px)), 0, 0);
  transition: transform .12s linear;
  will-change: transform;
}
/* 100vw comprende la barra di scorrimento: da desktop il treno sbagliava l'arrivo
   di una quindicina di pixel. cqw misura la rotaia vera, quindi la carrozza tocca
   il fondo esattamente quando la pagina finisce. */
@supports (width: 1cqw) {
  .rotaia__treno { transform: translate3d(calc(var(--avanzamento, 0) * (100cqw - 54px)), 0, 0); }
}
.b5-ruota { transform-box: fill-box; transform-origin: center; }
/* le ruote girano solo mentre la pagina si muove davvero */
html.scorrendo .rotaia__treno .b5-ruota { animation: b5gira .5s linear infinite; }
@keyframes b5gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rotaia__treno { transition: none; }
  html.scorrendo .rotaia__treno .b5-ruota { animation: none; }
}

/* ---------------------------------------------------------------- LA PARTENZA
   I primi 1,2 secondi. La pagina non appare: parte. Prima si posa la targa,
   poi il titolo sale una parola per volta da sotto una linea invisibile, poi
   arrivano sottotitolo, pulsanti e stelle.
   Tutto in CSS puro e senza JS: è l'unica animazione che deve funzionare anche
   se main.js non arriva, perché è quella che il visitatore vede per prima. */
/* Nota: il paragrafo sotto il titolo NON si anima, di proposito. È il blocco di
   testo più grande della pagina, quindi è lui a fissare il punteggio di velocità
   percepita (LCP): partendo da opacità zero il punteggio slittava di un secondo
   pieno. Resta fermo, e l'effetto lo fanno il titolo e gli elementi attorno. */
.hero .occhiello,
.hero .btn-gruppo,
.hero__prova { animation: b5sale .62s var(--ease-out) both; }
.hero .occhiello  { animation-delay: .02s; }
.hero .btn-gruppo { animation-delay: .40s; }
.hero__prova      { animation-delay: .50s; }

@keyframes b5sale { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* il titolo: ogni parola è una finestrella che nasconde la parola finché non sale */
h1.parte { display: block; }
h1.parte > span { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
/* Tempi corti di proposito: il titolo è l'elemento più grande della pagina, quindi
   è lui a fissare l'LCP. Con la scaletta lunga il punteggio slittava di mezzo secondo
   senza che l'effetto migliorasse. Così l'ultima parola è a posto in 0,56s. */
h1.parte > span > i {
  display: inline-block; font-style: inherit;
  animation: b5parola .46s var(--ease-out) both;
}
h1.parte > span:nth-child(1) > i { animation-delay: .04s; }
h1.parte > span:nth-child(2) > i { animation-delay: .08s; }
h1.parte > span:nth-child(3) > i { animation-delay: .12s; }
h1.parte > span:nth-child(4) > i { animation-delay: .16s; }
h1.parte > span:nth-child(5) > i { animation-delay: .20s; }
h1.parte > span:nth-child(6) > i { animation-delay: .24s; }
@keyframes b5parola { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* l'invito a scorrere diventa un pezzo di binario visto dall'alto,
   con una luce che ci scende dentro */
.scorri::after {
  background: linear-gradient(to bottom, var(--c-accento), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero .occhiello, .hero .btn-gruppo, .hero__prova,
  h1.parte > span > i { animation: none; }
}

/* ------------------------------------------------- HERO CON IL REEL DEL PROPRIETARIO
   Il reel è verticale 9:16. Da telefono è il formato perfetto: riempie lo schermo
   e fa da sfondo al titolo. Da desktop, stirato a tutta larghezza, diventerebbe una
   striscia centrale ingrandita 2,5 volte e sfocata — quindi lì sta in un pannello a
   destra, nitido, e dietro torna la foto della carrozza. */

/* telefono e tablet: il video È lo sfondo, la foto non serve */
.hero--video .hero__media { display: none; }
.hero--video .hero__video { position: absolute; inset: 0; z-index: 0; }
.hero--video .hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Il velo che rende leggibile il titolo sopra al video. Da telefono il testo occupa
   tutta la larghezza, quindi il velo deve essere uniforme in orizzontale: con una
   sfumatura da sinistra a destra le ultime parole di ogni riga finivano sul verde
   chiaro degli alberi e si leggevano male. */
.hero--video .hero__video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(12,10,9,.96) 0%, rgba(12,10,9,.88) 30%, rgba(12,10,9,.74) 60%, rgba(12,10,9,.58) 100%);
}
/* 🔴 Da telefono .hero__contenuto è un riquadro che copre TUTTO lo schermo, e stando
   sopra il video si prendeva anche i tocchi destinati al pulsante dell'audio: il
   pulsante si vedeva ma il dito non lo raggiungeva mai. Alzare lo z-index del
   pulsante non basta, perché il suo contenitore è un contesto di impilamento a sé.
   Quindi: il riquadro del testo non intercetta più nulla, e a intercettare sono
   soltanto i suoi figli — titolo, pulsanti, stelle — che sono ciò che serve. */
.hero--video .hero__contenuto { z-index: 2; pointer-events: none; }
.hero--video .hero__contenuto > * { pointer-events: auto; }

/* il pulsante audio va in alto, altrimenti finisce sotto al titolo e alle CTA */
.hero--video .hero__video .audio-btn { top: calc(var(--s-10) + var(--s-3)); bottom: auto; }

@media (min-width: 861px) {
  /* riga e colonna vanno dette esplicitamente: nel DOM il video viene prima del
     testo, e in auto-placement finivano uno sotto l'altro invece che affiancati */
  .hero--video { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hero--video .hero__media { display: block; }
  .hero--video .hero__video {
    grid-column: 2; grid-row: 1;
    position: relative; inset: auto; z-index: 2;
    width: min(340px, 27vw); aspect-ratio: 9/16;
    border-radius: var(--r-l); overflow: hidden;
    justify-self: end; align-self: center;
    margin-inline-end: max(var(--s-6), calc((100vw - var(--w-contenuto)) / 2));
    box-shadow: var(--sh-alta); border: 1px solid var(--c-bordo-forte);
  }
  .hero--video .hero__video::after { display: none; }
  .hero--video .hero__video .audio-btn { top: auto; bottom: var(--s-3); }
  /* .wrap si centrerebbe dentro la sola colonna di sinistra e il titolo finirebbe
     disallineato rispetto a tutte le altre sezioni: qui il margine si impone a mano. */
  .hero--video .hero__contenuto {
    grid-column: 1; grid-row: 1;
    width: auto; max-width: none; margin-inline: 0;
    padding-inline: max(var(--s-6), calc((100vw - var(--w-contenuto)) / 2)) var(--s-7);
  }
}

.hero__prova {
  margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-s); color: var(--c-testo-soft);
}

/* Finché il banner cookie è a schermo copre il fondo dell'hero: su un portatile
   1366×768 si mangiava il pulsante "Prenota". Sotto una certa altezza di schermo
   il contenuto dell'hero è più alto del viewport e resta ancorato in alto, quindi
   non basta il padding sotto: va ridotto quello sopra. Tutto torna come prima
   appena il visitatore chiude il banner. */
body.con-cookie .hero__contenuto { padding-bottom: calc(var(--s-10) + 5rem); }
body.con-cookie .scorri { opacity: 0; }
@media (max-height: 900px) {
  body.con-cookie .hero__contenuto { padding-top: var(--s-8); padding-bottom: calc(var(--s-6) + 5rem); }
  body.con-cookie .hero h1 { margin-bottom: var(--s-4); }
  body.con-cookie .hero .sotto { margin-bottom: var(--s-5); }
}
.stelle { color: var(--c-accento); letter-spacing: .12em; font-size: var(--fs-s); }

.scorri {
  position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
  font-family: var(--f-nota); font-size: var(--fs-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--c-testo-tenue);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.scorri::after {
  content: ""; width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--c-brand), transparent);
  animation: scorre 2.4s var(--ease-morbido) infinite;
}
@keyframes scorre { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------------------------------------------------------------- BANDA IMMAGINE */
.banda { position: relative; }
/* le foto del cliente sono verticali e il soggetto sta in basso:
   senza object-position si vedrebbe solo il cielo notturno */
.banda img { width: 100%; height: clamp(340px, 62vh, 640px); object-fit: cover; object-position: center 72%; }
.banda__testo {
  position: absolute; inset: auto 0 0; padding: var(--s-8) 0;
  background: linear-gradient(to top, rgba(12,10,9,.94), rgba(12,10,9,0));
}

/* ---------------------------------------------------------------- NUMERI */
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-6); }
.numero { text-align: center; }
.numero b {
  display: block; font-family: var(--f-display); font-size: var(--fs-2xl);
  color: var(--c-accento); line-height: 1;
}
.numero span { font-size: var(--fs-s); color: var(--c-testo-soft); }

/* ---------------------------------------------------------------- CARD */
.griglia { display: grid; gap: var(--s-5); }
/* due colonne piene su desktop: quattro card devono stare 2+2, non 3+1 */
.griglia-2 { grid-template-columns: 1fr; }
@media (min-width: 780px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------------------------- SCHEDE FOTO+TESTO
   Tre schede in fila, tutte identiche. Prima stavano in una .griglia-2 con foto
   di proporzioni diverse (16/9, 3/4, 16/9): tre schede su due colonne, una
   gigante e una piccola, tutte sfalsate. Ora il ritaglio è imposto uguale a
   tutte con aspect-ratio + object-fit, quindi le righe non si sfalsano mai. */
.schede { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 780px) { .schede { grid-template-columns: repeat(3, 1fr); } }
.schede > * { display: flex; flex-direction: column; min-width: 0; }
.schede picture { display: block; border-radius: var(--r-m); overflow: hidden; background: var(--c-superficie); }
.schede img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.schede h3 { margin-top: var(--s-5); }
.schede p { color: var(--c-testo-soft); margin-top: var(--s-2); }

.card {
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  border-radius: var(--r-l);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--t-normale) var(--ease-morbido),
              transform var(--t-normale) var(--ease-out),
              box-shadow var(--t-normale) var(--ease-morbido);
}

.card__giorno {
  font-family: var(--f-nota); font-size: var(--fs-xs); letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-brand);
}
.card h3 { margin: 0; }
.card__prezzo {
  font-family: var(--f-display); font-size: var(--fs-xl); color: var(--c-accento);
  line-height: 1; margin-top: auto; padding-top: var(--s-4);
}
.card__prezzo small {
  display: block; font-family: var(--f-testo); font-size: var(--fs-xs);
  color: var(--c-testo-soft); letter-spacing: 0; margin-top: var(--s-2);
  text-transform: none;
}
.card__lista { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); color: var(--c-testo-soft); }
.card__lista li { padding-left: 1.1em; position: relative; margin-bottom: var(--s-2); }
.card__lista li::before { content: "—"; position: absolute; left: 0; color: var(--c-brand); }

.card--evidenza { border-color: var(--c-accento); background: var(--c-superficie-2); }
.card--evidenza .card__giorno { color: var(--c-accento); }

/* ---------------------------------------------------------------- PIATTI */
/* ---------------------------------------------------------------- PUNTI
   Serve a spezzare i paragrafi: oltre due o tre righe di fila nessuno legge,
   e da telefono un paragrafo lungo riempie tutto lo schermo. */
.punti { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.punti li { position: relative; padding-left: 1.8em; color: var(--c-testo-soft); }
.punti li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--c-accento); font-family: var(--f-nota);
}
.punti strong, .punti b { color: var(--c-testo); font-weight: 600; }
@media (min-width: 780px) { .punti--2 { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7); } }

/* elenco fitto: nomi corti in colonne, invece di un muro di parole separate da punti */
.elenco-fitto {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--s-2) var(--s-5);
  color: var(--c-testo-soft); font-size: var(--fs-s);
}
.elenco-fitto li { padding: .35em 0; border-bottom: 1px dashed var(--c-bordo); }

/* fatti in evidenza: numero grande + etichetta, al posto di una frase */
.fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.fatti div { border-left: 2px solid var(--c-bordo-forte); padding-left: var(--s-4); }
.fatti b {
  display: block; font-family: var(--f-display); font-size: var(--fs-xl);
  color: var(--c-accento); line-height: 1.05;
}
.fatti span { display: block; font-size: var(--fs-s); color: var(--c-testo-soft); margin-top: var(--s-1); }

.piatti { list-style: none; margin: 0; padding: 0; }
.piatti li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px dashed var(--c-bordo);
}
.piatti li:last-child { border-bottom: 0; }
.piatti .p-nome { flex: 1; }
.piatti .p-prezzo { font-family: var(--f-display); color: var(--c-accento); font-size: var(--fs-l); }
.piatti .p-nota { display: block; font-size: var(--fs-xs); color: var(--c-testo-tenue); }

/* ---------------------------------------------------------------- BOX CONTO */
.box-conto {
  border: 1px solid var(--c-accento);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(201,162,39,.09), rgba(201,162,39,.02));
  padding: var(--s-8);
}
.box-conto h2 { color: var(--c-accento-alto); }
.box-conto strong { color: var(--c-testo); }

/* ---------------------------------------------------------------- OBIEZIONI / FAQ */
.qa { border-top: 1px solid var(--c-bordo); }
.qa__voce { border-bottom: 1px solid var(--c-bordo); }
.qa__d {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; text-align: left;
  font-family: var(--f-display); font-size: var(--fs-l); color: var(--c-testo);
  transition: color var(--t-veloce) var(--ease-morbido);
}
.qa__d i {
  font-style: normal; color: var(--c-accento); flex: none; font-size: var(--fs-xl); line-height: 1;
  transition: transform var(--t-normale) var(--ease-out);
}
.qa__d[aria-expanded="true"] i { transform: rotate(45deg); }
.qa__r { overflow: hidden; max-height: 0; transition: max-height var(--t-normale) var(--ease-morbido); }
.qa__r > div { padding-bottom: var(--s-5); color: var(--c-testo-soft); max-width: 68ch; }

/* ---------------------------------------------------------------- CITAZIONI */
.cit {
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-radius: var(--r-l); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3); height: 100%;
}
.cit blockquote { margin: 0; font-size: var(--fs-m); color: var(--c-testo); }
.cit figcaption { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin-top: auto; }

/* ---------------------------------------------------------------- GALLERIA */
/* Griglia REGOLARE: numero di colonne fisso e tutte le tessere della stessa forma.
   Prima c'erano tessere larghe (.largo) mescolate a quelle verticali e le righe
   risultavano sfalsate — alcune foto più in alto, altre più in basso. */
/* Il numero di colonne lo decide la singola galleria con --col (desktop) e --col-t
   (tablet), così l'ultima riga non resta mai con una tessera spaiata.
   Sotto i 780px non è più una griglia ma una riga che scorre (vedi in fondo). */
.galleria { display: grid; grid-template-columns: repeat(var(--col-t, 3), 1fr); gap: var(--s-3); }
@media (min-width: 1000px) { .galleria { grid-template-columns: repeat(var(--col, 4), 1fr); } }
/* dentro una colonna dello split lo spazio è metà: si resta a 2 */
.split .galleria { grid-template-columns: repeat(2, 1fr); }
.galleria button {
  padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden;
  border-radius: var(--r-m); aspect-ratio: 3/4; position: relative;
}
.galleria img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-lenta) var(--ease-out), filter var(--t-normale);
  filter: brightness(.86);
}

/* tessera video dentro la galleria: stessa forma delle foto, ma parte da sola.
   Non è un <button> perché non apre la lightbox: si guarda dov'è. */
.galleria .tessera-video {
  margin: 0; padding: 0; border-radius: var(--r-m); overflow: hidden;
  aspect-ratio: 3/4; position: relative; background: var(--c-superficie);
}
.galleria .tessera-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria .tessera-video::after {
  content: "VIDEO"; position: absolute; left: var(--s-3); top: var(--s-3);
  font-family: var(--f-nota); font-size: var(--fs-xs); letter-spacing: .18em;
  background: rgba(12,10,9,.72); color: var(--c-accento);
  padding: .3em .7em; border-radius: var(--r-pill); pointer-events: none;
}

/* ---------------------------------------------------------------- GALLERIA VIDEO
   I video del cliente sono verticali 9:16: in griglia stanno bene a 2 o 4 colonne. */
.video-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 900px) { .video-griglia { grid-template-columns: repeat(4, 1fr); } }
.video-griglia figure { margin: 0; }

/* ---------------------------------------------------------------- VIDEO IN RIQUADRO
   I reel sono verticali 9:16 e hanno i sottotitoli impressi: vanno muti e in loop. */
.video-riquadro {
  width: 100%; border-radius: var(--r-l); overflow: hidden; display: block;
  background: var(--c-superficie); aspect-ratio: 9/16;
}
.video-riquadro { position: relative; }
.video-riquadro video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- AUDIO ON/OFF
   I video partono muti perché i browser non permettono l'autoplay con l'audio.
   Il pulsante lascia la scelta a chi guarda. */
/* a SINISTRA: a destra andrebbe a sbattere sul pulsante WhatsApp, che è fisso in basso a destra.
   La scritta è obbligatoria (CLAUDE.md): l'icona da sola non si capisce. */
.audio-btn {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  height: 40px; padding: 0 .95rem 0 .75rem; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(12,10,9,.8); border: 1px solid var(--c-bordo-forte);
  color: var(--c-testo); cursor: pointer;
  font-family: var(--f-nota); font-size: var(--fs-xs); letter-spacing: .06em;
  transition: background var(--t-normale), border-color var(--t-normale), transform var(--t-veloce);
}
.audio-btn svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; flex: 0 0 auto; }
.audio-btn__testo { pointer-events: none; white-space: nowrap; }
/* nelle tessere della galleria lo spazio è poco: resta la sola icona */
.tessera-video .audio-btn__testo { display: none; }
.audio-btn .i-on { display: none; }
.audio-btn[aria-pressed="true"] { color: var(--c-accento); border-color: var(--c-accento); }
.audio-btn[aria-pressed="true"] .i-on { display: block; }
.audio-btn[aria-pressed="true"] .i-off { display: none; }
.tessera-video .audio-btn { height: 36px; width: 36px; padding: 0; justify-content: center; border-radius: 50%; left: var(--s-2); bottom: var(--s-2); }
.tessera-video .audio-btn svg { width: 17px; height: 17px; }
/* nello split accanto al testo un 9:16 pieno è troppo alto: si limita l'altezza */
.split .video-riquadro { max-height: 78vh; margin-inline: auto; max-width: 440px; }

/* ---------------------------------------------------------------- RIGHE SCORREVOLI
   Da telefono, più immagini una sotto l'altra diventano un muro da scorrere.
   Diventano una riga orizzontale che scorre col dito, con l'aggancio allo scatto. */
@media (max-width: 780px) {
  .galleria, .video-griglia, .griglia--scorre, .schede {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: var(--s-3); padding-bottom: var(--s-4);
    scrollbar-width: thin; scrollbar-color: var(--c-bordo-forte) transparent;
  }
  .galleria > button, .galleria > .tessera-video, .video-griglia > figure, .griglia--scorre > * {
    flex: 0 0 78%; scroll-snap-align: start;
  }
  .galleria > button, .galleria > .tessera-video { aspect-ratio: 3/4; }
  .griglia--scorre > * { min-width: 0; }
  /* le schede portano del testo: più larghe, così le righe non restano mozzate */
  .schede > * { flex: 0 0 85%; scroll-snap-align: start; }
  .galleria::-webkit-scrollbar, .video-griglia::-webkit-scrollbar, .griglia--scorre::-webkit-scrollbar, .schede::-webkit-scrollbar { height: 4px; }
  .galleria::-webkit-scrollbar-thumb, .video-griglia::-webkit-scrollbar-thumb, .griglia--scorre::-webkit-scrollbar-thumb, .schede::-webkit-scrollbar-thumb {
    background: var(--c-bordo-forte); border-radius: 2px;
  }
}

/* ---------------------------------------------------- LA LUCE SULLA FOTO GUARDATA
   Le foto stanno in penombra e si accende quella al centro della riga, con un filo
   d'oro attorno: come se il proiettore seguisse il dito. Sostituisce lo schiarimento
   che prima era legato all'hover — e che quindi da telefono non arrivava mai,
   lasciando tutte le foto dei piatti scurite per sempre.
   La classe .accesa la mette il JS con un IntersectionObserver sulla riga. */
/* su un dispositivo a tocco la penombra di base è più lieve: lì nessun mouse
   verrà mai a schiarire le foto, e un piatto scurito del 14% è un piatto sprecato */
@media (hover: none) { .galleria img { filter: brightness(.94); } }
.galleria > .accesa img { filter: brightness(1.02); transform: scale(1.02); }
.galleria > .accesa { box-shadow: 0 0 0 1px var(--c-accento), 0 10px 30px rgba(0,0,0,.45); }
.galleria > button, .galleria > .tessera-video { transition: box-shadow var(--t-normale) var(--ease-morbido); }

@media (prefers-reduced-motion: reduce) {
  .galleria > .accesa img { transform: none; }
}

/* ---------------------------------------------------------------- CHIP IN RIGA
   Le voci del menu su una riga sola che scorre: incolonnate su tre righe
   sembravano tre gruppi diversi e confondevano. */
.chip-riga {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  gap: var(--s-3); padding-bottom: var(--s-3); scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--c-bordo-forte) transparent;
}
.chip-riga .btn { flex: 0 0 auto; scroll-snap-align: start; }
.chip-riga::-webkit-scrollbar { height: 4px; }
.chip-riga::-webkit-scrollbar-thumb { background: var(--c-bordo-forte); border-radius: 2px; }
.video-griglia video {
  width: 100%; aspect-ratio: 9/16; object-fit: cover;
  border-radius: var(--r-l); background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
}
.video-griglia figcaption {
  margin-top: var(--s-3); font-family: var(--f-nota); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-testo-soft);
}

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modale);
  background: rgba(8,7,6,.96); display: grid; place-items: center; padding: var(--s-5);
  opacity: 0; visibility: hidden; transition: opacity var(--t-normale), visibility var(--t-normale);
}
.lightbox.aperto { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(94vw, 1100px); max-height: 88vh; width: auto; border-radius: var(--r-m); }
.lightbox__chiudi {
  position: absolute; top: var(--s-5); right: var(--s-5);
  background: none; border: 0; color: var(--c-testo); font-size: 2rem; cursor: pointer;
  width: 48px; height: 48px; line-height: 1;
}

/* ---------------------------------------------------------------- SPLIT */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split img { border-radius: var(--r-l); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------------------------------------------------------------- CTA */
.cta-banda {
  background:
    linear-gradient(rgba(12,10,9,.86), rgba(12,10,9,.9)),
    var(--url-cta) center/cover no-repeat;
  text-align: center;
}
.cta-banda h2 { max-width: 22ch; margin-inline: auto; }
.cta-canali { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.canale {
  background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--r-l);
  padding: var(--s-5); text-decoration: none; display: flex; flex-direction: column; gap: var(--s-2);
  transition: border-color var(--t-normale), transform var(--t-normale) var(--ease-out);
}
.canale b { font-family: var(--f-display); font-size: var(--fs-l); letter-spacing: .04em; }
.canale span { font-size: var(--fs-s); color: var(--c-testo-soft); }

/* ---------------------------------------------------------------- MAPPA */
.mappa {
  display: block; border-radius: var(--r-l); overflow: hidden; position: relative;
  border: 1px solid var(--c-bordo); text-decoration: none;
}
.mappa img { width: 100%; height: clamp(260px, 40vh, 420px); object-fit: cover; filter: grayscale(.35) brightness(.7); transition: filter var(--t-normale); }
.mappa__pin {
  position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s-3);
  text-align: center; padding: var(--s-5);
}
.mappa__pin span {
  background: var(--c-accento); color: #17140f; padding: .8em 1.6em; border-radius: var(--r-pill);
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-s);
}

/* Mappa viva (iframe OpenStreetMap). La mappa arriva chiara e su un sito notturno
   stona: la si desatura e la si scurisce a riposo, e torna piena al passaggio del
   mouse — così resta leggibile senza bucare la pagina. */
.mappa-box {
  border: 1px solid var(--c-bordo); border-radius: var(--r-l); overflow: hidden;
  background: var(--c-superficie);
}
.mappa-box iframe {
  width: 100%; height: clamp(260px, 40vh, 420px); border: 0; display: block;
  filter: grayscale(.4) brightness(.78) contrast(1.05);
  transition: filter var(--t-normale) var(--ease-morbido);
}
/* :focus-within resta sempre attivo: serve a chi naviga da tastiera, non col mouse */
.mappa-box:focus-within iframe { filter: grayscale(0) brightness(.95) contrast(1); }
.mappa-box__cta {
  display: flex; width: 100%; border-radius: 0;
  border-top: 1px solid var(--c-bordo);
}
/* il sollevamento dei bottoni qui lo taglierebbe l'overflow del contenitore */
.mappa-box__cta:active { transform: none; }

/* ---------------------------------------------------------------- FOOTER */
.footer { background: var(--c-fondo-alt); border-top: 1px solid var(--c-bordo); padding-block: var(--s-9) var(--s-6); }
.footer__griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
@media (max-width: 860px) { .footer__griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__griglia { grid-template-columns: 1fr; } }
.footer img.logo { height: 46px; margin-bottom: var(--s-4); }
.footer h4 {
  font-family: var(--f-nota); font-size: var(--fs-xs); letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-brand); margin-bottom: var(--s-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-2); color: var(--c-testo-soft); font-size: var(--fs-s); }
.footer a { text-decoration: none; color: var(--c-testo-soft); transition: color var(--t-veloce); }
.footer__legale {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-bordo);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--c-testo-tenue);
}

/* firma OnlinePerTutti — obbligatoria, una sola per sito, nel footer della home */
.credit { font-size: .82rem; opacity: .6; margin-top: 1.25rem; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- WHATSAPP FLOTTANTE */
.wa {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: var(--z-flottante);
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: var(--sh-card); transition: transform var(--t-normale) var(--ease-out);
}
.wa svg { width: 28px; height: 28px; fill: #0d2b17; }

/* ---------------------------------------------------------------- COOKIE */
/* Compatto e su una riga: deve informare, non coprire la pagina. */
.cookie {
  position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: var(--z-modale);
  max-width: 620px; background: var(--c-superficie); border: 1px solid var(--c-bordo-forte);
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  box-shadow: var(--sh-alta); font-size: var(--fs-xs); color: var(--c-testo-soft);
  display: flex; align-items: center; gap: var(--s-4);
  animation: cookieSu .45s var(--ease-out) .8s both;
}
@keyframes cookieSu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cookie p { margin: 0; flex: 1; line-height: 1.45; }
.cookie .btn-gruppo { flex: none; }
.cookie .btn { padding: .55em 1.2em; font-size: var(--fs-xs); }
@media (max-width: 620px) {
  .cookie { border-radius: var(--r-l); flex-direction: column; align-items: stretch; padding: var(--s-4); right: calc(var(--s-4) + 62px); }
}
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

/* ---------------------------------------------------------------- REVEAL
   Rete di sicurezza: gli elementi sono VISIBILI di default.
   Solo se il JS è attivo (html.js) vengono nascosti per essere rivelati.
   Così un errore JS non lascia mai la pagina vuota. */
/* ARRIVO SFALSATO — le tessere di una griglia non compaiono tutte insieme come una
   tendina: arrivano una dopo l'altra, come le carrozze che passano davanti.
   Il ritardo lo scrive il JS in --ritardo, sette centesimi per posizione. */
.reveal[style*="--ritardo"] { transition-delay: var(--ritardo, 0s) !important; }

/* 🔴 SALVAGENTE — «ogni tanto vedo la pagina tutta nera».
   Lo script nel <head> marca subito <html class="js">, e da lì il CSS nasconde i
   blocchi .reveal fidandosi che main.js poi li riveli. Ma se main.js NON arriva
   — rete ballerina, richiesta caduta, cache storta — restano invisibili per
   sempre: pagina nera. La rete di sicurezza che avevamo viveva dentro main.js,
   cioè dentro il file che non è arrivato: inutile proprio quando serve.
   Qui il salvagente è in CSS puro: main.js appena parte aggiunge .jsok e questa
   regola si spegne; se non parte, dopo tre secondi il contenuto si mostra da solo. */
html.js:not(.jsok) .reveal { animation: b5salvagente .45s var(--ease-out) 3s forwards; }
@keyframes b5salvagente { to { opacity: 1; transform: none; } }

.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--t-lenta) var(--ease-morbido), transform var(--t-lenta) var(--ease-out);
}
html.js .reveal.dentro { opacity: 1; transform: none; }
html.js .reveal-r2 { transition-delay: .1s; }
html.js .reveal-r3 { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scorri::after { animation: none; }
  .btn:active, .card:active, .canale:active, .galleria button:active,
  .qa__d:active, .audio-btn:active, .wa:active, .nav__logo:active { transform: none; }
  .nav.compatta .nav__logo img { transform: scale(.81); transition: none; }
}

/* ---------------------------------------------------------------- UTILITY */
.solo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nota-dato { color: var(--c-caldo); font-size: var(--fs-xs); }
.centro { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

/* ---------------------------------------------------------------- HOVER, SOLO COL MOUSE
   Su un telefono `:hover` resta appiccicato dopo il tocco: le schede restavano
   sollevate e — molto peggio — le foto dei piatti restavano scurite per sempre,
   perché lo schiarimento era legato al passaggio del mouse. Qui dentro ci va
   TUTTO ciò che ha senso solo con un puntatore vero. Il tocco ha il suo
   riscontro poco sotto, in :active. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn-oro:hover { background: var(--c-accento-alto); }
  .btn-linea:hover { border-color: var(--c-brand); background: rgba(171,169,152,.08); }
  .card:hover { border-color: var(--c-bordo-forte); transform: translateY(-3px); box-shadow: var(--sh-card); }
  .qa__d:hover { color: var(--c-accento); }
  .galleria button:hover img { transform: scale(1.06); filter: brightness(1); }
  .audio-btn:hover { background: rgba(12,10,9,.95); border-color: var(--c-accento); transform: translateY(-1px); }
  .canale:hover { border-color: var(--c-accento); transform: translateY(-3px); }
  .mappa:hover img { filter: grayscale(0) brightness(.85); }
  .footer a:hover { color: var(--c-accento); }
  .credit a:hover { opacity: 1; }
  .wa:hover { transform: scale(1.08); }
}