/* Ristorante Al Duomo — foglio di stile del sito (11/10/2026, rifacimento in stile Apple, Claude Code).

   L'impianto e' quello dei nostri siti «Apple» (Trentino Appartamenti, UNAT, Giovani Imprenditori, Betta's Food):
   bianco e grigio #f5f5f7, Inter, titoli grandi e stretti col punto, barra di vetro fissa, riquadri arrotondati,
   foto vere. Dentro, l'identita' del ristorante: il marchio DUOMO vero (ricalcato dal loro file, oro #CAA063),
   le loro foto, i piatti tondi della loro home e una sola sezione nera, quella dei piatti, come sul loro sito.
   L'oro del marchio sul bianco fa 2,4:1: va bene per il marchio e per i pulsanti (testo nero sull'oro 7:1), non per
   i testi. Per testi e collegamenti c'e' l'oro scuro #86662a (5,3:1 sul bianco); nel tema scuro #d9b97f (11:1).
   Il tema scuro segue il telefono (Simone, 10/10/2026: «fai pure che diventi nero se serve»).
   Telefono prima di tutto: le regole di base sono per 375 px, le misure grandi arrivano con le media query. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Inter-var-latin-ext-a28eb6d3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Inter-var-latin-c9407645.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --fondo: #ffffff;
  --grigio: #f5f5f7;
  --carta: #ffffff;            /* le schede dentro le sezioni grigie */
  --tessera: #f5f5f7;          /* le schede dentro le sezioni bianche */
  --testo: #1d1d1f;
  --testo-2: #6e6e73;
  --testo-3: #86868b;
  --filo: #d2d2d7;
  --filo-tenue: rgba(0, 0, 0, .08);
  --vetro: rgba(255, 255, 255, .74);
  --oro: #caa063;              /* l'oro del marchio (nome del loro file: logoCAA063) */
  --oro-testo: #86662a;        /* testi e collegamenti in oro: 5,3:1 sul bianco */
  --su-oro: #1d1d1f;           /* il testo dei pulsanti d'oro: 7:1 */
  --oro-su: #b98f52;           /* pulsante d'oro al passaggio */
  --verde: #1f8a3c;            /* «aperto ora» */
  --rosso: #c4271d;
  --wa: #25d366;
  --nero: #000000;             /* la sezione dei piatti */
  --ombra: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --largo: 1120px;
  --largo-foto: 1280px;
  --margine: 22px;
  --r-grande: 30px;
  --r-medio: 20px;
  --r-piccolo: 14px;
  --barra: 52px;
  --uscita: cubic-bezier(.23, 1, .32, 1);
  --dentro-fuori: cubic-bezier(.77, 0, .175, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --grigio: #111113;
    --carta: #1c1c1e;
    --tessera: #1c1c1e;
    --testo: #f5f5f7;
    --testo-2: #a1a1a6;
    --testo-3: #8e8e93;
    --filo: #3a3a3c;
    --filo-tenue: rgba(255, 255, 255, .1);
    --vetro: rgba(22, 22, 23, .74);
    --oro-testo: #d9b97f;
    --oro-su: #d6b37a;
    --verde: #4cd472;
    --rosso: #ff6b5e;
    --nero: #0b0b0c;
    --ombra: none;
  }
}
@media (min-width: 735px) { :root { --margine: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* errore n. 44 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 16px); }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 400 17px/1.5 var(--font); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  padding-top: var(--barra);
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }                     /* errore n. 39: l'altezza dell'attributo non deve battere aspect-ratio */
picture source { display: none; }        /* errore n. 2 */
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.028em; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--oro-testo); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--oro) 42%, transparent); }

.contenitore { width: min(var(--largo), 100% - 2 * var(--margine)); margin-inline: auto; }
.contenitore-foto { width: min(var(--largo-foto), 100% - 2 * var(--margine)); margin-inline: auto; }
.stretto { width: min(760px, 100% - 2 * var(--margine)); margin-inline: auto; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--testo); color: var(--fondo); font-size: 14px; font-weight: 600; transform: translateY(-160%); }
.salta:focus { transform: none; }

/* ---------------------------------------------------------------- testi */
.titolo-pagina, .titolo-sezione, .titolo-medio { font-weight: 700; text-wrap: balance; }
.titolo-pagina { font-size: clamp(40px, 7.2vw, 88px); letter-spacing: -.035em; line-height: 1.03; }
@media (max-width: 359px) { .titolo-pagina { font-size: 35px; } }
.titolo-sezione { font-size: clamp(32px, 5.4vw, 64px); letter-spacing: -.032em; line-height: 1.05; }
.titolo-medio { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.punto { color: var(--oro); }
.sotto { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.38; letter-spacing: -.016em; color: var(--testo-2); font-weight: 450; }
.sotto strong { color: var(--testo); font-weight: 600; }
.testa { margin-bottom: clamp(36px, 5vw, 60px); }
.testa .sotto { margin-top: 14px; max-width: 40em; }
.testa.centro { text-align: center; }
.testa.centro .sotto { margin-inline: auto; }
.testa-riga { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; }
.testa-riga .sotto { max-width: 34em; }

/* pulsanti: la pillola d'oro (come i pulsanti del loro sito) e il collegamento col segno › */
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.azioni.centro { justify-content: center; }
.pillola {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 24px;
  border: 0; border-radius: 999px; background: var(--oro); color: var(--su-oro); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; cursor: pointer; transition: background-color .2s, transform .16s var(--uscita);
}
.pillola:hover { background: var(--oro-su); }
.pillola:active { transform: scale(.97); }
.pillola svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillola.chiara { background: var(--tessera); color: var(--testo); }
.pillola.chiara:hover { background: var(--filo); }
.pillola.scura { background: var(--testo); color: var(--fondo); }
.pillola.scura:hover { background: color-mix(in srgb, var(--testo) 82%, var(--fondo)); }
.pillola[disabled] { opacity: .55; cursor: default; }
.scopri { display: inline-flex; align-items: center; gap: 4px; color: var(--oro-testo); font-size: 17px; font-weight: 400; }
.scopri::after { content: '\203A'; font-size: 1.25em; line-height: 1; transform: translateY(-.06em); transition: transform .2s var(--uscita); }
.scopri:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.scopri:hover::after { transform: translate(3px, -.06em); }
button.scopri { border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------------------------------------------------------------- la barra di vetro */
/* errore n. 30: il vetro sta su ::before, non sulla barra che contiene il menu.
   errore n. 48: fissa e non «sticky» (col menu aperto la pagina si blocca e Safari rimetterebbe la barra fuori schermo). */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--barra); }
.barra::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--vetro);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--filo-tenue);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .barra::before { background: var(--fondo); } }
.barra-dentro { height: 100%; display: flex; align-items: center; gap: 18px; }
.marchio-barra { display: flex; align-items: center; margin-right: auto; padding: 6px 0; flex: none; }
.marchio-barra img { width: auto; height: 19px; }
.marchio-barra .m-crema { display: none; }
.voci { display: none; }
.lingue { display: none; }
.barra-azione { min-height: 30px; padding: 5px 14px; font-size: 13px; font-weight: 600; }
.apri-menu {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; cursor: pointer; border-radius: 12px;
}
.apri-menu span { position: relative; width: 18px; height: 8px; }
.apri-menu span::before, .apri-menu span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: var(--testo);
  transition: transform .3s var(--uscita), top .3s var(--uscita);
}
.apri-menu span::before { top: 0; }
.apri-menu span::after { top: 6.5px; }
.apri-menu[aria-expanded="true"] span::before { top: 3.25px; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] span::after { top: 3.25px; transform: rotate(-45deg); }

/* il menu del telefono: un foglio sotto la barra, voci grandi, lingua e chiamata in fondo */
.menu-tel {
  position: fixed; inset: var(--barra) 0 0 0; z-index: 59; background: var(--fondo); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px var(--margine) calc(28px + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .28s var(--uscita), transform .32s var(--uscita), visibility 0s .32s;
}
.menu-tel[data-aperto] { visibility: visible; opacity: 1; transform: none; transition: opacity .28s var(--uscita), transform .32s var(--uscita); }
.menu-tel ul { list-style: none; padding: 0; margin: 0 0 26px; }
.menu-tel li + li { border-top: 1px solid var(--filo-tenue); }
.menu-tel a.voce-tel { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.menu-tel a.voce-tel::after { content: '\203A'; color: var(--testo-3); font-weight: 400; }
.menu-tel a[aria-current="page"] { color: var(--oro-testo); }
.menu-tel .pillola { width: 100%; min-height: 52px; }
.menu-tel .menu-chiama { display: block; margin-top: 14px; text-align: center; color: var(--oro-testo); font-size: 17px; padding: 10px; }
.menu-tel .lingue-tel { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
html.menu-aperto, html.menu-aperto body { overflow: hidden; }
html:not(.js-menu) .apri-menu, html:not(.js-menu) .menu-tel { display: none; }

.lingua-scelta { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--testo-2); background: var(--tessera); }
.lingua-scelta[aria-current="true"] { color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--testo); background: transparent; }

@media (min-width: 1080px) {
  .voci { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0 6px 0 0; padding: 0; }
  .voci a { font-size: 13.5px; color: var(--testo); opacity: .82; padding: 8px 0; transition: opacity .2s; white-space: nowrap; }
  .voci a:hover, .voci a[aria-current="page"] { opacity: 1; }
  .voci a[aria-current="page"] { color: var(--oro-testo); }
  .lingue { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--tessera); }
  .lingue a { min-width: 32px; min-height: 26px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--testo-2); }
  .lingue a:hover { color: var(--testo); }
  .lingue a[aria-current="true"] { background: var(--fondo); color: var(--testo); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  .apri-menu, .menu-tel { display: none !important; }
}

/* l'avviso del giorno (chiusure, promozioni in striscia): sotto la barra, prima del contenuto */
.striscia { background: var(--oro); color: var(--su-oro); text-align: center; font-size: 14.5px; line-height: 1.4; padding: 10px var(--margine); }
.striscia strong { font-weight: 700; }

/* ---------------------------------------------------------------- sezioni */
.sezione { padding-block: clamp(76px, 10vw, 140px); }
.sezione.grigia { background: var(--grigio); --tessera: var(--carta); }
.sezione + .sezione:not(.grigia):not(.vetrina) { padding-top: 0; }
.sezione.grigia + .sezione.grigia { padding-top: 0; }
.vetrina + .sezione { padding-top: clamp(76px, 10vw, 140px) !important; }
.sezione.grigia + .sezione:not(.grigia) { padding-top: clamp(76px, 10vw, 140px); }
.sezione.invito { padding-top: clamp(76px, 10vw, 140px); }

/* ---------------------------------------------------------------- la copertina della home */
.eroe { padding-top: clamp(30px, 5vw, 70px); padding-bottom: clamp(64px, 8vw, 110px); text-align: center; overflow: hidden; }
.eroe-marchio { width: clamp(220px, 30vw, 360px); margin: 0 auto clamp(26px, 3.4vw, 40px); }
.eroe-marchio svg { width: 100%; height: auto; overflow: visible; }
.eroe-marchio .m-parte { fill: var(--oro); }
.eroe h1 { max-width: 13em; margin-inline: auto; }
.eroe .sotto { max-width: 31em; margin: clamp(16px, 2vw, 22px) auto 0; }
.eroe .azioni { justify-content: center; margin-top: clamp(26px, 3vw, 34px); }
.eroe-foto { margin-top: clamp(44px, 6vw, 72px); }
.cornice { position: relative; overflow: hidden; border-radius: clamp(20px, 2.6vw, var(--r-grande)); background: var(--tessera); isolation: isolate; }
.cornice img { width: 100%; }
.cornice > picture, .riquadro-foto > picture { display: block; width: 100%; height: 100%; }
.eroe-foto .cornice { aspect-ratio: 4 / 5; }
.eroe-foto .cornice img { height: 100%; object-fit: cover; }
@media (min-width: 735px) { .eroe-foto .cornice { aspect-ratio: 16 / 9; } }
.didascalia { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--testo-2); text-align: center; padding-inline: 8px; }

/* la seconda versione: la passeggiata in video al posto della foto */
.cornice-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.pausa-video {
  position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .46); color: #fff; cursor: pointer; transition: background-color .2s, transform .16s var(--uscita);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pausa-video:hover { background: rgba(0, 0, 0, .62); }
.pausa-video:active { transform: scale(.94); }
.pausa-video svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pausa-video .icona-play { fill: currentColor; stroke: none; }
.pausa-video .icona-play, .pausa-video[aria-pressed="true"] .icona-pausa { display: none; }
.pausa-video[aria-pressed="true"] .icona-play { display: block; }

/* le tre informazioni rapide sotto la foto: stato, indirizzo, telefono */
.rapide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: clamp(22px, 3vw, 34px); text-align: left; }
.rapida { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-medio); background: var(--tessera); min-width: 0; transition: background-color .2s; }
a.rapida:hover { background: color-mix(in srgb, var(--tessera) 80%, var(--filo)); }
.rapida svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--oro-testo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rapida span { display: grid; gap: 1px; min-width: 0; }
.rapida b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.rapida small { font-size: 14px; color: var(--testo-2); overflow-wrap: anywhere; }
@media (min-width: 900px) { .rapide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.stato { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.stato::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stato.aperto { color: var(--verde); }
.stato.chiuso { color: var(--rosso); }

/* entrata della copertina: ferma mentre c'e' l'apertura (html.ap-on), parte quando il sipario si alza */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .9s var(--uscita) both; }
  .entra-2 { animation-delay: .08s; }
  .entra-3 { animation-delay: .16s; }
  .entra-4 { animation-delay: .24s; }
  .entra-foto { animation: entra .9s var(--uscita) .3s both; }
  .entra-foto img { animation: entra-foto 1.5s var(--uscita) .18s both; }
  html.ap-on .entra, html.ap-on .entra-foto, html.ap-on .entra-foto img { animation-play-state: paused; }
}
@keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entra-foto { from { transform: scale(1.07); } to { transform: none; } }

/* comparse allo scorrimento: solo con JavaScript (html.js lo mette apertura.js in <head>), opacita' e spostamento
   sull'elemento stesso, niente clip-path (errore n. 29) */
@media (prefers-reduced-motion: no-preference) {
  html.js .svela { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--uscita), transform 1s var(--uscita); }
  html.js .svela.visto { opacity: 1; transform: none; }
  html.js .svela.r2 { transition-delay: .08s; }
  html.js .svela.r3 { transition-delay: .16s; }
  html.js .svela.r4 { transition-delay: .24s; }
}

/* ---------------------------------------------------------------- la frase di presentazione */
.dichiarazione { text-align: center; }
.dichiarazione p { max-width: 24em; margin-inline: auto; font-size: clamp(26px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.dichiarazione .azioni { margin-top: clamp(26px, 3vw, 36px); }

/* ---------------------------------------------------------------- i piatti tondi (la vetrina del loro sito) */
.vetrina { background: var(--nero); color: #f5f5f7; padding-block: clamp(76px, 10vw, 140px); overflow: hidden; }
.vetrina .sotto { color: #a1a1a6; }
.vetrina .sotto strong { color: #f5f5f7; }
.piatti {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 10px max(var(--margine), (100% - var(--largo)) / 2) 4px; scroll-padding-inline: max(var(--margine), (100% - var(--largo)) / 2);
}
.piatti::-webkit-scrollbar { display: none; }
.piatto { flex: 0 0 auto; width: min(76vw, 330px); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; color: #f5f5f7; --comparsa: 1; }
.cerchio { position: relative; width: 100%; aspect-ratio: 1; display: block; }
.cerchio picture, .cerchio > img { position: absolute; inset: 9%; display: block; }
.cerchio img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55)); }
.cerchio .arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arco text { font: 800 15px/1 var(--font); letter-spacing: .14em; fill: var(--oro); }
.piatto .rotea { position: absolute; inset: 0; transform: rotate(calc((1 - var(--comparsa)) * -70deg)) scale(calc(.82 + var(--comparsa) * .18)); opacity: calc(.15 + var(--comparsa) * .85); will-change: transform; }
.piatto-nome { margin-top: 6px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; }
.piatto-dati { margin-top: 4px; font-size: 15px; color: #a1a1a6; }
.piatto-dati b { color: #f5f5f7; font-weight: 600; }
.piatto-voci { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #86868b; max-width: 24em; }
.piatto-vai { margin-top: 14px; color: #d9b97f; font-size: 16px; }
.piatto-vai::after { content: ' \203A'; }
@media (hover: hover) and (pointer: fine) {
  .piatto .cerchio picture, .piatto .cerchio > img { transition: transform .6s var(--uscita); }
  .piatto:hover .cerchio picture, .piatto:hover .cerchio > img { transform: rotate(10deg) translateY(-6px); }
  .piatto:hover .piatto-vai { text-decoration: underline; text-underline-offset: .2em; }
}
@media (min-width: 900px) {
  .piatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); overflow: visible; width: min(var(--largo), 100% - 2 * var(--margine)); margin-inline: auto; padding: 10px 0 0; }
  .piatto { width: auto; }
}
.vetrina .azioni { margin-top: clamp(30px, 4vw, 52px); }
.vetrina .pillola.chiara { background: #1d1d1f; color: #f5f5f7; }
.vetrina .pillola.chiara:hover { background: #2c2c2e; }
.vetrina .scopri { color: #d9b97f; }
.pallini-piatti { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.pallini-piatti span { width: 7px; height: 7px; border-radius: 50%; background: #48484a; transition: background-color .3s; }
.pallini-piatti span.attivo { background: #f5f5f7; }
@media (min-width: 900px) { .pallini-piatti { display: none; } }

/* ---------------------------------------------------------------- la pizzeria: tre foto vere (Simone, 11/10/2026) */
.vetrina + .pizzeria { padding-top: clamp(76px, 10vw, 140px); }
.pizzeria + .sezione { padding-top: clamp(40px, 6vw, 80px) !important; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bento .cornice { aspect-ratio: 4 / 3; }
.bento .cornice img { height: 100%; object-fit: cover; }
/* le foto dei piatti dal loro sito: piatto intero su fondo nero, senza tagliarlo */
.cornice.nero { background: #000; }
.cornice.nero img { height: 100%; object-fit: contain !important; }
.affermazione .cornice.nero picture, .bento .cornice.nero picture { display: block; height: 100%; }
@media (min-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
  .bento .grande { grid-row: 1 / 3; aspect-ratio: auto; }
}

/* ---------------------------------------------------------------- riquadri con la foto dentro */
.riquadri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.riquadro { background: var(--tessera); border-radius: var(--r-grande); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.riquadro-testo { padding: clamp(26px, 3.4vw, 40px) clamp(26px, 3.4vw, 40px) 22px; }
.riquadro h3 { font-size: clamp(24px, 2.3vw, 30px); letter-spacing: -.028em; }
.riquadro p { margin-top: 10px; color: var(--testo-2); font-size: 17px; line-height: 1.5; max-width: 30em; }
.riquadro-foto { margin: auto 12px 12px; border-radius: calc(var(--r-grande) - 12px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--grigio); }
.riquadro-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--uscita); }
a.riquadro:hover .riquadro-foto img { transform: scale(1.03); }
@media (min-width: 735px) { .riquadri.due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

/* ---------------------------------------------------------------- un'affermazione: foto da una parte, testo dall'altra */
.affermazione { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.affermazione .cornice { aspect-ratio: 4 / 3; }
.affermazione .cornice img { height: 100%; object-fit: cover; }
.affermazione .cornice.alta { aspect-ratio: 4 / 5; }
.affermazione .corpo p { color: var(--testo-2); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; }
.affermazione .corpo p + p { margin-top: 1em; }
.affermazione .corpo h2 + p, .affermazione .corpo h2 + div { margin-top: clamp(16px, 2vw, 24px); }
.affermazione .corpo .azioni { margin-top: 26px; }
@media (min-width: 900px) {
  .affermazione { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .affermazione.inversa > :first-child { order: 2; }
}

/* ---------------------------------------------------------------- la galleria che scorre */
.galleria-scorre { overflow: hidden; }
.binario {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--margine), (100% - var(--largo)) / 2); scroll-padding-inline: max(var(--margine), (100% - var(--largo)) / 2);
  padding-bottom: 6px; overscroll-behavior-x: contain;
}
.binario::-webkit-scrollbar { display: none; }
.momento { position: relative; flex: 0 0 auto; width: min(78vw, 360px); aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: var(--tessera); }
.momento img, .momento picture { width: 100%; height: 100%; }
.momento img { object-fit: cover; }
.momento figcaption {
  position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}
.galleria-piede { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.frecce { display: flex; gap: 10px; }
.freccia {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--tessera); color: var(--testo); transition: background-color .2s, opacity .2s, transform .16s var(--uscita);
}
.freccia:hover { background: var(--filo); }
.freccia:active { transform: scale(.94); }
.freccia[disabled] { opacity: .35; cursor: default; }
.freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .frecce { display: none; }

/* ---------------------------------------------------------------- orari e contatti */
.dove { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.foto-dove { position: relative; display: block; overflow: hidden; border-radius: var(--r-grande); background: var(--tessera); min-height: 340px; color: #fff; }
.foto-dove picture, .foto-dove img { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto-dove img { object-fit: cover; transition: transform .8s var(--uscita); }
.foto-dove:hover img { transform: scale(1.03); }
.foto-dove .sopra { position: absolute; inset: auto 0 0 0; padding: 80px 28px 26px; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); display: grid; gap: 4px; }
.foto-dove .sopra strong { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; line-height: 1.15; }
.foto-dove .sopra span { font-size: 15px; opacity: .9; }
.foto-dove .sopra span::after { content: ' \203A'; }
.scheda { background: var(--tessera); border-radius: var(--r-grande); padding: clamp(26px, 3.2vw, 38px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.scheda h3 { font-size: 24px; letter-spacing: -.025em; }
.scheda > p { color: var(--testo-2); }
.orari { display: grid; gap: 0; }
.orari div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--filo-tenue); font-size: 16px; }
.orari div:first-child { border-top: 0; }
.orari dt { color: var(--testo-2); }
.orari dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.orari .oggi dt, .orari .oggi dd { color: var(--testo); font-weight: 600; }
.voce-contatto { display: grid; gap: 2px; }
.voce-contatto .etichetta { font-size: 13px; font-weight: 500; color: var(--testo-2); }
.voce-contatto a, .voce-contatto .valore { font-size: 19px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.voce-contatto a { color: var(--oro-testo); }
.voce-contatto a:hover { text-decoration: underline; text-underline-offset: .18em; }
.scheda .azioni { gap: 12px 22px; }
@media (min-width: 900px) { .dove { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; } .foto-dove { min-height: 520px; } }

/* ---------------------------------------------------------------- domande frequenti */
.domande { border-top: 1px solid var(--filo); }
.domanda { border-bottom: 1px solid var(--filo); }
.domanda summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(19px, 1.9vw, 22px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--testo-2); border-bottom: 2px solid var(--testo-2); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--uscita); }
.domanda[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.domanda .risposta { padding: 0 0 24px; color: var(--testo-2); max-width: 44em; }
.domanda .risposta p + p { margin-top: .8em; }

/* ---------------------------------------------------------------- l'invito finale */
.invito { text-align: center; }
.invito-marchio { width: 150px; margin: 0 auto 28px; }
.invito .sotto { margin: 16px auto 0; max-width: 30em; }
.invito .azioni { margin-top: 30px; }

/* ---------------------------------------------------------------- le promozioni del pannello */
.promo { display: grid; gap: 12px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-grande); background: color-mix(in srgb, var(--oro) 16%, var(--fondo)); }
.promo + .promo { margin-top: 14px; }
.promo h3 { font-size: clamp(22px, 2.4vw, 28px); }
.promo p { color: var(--testo-2); }
.promo .periodo { font-size: 14px; font-weight: 600; color: var(--oro-testo); }
@media (min-width: 900px) { .promo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------------------------------------------------------------- pagine interne */
.pagina-testa { padding-top: clamp(44px, 7vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.pagina-testa .sotto { max-width: 32em; margin: clamp(16px, 2vw, 24px) auto 0; }
.pagina-testa .azioni { justify-content: center; margin-top: 28px; }
.pagina-foto { margin-bottom: clamp(64px, 8vw, 110px); }
.pagina-foto .cornice { aspect-ratio: 16 / 9; }
.pagina-foto .cornice img { height: 100%; object-fit: cover; }

.prosa { font-size: 18px; line-height: 1.62; letter-spacing: -.012em; }
.prosa p, .prosa li { color: var(--testo); }
.prosa p + p, .prosa ul + p, .prosa p + ul, .prosa ol + p, .prosa p + ol, .prosa table + p { margin-top: 1em; }
.prosa h2 { margin: 2em 0 .55em; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.026em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin: 1.6em 0 .4em; font-size: 20px; letter-spacing: -.02em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li + li { margin-top: .4em; }
.prosa a:not(.pillola):not(.scopri) { color: var(--oro-testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 1em; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--filo); vertical-align: top; }
.prosa th { font-weight: 600; color: var(--testo-2); font-size: 13px; }
.aggiornato { font-size: 14px; color: var(--testo-2); }
/* le tabelle delle informative sul telefono: una scheda per riga, niente pagina che sborda (errore n. 41) */
@media (max-width: 734px) {
  .prosa table, .prosa tbody, .prosa tr, .prosa td { display: block; width: 100%; }
  .prosa thead { display: none; }
  .prosa tr { padding: 12px 0; border-bottom: 1px solid var(--filo); }
  .prosa td { border: 0; padding: 3px 0; }
}
.avvolgi-tabella { overflow-x: auto; }

/* ---------------------------------------------------------------- il menu */
.sezioni-menu {
  position: sticky; top: var(--barra); z-index: 20; background: var(--vetro);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--filo-tenue);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sezioni-menu { background: var(--fondo); } }
.sezioni-menu .scorri { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px max(var(--margine), (100% - var(--largo)) / 2); }
.sezioni-menu .scorri::-webkit-scrollbar { display: none; }
.sezioni-menu a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--testo-2); white-space: nowrap; transition: background-color .2s, color .2s; }
.sezioni-menu a:hover { color: var(--testo); }
.sezioni-menu a.attiva { background: var(--testo); color: var(--fondo); }
.strumenti { display: grid; gap: 14px; margin: clamp(26px, 4vw, 44px) 0 clamp(20px, 3vw, 30px); }
.cerca { position: relative; }
.cerca svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--testo-2); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.cerca input { width: 100%; min-height: 50px; padding: 12px 18px 12px 46px; border: 0; border-radius: 14px; background: var(--tessera); color: var(--testo); font: 400 17px var(--font); letter-spacing: -.01em; -webkit-appearance: none; appearance: none; }
.cerca input::placeholder { color: var(--testo-3); }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--tessera); color: var(--testo); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.filtro[aria-pressed="true"] { background: var(--testo); color: var(--fondo); }
.filtro[aria-pressed="true"]::before { content: '\2713'; font-size: 13px; }
.avviso-menu { font-size: 14px; color: var(--testo-2); padding: 14px 16px; border-radius: var(--r-piccolo); background: var(--tessera); }
.nessuno { padding: 40px 0; text-align: center; color: var(--testo-2); }
@media (min-width: 900px) { .strumenti { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* il titolo della sezione deve arrivare appena sotto la striscia (barra 52 + striscia ~52): html ha gia' scroll-padding-top
   barra+16, la sezione ha 40-72 px di spazio sopra il titolo, quindi qui si toglie un poco */
.menu-sezione { padding-top: clamp(40px, 6vw, 72px); scroll-margin-top: -10px; }
.menu-sezione > header { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--filo); }
.menu-sezione h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.032em; }
.menu-sezione .traduzioni { font-size: 14px; color: var(--testo-3); }
.menu-sezione .descrizione { color: var(--testo-2); max-width: 40em; }
.gruppo-menu { margin: 26px 0 0; font-size: 13px; font-weight: 600; color: var(--oro-testo); }
.voci-menu { display: grid; grid-template-columns: minmax(0, 1fr); }
.voce { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--filo-tenue); }
.voce .riga { display: flex; align-items: baseline; gap: 10px; }
.voce .numero { flex: none; min-width: 34px; font-size: 12.5px; font-weight: 600; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.voce .nome { font-size: 18px; font-weight: 600; letter-spacing: -.018em; line-height: 1.3; min-width: 0; }
.voce .prezzo { margin-left: auto; padding-left: 12px; flex: none; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voce .prezzo small { font-weight: 400; color: var(--testo-3); }
.voce .desc, .voce .desc-lingua, .voce .segni { padding-left: 44px; }
.voce .desc { color: var(--testo-2); font-size: 16px; line-height: 1.45; }
.voce .desc-lingua { color: var(--testo-3); font-size: 14px; font-style: italic; }
.voce .segni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.segno { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--tessera); color: var(--testo-2); }
.segno.casa { background: color-mix(in srgb, var(--oro) 20%, var(--fondo)); color: var(--oro-testo); }
.voce:not(:has(.numero)) .desc, .voce:not(:has(.numero)) .desc-lingua, .voce:not(:has(.numero)) .segni { padding-left: 0; }
@media (min-width: 900px) {
  .voci-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
}
.note-menu { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 8px; color: var(--testo-2); font-size: 15px; }
.vini { margin-top: 30px; padding: 22px 26px; border-radius: var(--r-medio); background: var(--tessera); }
.vini h3 { font-size: 19px; }
.vini ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.vini li { display: flex; justify-content: space-between; gap: 12px; }

/* allergeni */
.tabella-allergeni { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabella-allergeni caption { text-align: left; color: var(--testo-2); font-size: 14px; padding-bottom: 14px; }
.tabella-allergeni th, .tabella-allergeni td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--filo); vertical-align: top; }
.tabella-allergeni th { font-size: 13px; font-weight: 600; color: var(--testo-2); }
.tabella-allergeni td:first-child { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--oro-testo); width: 44px; }
.tabella-allergeni .dettaglio { color: var(--testo-2); font-size: 14px; }
.tabella-allergeni a { color: var(--oro-testo); white-space: nowrap; }
.allergene-blocco { padding: 22px 0; border-top: 1px solid var(--filo); scroll-margin-top: calc(var(--barra) + 20px); }
.allergene-blocco h3 { font-size: 20px; }
.allergene-blocco h3 span { color: var(--oro-testo); margin-right: 8px; }
.allergene-blocco p { margin-top: 8px; color: var(--testo-2); font-size: 15.5px; }

/* ---------------------------------------------------------------- prenotazione */
.prenota-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .prenota-griglia { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.modulo { background: var(--tessera); border-radius: var(--r-grande); padding: clamp(24px, 3.6vw, 44px); }
.passi-modulo { display: flex; gap: 6px; margin-bottom: 26px; }
.passi-modulo span { flex: 1; padding: 9px 6px; border-radius: 999px; background: var(--fondo); color: var(--testo-2); font-size: 13.5px; font-weight: 600; text-align: center; white-space: nowrap; transition: background-color .25s, color .25s; }
.passi-modulo span.attivo { background: var(--testo); color: var(--fondo); }
.passi-modulo span.fatto { color: var(--oro-testo); }
.campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo.intero { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo label, .campo .etichetta { font-size: 14px; font-weight: 600; }
.obbl { color: var(--oro-testo); }
/* le spunte (privacy, salute) restano caselle vere: con lo stile dei campi di testo diventavano un rettangolo senza segno
   di spunta (12/10/2026) */
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--filo); border-radius: 12px; background: var(--fondo); color: var(--testo);
  font: 400 17px/1.4 var(--font); letter-spacing: -.01em; -webkit-appearance: none; appearance: none;   /* 17 px: sotto i 16 iOS ingrandisce */
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--testo-2) 50%), linear-gradient(135deg, var(--testo-2) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro-testo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 30%, transparent); }
.campo .aiuto { font-size: 13.5px; color: var(--testo-2); }
.campo.errore input, .campo.errore select, .campo.errore textarea { border-color: var(--rosso); }
.messaggio-errore { font-size: 13.5px; color: var(--rosso); font-weight: 500; }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--filo); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.scelta input:checked + span { background: var(--testo); color: var(--fondo); border-color: var(--testo); }
.scelta input:focus-visible + span { outline: 2px solid var(--oro-testo); outline-offset: 2px; }
.riepilogo { margin-bottom: 18px; padding: 18px 20px; border-radius: var(--r-piccolo); background: var(--fondo); }
.riepilogo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-size: 15.5px; }
.riepilogo dt { color: var(--testo-2); }
.riepilogo dd { font-weight: 600; overflow-wrap: anywhere; }
.salute { padding: 14px 16px; border-radius: var(--r-piccolo); background: var(--fondo); }
.salute summary { cursor: pointer; font-weight: 600; font-size: 15.5px; }
.salute p { margin: 10px 0 12px; font-size: 14px; color: var(--testo-2); }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.consenso input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--oro-testo); }
.consenso a { color: var(--oro-testo); text-decoration: underline; text-underline-offset: .15em; }
.azioni-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.azioni-modulo .destra { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
/* ultimo passo: «Invia su WhatsApp» e «Invia senza WhatsApp» in alto, «Indietro» sotto (12/10/2026) */
.modulo.ultima .azioni-modulo { flex-direction: column-reverse; align-items: flex-start; }
.modulo.ultima .azioni-modulo .destra { margin-left: 0; }
.esito { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-piccolo); font-size: 15.5px; font-weight: 500; }
.esito.ok { background: color-mix(in srgb, var(--verde) 14%, var(--fondo)); color: var(--testo); }
.esito.ko { background: color-mix(in srgb, var(--rosso) 12%, var(--fondo)); color: var(--testo); }
.nota-modulo { margin-top: 16px; font-size: 14px; color: var(--testo-2); }
.laterale-prenota { display: grid; gap: 16px; }
.pillola.wa { background: var(--wa); color: #0b2e17; }
.pillola.wa:hover { background: #1fbd5a; }
.pillola.wa svg { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- galleria e menu stampato */
.mosaico { columns: 1; column-gap: 14px; }
.mosaico figure { break-inside: avoid; margin: 0 0 14px; border-radius: var(--r-medio); overflow: hidden; background: var(--tessera); position: relative; cursor: zoom-in; }
.mosaico img { width: 100%; }
.mosaico figcaption { padding: 12px 16px 14px; font-size: 14.5px; color: var(--testo-2); }
@media (min-width: 640px) { .mosaico { columns: 2; } }
@media (min-width: 1000px) { .mosaico { columns: 3; column-gap: 18px; } .mosaico figure { margin-bottom: 18px; } }
.pagine-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pagine-menu a { display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--tessera); cursor: pointer; box-shadow: 0 0 0 1px var(--filo-tenue); transition: transform .3s var(--uscita); }
.pagine-menu a:hover { transform: translateY(-3px); }
.pagine-menu img { width: 100%; }
@media (min-width: 735px) { .pagine-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

.lente { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 56px 12px 48px; }
.lente img { max-width: min(100%, 1100px); max-height: calc(100svh - 120px); width: auto; height: auto; border-radius: 10px; object-fit: contain; }
.lente button { position: absolute; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lente button:hover { background: rgba(255, 255, 255, .24); }
.lente button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lente .chiudi { top: 12px; right: 12px; }
.lente .prec { left: 12px; top: 50%; transform: translateY(-50%); }
.lente .succ { right: 12px; top: 50%; transform: translateY(-50%); }
.lente .conta { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .78); font-size: 14px; }

/* ---------------------------------------------------------------- «Sfoglia il menu» (public/assets/js/sfoglia.js) */
.sfoglia-pulsante svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.pillola.sfoglia-pulsante { gap: 9px; }
html.sfoglia-aperto, html.sfoglia-aperto body { overflow: hidden; }
html.sfoglia-aperto .pallino-wa { opacity: 0; visibility: hidden; }
.sfoglia {
  position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(120% 90% at 50% 42%, #2a241d 0%, #12100e 58%, #070707 100%); color: #f5f5f7;
  opacity: 0; transition: opacity .32s var(--uscita); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.sfoglia.sf-visibile { opacity: 1; }
.sf-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 6px; }
.sf-titolo { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.sf-titolo strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.sf-conta { font-size: 14px; color: #a1a1a6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-azioni { display: flex; gap: 8px; }
.sf-bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #f5f5f7; font: 500 14px var(--font); cursor: pointer;
  text-decoration: none; transition: background-color .2s, transform .16s var(--uscita);
}
.sf-bottone:hover { background: rgba(255, 255, 255, .18); }
.sfoglia :focus-visible { outline: 1.5px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
.sf-bottone:active { transform: scale(.95); }
.sf-bottone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .sf-cerca span { display: none; } .sf-titolo strong { display: none; } }
.sf-palco { position: relative; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
.sf-palco:active { cursor: grabbing; }
.sf-scena { position: relative; }
.sf-entra.sf-visibile .sf-scena { animation: sf-arriva .9s var(--uscita) both; }
@keyframes sf-arriva { from { opacity: 0; transform: translateY(26px) scale(.86); } to { opacity: 1; transform: none; } }
.sf-libro { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: calc(var(--pw) * 4.4); }
.sfoglia:not(.sf-doppio) .sf-libro { width: var(--pw); }
.sf-pagina { position: absolute; top: 0; width: var(--pw); height: var(--ph); background: #e9e3d6; overflow: hidden; }
.sf-sx { left: 0; border-radius: 4px 0 0 4px; box-shadow: -14px 22px 50px rgba(0, 0, 0, .5); }
.sf-dx { left: var(--pw); border-radius: 0 4px 4px 0; box-shadow: 14px 22px 50px rgba(0, 0, 0, .5); }
.sfoglia:not(.sf-doppio) .sf-sx { display: none; }
.sfoglia:not(.sf-doppio) .sf-dx { left: 0; border-radius: 4px; box-shadow: 0 22px 50px rgba(0, 0, 0, .55); }
.sf-pagina.vuota, .sf-faccia.vuota { background: transparent; box-shadow: none; }
.sf-faccia.vuota.sf-retro { background: linear-gradient(90deg, #d9d2c3, #ebe5d9); }
.sf-pagina img, .sf-faccia img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.sf-pagina.vuota img, .sf-faccia.vuota img { display: none; }
/* la rilegatura: un'ombra morbida al centro delle due pagine, solo col libro aperto */
.sf-dorso { position: absolute; top: 0; left: calc(var(--pw) - 36px); width: 72px; height: var(--ph); pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .14) 40%, rgba(0, 0, 0, .32) 50%, rgba(0, 0, 0, .14) 60%, rgba(0, 0, 0, 0)); }
.sfoglia:not(.sf-doppio) .sf-dorso, .sf-chiuso .sf-dorso { display: none; }
/* le ombre che il foglio getta sulle pagine sotto mentre gira */
.sf-ombra { position: absolute; top: 0; width: var(--pw); height: var(--ph); pointer-events: none; opacity: 0; z-index: 2; }
.sf-ombra-dx { left: var(--pw); background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 62%); }
.sf-ombra-sx { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 62%); }
.sfoglia:not(.sf-doppio) .sf-ombra-dx { left: 0; }
.sfoglia:not(.sf-doppio) .sf-ombra-sx { display: none; }
/* il foglio che gira: ruota sulla rilegatura, davanti e dietro sono due facce */
.sf-foglio { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; z-index: 3; will-change: transform; }
.sf-foglio.avanti { left: var(--pw); transform-origin: 0 50%; }
.sf-foglio.indietro { left: 0; transform-origin: 100% 50%; }
.sf-foglio.singolo { left: 0; transform-origin: 0 50%; }
.sf-faccia { position: absolute; inset: 0; overflow: hidden; background: #e9e3d6; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sf-retro { transform: rotateY(180deg); }
.sf-luce { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.sf-fronte .sf-luce { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 55%, rgba(255, 255, 255, .08)); }
.sf-retro .sf-luce { background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%); }
.sf-foglio.indietro .sf-fronte .sf-luce { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 55%, rgba(255, 255, 255, .08)); }
.sf-foglio.indietro .sf-retro .sf-luce { background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%); }
.sf-libro.sf-sfuma .sf-pagina img { animation: sf-sfuma .22s ease both; }
/* mentre arrivano le prime pagine: la carta che respira, niente spinner */
.sf-attesa .sf-dx { background: linear-gradient(100deg, #e9e3d6 30%, #f4efe4 50%, #e9e3d6 70%) 0 0 / 300% 100%; animation: sf-carta 1.2s linear infinite; }
@keyframes sf-carta { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sf-sfuma { from { opacity: .25; } to { opacity: 1; } }
.sf-freccia {
  position: absolute; top: 50%; z-index: 5; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s, opacity .25s;
}
.sf-freccia:hover { background: rgba(255, 255, 255, .2); }
.sf-freccia svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-prec { left: 20px; }
.sf-succ { right: 20px; }
.sf-freccia[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 859px) { .sf-freccia { display: none; } }
.sf-piede { display: grid; justify-items: center; gap: 4px; padding: 6px 20px calc(12px + env(safe-area-inset-bottom)); }
.sf-scorri { width: min(520px, 100%); accent-color: var(--oro); height: 28px; }
.sf-aiuto { margin: 0; font-size: 12.5px; color: #8e8e93; }
.sf-zoom { position: absolute; inset: 0; z-index: 20; overflow: auto; overscroll-behavior: contain; background: #0b0a09; display: grid; justify-items: center; align-content: start; gap: 16px; padding: calc(64px + env(safe-area-inset-top)) 12px 40px; touch-action: pan-x pan-y pinch-zoom; }
.sf-zoom img { width: min(100%, 1100px); height: auto; border-radius: 4px; }
.sf-zoom-chiudi { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 16px; z-index: 21; }
/* schermo intero vero (dove il browser lo permette): due icone, si vede quella giusta */
.sf-intero .sf-icona-chiudi, .sf-intero[aria-pressed="true"] .sf-icona-apri { display: none; }
.sf-intero[aria-pressed="true"] .sf-icona-chiudi { display: block; }
.sf-aiuto-breve { display: none; }
/* il telefono in orizzontale: il libro alto quanto lo schermo, i comandi ai lati sopra il fondo scuro */
.sfoglia.sf-compatto { grid-template-rows: minmax(0, 1fr); }
.sf-compatto .sf-testa {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; align-items: flex-start; pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
}
.sf-compatto .sf-testa > * { pointer-events: auto; }
.sf-compatto .sf-titolo { flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 4px; }
.sf-compatto .sf-titolo strong { display: none; }
.sf-compatto .sf-aiuto-breve { display: block; font-size: 12px; color: #8e8e93; max-width: 9em; line-height: 1.3; animation: sf-svanisce 4.5s ease forwards; }
@keyframes sf-svanisce { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.sf-compatto .sf-azioni { flex-direction: column; gap: 8px; }
.sf-compatto .sf-cerca span { display: none; }
.sf-stretto .sf-titolo { display: none; }
.sfoglia:focus { outline: none; }
.sf-compatto .sf-palco { padding: max(6px, env(safe-area-inset-top)) 0 max(6px, env(safe-area-inset-bottom)); }
.sf-compatto .sf-piede, .sf-compatto .sf-freccia { display: none; }
@media (prefers-reduced-motion: reduce) { .sfoglia { transition: none; } .sf-entra.sf-visibile .sf-scena { animation: none; } .sf-compatto .sf-aiuto-breve { animation: none; } }

/* ---------------------------------------------------------------- il pallino di WhatsApp */
/* regola di Simone del 09/10/2026: in basso a destra, agganciato dall'ALTO all'altezza piccola (100svh), cosi' non
   segue la barra di Safari e non le finisce sotto; niente rimbalzi; si dissolve col menu aperto e vicino al piede */
.pallino-wa {
  position: fixed; z-index: 50; right: 18px; top: calc(100vh - 58px - 96px); top: calc(100svh - 58px - 96px);
  width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: opacity .3s var(--uscita), transform .16s var(--uscita), visibility 0s;
}
.pallino-wa svg { width: 30px; height: 30px; fill: currentColor; }
.pallino-wa:active { transform: scale(.94); }
.pallino-wa .fumetto { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 8px 14px; border-radius: 999px; background: var(--testo); color: var(--fondo); font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) { .pallino-wa:hover .fumetto { opacity: 1; } }
@media (min-width: 900px) { .pallino-wa { width: 60px; height: 60px; right: 24px; top: auto; bottom: 24px; } }
.pallino-wa.via, html.menu-aperto .pallino-wa, html.ap-on .pallino-wa { opacity: 0; visibility: hidden; transition: opacity .3s var(--uscita), visibility 0s .3s; }

/* ---------------------------------------------------------------- piede */
.piede { background: var(--grigio); color: var(--testo-2); font-size: 12.5px; line-height: 1.5; padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); }
.piede-alto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--filo); }
.piede-marchio img { width: 132px; }
.piede-recapiti { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; }
.piede-recapiti a { color: var(--testo); }
.social { display: flex; gap: 8px; }
.social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--carta); color: var(--testo); transition: background-color .2s; }
.social a:hover { background: var(--filo); }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.piede-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding-block: 24px; border-bottom: 1px solid var(--filo); }
.piede-colonne > div { min-width: 0; }
.piede-colonne a { overflow-wrap: anywhere; }
@media (max-width: 734px) { .piede-colonne > div:first-child { grid-column: 1 / -1; } }
.piede-colonne h2 { font-size: 12.5px; font-weight: 600; color: var(--testo); letter-spacing: 0; margin-bottom: 8px; }
.piede-colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.piede-colonne a { color: var(--testo-2); }
.piede-colonne .orari-piede { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.piede a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 735px) { .piede-colonne { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dati-societari { padding-block: 18px; border-bottom: 1px solid var(--filo); }
.copy-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; }
.copy-bar-voci { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.copy-bar a { color: var(--testo-2); }
.credit { color: var(--testo-2) !important; opacity: .92; }
.cuore { color: #ff0031; }

/* ---------------------------------------------------------------- l'apertura (apertura.js, regole in testa al file) */
/* il velo e' nero come il fondo del loro marchio: il DUOMO d'oro si compone lettera per lettera, poi il sipario sale */
html.ap-on, html.ap-on body { overflow: hidden; }
html.ap-on body > *:not(#ap) { visibility: hidden; }
#ap {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #0b0a09; cursor: pointer;
  will-change: transform; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
#ap { --ap-oro: #CAA063; --ap-luce: #F4DDA9; }
#ap .ap-tinta { fill: var(--ap-oro); }
.ap-palco { width: min(80vw, 560px); opacity: 0; transform: translateY(-2vh); }
#ap.ap-pronto .ap-palco { opacity: 1; }
.ap-palco svg { width: 100%; height: auto; overflow: visible; }
.ap-piede { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; }
.ap-salta { margin: 0; font: 500 11px/1.2 var(--font); letter-spacing: .3em; text-transform: uppercase; color: rgba(245, 245, 247, .5); opacity: 0; white-space: nowrap; }
.ap-firma { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: 999px; color: #f5f5f7; font: 500 14.5px/1 var(--font); letter-spacing: -.005em; opacity: 0; }
.ap-firma img { width: auto; height: 17px; }
@media (hover: hover) { .ap-firma:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (prefers-reduced-motion: reduce) { html.ap-on, html.ap-on body { overflow: auto; } html.ap-on body > *:not(#ap) { visibility: visible; } #ap { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .menu-tel, .menu-tel[data-aperto] { transition: none; }
  .piatto .rotea { transform: none; opacity: 1; }
}
@media print {
  .barra, .menu-tel, .pallino-wa, #ap, .frecce, .sezioni-menu, .strumenti { display: none !important; }
  body { padding-top: 0; }
  .sezione, .vetrina { padding-block: 24px; }
  .vetrina { background: none; color: inherit; }
}
.prosa .attacco { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; letter-spacing: -.02em; font-weight: 500; margin-bottom: 1.4em; }
.prosa .attacco strong { font-weight: 650; }