/* El Tropico Latino — un solo foglio di stile. Token e contrasti misurati: DESIGN.md §17.
   Ordine dei livelli: reset, tokens, base, layout, components, utilities. */
@layer reset, tokens, base, layout, components, utilities;

/* ─────────── Caratteri (Archivo: OFL; Roboto Slab: Apache 2.0; licenze in assets/fonts/). Da file:// Chrome li
   blocca: lì vale .font-locale ─────────── */
@font-face {
  font-family: 'Roboto Slab';
  src: url('../fonts/roboto-slab-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
/* Riserve con le metriche regolate (misurate con fontkit, DESIGN.md §17): niente salti quando arriva il font vero.
   Per i titoli la riserva è un graziato (Times New Roman, o Liberation Serif che ha le stesse misure). */
@font-face { font-family: 'Archivo Riserva'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); font-weight: 100 549; size-adjust: 98.1%; ascent-override: 89.5%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Riserva'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); font-weight: 550 900; size-adjust: 98.1%; ascent-override: 89.5%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: 'Slab Riserva'; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('LiberationSerif-Bold'); font-weight: 800; size-adjust: 109.7%; ascent-override: 95.5%; descent-override: 24.7%; line-gap-override: 0%; }

/* ─────────── Reset ─────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  dialog { padding: 0; border: 0; max-width: none; max-height: none; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }
}

/* ─────────── Token ─────────── */
@layer tokens {
  :root {
    /* Palette dal marchio vero, misurata sul logo (DESIGN.md §17). Sei colori pieni, niente grigi, niente trasparenze */
    --bianco: #FFFFFF;  /* bianco targa: fondo di tutte le pagine e dei campi (il logo nasce sul bianco) */
    --nero: #253038;    /* nero scritta: l'inchiostro di «EL TROPICO LATINO». Testo, bordi, ombre (13,47:1) */
    --magenta: #D61D73; /* magenta nastro: pulsante primario, muro Cocktail (bianco sopra 4,90:1) */
    --verde: #3D7C2B;   /* verde menu: il verde del pappagallo come lo stampa il loro menu. Link, muro Prenota (5,10:1) */
    --giallo: #FBCA1E;  /* giallo sole: il sole della loro icona. Oggi, blocco data, pulsante sul verde. Mai testo su bianco */
    --rosso: #CD2B3D;   /* rosso occhiali: il peperoncino del piccante e l'icona «Chiuso» (5,24:1) */

    /* Caratteri. Roboto Slab 800 solo da 24 px in su (titoli); Archivo 400 testo, 600 interfaccia, 700 nomi e prezzi */
    --f-titoli: 'Roboto Slab', 'Slab Riserva', 'Times New Roman', serif;
    --f-testo: 'Archivo', 'Archivo Riserva', Arial, sans-serif;

    /* Scala classica 16 · 18 · 21 · 24 · 36 · 48 · 60 · 72, fluida tra 375 e 1280 px. Niente sotto i 16 px */
    --t-nota: 1rem;
    --t-testo: 1.125rem;
    --t-voce: 1.3125rem;
    --t-lead: clamp(1.125rem, 1.047rem + 0.331vw, 1.313rem);
    --t-stato: clamp(1.313rem, 1.235rem + 0.331vw, 1.5rem);
    --t-h3: 1.5rem;
    --t-ora: clamp(2.25rem, 1.939rem + 1.326vw, 3rem);
    --t-h2: clamp(2.25rem, 1.628rem + 2.652vw, 3.75rem);
    --t-h1: clamp(3rem, 2.378rem + 2.652vw, 4.5rem);

    /* Spazi: base 8 con un mezzo passo da 4 */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 7.5rem;
    --s-sezione: clamp(4.5rem, 3.257rem + 5.304vw, 7.5rem);

    /* Griglia: 4 colonne, 8 da 640 px, 12 da 1024 px; contenuto massimo 1240 px */
    --max: 77.5rem;
    --margine: clamp(1rem, 4vw, 3.5rem);
    --gap: 1rem;
    --colonne: 4;

    /* Forme e ombre piene sfalsate, come il contorno nero che chiude il pappagallo e il nastro del logo */
    --r-foto: 4px;
    --r-campo: 6px;
    --r-pulsante: 12px;
    --ombra-1: 3px 3px 0 var(--nero);
    --ombra-2: 6px 6px 0 var(--nero);
    --linea: 2px solid var(--nero);

    /* Anello di focus: il colore cambia col fondo (≥ 3:1 sempre). I muri ridefiniscono --anello */
    --anello: var(--nero);

    /* Altezze fisse: testata (56 → 72 px) e barra azioni mobile (64 px + zona sicura) */
    --testata-h: 3.5rem;
    --barra-h: calc(4rem + env(safe-area-inset-bottom, 0px));
    --durata: 160ms;

    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253038' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  @media (min-width: 40rem) { :root { --colonne: 8; } }
  @media (min-width: 64rem) { :root { --colonne: 12; --gap: 1.5rem; --testata-h: 4.5rem; --barra-h: 0px; } }
  /* Telefono di traverso: la barra azioni sparisce per lasciare spazio al contenuto */
  @media (max-width: 63.99rem) and (max-height: 30rem) { :root { --barra-h: 0px; } }
  /* Aperto da file:// (doppio clic): solo riserve, così Chrome non chiede i font e la console resta pulita */
  .font-locale {
    --f-titoli: 'Slab Riserva', 'Times New Roman', serif;
    --f-testo: 'Archivo Riserva', Arial, sans-serif;
  }
}

/* ─────────── Base ─────────── */
@layer base {
  html {
    color-scheme: light; /* niente tema scuro: il logo nasce sul bianco (DESIGN.md §13.20 e §17) */
    background: var(--bianco);
    scroll-padding-top: calc(var(--testata-h) + var(--s-3));
    scroll-padding-bottom: calc(var(--barra-h) + var(--s-3));
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    min-height: 100vh;
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--f-testo);
    font-size: var(--t-testo);
    font-weight: 400;
    line-height: 1.55;
    padding-bottom: var(--barra-h);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .nav-aperta body { overflow: hidden; }

  h1, h2, h3 {
    font-family: var(--f-titoli);
    font-weight: 800;          /* Roboto Slab: si carica solo l'800, niente grassetto finto */
    font-synthesis: none;
    color: inherit;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.015em; }
  h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.01em; max-inline-size: 16ch; } /* righe corte e grasse, come la scritta del logo */
  h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: 0; }
  p, li, dd, figcaption { text-wrap: pretty; }
  p { max-inline-size: 62ch; }
  .lead { font-size: var(--t-lead); line-height: 1.45; }
  strong, b { font-weight: 700; }
  small { font-size: var(--t-nota); }
  address { font-style: normal; }

  a { color: var(--verde); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 3px; }

  :focus-visible {
    outline: 3px solid var(--anello);
    outline-offset: 3px;
    scroll-margin-block: calc(var(--testata-h) + var(--s-3)) calc(var(--barra-h) + var(--s-3));
  }
  [tabindex='-1']:focus { outline: none; }
  ::selection { background: var(--giallo); color: var(--nero); }
  [hidden] { display: none !important; }

  /* Cifre tabellari dove si allineano numeri: prezzi, orari, date */
  table, time { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

/* ─────────── Layout ─────────── */
@layer layout {
  .contenitore { width: min(100% - 2 * var(--margine), var(--max)); margin-inline: auto; }
  .sezione { padding-block: var(--s-sezione); }
  /* Le sezioni si separano con un solo respiro (72 → 120 px), non due */
  .sezione + .sezione, .hero + .sezione { padding-block-start: 0; }
  .sezione__testa { display: grid; gap: var(--s-3); margin-block-end: var(--s-6); }
  .sezione__testa > p { font-size: var(--t-lead); line-height: 1.45; }
  .griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--gap); }

  /* I due muri di colore pieno, dai colori del logo: il magenta del nastro (Cocktail) e il verde del pappagallo
     (Prenota). Cominciano e finiscono con un taglio dritto, a tutta larghezza */
  .muro { color: var(--bianco); }
  .muro a { color: inherit; }
  .muro--magenta { background: var(--magenta); --anello: var(--bianco); }
  .muro--verde { background: var(--verde); --anello: var(--bianco); }
  .muro--verde h2 { color: var(--giallo); } /* 3,30:1, solo testo grande (titolo da 36 px in su) */

  .salta {
    position: absolute; left: var(--s-3); top: -10rem; z-index: 100;
    padding: var(--s-2) var(--s-3); border-radius: var(--r-campo);
    background: var(--nero); color: var(--bianco); font-weight: 600; --anello: var(--giallo);
  }
  .salta:focus { top: var(--s-2); }

  .noscript { padding-block: var(--s-3); }
}

/* Griglia a tutta larghezza per le due foto che toccano il bordo dello schermo (hero e Gruppi e feste):
   le colonne esterne valgono quanto il margine, così il contenuto resta sullo stesso filo di .contenitore.
   Linee: 1 = bordo sinistro, 2 = colonna 1, n + 2 = fine dell'ultima colonna, -1 = bordo destro. */
@layer layout {
  .tela {
    --lato: max(var(--margine), (100% - var(--max)) / 2);
    display: grid;
    column-gap: var(--gap);
    grid-template-columns:
      [tela-start] calc(var(--lato) - var(--gap))
      [griglia-start] repeat(var(--colonne), minmax(0, 1fr))
      [griglia-end] calc(var(--lato) - var(--gap))
      [tela-end];
  }
  .tela > * { grid-column: griglia; min-width: 0; }
}

/* ─────────── Componenti ─────────── */
@layer components {
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icona {
    width: 1.5rem; height: 1.5rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  picture { display: block; }
  picture img { width: 100%; height: auto; border-radius: var(--r-foto); }

  /* ── Il logo vero (DESIGN.md §17): un'immagine sola, mai ridisegnata né ricolorata. Nell'hero è l'h1, largo quanto
     la colonna; nella testata compatta e nel piè di pagina torna piccolo. Il PNG ha il fondo trasparente. */
  .logo-hero { line-height: 0; max-inline-size: 36rem; }
  .logo-hero picture, .logo-hero img { width: 100%; height: auto; border-radius: 0; }
  .marchio { display: block; line-height: 0; }
  .marchio img { display: block; width: auto; height: 100%; border-radius: 0; }

  /* L'unico momento al caricamento: il logo si posa (sale di 12 px e si assesta) e lo stato live compare subito dopo.
     Solo trasformazioni sul logo, niente trasparenze: l'immagine si vede dal primo fotogramma (LCP intatto).
     La classe js la mette lo script in testa; senza JS o con la riduzione del movimento tutto è già fermo. */
  @media (prefers-reduced-motion: no-preference) {
    .js .logo-hero img { animation: logo-posa 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .js .insieme-al-logo { animation: compare 360ms 280ms ease-out both; }
  }
  @keyframes logo-posa { from { transform: translateY(0.75rem) scale(0.97); } to { transform: none; } }
  @keyframes compare { from { opacity: 0; } to { opacity: 1; } }
  /* Movimento solo in risposta a un'azione: navigazione e lightbox che si aprono. */
  @keyframes entra { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
  @keyframes appare { from { opacity: 0; } to { opacity: 1; } }

  /* ── Pulsanti: bordo nero e ombra piena sfalsata, come il contorno nero del nastro nel logo. Al passaggio si alzano
     di 1 px, alla pressione «entrano». Varianti sui muri: bianco sul magenta, giallo sul verde (contrasti in DESIGN.md §17). */
  .pulsante {
    --sfondo: var(--magenta); --testo: var(--bianco); --bordo: var(--nero);
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 3.25rem; padding: 0.625rem 1.375rem;
    border: 2px solid var(--bordo); border-radius: var(--r-pulsante);
    background: var(--sfondo); color: var(--testo);
    font-family: var(--f-testo); font-size: var(--t-testo); font-weight: 600; line-height: 1.2; text-align: left;
    text-decoration: none; box-shadow: var(--ombra-1);
    transition: transform var(--durata) ease-out, box-shadow var(--durata) ease-out, background-color var(--durata) ease-out;
  }
  .pulsante .icona { width: 1.375rem; height: 1.375rem; }
  .pulsante:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--nero); }
  .pulsante:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--nero); }
  .pulsante--secondario { --sfondo: transparent; --testo: var(--nero); box-shadow: none; }
  .pulsante--secondario:hover { transform: none; box-shadow: inset 0 0 0 1px var(--bordo); text-decoration: underline 2px; text-underline-offset: 3px; }
  .pulsante--secondario:active { --sfondo: var(--nero); --testo: var(--bianco); transform: none; box-shadow: none; }
  .pulsante--giallo, .muro--verde .pulsante { --sfondo: var(--giallo); --testo: var(--nero); }
  .muro--magenta .pulsante { --sfondo: var(--bianco); --testo: var(--magenta); }
  .muro--magenta .pulsante--secondario { --sfondo: transparent; --testo: var(--bianco); --bordo: var(--bianco); }
  .muro--magenta .pulsante--secondario:active { --sfondo: var(--bianco); --testo: var(--magenta); }
  .pulsante:disabled, .pulsante[aria-disabled='true'] {
    --sfondo: var(--bianco); --testo: var(--nero); --bordo: var(--nero);
    border-style: dashed; box-shadow: none; transform: none; cursor: not-allowed; text-decoration: none;
  }
  .azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

  /* ── Testata: in cima è bianca con il solo pulsante (il logo grande è nell'hero); allo scroll compare il logo
     piccolo e il filo nero. Nelle altre pagine il logo piccolo c'è sempre. */
  .testata {
    position: sticky; top: 0; z-index: 40;
    height: var(--testata-h);
    background: var(--bianco);
    border-bottom: 2px solid transparent;
    transition: border-color var(--durata) ease-out;
  }
  .testata.is-compatta, .nav-aperta .testata { border-bottom-color: var(--nero); }
  .testata__barra { display: flex; align-items: center; gap: var(--s-4); height: 100%; }
  .testata__marchio {
    display: block; color: var(--nero); text-decoration: none;
    visibility: hidden; opacity: 0;
    transition: opacity var(--durata) ease-out, visibility var(--durata);
  }
  .testata.is-compatta .testata__marchio, .nav-aperta .testata__marchio { visibility: visible; opacity: 1; }
  .testata__marchio .marchio { height: 2.75rem; }
  .testata__apri {
    margin-inline-start: auto;
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border: 2px solid var(--nero); border-radius: var(--r-pulsante);
    background: var(--bianco); color: var(--nero);
  }
  .testata__apri:hover { box-shadow: inset 0 0 0 1px var(--nero); }
  .testata__apri[aria-expanded='true'] { background: var(--nero); color: var(--bianco); }
  .testata__apri[aria-expanded='true'] .se-chiusa,
  .testata__apri[aria-expanded='false'] .se-aperta { display: none; }
  .testata__azioni { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-4); }
  .testata__link { font-weight: 600; color: var(--nero); padding-block: var(--s-2); }
  .testata__cta { display: none; }

  /* Navigazione mobile: pannello bianco a tutto schermo sotto la testata; il resto della pagina è inert. */
  .nav { display: none; }
  .nav.is-aperta {
    position: fixed; inset: var(--testata-h) 0 0 0; z-index: 39;
    display: flex; flex-direction: column; gap: var(--s-5);
    padding: var(--s-5) var(--margine) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    background: var(--bianco); overflow-y: auto; overscroll-behavior: contain;
    animation: entra 200ms ease-out;
  }
  .nav__lista { display: grid; gap: var(--s-1); }
  .nav__lista a {
    display: block; padding-block: var(--s-2);
    font-family: var(--f-titoli); font-size: var(--t-ora); line-height: 1.1;
    color: var(--nero); text-decoration: none;
  }
  .nav__lista a:hover { text-decoration: underline 3px; text-underline-offset: 6px; }
  .nav__lista a[aria-current] { text-decoration: underline 4px var(--magenta); text-underline-offset: 8px; }
  .nav__prenota { align-self: start; }
  .nav__stato { font-weight: 600; }

  /* ── Hero */
  .hero { padding-block: var(--s-3) var(--s-sezione); }
  .hero__corpo { row-gap: var(--s-6); }
  .hero__testo { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
  .hero .logo-hero { width: 100%; margin-block-end: var(--s-1); }
  .hero__frase { font-size: var(--t-lead); line-height: 1.45; font-weight: 600; }
  .hero__dove a { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--nero); }
  .hero__dove .icona { color: var(--verde); }
  .hero__azioni { display: grid; gap: var(--s-3); width: 100%; margin-block-start: var(--s-3); }
  .hero__azioni .pulsante { justify-content: center; }
  .hero__foto { grid-column: griglia-start / tela-end; }
  .hero__foto img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-foto) 0 0 var(--r-foto); }
  /* Video dell'hero (spento finché non c'è il girato): sopra la foto, con la pausa sempre visibile */
  .hero__foto { position: relative; }
  .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-foto) 0 0 var(--r-foto); }
  .hero__pausa {
    --anello: var(--giallo);
    position: absolute; inset-block-end: var(--s-3); inset-inline-start: var(--s-3);
    display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 2.75rem; padding: 0 var(--s-3);
    border: 2px solid var(--bianco); border-radius: 999px; background: var(--nero); color: var(--bianco);
    font: 600 var(--t-nota) / 1 var(--f-testo); cursor: pointer;
  }

  /* ── Stato live: icona e testo; il colore dell'icona è solo un rinforzo */
  .stato { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-stato); line-height: 1.25; max-inline-size: 30ch; }
  .stato__icona { width: 1.75rem; height: 1.75rem; margin-block-start: 0.05em; color: var(--nero); }
  .stato[data-stato='aperto'] .stato__icona { color: var(--verde); }
  .stato[data-stato='chiuso'] .stato__icona { color: var(--rosso); }
  .stato strong { font-weight: 700; }
  .stato__testo { font-weight: 500; }
  .stato__nota { display: block; font-size: var(--t-nota); font-weight: 600; margin-block-start: var(--s-1); }

  /* ── Sezioni */
  .sezione__testa h2 { max-inline-size: 16ch; }
  .sezione__piede { margin-block-start: var(--s-6); }

  /* La storia: aperture nel muro, allineate ai fili della griglia */
  .storia__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--s-4) var(--gap); }
  .storia__testo { grid-column: 1 / -1; }
  .storia__testo p { margin-block-start: var(--s-3); }
  .storia__testo h2 { margin-block-end: var(--s-4); }
  .storia__vicolo { grid-column: 1 / -1; margin-block-start: var(--s-4); }
  /* Il bancone: la foto vera è di 600 px, quindi resta piccola (mai oltre la sua misura sullo schermo) */
  .storia__bancone { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
  .storia__bancone figcaption { font-size: var(--t-nota); font-weight: 600; }

  /* La serata: orari veri in colonna fissa (è una sequenza nel tempo) */
  .serata__lista { display: grid; gap: var(--s-5); padding: 0; list-style: none; }
  .serata__voce { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; align-content: start; }
  .serata__ora { font-family: var(--f-titoli); font-size: var(--t-ora); line-height: 1; color: var(--magenta); font-variant-numeric: tabular-nums; }
  .serata__voce h3 { margin-block-end: var(--s-1); }

  /* Da provare: la foto del piatto a tutta larghezza anche sul telefono (4:3), nome, testo e prezzo sotto;
     due e tre colonne dove c’è spazio */
  .vetrina { container: vetrina / inline-size; }
  .piatti { display: grid; gap: var(--s-6); }
  .piatto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-content: start; }
  .piatto__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
  .piatto h3 { margin-block-end: var(--s-1); }
  .prezzo { margin-block-start: var(--s-2); font-weight: 700; font-variant-numeric: tabular-nums; }
  .elenco--prezzi li strong { font-weight: 700; }
  .elenco--prezzi { margin-block: var(--s-3) var(--s-5); }
  @container vetrina (min-width: 40rem) {
    .piatti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
  }
  @container vetrina (min-width: 60rem) { .piatti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Cocktail e tequila: il muro rosa pieno */
  .cocktail { padding-block: var(--s-sezione); }
  .cocktail__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
  .cocktail__griglia > * { grid-column: 1 / -1; min-width: 0; }
  .cocktail .sezione__testa { margin-block-end: 0; }
  .cocktail__foto { max-width: 30rem; }
  .cocktail__lista { display: grid; gap: var(--s-4); }
  .cocktail__voce h3 { margin-block-end: var(--s-1); }
  .cocktail__chiusa { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-4); align-items: end; }
  .cocktail__fine { display: contents; }
  .cocktail__chiusa .pulsante { grid-column: 1 / -1; justify-self: start; }
  .cocktail__nota { font-size: var(--t-nota); font-weight: 600; }

  /* Gruppi e feste */
  .gruppi__tela { row-gap: var(--s-6); }
  .gruppi__foto { grid-column: tela; }
  .gruppi__foto img { border-radius: 0; aspect-ratio: 3 / 2; object-fit: cover; }
  .gruppi__testo h2 { margin-block-end: var(--s-3); }
  .gruppi__lista { display: grid; margin-block: var(--s-4) var(--s-5); }
  .gruppi__voce { display: grid; gap: var(--s-1); padding-block: var(--s-3); color: var(--nero); text-decoration: none; }
  .gruppi__voce strong { font-size: var(--t-voce); color: var(--verde); text-decoration: underline 2px; text-underline-offset: 4px; }
  .gruppi__voce:hover strong { text-decoration-thickness: 3px; }

  /* Eventi: righe con il blocco data giallo, l'unico elemento in rilievo */
  .eventi-box { container: eventi / inline-size; }
  .eventi { display: grid; gap: var(--s-6); }
  .evento { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .evento__data {
    display: grid; justify-items: start; align-content: center;
    min-height: 6rem; padding: var(--s-2) var(--s-3);
    background: var(--giallo); color: var(--nero);
    border: 2px solid var(--nero); border-radius: var(--r-pulsante); box-shadow: var(--ombra-2);
    font-weight: 600; line-height: 1.15;
  }
  .evento__giorno { font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-ora); line-height: 1; font-variant-numeric: tabular-nums; }
  .evento__testo { display: grid; gap: var(--s-2); justify-items: start; }
  .evento__ora { font-weight: 700; }
  .evento__testo .pulsante { margin-block-start: var(--s-2); }
  @container eventi (min-width: 48rem) {
    .evento__testo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'titolo ora' 'testo azione'; column-gap: var(--s-5); align-items: start; }
    .evento__testo h3 { grid-area: titolo; }
    .evento__ora { grid-area: ora; justify-self: end; }
    .evento__testo > p:not(.evento__ora) { grid-area: testo; }
    .evento__testo .pulsante { grid-area: azione; justify-self: end; margin: 0; }
  }
  .evento__esempio { margin-block-end: var(--s-5); padding-inline-start: var(--s-3); border-inline-start: 4px solid var(--giallo); font-weight: 600; }
  .vuoto { display: grid; gap: var(--s-4); justify-items: start; }
  .vuoto > .icona { width: 2.5rem; height: 2.5rem; color: var(--verde); }
  .vuoto p { font-size: var(--t-lead); line-height: 1.45; }

  /* Galleria: solo foto vere. 2 colonne, 3 dove c'è spazio; celle quadrate, spazi espliciti (doppio = 2×1) */
  .galleria-box { container: galleria / inline-size; }
  .galleria {
    display: grid; gap: var(--gap); grid-auto-flow: dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: calc((100cqw - var(--gap)) / 2);
  }
  @container galleria (min-width: 40rem) {
    .galleria { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 2 * var(--gap)) / 3); }
  }
  .galleria__voce--doppio { grid-column: span 2; }
  .galleria__apri { display: block; width: 100%; height: 100%; border-radius: var(--r-foto); cursor: zoom-in; }
  .galleria__apri { position: relative; }
  .galleria__apri:disabled { cursor: default; } /* senza JS, o finché lo script non prepara la lightbox */
  .galleria__apri picture, .galleria__apri img { width: 100%; height: 100%; object-fit: cover; }
  /* Didascalia visibile, facoltativa (galleria[].didascalia in site-data.js): solo fatti verificati */
  .galleria__didascalia {
    position: absolute; inset-inline-start: var(--s-2); inset-block-end: var(--s-2); max-inline-size: calc(100% - 2 * var(--s-2));
    padding: var(--s-1) var(--s-2); background: var(--nero); color: var(--bianco); border-radius: var(--r-campo);
    font-size: var(--t-nota); font-weight: 600; line-height: 1.3; text-align: left;
  }

  /* Instagram sotto la galleria: il nome del profilo in grande, nel carattere dei titoli */
  .instagram { display: grid; gap: var(--s-2); justify-items: start; margin-block-start: var(--s-6); }
  .instagram__link { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--nero); text-decoration: none; }
  .instagram__link .icona { flex: none; width: 2.75rem; height: 2.75rem; color: var(--magenta); }
  .instagram__link > span { display: grid; gap: var(--s-1); min-width: 0; }
  .instagram__su { font-weight: 600; }
  .instagram__nome {
    font-family: var(--f-titoli); font-weight: 800; font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.1;
    text-decoration: underline 3px var(--magenta); text-underline-offset: 6px; overflow-wrap: anywhere;
  }
  .instagram__link:hover .instagram__nome { text-decoration-thickness: 5px; }
  .instagram__testo { margin-inline-start: calc(2.75rem + var(--s-3)); }

  /* Lightbox su <dialog>: fondo nero scritta, foto intera, pulsanti da 48 px */
  .lightbox {
    width: 100%; height: 100%; max-width: none; max-height: none;
    background: var(--nero); color: var(--bianco); --anello: var(--giallo);
  }
  .lightbox[open] {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: var(--s-3);
    padding: var(--s-3) var(--margine) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    animation: appare 160ms ease-out;
  }
  .lightbox::backdrop { background: var(--nero); }
  .lightbox__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .lightbox__conta { font-weight: 700; font-variant-numeric: tabular-nums; }
  .lightbox__scena { min-height: 0; display: grid; touch-action: pan-y; }
  .lightbox__scena picture { min-height: 0; height: 100%; }
  .lightbox__scena img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
  .lightbox__didascalia { font-size: var(--t-nota); min-height: 3em; }
  .lightbox__frecce { display: flex; gap: var(--s-3); }
  .lightbox__pulsante {
    display: grid; place-items: center; width: 3rem; height: 3rem;
    border: 2px solid var(--bianco); border-radius: var(--r-pulsante); color: var(--bianco);
  }
  .lightbox__pulsante:hover { background: var(--bianco); color: var(--nero); }

  /* Recensioni (pronte, spente finché non ci sono recensioni vere) */
  .recensioni-box ul { display: grid; gap: var(--s-5); }
  .recensione p[role='img'] { display: flex; gap: 2px; color: var(--giallo); }
  .recensione p[role='img'] .icona { fill: currentColor; stroke: var(--nero); }
  .recensione blockquote p { font-size: var(--t-lead); }
  .recensione figcaption { font-weight: 600; margin-block-start: var(--s-2); }

  /* Asporto */
  .asporto__testo { display: grid; gap: var(--s-4); justify-items: start; }
  .asporto__esempi {
    margin-block-start: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-3);
    border: var(--linea); border-radius: var(--r-pulsante); box-shadow: var(--ombra-2);
  }
  .asporto__esempi .info-titolo { margin-block-start: 0; }
  .asporto__esempi .elenco--prezzi { margin-block: var(--s-3); }
  .asporto__consegna { margin-block-start: var(--s-6); display: grid; gap: var(--s-3); }

  /* Dove siamo e orari */
  .dove__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
  .dove__griglia > * { grid-column: 1 / -1; min-width: 0; }
  .indirizzo { font-size: var(--t-lead); line-height: 1.45; font-weight: 600; }
  .dove__zona { margin-block-start: var(--s-2); }
  .orari { width: 100%; max-width: 28rem; margin-block-start: var(--s-5); border-collapse: separate; border-spacing: 0 var(--s-1); }
  .orari caption { text-align: left; font-weight: 700; font-size: var(--t-voce); padding-block-end: var(--s-2); }
  .orari thead th { padding: 0; height: 0; }
  .orari tbody th, .orari td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: middle; }
  .orari tbody th { font-weight: 600; }
  .orari td { font-weight: 700; font-variant-numeric: tabular-nums; }
  .orari tr.is-oggi > * { background: var(--giallo); }
  .orari tr.is-oggi th { border-radius: var(--r-campo) 0 0 var(--r-campo); }
  .orari tr.is-oggi td { border-radius: 0 var(--r-campo) var(--r-campo) 0; }
  .orari__oggi { display: inline-block; margin-inline-start: var(--s-2); padding: 0 var(--s-2); border: 2px solid var(--nero); border-radius: var(--r-campo); font-size: var(--t-nota); font-weight: 700; line-height: 1.4; }
  .orari__nota { font-size: var(--t-nota); margin-block-start: var(--s-2); }
  .info-titolo { font-family: var(--f-testo); font-size: var(--t-voce); font-weight: 700; letter-spacing: 0; margin-block: var(--s-5) var(--s-3); }
  .info { display: grid; gap: var(--s-3); }
  .info li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  .info .icona { color: var(--verde); margin-block-start: 0.1em; }
  .elenco li + li { margin-block-start: var(--s-1); }
  .dove__recensioni { margin-block-start: var(--s-5); }
  .dove__recensioni a { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }

  /* Facciata della mappa: illustrazione statica; l'iframe di Google arriva solo dopo un clic */
  .mappa {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border: 2px solid var(--nero); border-radius: var(--r-campo); box-shadow: var(--ombra-2);
    background: var(--verde); --anello: var(--giallo);
  }
  .mappa__disegno, .mappa__disegno picture, .mappa__disegno img { width: 100%; height: 100%; }
  .mappa__disegno img { object-fit: cover; border-radius: 0; }
  .mappa__indirizzo {
    position: absolute; top: var(--s-3); left: var(--s-3); max-width: calc(100% - 2 * var(--s-3));
    padding: var(--s-1) var(--s-3); background: var(--bianco); color: var(--nero);
    border: 2px solid var(--nero); border-radius: var(--r-campo); font-weight: 700;
  }
  .mappa__carica { position: absolute; left: var(--s-3); bottom: var(--s-3); }
  .mappa iframe { width: 100%; height: 100%; border: 0; }
  .mappa__nota { font-size: var(--t-nota); margin-block: var(--s-4) var(--s-4); }

  /* ── Prenota: il muro verde, il modulo che compone il messaggio WhatsApp */
  .prenota { padding-block: var(--s-sezione); }
  .prenota__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
  .prenota__griglia > * { grid-column: 1 / -1; min-width: 0; }
  .prenota__intro { display: grid; gap: var(--s-4); align-content: start; }
  .prenota__intro .lead { max-inline-size: 34ch; }
  .prenota__tel a { font-weight: 700; }
  .modulo { display: grid; gap: var(--s-5) var(--s-4); align-content: start; }
  .campo { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
  .campo > label, .campo legend { font-weight: 600; }
  .campo legend { margin-block-end: var(--s-2); }
  .campo__aiuto { font-size: var(--t-nota); }
  .campo input, .campo select, .campo textarea {
    width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
    background: var(--bianco); color: var(--nero);
    border: 2px solid var(--nero); border-radius: var(--r-campo);
    font-size: var(--t-testo); line-height: 1.3;
  }
  .campo select { appearance: none; padding-inline-end: 3rem; background: var(--bianco) var(--chevron) no-repeat right 0.875rem center / 1.25rem; }
  .campo textarea { min-height: 7.5rem; resize: vertical; }
  .campo input:hover, .campo select:hover, .campo textarea:hover { box-shadow: inset 0 0 0 1px var(--nero); }
  .campo [aria-invalid='true'] { border-color: var(--giallo); box-shadow: inset 0 0 0 2px var(--giallo); }
  .errore { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-nota); font-weight: 600; }
  .errore:empty { display: none; }
  .errore .icona { width: 1.25rem; height: 1.25rem; color: var(--giallo); margin-block-start: 0.1em; }
  .scelte { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .scelta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 2.75rem; padding: 0.375rem 1rem 0.375rem 0.75rem;
    border: 2px solid var(--bianco); border-radius: var(--r-campo); font-weight: 600; cursor: pointer;
  }
  .scelta input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--nero); }
  .scelta:has(input:checked) { background: var(--bianco); color: var(--nero); --anello: var(--nero); } /* anello nero sul bianco: 13,47:1 */
  .scelta:hover { box-shadow: inset 0 0 0 1px var(--bianco); }
  .riepilogo {
    padding: var(--s-4); background: var(--bianco); color: var(--nero);
    border: 3px solid var(--giallo); border-radius: var(--r-campo); box-shadow: var(--ombra-2);
    --anello: var(--nero);
  }
  .riepilogo p { font-weight: 700; }
  .riepilogo ul { margin-block-start: var(--s-2); padding-inline-start: 1.25rem; }
  .riepilogo a, .muro .riepilogo a { color: var(--verde); }
  .modulo__invio { justify-self: start; }
  .modulo__esito { font-weight: 600; }
  .modulo__esito:empty { display: none; }

  /* ── Piè di pagina: bianco come la targa all'ingresso, con il logo; un filo nero lo stacca da quello che c'è sopra */
  .piede__muro {
    padding-block: var(--s-7) var(--s-6);
    background: var(--bianco); color: var(--nero); border-block-start: 2px solid var(--nero);
    font-size: var(--t-nota);
  }
  .piede a { color: var(--verde); }
  .piede__marchio .marchio { height: 7.5rem; }
  .piede__griglia { display: grid; gap: var(--s-6); }
  .piede__marchio a { display: inline-block; color: var(--nero); }
  .piede address { margin-block-start: var(--s-4); line-height: 1.8; }
  .piede__titolo { font-family: var(--f-testo); font-size: var(--t-testo); font-weight: 700; line-height: 1.3; letter-spacing: 0; max-inline-size: none; margin-block-end: var(--s-3); }
  .piede__orari li + li { margin-block-start: var(--s-1); }
  .piede__social { display: grid; gap: var(--s-1); }
  .piede__social a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; }
  .piede__legale { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-7); }

  /* ── Barra azioni mobile: tre azioni a terzi, icona sopra la parola, mai sopra il contenuto (il corpo ha
     lo stesso spazio in fondo). Sparisce da 1024 px, con la navigazione o la lightbox aperte, in stampa. */
  .barra-azioni {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    height: var(--barra-h); padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--bianco); border-block-start: 2px solid var(--nero);
  }
  .barra-azioni--menu { grid-template-columns: 3fr 2fr; }
  .barra-azioni a {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center;
    min-width: 0; padding-inline: var(--s-3);
    color: var(--nero); text-decoration: none;
    font-size: var(--t-nota); font-weight: 600; line-height: 1.2;
  }
  .barra-azioni a + a { border-inline-start: 2px solid var(--nero); }
  .barra-azioni a:focus-visible { outline-offset: -5px; }
  .barra-azioni a:active { background: var(--nero); color: var(--bianco); }
  .barra-azioni .barra-azioni__prenota { background: var(--magenta); color: var(--bianco); --anello: var(--bianco); }
  .barra-azioni span { white-space: nowrap; }
  @media (max-width: 22.5rem) {
    .barra-azioni a { padding-inline: var(--s-2); }
    .barra-azioni span { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  }
  .nav-aperta .barra-azioni { display: none; }

  /* ── Menu (menu.html) */
  .menu-testa { display: grid; gap: var(--s-3); padding-block: var(--s-6) var(--s-5); }
  .menu-testa h1 { max-inline-size: 12ch; }
  .menu-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block-end: var(--s-sezione); }
  .menu-corpo > * { min-width: 0; }
  .categorie {
    position: sticky; top: var(--testata-h); z-index: 20;
    margin-inline: calc(-1 * var(--margine)); padding: var(--s-2) var(--margine);
    background: var(--bianco); border-block-end: 2px solid var(--nero);
  }
  .categorie__lista { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--s-1); }
  .categorie__lista::-webkit-scrollbar { display: none; }
  .categorie__lista li { flex: none; }
  .chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 2.75rem; padding: 0.25rem var(--s-3);
    border: 2px solid var(--nero); border-radius: var(--r-campo);
    background: var(--bianco); color: var(--nero);
    font-size: var(--t-nota); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  }
  .chip:hover { box-shadow: inset 0 0 0 1px var(--nero); }
  a.chip[aria-current] { background: var(--nero); color: var(--bianco); }
  .chip .icona { display: none; width: 1.125rem; height: 1.125rem; }
  button.chip[aria-pressed='true'] { background: var(--verde); color: var(--bianco); box-shadow: var(--ombra-1); }
  button.chip[aria-pressed='true'] .icona { display: block; }
  .filtri { display: grid; gap: var(--s-3); }
  .filtri__titolo { font-weight: 700; }
  .filtri__chip { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .filtri__piccante { display: flex; flex-wrap: wrap; gap: var(--s-2); width: 100%; }
  .filtri__esito { font-size: var(--t-nota); font-weight: 600; }
  .filtri__nota { font-size: var(--t-nota); }
  /* Categorie: i titoli in verde, come nel menu stampato del locale; tra una categoria e l'altra un filo nero */
  .menu__categoria { scroll-margin-top: 8rem; }
  .menu__categoria + .menu__categoria { margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 2px solid var(--nero); }
  .menu__categoria:first-child { margin-block-start: var(--s-5); }
  .menu__categoria h2 { font-size: clamp(1.75rem, 1.127rem + 2.652vw, 2.5rem); line-height: 1.1; max-inline-size: none; color: var(--verde); }
  .menu__nota { margin-block-start: var(--s-3); font-size: var(--t-nota); }
  .menu__gruppo + .menu__gruppo { margin-block-start: var(--s-6); }
  .menu__sottotitolo { margin-block-start: var(--s-5); font-size: 1.375rem; }
  .menu__sottotitolo + .menu__nota { margin-block-start: var(--s-2); }
  .voci { display: grid; gap: var(--s-5); margin-block-start: var(--s-4); }
  .voce { display: grid; gap: var(--s-2); }
  .voce__riga { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
  .voce__nome { font-family: var(--f-testo); font-size: var(--t-voce); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
  .voce__prezzo { flex: none; min-width: 5.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .voce__riga .voce__prezzo { font-size: var(--t-voce); line-height: 1.3; }
  .voce__formati { display: grid; gap: var(--s-1); }
  .voce__formati li { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
  .etichette { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-nota); font-weight: 600; }
  .etichetta { display: inline-flex; align-items: center; gap: var(--s-2); }
  .etichetta .icona { width: 1.25rem; height: 1.25rem; }
  .etichetta--veg .icona { color: var(--verde); }
  .chile { display: inline-flex; color: var(--rosso); } /* il peperoncino rosso del menu del locale: c'è sempre anche la parola */
  .chile .icona { width: 1.125rem; height: 1.125rem; }
  .voce__allergeni { font-size: var(--t-nota); }
  .menu-vuoto { margin-block-start: var(--s-5); font-size: var(--t-lead); font-weight: 600; }
  .allergeni, .da-sapere { margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 2px solid var(--nero); }
  .allergeni h2, .da-sapere h2 { font-size: clamp(1.5rem, 0.876rem + 2.652vw, 2.25rem); max-inline-size: none; scroll-margin-top: 8rem; }
  .da-sapere .elenco { margin-block-start: var(--s-3); }
  .allergeni > p { margin-block: var(--s-3) var(--s-4); }
  .allergeni__lista { padding-inline-start: 1.75rem; columns: 2 15rem; column-gap: var(--s-6); font-size: var(--t-nota); }
  .allergeni__lista li { break-inside: avoid; padding-block: 2px; }
  .solo-stampa { display: none; }

  /* ── Testi lunghi: privacy */
  .documento { padding-block: var(--s-6) var(--s-sezione); }
  .documento h1 { margin-block-end: var(--s-5); }
  .documento h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); max-inline-size: 24ch; margin-block: var(--s-6) var(--s-3); }
  .documento p + p, .documento p + ul, .documento ul + p { margin-block-start: var(--s-3); }
  .documento ul { padding-inline-start: 1.25rem; max-inline-size: 62ch; }
  .documento li + li { margin-block-start: var(--s-2); }
  .avviso {
    max-inline-size: 46rem; padding: var(--s-4); background: var(--giallo); color: var(--nero);
    border: 2px solid var(--nero); border-radius: var(--r-pulsante); box-shadow: var(--ombra-2);
    font-weight: 700; margin-block-end: var(--s-6);
  }

  /* ── Da 640 px */
  @media (min-width: 40rem) {
    .hero__azioni { grid-auto-flow: column; justify-content: start; width: auto; }
    .hero__foto img { aspect-ratio: 3 / 2; }
    .storia__testo { grid-column: 1 / 7; }
    .storia__vicolo { grid-column: 1 / span 4; }
    .storia__bancone { grid-column: 5 / span 4; grid-template-columns: 1fr; align-self: end; }
    .storia__bancone picture { max-width: 18.75rem; } /* la foto vera è larga 600 px: a densità 2 non si ingrandisce */
    .modulo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .modulo > * { grid-column: span 2; }
    .campo--intero, .modulo > .riepilogo, .modulo__fine { grid-column: 1 / -1; }
    .campo--persone { grid-column: span 1; }
    .campo--occasione { grid-column: span 3; }
    .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .piede__locale { grid-column: 1 / -1; }
  }

  /* ── Da 1024 px: navigazione in riga, colonne della griglia a 12 */
  @media (min-width: 64rem) {
    .testata__apri { display: none; }
    .nav, .nav.is-aperta {
      position: static; display: flex; flex-direction: row; align-items: center; gap: var(--s-5);
      margin-inline-start: auto; padding: 0; overflow: visible; animation: none; background: none;
    }
    .nav__lista { display: flex; gap: var(--s-4); }
    .nav__lista a { font-family: var(--f-testo); font-size: var(--t-testo); font-weight: 600; line-height: 1.2; }
    .nav__lista a:hover { text-underline-offset: 6px; }
    .nav__stato { display: none; }
    .nav__prenota { min-height: 3rem; padding-block: 0.5rem; }
    .testata__cta { display: inline-flex; min-height: 3rem; padding-block: 0.5rem; }
    .testata__marchio .marchio { height: 3.5rem; }

    .hero__testo { grid-column: 2 / 8; align-self: center; }
    .hero__foto { grid-column: 9 / -1; align-self: center; }
    .hero__foto img { aspect-ratio: 4 / 5; } /* da 1024 px torna il taglio verticale: la porta accanto al logo */

    .storia__testo { grid-column: 1 / 6; grid-row: 1; }
    .storia__vicolo { grid-column: 7 / 13; grid-row: 1 / 3; margin: 0; }
    .storia__bancone { grid-column: 1 / 4; grid-row: 2; align-self: end; }

    .serata__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
    .serata__voce { grid-template-columns: 1fr; gap: var(--s-3); }

    .cocktail__griglia { row-gap: var(--s-6); }
    .cocktail .sezione__testa { grid-column: 7 / 13; grid-row: 1; }
    .cocktail__foto {
      grid-column: 1 / 6; grid-row: 1 / 4; align-self: start; max-width: none;
      position: sticky; top: calc(var(--testata-h) + var(--s-5)); /* resta in vista mentre scorre la lista: niente vuoti */
    }
    .cocktail__lista { grid-column: 7 / 13; grid-row: 2; }
    .cocktail__voce { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; }
    .cocktail__voce h3 { margin: 0; grid-row: span 2; }
    .cocktail__voce .prezzo { grid-column: 2; margin-block-start: var(--s-1); }
    .cocktail__chiusa { grid-column: 7 / 13; grid-row: 3; grid-template-columns: 12rem minmax(0, 1fr); }

    .gruppi__foto { grid-column: tela-start / 9; align-self: center; }
    .gruppi__foto img { border-radius: 0 var(--r-foto) var(--r-foto) 0; }
    .gruppi__testo { grid-column: 10 / griglia-end; align-self: center; }

    .asporto__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) var(--gap); align-items: start; }
    .asporto__testo { grid-column: 1 / 7; }
    .asporto__esempi { grid-column: 8 / 13; margin: 0; }
    .asporto__consegna { grid-column: 8 / 13; margin: 0; }

    .dove__info { grid-column: 1 / 6; }
    .dove__mappa { grid-column: 7 / 13; }

    .prenota__intro { grid-column: 1 / 5; }
    .modulo { grid-column: 6 / 13; }

    .piede__griglia { grid-template-columns: 5fr 4fr 3fr; }
    .piede__locale { grid-column: auto; }

    .barra-azioni { display: none; }

    .menu-corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
    .categorie {
      grid-column: 1 / 4; align-self: start; top: calc(var(--testata-h) + var(--s-4));
      max-block-size: calc(100vh - var(--testata-h) - var(--s-6)); overflow-y: auto; overscroll-behavior: contain;
      margin: 0; padding: 0 0 0 4px; border: 0; background: none;
    }
    .categorie__lista { flex-direction: column; align-items: flex-start; gap: var(--s-1); overflow: visible; }
    .categorie .chip { min-height: 2.125rem; padding-block: 0.125rem; } /* le 18 voci stanno in uno schermo da 800 px */
    .menu-contenuto { grid-column: 4 / 11; }
  }
  /* Telefono di traverso: la barra lascia spazio al contenuto */
  @media (max-width: 63.99rem) and (max-height: 30rem) { .barra-azioni { display: none; } }
}

/* ─────────── Utilità ─────────── */
@layer utilities {
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Senza JavaScript: niente pulsanti che non farebbero nulla; la navigazione resta una riga di link. */
  :root:not(.js) .solo-js { display: none !important; }
  :root:not(.js) .testata { position: static; height: auto; padding-block: var(--s-2); border-bottom-color: var(--nero); }
  :root:not(.js) .testata__barra { flex-wrap: wrap; }
  :root:not(.js) .testata__marchio { visibility: visible; opacity: 1; }
  :root:not(.js) .testata__apri { display: none; }
  :root:not(.js) .nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); width: 100%; }
  :root:not(.js) .nav__lista { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
  :root:not(.js) .nav__lista a { font-family: var(--f-testo); font-size: var(--t-testo); font-weight: 600; }
  :root:not(.js) .nav__stato { display: none; }

  @media print {
    @page { margin: 14mm 12mm; }
    html, body { background: var(--bianco); }
    body { padding: 0; font-size: 10.5pt; line-height: 1.4; }
    .barra-azioni, .salta, .piede, .categorie, .filtri, .menu-vuoto, .lightbox, noscript, .testata__apri, .testata__azioni, .nav { display: none !important; }
    .testata { position: static; height: auto; border: 0; }
    .testata__barra { width: auto; }
    .testata__marchio { visibility: visible !important; opacity: 1 !important; }
    .testata__marchio .marchio { height: 2.6cm; } /* il marchio in cima alla prima pagina, come sulla carta del locale */
    .solo-stampa { display: block; margin-block-end: 4mm; font-weight: 600; }
    a { color: inherit; text-decoration: none; }
    .menu-testa { padding: 0 0 4mm; }
    .menu-testa h1 { font-size: 26pt; }
    .menu-corpo { display: block; padding: 0; }
    [data-render='menu'] { columns: 2; column-gap: 10mm; }
    .menu__categoria h2, .allergeni h2, .da-sapere h2 { font-size: 15pt; margin: 5mm 0 2mm; break-after: avoid; color: var(--nero); }
    .menu__categoria + .menu__categoria { margin-block-start: 4mm; padding-block-start: 2mm; border-width: 1px; }
    .menu__categoria:first-child { margin-block-start: 0; }
    .menu__sottotitolo { font-size: 12pt; margin-block-start: 3mm; break-after: avoid; }
    .menu__nota, .filtri__nota { font-size: 9pt; }
    .chile { color: var(--nero); }
    .voci { gap: 3mm; margin: 0; }
    .voce { break-inside: avoid; gap: 1mm; }
    .voce__nome, .voce__riga .voce__prezzo { font-size: 11.5pt; }
    .etichette, .voce__allergeni, .allergeni__lista { font-size: 9pt; }
    .etichetta .icona, .chile .icona { width: 10pt; height: 10pt; }
    .allergeni { margin-block-start: 6mm; padding-block-start: 3mm; break-before: auto; }
    .allergeni__lista { columns: 3; }
  }
}