/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@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; }
}

/* ══════════ BAR TRATTORIA DA LUCIANO E STEFANO — Via Elio Vittorini 24, Ponte Lambro ══════════
   La pagina è la loro sala: la parete verde chiaro con la mensola delle radio d'epoca (l'apertura: il titolo in due righe sfalsate e
   in mezzo la radio che si accende e dice un pranzo, la firma, _tls_firma.mjs), il tavolo di legno chiaro col foglio azzurrino del
   menù del giorno, i piatti come quadri alla parete, il verde acqua delle spalle delle finestre, il legno scuro dei tavoli.
   «BAR TRATTORIA» in egiziano rosso come la fascia sopra la porta. Suez One per i titoli, Yrsa per il testo, Dekko per lo
   stampatello del foglio. */
:root {
  --parete: #D5DBB6;
  --parete-2: #C3CB9F;
  --acqua: #2F7663;
  --legno: #8A5A36;
  --legno-scuro: #3A2415;
  --tavolo: #DEC9A5;
  --giallo: #F2C94C;
  --rosso: #B3261E;
  --crema: #F6E7AE;
  --ottone: #C9A66B;
  --foglio: #D7DFF5;
  --inchiostro: #2B1B10;
  --grigio: #55432F;
  --aperto: #1F7A44;
  --f-insegna: 'Suez One', Georgia, 'Times New Roman', serif;
  --f-testo: 'Yrsa', Georgia, 'Times New Roman', serif;
  --f-mano: 'Dekko', 'Segoe Print', 'Comic Sans MS', cursive;
  --f-stampa: Arial, Helvetica, sans-serif;
  --gutter: 16px;
  --testata-h: 66px;
}
@media (min-width: 760px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Yrsa ha l'occhio piccolo: il testo corrente un po' più grande (prima, con un altro carattere, era 1,06rem) */
body { margin: 0; color: var(--inchiostro); font: 400 1.13rem/1.6 var(--f-testo); font-variant-numeric: lining-nums; background: var(--parete); }
a { color: #8E1D17; }
b, strong { font-weight: 700; }
figure { margin: 0; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 12px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--rosso); outline-offset: 2px; }
.capitolo--acqua :focus-visible, .capitolo--legno :focus-visible, .piede :focus-visible, .action-bar :focus-visible { outline-color: var(--giallo); }
/* finché i caratteri non arrivano il ripiego può essere più largo: una parola lunga va a capo invece di uscire */
h1, h2, h3, h4 { overflow-wrap: anywhere; }
.a-mano { font-family: var(--f-mano); }

/* ── l'occhiello: maiuscolette, con una tacca rossa davanti ── */
.occhio { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 .98rem/1.3 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--legno-scuro); }
.occhio::before { content: ''; flex: none; width: 4px; height: 20px; border-radius: 2px; background: var(--rosso); }
.occhio--chiaro { color: var(--crema); }
.occhio--chiaro::before { background: var(--giallo); }

/* ── la testata: sulla parete, l'insegna della fascia ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--parete); border-bottom: 3px solid var(--legno-scuro); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter); min-height: 63px; }
.insegna { display: inline-flex; flex-direction: column; min-width: 0; text-decoration: none; line-height: 1.05; }
.insegna__bar { font: 400 1.32rem/1 var(--f-insegna); letter-spacing: .05em; text-transform: uppercase; color: var(--rosso); }
.insegna__nome { margin-top: 3px; font: italic 400 1rem/1.1 var(--f-testo); color: var(--legno-scuro); }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 36px; min-height: 40px; padding: 1px 6px 0; border: 2px solid var(--legno-scuro); background: transparent; color: var(--legno-scuro); font: 700 .95rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--legno-scuro); color: var(--crema); }
.chiama { display: none; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 4px; background: var(--rosso); color: #FFF6DC; font: 700 1rem var(--f-testo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.chiama:hover { background: #981F18; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 2px solid var(--legno-scuro); background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--legno-scuro); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 8px var(--gutter) 22px; background: var(--parete); border-bottom: 3px solid var(--legno-scuro); box-shadow: 0 12px 24px rgba(0, 0, 0, .3); }
.menu-mobile a { display: block; padding: 12px 2px 10px; border-bottom: 1px solid #9BA27C; color: var(--legno-scuro); font: 400 1.45rem/1.2 var(--f-insegna); text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 14px; border: 0 !important; border-radius: 4px; background: var(--rosso); color: #FFF6DC !important; padding: 13px 8px !important; font: 700 1.1rem/1.2 var(--f-testo) !important; }

/* ── l'apertura: la parete della sala. Il titolo in due righe sfalsate, in mezzo la radio sulla mensola ── */
/* la mensola della firma esce dal suo SVG e attraversa tutta la parete: qui si ritaglia ai bordi della pagina */
.apertura { background: var(--parete); padding: 26px var(--gutter) 0; overflow-x: clip; }
.apertura > .occhio { max-width: 1180px; margin: 0 auto 6px; }
.scena { position: relative; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto;
  --w: min(560px, 100cqi); --svg-h: calc(var(--w) * 0.78125); --corpo: clamp(1.9rem, 11.4cqi, 5.6rem); --riga: calc(var(--corpo) * 1.06); --stacco: 10px; }
/* il titolo copre tutta la scena: la prima riga in alto a sinistra, la seconda in basso a destra, il vuoto in mezzo è della radio */
.titolo { grid-area: 1 / 1; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-self: start; height: calc(var(--riga) * 2 + var(--svg-h) + var(--stacco) * 2); margin: 0; pointer-events: none; font: 400 var(--corpo)/1.06 var(--f-insegna); letter-spacing: -.005em; color: var(--rosso); }
.titolo__a { align-self: flex-start; }
.titolo__b { align-self: flex-end; }
.scala-fig { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: calc(var(--riga) + var(--stacco)); -webkit-user-select: none; user-select: none; }
.scala-fig > svg { width: var(--w); flex: none; }
.scala__didascalia { max-width: 34em; min-height: 3.2em; margin: calc(var(--riga) + var(--stacco) + 12px) 0 0; font-size: 1.1rem; line-height: 1.5; text-align: center; color: var(--legno-scuro); }
.scala__d { display: none; }
.scala-fig[data-modo="0"] .scala__d[data-m="0"], .scala-fig[data-modo="1"] .scala__d[data-m="1"] { display: inline; }
/* i due tasti della radio */
.scala__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 10px; }
.scala__modi button { min-height: 46px; padding: 0 22px; border: 2px solid var(--legno-scuro); background: #EFE6CB; color: var(--legno-scuro); font: 700 1rem/1 var(--f-testo); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(58, 36, 21, .22); }
.scala__modi button + button { border-left: 0; }
.scala__modi button:hover { background: #FBF4DC; }
.scala__modi button[aria-pressed="true"] { background: var(--legno-scuro); color: var(--crema); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); }
/* senza JS il modo non cambia: i tasti restano nascosti col loro posto */
.no-js .scala__modi { visibility: hidden; }
/* sul desktop, sulla stessa mensola, ci stanno altre due radio */
.radio-lato { display: none; position: absolute; z-index: 0; height: auto; }
.rl-legno { fill: #9A6A42; stroke: #3A2415; stroke-width: 4; }
.rl-scuro { fill: #3A2415; }
.rl-grigio { fill: #AEB3A6; stroke: #3A2415; stroke-width: 4; }
.rl-tela { fill: #CDB98E; stroke: #C9A66B; stroke-width: 2; }
.rl-riga { fill: none; stroke: #6E4A2A; stroke-width: 4; stroke-linecap: round; }
.rl-quadrante { fill: #F6E7AE; stroke: #C9A66B; stroke-width: 3; }
.rl-vetro { fill: #F6E7AE; stroke: #3A2415; stroke-width: 2; }
.rl-ago { fill: none; stroke: #3A2415; stroke-width: 3; stroke-linecap: round; }
.rl-pomolo { fill: #EADFC2; stroke: #3A2415; stroke-width: 2.5; }
.rl-antenna { fill: none; stroke: #6B6F68; stroke-width: 4; stroke-linecap: round; }

.apertura__testo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1180px; margin: 0 auto; padding: 30px 0 44px; }
.apertura__frase { max-width: 26em; margin: 0 0 12px; font: 400 1.5rem/1.3 var(--f-insegna); color: var(--legno-scuro); text-wrap: balance; }
.apertura__nota { max-width: 34em; margin: 0; }
/* stato e voto su righe loro: lo stato scritto dal JS è più lungo di quello statico */
.apertura__fatti { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 400 2.3rem/1 var(--f-insegna); color: var(--rosso); }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 1.04rem/1.4 var(--f-testo); }
.stato::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: currentColor; opacity: .4; flex: none; }
.stato.is-aperto::before { opacity: 1; background: var(--aperto); box-shadow: 0 0 0 3px rgba(31, 122, 68, .25); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bottone { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; min-height: 52px; padding: 2px 22px 0; border: 2px solid var(--legno-scuro); border-radius: 4px; background: transparent; color: var(--legno-scuro); font: 700 1.04rem/1.1 var(--f-testo); letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bottone--pieno { border-color: var(--rosso); background: var(--rosso); color: #FFF6DC; }
.bottone--pieno:hover { border-color: #981F18; background: #981F18; }
.bottone--vuoto:hover { background: var(--legno-scuro); color: var(--crema); }
.bottone--piccolo { min-height: 44px; padding: 2px 16px 0; font-size: .96rem; }
.bottone--chiaro { border-color: var(--giallo); background: var(--giallo); color: var(--inchiostro); }
.bottone--chiaro:hover { background: #FFDB6E; }
.bottone--vuoto-chiaro { border-color: var(--crema); color: var(--crema); }
.bottone--vuoto-chiaro:hover { background: var(--crema); color: var(--inchiostro); }
/* la boiserie in fondo alla parete */
.apertura::after { content: ''; display: block; height: 30px; margin: 0 calc(-1 * var(--gutter)); background: var(--legno); border-top: 5px solid var(--legno-scuro); }

/* ── i capitoli ── */
.capitolo { padding: 62px max(var(--gutter), calc((100% - 1180px) / 2)) 64px; background: var(--parete); }
.capitolo__titolo { max-width: 18em; margin: 0 0 16px; font: 400 clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem)/1.08 var(--f-insegna); color: var(--legno-scuro); text-wrap: balance; }
.capitolo__intro { max-width: 40em; margin: 0 0 26px; font-size: 1.12rem; }
.capitolo__nota { max-width: 46em; margin: 28px 0 0; color: var(--grigio); }
.capitolo--parete { background: var(--parete); }
.capitolo--tavolo { background-color: var(--tavolo); background-image: repeating-linear-gradient(90deg, rgba(122, 84, 48, .09) 0 2px, transparent 2px 58px); }
.capitolo--acqua { background: var(--acqua); color: #F4F0DC; }
.capitolo--legno { background: var(--legno-scuro); color: #F1E7CF; }
.capitolo--acqua .capitolo__titolo, .capitolo--legno .capitolo__titolo { color: var(--crema); }
.capitolo--acqua a, .capitolo--legno a { color: #FFFFFF; }
.capitolo--legno a.bottone--chiaro { color: var(--inchiostro); }
.capitolo--legno a.bottone--vuoto-chiaro { color: var(--crema); }
.capitolo--legno a.bottone--vuoto-chiaro:hover { color: var(--inchiostro); }

/* il menù di oggi: come funziona, e il foglio sul tavolo */
.menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; align-items: start; }
.funziona { margin: 0; border-top: 2px solid var(--legno-scuro); }
.funziona div { padding: 12px 0 11px; border-bottom: 1px solid #A98C63; }
.funziona dt { margin: 0 0 2px; font: 400 1.22rem/1.25 var(--f-insegna); color: var(--rosso); }
.funziona dd { margin: 0; max-width: 40em; }
.foglio-fig { width: 100%; max-width: 500px; justify-self: center; }
.foglio { padding: 22px 26px 18px; background: var(--foglio); color: #1B2233; box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 16px 30px rgba(58, 36, 21, .28); transform: rotate(-.8deg); }
.foglio__testa { margin: 0 0 18px; font-size: 1.32rem; line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; }
.foglio__titolo { margin: 0; font: 700 1.3rem/1.2 var(--f-stampa); letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.foglio__sotto { margin: 4px 0 14px; font: 400 1rem/1.3 var(--f-stampa); text-align: center; }
.foglio__capo { margin: 16px 0 4px; font: 700 1rem/1.3 var(--f-stampa); letter-spacing: .02em; text-transform: uppercase; text-align: center; }
.foglio__capo--sx { text-align: left; text-transform: none; }
.foglio__righe { margin: 0; padding: 0; list-style: none; }
.foglio__righe li { padding: 3px 2px 0; border-bottom: 2px dotted #7E89AE; font-size: 1.24rem; line-height: 1.4; letter-spacing: .05em; overflow-wrap: anywhere; }
.foglio__righe.a-mano li, .foglio__righe li.a-mano { text-transform: uppercase; }
.foglio__righe li.foglio__stampato { font: 400 .98rem/1.75 var(--f-stampa); letter-spacing: 0; }
.foglio__nota { margin: 14px 0 0; font: 400 .84rem/1.4 var(--f-stampa); }
.foglio__didascalia { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; font-size: 1rem; line-height: 1.5; color: var(--grigio); }

/* la cucina: i quadri alla parete */
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; }
.cornice { border: 9px solid var(--legno-scuro); padding: 7px; background: #F3EEDD; box-shadow: 0 10px 20px rgba(58, 36, 21, .25); }
.quadri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 0; padding: 0; list-style: none; }
.quadro figcaption { margin-top: 10px; font-size: 1.24rem; line-height: 1.3; letter-spacing: .03em; text-align: center; color: var(--legno-scuro); }

/* la sala */
.sala { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
.sala__foto { width: 100%; max-width: 444px; }
.sala__foto .cornice { border-color: #F3EEDD; padding: 0; background: none; }
.sala__foto figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: #E3EBDD; }
.sala__testo > p { max-width: 36em; margin: 0 0 18px; font-size: 1.12rem; }
.detto { max-width: 34em; margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 6px solid var(--giallo); }
.detto p { margin: 0; font: italic 400 1.3rem/1.4 var(--f-testo); }
.detto footer { margin-top: 6px; font-size: 1rem; color: #E3EBDD; }
.targhe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.targhe li { padding: 9px 14px 7px; border: 2px solid var(--legno-scuro); border-radius: 4px; background: var(--crema); color: var(--inchiostro); font: 700 1rem/1.3 var(--f-testo); }

/* recensioni: cartoncini crema come il vetro acceso della radio, con le stecche della griglia e la spia verde accesa */
.voto--sezione { margin: 0 0 24px; }
.recensioni { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.recensione { position: relative; margin: 0; padding: 30px 20px 16px; border: 3px solid var(--legno-scuro); border-radius: 6px; background: var(--crema); color: var(--inchiostro); }
.recensione::before { content: ''; position: absolute; left: 16px; top: 9px; width: 72px; height: 10px; background: repeating-linear-gradient(180deg, #8A5A36 0 2px, transparent 2px 4px); }
.recensione::after { content: ''; position: absolute; top: 8px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: #3FA36B; box-shadow: 0 0 0 3px rgba(107, 227, 154, .45); }
.recensione__testo { margin: 0; font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; }
.recensione__chi { margin: 12px 0 0; font-size: 1rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; font: 400 1.25rem/1.15 var(--f-insegna); color: var(--legno-scuro); }
.recensioni__nota { max-width: 46em; margin: 22px 0 0; font-size: 1rem; color: var(--grigio); }

/* orari e strada: il vetro della scala nel mobile di legno */
.orari-riga { display: grid; gap: 30px; align-items: start; }
.orario { max-width: 460px; padding: 18px 20px 18px; border: 4px solid var(--ottone); border-radius: 8px; background: var(--crema); color: var(--inchiostro); }
.orario__titolo { margin: 0 0 6px; font: 400 1.8rem/1 var(--f-insegna); color: var(--rosso); }
.giorno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 8px 6px; border-bottom: 1px solid #D5C07C; border-left: 4px solid transparent; }
.giorno:last-child { border-bottom: 0; }
.giorno__nome { font-size: 1.04rem; }
.giorno__ore { margin-left: auto; white-space: nowrap; font: 700 1.04rem/1.5 var(--f-testo); }
.giorno.is-today { border-left-color: var(--rosso); background: var(--giallo); }
.orario .stato { margin-top: 14px; }
.orari__nota { margin: 10px 0 0; font-size: 1rem; color: var(--grigio); }
.indirizzo { margin: 0 0 22px; border-top: 1px solid #7A5F45; }
.indirizzo div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 10px; padding: 11px 0 10px; border-bottom: 1px solid #7A5F45; }
.indirizzo dt { font: 700 .98rem/1.6 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; color: #DCC79B; }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cartina { margin-top: 36px; overflow: hidden; border: 4px solid var(--ottone); border-radius: 8px; background: var(--crema); color: var(--inchiostro); }
.capitolo--legno .cartina a { color: var(--inchiostro); }
.cartina iframe { display: block; width: 100%; height: 380px; border: 0; }
/* la nota della mappa a 16 px: sotto i 15 px gli accenti piccoli si perdono */
.cartina .mappa-clic__nota { font-size: 1rem; }

/* le domande */
.domande { max-width: 780px; border-top: 3px solid var(--legno-scuro); }
.domanda { border-bottom: 1px solid #8F9670; }
.domanda summary { position: relative; padding: 14px 36px 12px 2px; font: 400 1.3rem/1.25 var(--f-insegna); color: var(--legno-scuro); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 1.6rem/1 Arial, sans-serif; color: var(--rosso); }
.domanda[open] summary::after { content: '−'; }
.domanda p { max-width: 40em; margin: 0 0 16px; }

/* ── il piede ── */
.piede { background: var(--legno-scuro); color: #E9DDC2; border-top: 6px solid var(--legno); }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 46px var(--gutter) 100px; text-align: center; }
.piede__insegna { display: inline-flex; flex-direction: column; max-width: 100%; margin: 0 0 18px; }
.piede__insegna .insegna__bar { font-size: 2rem; color: var(--giallo); }
.piede__insegna .insegna__nome { margin-top: 6px; font-size: 1.2rem; color: var(--crema); }
.piede__dove, .piede__orario { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: 1rem; }
.freccia { font-family: Arial, sans-serif; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--legno-scuro); box-shadow: 0 -3px 0 var(--ottone); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 54px; padding: 0 4px; overflow-wrap: anywhere; text-align: center; color: #FFF6DC; font: 700 1rem var(--f-testo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.action-bar a:first-child { background: var(--rosso); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(24, 14, 8, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1000px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .insegna__bar { font-size: 1.12rem; }
  .insegna__nome { font-size: .94rem; }
  .lingue button { min-width: 32px; }
  .bottone { padding: 2px 14px 0; }
  .indirizzo div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foglio { padding: 18px 16px 16px; }
  .foglio__righe li { font-size: 1.12rem; }
  .scala__modi button { padding: 0 14px; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 54px; }
  .quadri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
  .quadro:nth-child(3n + 2) { margin-top: 30px; }
  .recensioni { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sala { grid-template-columns: minmax(0, 444px) minmax(0, 1fr); gap: 46px; }
  .apertura__testo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 46px; align-items: start; padding-top: 34px; }
  .apertura__parole { order: 2; }
}
@media (min-width: 960px) {
  .menu { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; }
  .recensioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orari-riga { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; }
  /* le domande: il titolo a sinistra, l'elenco in colonna a destra */
  .capitolo--domande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px); grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
  .capitolo--domande > .occhio, .capitolo--domande > .capitolo__titolo { grid-column: 1; }
  .capitolo--domande > .domande { grid-column: 2; grid-row: 1 / span 2; margin-top: 6px; }
}
@media (min-width: 1100px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: 30px; }
  .voci a { padding: 4px 1px 2px; color: var(--legno-scuro); font: 700 1.02rem var(--f-testo); letter-spacing: .04em; text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--rosso); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
  .burger { display: none; }
  .radio-lato { display: block; }
  .radio-lato--sx { width: calc(var(--w) * .3); left: calc((100cqi - var(--w)) / 2 - var(--w) * .3 - 34px); top: calc(var(--riga) + var(--stacco) + var(--w) * .4826); }
  .radio-lato--dx { width: calc(var(--w) * .33); right: calc((100cqi - var(--w)) / 2 - var(--w) * .33 - 34px); top: calc(var(--riga) + var(--stacco) + var(--w) * .5132); }
}

/*SCALA*/
/* la radio del pranzo — generata da _tls_firma.mjs: non modificare a mano */
.scala__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sp-mensola { fill: #B98A5A; }
.sp-mensola-ombra { fill: #8E6238; }
.sp-staffa { fill: none; stroke: #6B6F68; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sp-mobile { fill: #8A5A36; stroke: #3A2415; stroke-width: 4; }
.sp-venature { fill: none; stroke: #7A4D2C; stroke-width: 2; stroke-linecap: round; }
.sp-pannello { fill: #3A2415; }
.sp-vetro { fill: #4F4229; stroke: #C9A66B; stroke-width: 3; }
.sp-divisori-spenti { fill: none; stroke: #6A5B3A; stroke-width: 1.5; }
.sp-griglia { fill: #CDB98E; stroke: #C9A66B; stroke-width: 3; }
.sp-stecche { fill: none; stroke: #8A5A36; stroke-width: 6; stroke-linecap: round; }
.sp-manopola { fill: #EADFC2; stroke: #C9A66B; stroke-width: 3; }
.sp-manopola-dentro { fill: #D8C8A2; }
.sp-tacca { fill: none; stroke: #3A2415; stroke-width: 5; stroke-linecap: round; }
.sp-spia { fill: #2B3A2F; stroke: #C9A66B; stroke-width: 2; }
.sp-calda { fill: #E5B25C; stroke: #C9A66B; stroke-width: 3; }
.sp-calda-cuore { fill: #F8DA92; }
.sp-chiaro { fill: #F6E7AE; stroke: #C9A66B; stroke-width: 3; }
.sp-divisori { fill: none; stroke: #D9C47E; stroke-width: 1.5; }
.sp-etichetta { fill: #8A3B22; font: 700 23px 'Yrsa', Georgia, serif; letter-spacing: 3px; }
.sp-piatto { fill: #3A2415; font: 700 34px 'Yrsa', Georgia, serif; }
.sp-spia-alone { fill: rgba(107, 227, 154, .35); }
.sp-spia-accesa { fill: #6BE39A; stroke: #C9A66B; stroke-width: 2; }
.sp-onda { fill: none; stroke: #B3261E; stroke-width: 5; stroke-linecap: round; }
.scala-fig[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.scala-fig[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.firma-attesa .sp-luce, .firma-attesa .sp-riga, .firma-attesa .sp-onda { opacity: 0; }
.firma-attesa .sp-pomolo, .firma-attesa .sp-volume { transform: rotate(0deg); }
/*/SCALA*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/