/* ==========================================================================
   Pace3 — stile unico.
   Insegna di strada di notte: fondo nero caldo, testo crema, blocchi
   squadrati. Oro solo nel logo e nei dettagli piccoli; rosso e verde del
   tricolore come filetti e punti di stato. Vedi NOTE-DESIGN.md.

   Due temi (attributo data-tema su <html>, da ?tema= nell'indirizzo):
   - "misto" (predefinito): header, caricamento, sala 3D e piede scuri; le
     sezioni con classe .chiaro (menu in home, dove siamo, pagina menu) su
     carta crema con testo marrone scuro, accenti rosso e verde.
   - "scuro": tutto scuro, come prima.
   Le sezioni chiare ridefiniscono le stesse variabili: i componenti non cambiano.
   ========================================================================== */

@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --fondo: #14100c;
  --fondo-2: #1d1712;
  --fondo-3: #2a2119;
  --crema: #f2e7d3;
  --testo: #e6dac4;
  --tenue: #b3a690;
  --spento: rgba(242, 231, 211, .4);
  --oro: #d8a64a;
  --rosso: #cf3b2e;
  --verde: #2f9152;
  --linea: rgba(242, 231, 211, .14);
  --ingr: #d2c6af;            /* ingredienti nelle righe del menu */
  --ok: #93dcaa;              /* testo "aperto", vegano */
  --ko: #f0a198;              /* testo "chiuso", piccante */
  --prezzo: var(--crema);
  --fuoco: var(--oro);
  --mappa: #110d0a;
  --mappa-griglia: rgba(242, 231, 211, .05);

  --carta: #1d1712;           /* card e schede del menu */
  --carta-bordo: rgba(242, 231, 211, .12);
  --accento: #cf3b2e;         /* prezzi in etichetta, pulsanti forti, barra dell'ordine (testo bianco 4,9:1) */
  --wa: #1a7f45;              /* WhatsApp (testo bianco 5:1) */

  /* Sala 3D: fondo marrone scuro caldo, mai nero puro. */
  --sala: #1b120b;
  --sala-alone: #4a2f18;
  --sala-bordo: #0f0a06;

  --f-titolo: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-testo: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Movimento: una curva, tre tempi. Uguali in tutto il sito. */
  --curva: cubic-bezier(.16, 1, .3, 1);
  --t-breve: 250ms;
  --t-medio: 450ms;
  --t-lungo: 700ms;

  --gutter: clamp(16px, 4vw, 56px);
  --barra-h: 72px;
  --bozza-h: 0px;
  --basso-h: 0px;
  --massimo: 1280px;
}

/* Tema scuro: la sala come prima, quasi nera. */
[data-tema="scuro"] { --sala: #0c0a08; --sala-alone: #33271a; --sala-bordo: #0a0806; }

/* Tema misto: sezioni chiare (carta crema, testo marrone scuro). Contrasti in README. */
[data-tema="misto"] .chiaro {
  --fondo: #f5eddf;
  --fondo-2: #ece1cd;
  --fondo-3: #e3d4ba;
  --crema: #22160d;
  --testo: #2f2118;
  --tenue: #5a4636;
  --spento: rgba(34, 22, 13, .5);
  --linea: rgba(34, 22, 13, .16);
  --ingr: #44342a;
  --ok: #1b6a37;
  --ko: #a42619;
  --prezzo: #9f2418;
  --fuoco: #9f2418;
  --mappa: #e8dcc6;
  --mappa-griglia: rgba(34, 22, 13, .07);
  --carta: #fffaf1;
  --carta-bordo: rgba(34, 22, 13, .13);
  background: var(--fondo);
  color: var(--testo);
}

/* ------------------------------ Base -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bozza-h) + 72px); }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1rem/1.5 var(--f-testo); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titolo); font-weight: 800; line-height: .9; text-transform: uppercase; color: var(--crema); }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 8px; top: 8px; z-index: 100; background: var(--crema); color: var(--fondo); padding: 12px 16px; transform: translateY(-200%); }
.salta:focus { transform: none; }
.contenitore { width: min(var(--massimo), 100% - 2 * var(--gutter)); margin-inline: auto; }
.titolo-sezione { font-size: clamp(3.4rem, 9vw, 7rem); letter-spacing: -.005em; }
.titolo-sezione--piccolo { font-size: clamp(2.2rem, 4vw, 3rem); }

/* ----------------------------- Pulsanti ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4em;
  font: 800 1.35rem/1 var(--f-titolo); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: transform var(--t-breve) var(--curva), opacity var(--t-breve) var(--curva);
}
.btn:active { transform: scale(.97); }
.btn--pieno { background: var(--crema); color: var(--fondo); }
.btn--bordo { border-color: var(--spento); color: var(--crema); position: relative; }
.btn--bordo::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--crema); opacity: 0; transition: opacity var(--t-breve) var(--curva); }
@media (hover: hover) {
  .btn--pieno:hover { transform: translateY(-2px); }
  .btn--bordo:hover::after { opacity: 1; }
}

/* --------------------------- Stato apertura ------------------------------- */
.stato { display: inline-flex; align-items: center; gap: .5em; color: var(--tenue); font-weight: 600; }
.stato::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--tenue); flex: none; }
.stato.e-aperto { color: var(--ok); }
.stato.e-aperto::before { background: var(--verde); }
.stato.e-chiuso { color: var(--ko); }
.stato.e-chiuso::before { background: var(--rosso); }
.stato__dopo { color: var(--tenue); font-weight: 400; }
.stato--grande { font-size: 1.15rem; }

/* ------------------------------- Bozza ------------------------------------ */
.bozza { position: fixed; inset: 0 0 auto; z-index: 70; height: 26px; line-height: 26px; padding: 0 var(--gutter); background: var(--oro); color: var(--fondo); font-size: .78rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; view-transition-name: bozza; }

/* ------------------------------- Barra ------------------------------------ */
/* Si riduce scorrendo: fondo che compare e logo che rimpicciolisce, solo transform/opacity. */
.barra {
  position: fixed; inset: var(--bozza-h) 0 auto; z-index: 60; height: var(--barra-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 0 var(--gutter);
  view-transition-name: barra;
}
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fondo); border-bottom: 1px solid var(--linea); transform-origin: top; transform: scaleY(.84); opacity: 0; transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva); }
.barra > * { transition: transform var(--t-medio) var(--curva); }
.barra.e-ridotta::before { opacity: 1; }
/* Sopra una pagina chiara la barra resta scura dall'inizio (il logo oro su chiaro non si legge). */
[data-tema="misto"] body[data-pagina="menu"] .barra::before { opacity: 1; transform: none; }
.barra.e-ridotta > * { transform: translateY(-6px); }
.barra.e-ridotta .marchio { transform: translateY(-6px) scale(.8); }
.marchio { flex: none; display: block; transform-origin: left center; }
.marchio img { height: 56px; width: auto; }
.barra__nav { display: flex; gap: clamp(8px, 2vw, 20px); }
.barra__nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 .3em; font: 800 1.35rem var(--f-titolo); text-transform: uppercase; text-decoration: none; color: var(--crema); }
.barra__nav a::after { content: ""; position: absolute; left: .3em; right: .3em; bottom: 8px; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform var(--t-medio) var(--curva); }
.barra__nav a:hover::after, .barra__nav a[aria-current="page"]::after { transform: scaleX(1); }
.stato--barra { margin-left: auto; font-size: .95rem; white-space: nowrap; }

/* ------------------------- Caricamento col logo ------------------------ */
/* Il logo (render del modello 3D, max 320px) e al centro da subito. Se il 3D e pronto
   prende il suo posto (logo-intro.js) e il buio passa alla sala (.sequenza__buio, stesso colore);
   altrimenti l'immagine si accende dal basso e vola nell'header (FLIP) mentre il fondo si apre. */
.con-intro { overflow: hidden; }
.con-intro .marchio img { opacity: 0; }
.con-intro .barra > :not(.marchio), .con-intro .bozza, .con-intro .sequenza__testi, .con-intro .sequenza__nav,
.con-intro .sequenza__vignetta { opacity: 0; }
.bozza, .sequenza__testi, .sequenza__nav, .sequenza__vignetta { transition: opacity var(--t-lungo) var(--curva); }
.barra > :not(.marchio) { transition: opacity var(--t-lungo) var(--curva), transform var(--t-medio) var(--curva); }
.intro-logo { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
.con-intro .intro-logo { display: block; }
.intro-logo__meta { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--fondo); }
.intro-logo__meta--su { top: 0; }
.intro-logo__meta--giu { bottom: 0; }
.intro-logo__superficie {
  --w: min(320px, 72vw);
  position: absolute; left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) * 517 / 640 / 2);
  width: var(--w); aspect-ratio: 640 / 517; transform-origin: 0 0; z-index: 1;
}
.intro-logo__spento, .intro-logo__acceso { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-logo__finestra { position: absolute; inset: 0; overflow: hidden; transform: translateY(100%); }
.intro-logo__acceso { transform: translateY(-100%); }

/* ---------------------------- Sequenza 3D -------------------------------- */
/* Un tavolo fermo per ~2 schermate di scroll: ogni passo di scroll fa servire il piatto successivo.
   Livelli: fondo caldo sfocato (CSS) < buio del caricamento < canvas (tavolo e piatti) < vignetta < testi. */
.sequenza { position: relative; height: 300svh; } /* due schermate di scroll: tre piatti a passi */
.sequenza__palco { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--sala); }
/* Fondo della sala: buio caldo con poche luci lontane fuori fuoco. */
.sequenza__fondo { position: absolute; inset: 0; background:
  radial-gradient(9vmax 9vmax at 14% 18%, rgba(255, 176, 92, .2), transparent 70%),
  radial-gradient(6vmax 6vmax at 31% 9%, rgba(255, 205, 140, .13), transparent 70%),
  radial-gradient(11vmax 11vmax at 83% 12%, rgba(255, 158, 74, .16), transparent 70%),
  radial-gradient(5vmax 5vmax at 95% 31%, rgba(255, 214, 160, .1), transparent 70%),
  radial-gradient(70% 55% at 60% 34%, var(--sala-alone) 0%, transparent 100%),
  linear-gradient(var(--sala-bordo), var(--sala) 60%); }
.sequenza__buio { position: absolute; inset: 0; background: var(--fondo); }
.sequenza__vignetta { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(15, 10, 6, .55), rgba(15, 10, 6, .25) 30%, transparent 44%),
  radial-gradient(130% 100% at 55% 45%, transparent 58%, rgba(10, 6, 3, .55) 100%),
  linear-gradient(transparent 82%, rgba(15, 10, 6, .55)); }
.sequenza__scena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sequenza__testi { position: absolute; inset: 0; pointer-events: none; }

/* Un solo pannello: i tre prodotti si danno il cambio nello stesso posto. */
.pannello { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(400px, 30vw); display: grid; }
.atto { grid-area: 1 / 1; align-self: center; visibility: hidden; }
.atto.e-attivo { visibility: visible; }
.atto .btn { pointer-events: auto; }
.maschera { display: block; overflow: hidden; }
.maschera__dentro { display: block; transform: translateY(125%); will-change: transform; }
.atto__nome { font-size: clamp(3rem, 5.2vw, 6.6rem); line-height: .86; padding-bottom: .06em; }
.atto__prezzo { margin-top: 14px; font: 800 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--f-titolo); color: var(--crema); padding-bottom: 4px; }
.atto__lista { margin-top: 18px; }
.atto__richiami { list-style: none; margin: 0; padding: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; color: var(--testo); }
.atto__richiami li { display: inline-flex; align-items: center; gap: 8px; }
.atto__richiami li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.atto__richiami li:nth-child(2)::before { background: var(--crema); }
.atto__richiami li:nth-child(3)::before { background: var(--rosso); }
.atto__azione { margin-top: 22px; padding: 2px; }

.sequenza__nav { position: absolute; left: var(--gutter); bottom: 32px; display: flex; gap: 6px; }
.voce-seq { position: relative; min-height: 48px; padding: 0 14px; background: none; border: 0; cursor: pointer; font: 800 1.35rem var(--f-titolo); text-transform: uppercase; color: var(--spento); transition: color var(--t-breve) var(--curva); }
.voce-seq::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform var(--t-medio) var(--curva); }
.voce-seq:hover { color: rgba(242, 231, 211, .75); }
.voce-seq.e-attiva { color: var(--crema); }
.voce-seq.e-attiva::after { transform: scaleX(1); }

/* Dalla sala scura alla carta: una sfumatura lunga, con passi intermedi caldi. */
.passaggio { display: none; }
[data-tema="misto"] .passaggio { display: block; height: clamp(140px, 22vh, 240px); margin-top: -1px; background: linear-gradient(
  #1b120b 0%, #2a1c12 14%, #4b3424 30%, #7d624b 46%, #b39c80 62%, #d9c9b0 77%, #ede3d2 89%, #f5eddf 100%); }

/* Senza 3D: tre sezioni normali. */
.sequenza-statica { padding-top: calc(var(--bozza-h) + var(--barra-h)); }
.statico { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(20px, 4vw, 64px); padding: clamp(32px, 6vw, 80px) var(--gutter); border-bottom: 1px solid var(--linea); }
.statico:nth-child(2) .statico__foto { order: 2; }
.statico__foto img { width: 100%; max-height: 70vh; object-fit: contain; }
.statico__richiami { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--testo); font-weight: 600; }
.statico__richiami li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--crema); }

/* ------------------------- Menu in home ----------------------------------- */
.menu-home { padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 8vw, 120px); overflow-x: clip; }
.menu-home > .titolo-sezione { margin-bottom: clamp(24px, 4vw, 56px); }
.blocco {
  --copri: var(--fondo);
  display: grid; align-items: center; column-gap: clamp(20px, 3vw, 48px);
  grid-template-columns: [pieno-inizio] minmax(var(--gutter), 1fr) [dentro-inizio] repeat(12, minmax(0, calc(var(--massimo) / 12))) [dentro-fine] minmax(var(--gutter), 1fr) [pieno-fine];
  margin-bottom: clamp(56px, 8vw, 120px);
}
.blocco__titolo { font-size: clamp(3rem, 6vw, 5.2rem); margin-bottom: .3em; }
.blocco__foto img { width: 100%; }

/* Pizze: l'immagine esce dal bordo sinistro dello schermo. */
.blocco--pizze .blocco__foto { grid-column: pieno-inizio / 9; }
.blocco--pizze .blocco__foto img { width: 112%; max-width: none; margin-left: -12%; }
.blocco--pizze .blocco__testo { grid-column: 9 / dentro-fine; }

/* Kebab: testo a sinistra su una fascia, immagine sfalsata che esce a destra. */
.blocco--kebab { align-items: start; }
.blocco--kebab .blocco__testo { grid-column: dentro-inizio / 8; grid-row: 1; padding: clamp(24px, 3vw, 40px); background: var(--fondo-2); border-top: 3px solid var(--verde); position: relative; z-index: 1; }
.blocco--kebab .blocco__foto { grid-column: 7 / pieno-fine; grid-row: 1; margin-top: clamp(80px, 10vw, 160px); }
.blocco--kebab .blocco__foto img { width: 108%; max-width: none; }

/* Hamburger: fascia piena, l'immagine sporge sopra la fascia. */
.blocco--burger { --copri: var(--fondo); background: linear-gradient(transparent 0 clamp(120px, 14vw, 220px), var(--fondo-2) 0); border-bottom: 3px solid var(--rosso); padding-bottom: clamp(40px, 5vw, 72px); }
.blocco--burger .blocco__foto { grid-column: 5 / 12; }
.blocco--burger .blocco__testo { grid-column: dentro-inizio / dentro-fine; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: clamp(16px, 2vw, 32px); }
.menu-home__tutto { display: flex; justify-content: center; }

/* Righe del menu: nome e prezzo sulla stessa riga, ingredienti sotto. */
.righe { list-style: none; margin: 0; padding: 0; }
.righe--due { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); }
.riga { position: relative; isolation: isolate; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.riga::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; background: var(--fondo-3); opacity: 0; transition: opacity var(--t-breve) var(--curva); }
.riga:hover::before, .riga:active::before { opacity: 1; }
.riga__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.riga__nome { font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1; }
.riga__prezzo { font-weight: 600; font-size: 1.1rem; color: var(--prezzo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.riga__ingr { margin-top: 4px; color: var(--ingr); font-size: 1rem; }
.riga__allergeni { margin-top: 2px; color: var(--tenue); font-size: .9rem; }
.riga__info { font-weight: 600; }
.riga__info--piccante { color: var(--ko); }
.riga__info--vegana, .riga__info--vegetariano { color: var(--ok); }

/* ------------------------------ Dove siamo -------------------------------- */
.dove { padding: clamp(72px, 9vw, 130px) 0; background: var(--fondo-2); }
.dove__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 80px); row-gap: 48px; }
.dove__info { grid-column: 1; display: grid; gap: 22px; align-content: start; }
.mappa { --copri: var(--fondo-2); grid-column: 2; grid-row: 1 / 3; }
.dove__orari { grid-column: 1; }
.indirizzo { font-style: normal; display: grid; gap: 2px; font-size: 1.15rem; color: var(--crema); }
.indirizzo > span:first-child { font: 800 2rem/1 var(--f-titolo); text-transform: uppercase; }
.indirizzo__tel { font: 800 2rem/1 var(--f-titolo); margin-top: 8px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.contatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 30rem; }
.orari { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
.orari th, .orari td { padding: 11px 0; border-bottom: 1px solid var(--linea); color: var(--tenue); font-weight: 400; text-align: left; }
.orari td { text-align: right; }
.orari tr.oggi th, .orari tr.oggi td { color: var(--crema); font-weight: 600; }
.orari tr.oggi th { box-shadow: inset 4px 0 0 var(--oro); padding-left: 14px; }

.mappa { position: relative; min-height: 420px; overflow: hidden; display: grid; place-content: center; text-align: center; gap: 10px; background:
  linear-gradient(var(--mappa-griglia) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(90deg, var(--mappa-griglia) 1px, transparent 1px) 0 0 / 48px 48px, var(--mappa); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.mappa__pin { color: var(--rosso); }
.mappa__pin svg { width: 52px; height: 52px; margin-inline: auto; }
.mappa__indirizzo { color: var(--crema); font-size: 1.05rem; }

/* ------------------------------- Piede ------------------------------------ */
.piede { padding: 40px 0 calc(40px + var(--basso-h)); border-top: 1px solid var(--linea); color: var(--tenue); }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.piede__logo { width: 112px; }
.piede__dati { line-height: 1.6; }
.piede__social { margin-left: auto; display: flex; gap: 8px; }
.piede__social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 600; color: var(--crema); text-decoration: none; }
.piede__social a:hover { text-decoration: underline; }

/* -------------------------- Barra in basso (telefono) --------------------- */
.barra-basso { display: none; }

/* ------------------------------ Pagina menu ------------------------------- */
/* Come un'app da fast food: chip delle categorie, card grandi, prezzo in etichetta rossa,
   scheda del piatto (dialog) e barra dell'ordine in basso. Logica in assets/js/ordine.js. */
.pagina-menu { padding-top: calc(var(--bozza-h) + var(--barra-h) + clamp(24px, 5vw, 64px)); padding-bottom: 24px; }
.menu-testa { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px; margin-bottom: clamp(12px, 2vw, 24px); }
.titolo-sezione--pagina { font-size: clamp(4.4rem, 16vw, 12rem); }
.menu-provvisori { margin-bottom: 1.2em; padding: 4px 10px; background: var(--oro); color: #14100c; font: 800 1.1rem/1.2 var(--f-titolo); text-transform: uppercase; letter-spacing: .03em; transform: rotate(-2deg); }

.menu-strumenti { display: flex; gap: 10px; }
.ricerca { position: relative; flex: 1; min-width: 0; }
.ricerca input {
  width: 100%; min-height: 52px; padding: 0 16px 0 48px; font: 400 1.05rem var(--f-testo); color: var(--crema);
  background: var(--carta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887766' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50% / 20px no-repeat;
  border: 1px solid var(--carta-bordo); border-radius: 4px; -webkit-appearance: none; appearance: none;
}
.ricerca input::placeholder { color: var(--tenue); opacity: 1; }
.ricerca input:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 0; }
.btn-allergia { flex: none; min-height: 52px; padding: 0 18px; background: none; border: 2px solid var(--crema); border-radius: 4px; cursor: pointer; font: 800 1.2rem var(--f-titolo); text-transform: uppercase; color: var(--crema); }
.btn-allergia.e-attivo { background: var(--accento); border-color: var(--accento); color: #fff; }
.filtro { margin-top: 10px; padding: 16px; background: var(--carta); border: 1px solid var(--carta-bordo); border-radius: 4px; }
.filtro__spiega { color: var(--tenue); margin-bottom: 12px; }
.filtro__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.filtro__voce { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border: 1px solid var(--carta-bordo); border-radius: 4px; cursor: pointer; font-weight: 600; }
.filtro__voce input { width: 20px; height: 20px; accent-color: var(--accento); }
.filtro__voce:has(input:checked) { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.filtro__n, .legenda__n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid currentColor; font: 700 .85rem/1 var(--f-testo); }
.filtro__azzera { margin-top: 12px; min-height: 44px; padding: 0 4px; background: none; border: 0; font-weight: 600; color: var(--crema); text-decoration: underline; cursor: pointer; }
.filtro__conto { margin-top: 10px; font-weight: 600; color: var(--ko); }
.ricerca__vuoto { margin-top: 24px; font: 800 1.6rem var(--f-titolo); text-transform: uppercase; color: var(--crema); }

/* Chip delle categorie: fissi in alto, scorrevoli. */
.tabs { position: sticky; top: calc(var(--bozza-h) + var(--barra-h) - 12px); z-index: 50; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 18px; padding: 10px var(--gutter); background: var(--fondo); border-bottom: 1px solid var(--linea); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2px solid var(--carta-bordo); border-radius: 4px; background: var(--carta); font: 800 1.3rem var(--f-titolo); text-transform: uppercase; text-decoration: none; color: var(--crema); transition: background-color var(--t-breve) var(--curva), color var(--t-breve) var(--curva); }
.tab.e-attivo { background: var(--accento); border-color: var(--accento); color: #fff; }
.tab__emoji { font-size: 1.05rem; }

/* Categorie e card. Ogni categoria ha il suo colore del tricolore per i filetti. */
.cat { --cat: var(--rosso); padding: clamp(36px, 5vw, 64px) 0 8px; scroll-margin-top: calc(var(--bozza-h) + var(--barra-h) + 64px); }
.cat--sandwich, .cat--piadine, .cat--aggiunte { --cat: var(--oro); }
.cat--pizze, .cat--crepe-salate, .cat--bevande { --cat: var(--verde); }
.cat__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 6px solid var(--cat); }
.cat__titolo { font-size: clamp(3.4rem, 9vw, 7rem); line-height: .85; padding-bottom: 10px; }
.cat__emoji { font-size: .7em; vertical-align: .08em; }
.cat__img { width: clamp(130px, 24vw, 300px); height: auto; margin-bottom: -26px; position: relative; z-index: 1; filter: drop-shadow(0 14px 18px rgba(40, 20, 8, .28)); }
.cat__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; padding-top: 18px; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 18px; background: var(--carta); border: 1px solid var(--carta-bordo); border-top: 5px solid var(--cat); border-radius: 4px; box-shadow: 0 12px 26px -18px rgba(60, 28, 8, .45); }
.card__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__nome { font-size: clamp(1.7rem, 2.4vw, 2.05rem); line-height: .95; }
.card__piccante { font-size: .8em; }
.card__prezzo { flex: none; padding: 5px 10px 4px; background: var(--accento); color: #fff; font: 800 1.45rem/1 var(--f-titolo); transform: rotate(-3deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .18); white-space: nowrap; }
.card__ingr { color: var(--ingr); line-height: 1.4; }
.card__nota { color: var(--tenue); font-weight: 600; margin-top: auto; }
.card__btn { margin-top: auto; width: 100%; min-height: 54px; background: var(--crema); color: var(--fondo); }
@media (hover: hover) { .card__btn:hover { background: var(--accento); color: #fff; } }

/* Numeri degli allergeni. */
.allergeni { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .92rem; color: var(--crema); }
.allergeni__titolo { font-weight: 600; margin-right: 2px; }
.allergeni__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; border: 2px solid currentColor; font-weight: 700; font-size: .85rem; text-decoration: none; cursor: help; }
.allergeni__nessuno { font-weight: 600; color: var(--tenue); }
.allergeni__piu { color: var(--tenue); font-weight: 600; }

/* Legenda in fondo e avviso. */
.legenda { padding: clamp(48px, 7vw, 96px) 0 24px; }
.legenda__titolo { font-size: clamp(3rem, 7vw, 5rem); margin-bottom: 18px; }
.legenda__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; }
.legenda__lista li { display: flex; align-items: center; gap: 8px; color: var(--testo); }
.legenda__lista li.e-presente { font-weight: 700; color: var(--crema); }
.legenda__lista--grande { font-size: 1.05rem; }
.avviso { margin-top: 12px; font-size: .92rem; color: var(--tenue); }
.avviso--grande { margin-top: 24px; padding: 14px 16px; background: var(--carta); border-left: 5px solid var(--rosso); color: var(--testo); font-size: 1rem; font-weight: 600; }

/* Barra dell'ordine: rossa, sopra la barra in basso del telefono. */
.ordine-barra { position: fixed; left: 0; right: 0; bottom: var(--basso-h); z-index: 65; padding: 10px var(--gutter); pointer-events: none; }
.ordine-barra__btn { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: min(640px, 100%); min-height: 62px; margin-inline: auto; padding: 8px 16px; background: var(--accento); color: #fff; border: 0; border-radius: 6px; box-shadow: 0 14px 30px -10px rgba(80, 12, 4, .55); cursor: pointer; text-align: left; }
.ordine-barra__n { grid-row: 1 / 3; display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 20px; background: #fff; color: var(--accento); font: 800 1.5rem/1 var(--f-titolo); }
.ordine-barra__testo { font-weight: 600; font-size: .95rem; }
.ordine-barra__tot { grid-row: 1 / 3; grid-column: 3; font: 800 1.7rem/1 var(--f-titolo); }
.ordine-barra__vai { grid-column: 2; font: 800 1.3rem/1 var(--f-titolo); text-transform: uppercase; }
.ordine-barra.e-pulsa .ordine-barra__btn { animation: pulsa var(--t-medio) var(--curva); }
@keyframes pulsa { 40% { transform: scale(1.04); } }
body.con-ordine { padding-bottom: 86px; }

/* Scheda del piatto e riepilogo: pannello centrato (telefono: dal basso). */
dialog.scheda { width: min(640px, 100% - 32px); max-width: none; max-height: min(92svh, 920px); padding: 0; border: 0; border-radius: 6px; background: var(--fondo); color: var(--testo); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: hidden; }
dialog.scheda[open] { display: flex; animation: entra-scheda var(--t-medio) var(--curva); }
dialog.scheda::backdrop { background: rgba(10, 6, 3, .62); }
@keyframes entra-scheda { from { opacity: 0; transform: translateY(24px); } }
.scheda__corpo { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0; }
.scheda__testa { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--linea); }
.scheda__nome { font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: .92; }
.scheda__base { grid-column: 1; font: 800 1.4rem var(--f-titolo); color: var(--prezzo); }
.scheda__chiudi { grid-row: 1 / 3; grid-column: 2; width: 48px; height: 48px; background: none; border: 1px solid var(--linea); border-radius: 4px; font: 400 2rem/1 var(--f-testo); color: var(--crema); cursor: pointer; }
.scheda__dentro { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.gruppo { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.gruppo__titolo { padding: 0 0 4px; font: 800 1.5rem var(--f-titolo); text-transform: uppercase; color: var(--crema); }
.gruppo__sotto { font: 600 .9rem var(--f-testo); text-transform: none; color: var(--tenue); }
.gruppo--obbligo .gruppo__sotto { color: var(--ko); }
.gruppo__chiedi { margin-top: 10px; font-weight: 700; color: var(--crema); }
.opz { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 50px; padding: 4px 2px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.opz input { width: 22px; height: 22px; margin: 0; accent-color: var(--accento); }
.opz__nome { font-weight: 600; color: var(--testo); }
.opz__nota { font-weight: 400; color: var(--tenue); font-size: .9rem; }
.opz--fisso { cursor: default; }
.opz--fisso .opz__nome { color: var(--tenue); }
.opz__all { padding: 1px 7px; border: 1.5px solid var(--carta-bordo); border-radius: 10px; font-size: .8rem; font-weight: 700; color: var(--testo); white-space: nowrap; }
.opz__prezzo { font-weight: 700; color: var(--prezzo); white-space: nowrap; }
.opz--menu { margin-top: 4px; padding: 6px 12px; min-height: 60px; background: var(--carta); border: 2px dashed var(--accento); border-radius: 4px; }
.opz--menu .opz__nome { font: 800 1.35rem var(--f-titolo); text-transform: uppercase; color: var(--crema); }
.scheda__allergeni { margin-top: 20px; padding: 14px; background: var(--carta); border: 1px solid var(--carta-bordo); border-radius: 4px; }
.scheda__rischio { margin-top: 10px; font-weight: 700; color: var(--ko); }
.legenda-mini { margin-top: 10px; }
.legenda-mini summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--crema); }
.legenda-mini .legenda__lista { font-size: .92rem; }
.scheda__piede { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--fondo); }
.scheda__manca { grid-column: 1 / -1; font-weight: 700; color: var(--ko); }
.scheda__manca:empty { display: none; }
.scheda__manca.e-scuoti { animation: scuoti 300ms var(--curva); }
@keyframes scuoti { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qta { display: flex; align-items: center; gap: 6px; }
.qta__btn { width: 48px; height: 48px; background: none; border: 2px solid var(--crema); border-radius: 4px; font: 400 1.6rem/1 var(--f-testo); color: var(--crema); cursor: pointer; }
.qta__btn:disabled { opacity: .35; cursor: default; }
.qta__n { min-width: 2ch; text-align: center; font: 800 1.6rem var(--f-titolo); color: var(--crema); }
.scheda__aggiungi { min-height: 56px; width: 100%; background: var(--accento); color: #fff; font-size: 1.35rem; }
.scheda__aggiungi[aria-disabled="true"] { opacity: .6; }

/* Riepilogo dell'ordine. */
.riepilogo__lista { list-style: none; margin: 0; padding: 0; }
.rr { padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 6px; }
.rr__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rr__nome { font-size: 1.55rem; line-height: 1; }
.rr__prezzo { font-weight: 700; color: var(--prezzo); white-space: nowrap; }
.rr__det { color: var(--ingr); font-size: .95rem; }
.rr__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rr__azioni .qta__btn { width: 40px; height: 40px; font-size: 1.3rem; }
.rr__link { min-height: 40px; padding: 0 6px; background: none; border: 0; font-weight: 600; color: var(--crema); text-decoration: underline; cursor: pointer; }
.rr__link--via { color: var(--ko); }
.riepilogo__vuoto { padding: 24px 0; font: 800 1.6rem var(--f-titolo); text-transform: uppercase; }
.campo { display: grid; gap: 6px; margin-top: 14px; }
.campo__nome { font-weight: 600; color: var(--crema); }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1rem var(--f-testo); color: var(--testo); background: var(--carta); border: 1px solid var(--carta-bordo); border-radius: 4px; resize: vertical; }
.riepilogo__totale { display: flex; justify-content: space-between; margin-top: 18px; font: 800 1.9rem var(--f-titolo); text-transform: uppercase; color: var(--crema); }
.riepilogo__errore { font-weight: 700; color: var(--ko); }
.riepilogo__errore:empty { display: none; }
.riepilogo__paga { margin-top: 8px; color: var(--tenue); }
.riepilogo__svuota { margin-top: 8px; }
.scheda__piede--riepilogo { grid-template-columns: 1fr; }
.riepilogo__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--bordo-forte { border-color: var(--crema); color: var(--crema); }

/* --------------------------- Ingressi allo scorrimento ---------------------- */
/* Le immagini si scoprono: un telo del colore del fondo si ritira (transform). */
.rivela { position: relative; overflow: hidden; }
.js .rivela::after { content: ""; position: absolute; inset: -1px; background: var(--copri, var(--fondo)); transform-origin: top; transition: transform var(--t-lungo) var(--curva); pointer-events: none; }
.js .rivela > img { transform: scale(1.06); transition: transform var(--t-lungo) var(--curva); }
.js .rivela.e-visto::after { transform: scaleY(0); }
.js .rivela.e-visto > img { transform: none; }
/* I piatti entrano in sequenza breve. */
.js .righe .riga { opacity: 0; transform: translateY(14px); }
.js .righe.e-visto .riga { opacity: 1; transform: none; transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva); transition-delay: calc(var(--i, 0) * 45ms); }

/* ------------------------- Passaggio tra pagine ---------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--t-breve) var(--curva) both vt-esce; }
::view-transition-new(root) { animation: var(--t-medio) var(--curva) both vt-entra; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(16px); } }

/* ------------------------------ Telefono ---------------------------------- */
@media (max-width: 760px) {
  :root { --barra-h: 60px; --basso-h: calc(60px + env(safe-area-inset-bottom)); }
  .marchio img { height: 44px; }
  .barra { gap: 12px; }
  .barra__nav a { font-size: 1.2rem; }
  .stato--barra { font-size: .88rem; }
  .stato__dopo { display: none; }

  .sequenza { height: 260svh; }
  .pannello { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); transform: none; width: auto; }
  .atto { align-self: end; }
  .atto__lista { margin-top: 12px; }
  .atto__richiami { font-size: .95rem; }
  .atto__richiami .solo-ampio { display: none; }
  .atto__nome { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .atto__prezzo { margin-top: 8px; font-size: 1.6rem; }
  .atto__azione { margin-top: 14px; }
  .sequenza__nav { left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); justify-content: center; }
  .statico { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .statico:nth-child(2) .statico__foto { order: 0; }
  body.in-sequenza .barra-basso { transform: translateY(110%); }

  .blocco { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); }
  .blocco > * { grid-column: 2 !important; grid-row: auto !important; }
  .blocco--pizze .blocco__foto { grid-column: 1 / -1 !important; }
  .blocco--pizze .blocco__foto img { width: 118%; margin-left: -26%; }
  .blocco--kebab .blocco__testo { order: 2; margin-top: -24px; }
  .blocco--kebab .blocco__foto { grid-column: 1 / -1 !important; margin-top: 0; order: 1; }
  .blocco--kebab .blocco__foto img { width: 116%; margin-left: 4%; }
  .blocco--burger { background: linear-gradient(transparent 0 90px, var(--fondo-2) 0); }
  .blocco--burger .blocco__testo { grid-template-columns: 1fr; }
  .righe--due { grid-template-columns: 1fr; }
  .blocco__titolo { margin-top: 18px; }

  .dove__griglia { grid-template-columns: 1fr; grid-template-rows: none; }
  .dove__info, .mappa, .dove__orari { grid-column: 1; grid-row: auto; }
  .mappa { min-height: 280px; }

  .piede__social { margin-left: 0; }

  .barra-basso {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset: auto 0 0; z-index: 60;
    height: var(--basso-h); padding-bottom: env(safe-area-inset-bottom); background: rgba(29, 23, 18, .97); border-top: 1px solid var(--linea);
    view-transition-name: barra-basso; transition: transform var(--t-medio) var(--curva);
  }
  .barra-basso a { display: grid; min-height: 44px; place-items: center; font: 800 1.3rem var(--f-titolo); text-transform: uppercase; text-decoration: none; color: var(--crema); transition: opacity var(--t-breve) var(--curva); }
  .barra-basso a:first-child { background: var(--crema); color: var(--fondo); }
  .barra-basso a:active { opacity: .7; }

  .tabs { top: calc(var(--bozza-h) + var(--barra-h) - 8px); }
  .tab { font-size: 1.15rem; padding: 0 12px; }
  .menu-strumenti { flex-wrap: wrap; }
  .btn-allergia { flex: 1 1 100%; }
  .cat__titolo { font-size: clamp(3rem, 15vw, 4.4rem); }
  .cat__griglia { grid-template-columns: 1fr; gap: 12px; }
  .card__nome { font-size: 1.8rem; }
  .filtro__griglia { grid-template-columns: 1fr 1fr; }
  body.con-ordine { padding-bottom: calc(86px + var(--basso-h)); }
  dialog.scheda { width: 100%; max-height: 94svh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  @keyframes entra-scheda { from { transform: translateY(40px); opacity: 0; } }
  .riepilogo__azioni { grid-template-columns: 1fr; }
  .scheda__piede { grid-template-columns: 1fr; }
  .qta { justify-content: center; }
  .scheda__aggiungi { white-space: nowrap; }
}

/* ----------------------- Meno movimento: solo dissolvenze corte ------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 200ms !important; transition-delay: 0s !important; animation-duration: 200ms !important; }
  .js .rivela::after { display: none; }
  .js .rivela > img, .js .righe .riga, .barra > *, .btn:active { transform: none !important; }
  ::view-transition-new(root) { animation-name: vt-esce; animation-direction: reverse; }
}

/* Menu: icone prima del titolo, senza immagini decorative laterali. */
.cat__testa > .cat__img { display: none; }
.cat__titolo img.cat__emoji {
  display: inline-block;
  width: 1em;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  vertical-align: .08em;
}
.tab img.tab__emoji {
  display: inline-block;
  width: 1.25em;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  flex-shrink: 0;
}

/* Menu: schede uniformi, titoli leggibili e prezzi su una riga separata. */
.cat__titolo {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  padding-bottom: 14px;
}
.cat__testa { align-items: center; border-bottom-width: 3px; }
.cat__griglia {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  align-items: stretch;
}
.cat__griglia > .card {
  min-width: 0;
  min-height: 360px;
  height: 100%;
  padding: 24px;
  gap: 14px;
  box-sizing: border-box;
}
.card__testa { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.card__nome {
  font-size: 1.55rem;
  line-height: 1.18;
  min-height: 3.54em;
  overflow-wrap: anywhere;
  margin: 0;
}
.card__prezzo {
  font-size: 1rem;
  line-height: 1.25;
  padding: 7px 10px;
  transform: none;
  box-shadow: none;
  white-space: normal;
  max-width: 100%;
  margin: 0;
}
.card__ingr { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.card__nota { font-size: .85rem; line-height: 1.45; }
.card__nota + .card__nota { margin-top: 0; }
.tab { min-width: 132px; justify-content: center; min-height: 48px; font-size: 1.1rem; }
@media (max-width: 1050px) {
  .cat__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cat__griglia { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cat__griglia > .card { padding: 20px; min-height: 330px; }
  .cat__titolo { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
  .card__nome { font-size: 1.45rem; }
  .tab { min-width: 120px; font-size: 1rem; }
}