/* ═══════════════════════════════════════════════════════════════════════════
   SITO SU MISURA — RISTORANTE DA TONINO (S373, riscritto da capo)

   ⚠⚠⚠ LA VERSIONE PRIMA ERA UN DOCUMENTO. Ogni sezione: titolo, testo, fine.
   Tutte larghe uguale, tutte allineate uguale, rettangoli accostati. Mario, tre
   volte: *«sembra fatto da incompetenti»*. Aveva ragione, e non erano le
   animazioni: era la composizione.

   Le sei regole, prese guardando insieme un sito che gli piaceva:
     1. una idea per schermata — una parola sola, enorme, e il resto vuoto
     2. niente rettangoli — archi, ovali, mezzelune
     3. le immagini ESCONO dallo schermo invece di stare in una cornice
     4. il vuoto e' voluto
     5. tutto centrato, una colonna sola
     6. qualche segno disegnato a mano

   ⚠ Il buio non e' un gusto: una mezzaluna di brace che emerge dal nero non deve
     essere una foto perfetta. Il nero perdona quello che il bianco denuncia.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --nero:       #0D0A08;   /* piu' scuro di prima: le forme devono emergere */
    --carbone:    #17120E;
    --vino:       #7A1F1F;
    --brace:      #E8A33D;
    --calce:      #F2EADD;
    --fumo:       #938779;
}

* { box-sizing: border-box; }
/* ⚠⚠⚠ IL SITO SI SPOSTAVA DI LATO, E NON ME NE ERO ACCORTO — l'ha visto Mario.
   La macchia esce dal bordo destro, e questo rende il DOCUMENTO piu' largo della
   finestra: 476 contro 390, misurati. A riposo tutto e' centrato, ma basta uno
   sfioramento laterale col pollice e l'intera pagina scivola — e ci resta.

   ⚠ `overflow-x: hidden` sul CORPO non basta: a scorrere e' l'elemento `html`,
     che sta sopra. Va messo su tutti e due.
   ⚠⚠ E si dichiara due volte di seguito: `hidden` per i browser vecchi (il
     tablet della cassa ha Chromium 74), `clip` per quelli nuovi. `clip` e'
     meglio perche' non crea un contenitore scorrevole — `hidden` invece lo crea,
     e a volte si porta dietro effetti strani sugli elementi fissi. Chi non
     conosce `clip` tiene `hidden` e funziona lo stesso. */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--nero);
    color: var(--calce);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-x: hidden;      /* ⚠ le forme escono dai bordi: senza, barra laterale */
    overflow-x: clip;
}

/* La grana: senza, le grandi campiture scure sembrano plastica. La disegna il
   browser — zero richieste, zero peso. */
body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 60; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── NAVIGAZIONE ─────────────────────────────────────────────────────────── */
.testa {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.3rem 1.6rem;
    background: linear-gradient(to bottom, rgba(13,10,8,.7), transparent);
}
.testa-nome { color: var(--calce); text-decoration: none; font-weight: 500; font-size: 1.05rem; }
.testa-voci { display: flex; align-items: center; gap: 1.4rem; }
.testa-voci a { color: var(--calce); text-decoration: none; font-size: 1.05rem; opacity: .9; transition: opacity .2s, color .2s; }
.testa-voci a:hover { opacity: 1; color: var(--brace); }
.testa-prenota { padding: .5rem 1.1rem; border: 1px solid rgba(242,234,221,.4); border-radius: 2px; }
@media (max-width: 720px) { .testa-voci { display: none; } }

/* ── 1 · IL FUOCO ────────────────────────────────────────────────────────── */
.fuoco {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
}
.fuoco-strato { position: absolute; inset: 0; }

/* Gli spezzoni impilati: uno solo visibile alla volta, e il passaggio e' una
   dissolvenza lunga — 1,6 secondi. Piu' corta si legge come uno stacco. */
.spezzone {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}
.spezzone--su { opacity: 1; }
.fuoco-fermo { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Nessun media caricato: la brace disegnata. Serve a far vedere la forma senza
   spacciare per vera una foto presa altrove — che ha anche un padrone. */
.fuoco-finto {
    position: absolute; inset: 0;
    background:
        radial-gradient(58% 48% at 50% 62%, #D9631A 0%, #8C2E0B 42%, transparent 74%),
        radial-gradient(90% 60% at 50% 100%, rgba(232,163,61,.18), transparent 60%),
        var(--nero);
}

/* Il velo: una curva lunga, non una fascia. ⚠ Il salto brusco fra chiaro e
   scuro l'occhio lo legge come un BORDO, ed e' quello che faceva sembrare foto
   e testo due rettangoli incollati. */
.fuoco::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(13,10,8,.62) 0%, rgba(13,10,8,.1) 18%, transparent 34%),
        radial-gradient(70% 55% at 50% 52%, rgba(13,10,8,.55) 0%, rgba(13,10,8,.72) 45%, rgba(13,10,8,.88) 100%);
}

.fuoco-testo { position: relative; z-index: 2; padding: 0 1.6rem; max-width: 46rem; }

.fuoco h1 {
    margin: 0 0 1.8rem;
    font-size: clamp(3.4rem, 16vw, 7rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.04em;
    font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 140;
    text-shadow: 0 4px 40px rgba(0,0,0,.75);
}

/* La riga viva: nessun riquadro. Un riquadro pieno su una foto sembra il campo
   di un modulo — e sotto deve continuare a vedersi il fuoco. */
.viva {
    margin: 0 0 2.4rem;
    font-size: clamp(1rem, 4.2vw, 1.18rem);
    text-shadow: 0 2px 16px rgba(0,0,0,.95);
}
.viva strong { font-weight: 700; color: var(--brace); }
.viva--pochi { font-weight: 500; }
/* ⚠ `.viva--pieno` esisteva nella vista e non nel foglio: riscrivendo il CSS da
   capo mi ero portato dietro solo la variante «pochi». L'ha preso lo scanner
   delle classi. Quando e' pieno il tono si abbassa — non e' un avviso, e' una
   porta chiusa per stasera. */
.viva--pieno { color: var(--fumo); }
.viva--pieno .tizzone { background: var(--fumo); box-shadow: none; animation: none; }

.tizzone {
    display: inline-block; width: 7px; height: 7px; margin-right: .6rem;
    border-radius: 50%; background: var(--brace); vertical-align: middle;
    box-shadow: 0 0 9px 1px rgba(232,163,61,.8);
    animation: tizzone 3.2s ease-in-out infinite;
}
@keyframes tizzone {
    0%,100% { opacity: .45; box-shadow: 0 0 5px 0 rgba(232,163,61,.5); }
    50%     { opacity: 1;   box-shadow: 0 0 14px 2px rgba(232,163,61,.9); }
}

/* ── IL CERCHIO DISEGNATO A MANO ─────────────────────────────────────────
   ⚠⚠ E' la sesta regola: un segno storto in mezzo a forme perfette dice che la
   pagina l'ha composta qualcuno. Due tracciati leggermente disallineati, come un
   cerchio fatto a penna in due passate. */
.cerchio {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    /* ⚠ S392 — centrato IN PROPRIO: nella home lo ereditava dall'eroe (text-align
       center), nelle pagine di testo stava nel body e le due righe «Prenota /
       ora» uscivano allineate a sinistra. Visto da Mario su due pagine. */
    text-align: center;
    width: 168px; height: 168px;
    color: var(--calce); text-decoration: none;
    font-size: 1.02rem; line-height: 1.3;
    transition: color .25s ease, transform .25s ease;
}
.cerchio svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cerchio span { position: relative; z-index: 1; }
.cerchio:hover { color: var(--brace); transform: scale(1.03); }

.scorri {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    z-index: 2; width: 1px; height: 44px; overflow: hidden;
    background: rgba(242,234,221,.18);
}
.scorri span {
    display: block; width: 1px; height: 14px; background: var(--brace);
    animation: scorri 2.4s ease-in-out infinite;
}
@keyframes scorri { 0% { transform: translateY(-16px); } 100% { transform: translateY(46px); } }

/* ── L'ENTRATA DELLE SEZIONI ─────────────────────────────────────────────
   Una classe sola, aggiunta quando la sezione entra nello schermo. */
[data-entra] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
[data-entra].dentro { opacity: 1; transform: none; }

/* ── 2 · UNA PAROLA SOLA ─────────────────────────────────────────────────
   ⚠⚠ Il vuoto e' la regola che piu' di tutte separa una pagina composta da un
   documento. Qui c'e' quasi solo silenzio, e serve a far sentire la parola. */
/* ⚠⚠⚠ LA PAROLA SALE. Fra la fine del fuoco e «brace» restavano circa 330px di
   nero, e subito dopo altri 220 di pietra scura in cima alla macchia: piu' di
   mezzo schermo consecutivo di nulla. Il vuoto e' aria finche' separa due cose;
   quando diventa attesa, e' solo pagina che non finisce mai.
   ⚠ Da 78svh a 52svh, e l'imbottitura dimezzata: la parola arriva subito dopo il
     fuoco, e il respiro resta sotto — dove serve, prima della forma. */
/* ⚠⚠ S389 — qui c'era `min-height: 52svh`: mezza schermata di nero attorno a una
   parola. Mario dal telefono: «troppi spazi vuoti, lunga da scorrere». Il vuoto
   resta una scelta, ma si misura in rem, non in schermate; e sotto il nero un
   alone di brace, cosi' il fondo non e' un buco. */
.parola { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.6rem 1.5rem;
          background: radial-gradient(60% 50% at 50% 30%, rgba(232,163,61,.09), transparent 70%); }
.parola-grande {
    margin: 0 0 1.6rem;
    font-size: clamp(4rem, 22vw, 11rem);
    font-weight: 700; line-height: .82; letter-spacing: -.05em;
    font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 144;
    color: var(--calce);
}
.parola-piccola { font-size: clamp(2.6rem, 13vw, 6rem); }
/* ⚠⚠⚠ QUI STAVA TUTTO IL VECCHIO BLOCCO DELLA MEZZALUNA (mezzaluna → arco →
   ovale → macchia, e le regole del testo che l'accompagnava). E' stato
   SOSTITUITO dalla composizione su griglia in fondo al foglio.

   ⚠ L'avevo lasciato qui aggiungendo il nuovo sotto: le regole vecchie
     continuavano a valere, e una di loro — `grid-column: 2` su `.luna-figura`
     dentro una vecchia regola per schermi larghi — spostava il piatto a
     sinistra. L'ha preso la batteria contando le colonne dichiarate.
   ⚠⚠ E' la QUARTA volta oggi che aggiungo invece di sostituire: le misure del
     testo, le regole del cerchio, quelle della variante B, e adesso queste.
     Quando si cambia strada, la vecchia si TOGLIE — non si copre. */


/* ── TITOLI E OCCHIELLI ──────────────────────────────────────────────────── */
section h2 {
    margin: 0 0 .6rem;
    font-size: clamp(2rem, 7vw, 3.1rem);
    font-weight: 500; line-height: 1.02; letter-spacing: -.028em;
    font-variation-settings: 'SOFT' 50, 'WONK' 1;
    text-align: center;
}
.occhiello { margin: 0 0 2.6rem; color: var(--fumo); text-align: center; font-size: 1.02rem; }

/* ── 4 · IL MENÙ FISSO ───────────────────────────────────────────────────── */
.fisso { padding: 4rem 1.6rem 4.5rem; background: var(--carbone); }   /* S389: era 6rem */
.fisso-carte { display: grid; gap: 1.1rem; max-width: 62rem; margin: 0 auto; }
.carta {
    padding: 2.2rem 1.6rem;
    border: 1px solid rgba(232,163,61,.22);
    border-radius: 200px 200px 8px 8px;   /* arco in alto: niente rettangoli */
    background: rgba(13,10,8,.5);
    text-align: center;
}
.carta h3 { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 500; font-variation-settings: 'SOFT' 40, 'WONK' 1; }
.carta-prezzo { margin: 0 0 .9rem; font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--brace); }
.carta-prezzo span { font-size: 1.3rem; margin-left: .15rem; }
/* ⚠⚠⚠ S405c — LA NOTA DEL PREZZO MAGGIORATO E' PREZZO, NON DESCRIZIONE.
   Era uscita con `carta-desc`: piccola e del colore del testo, quindi si leggeva
   come una postilla. E' l'altra meta' dell'informazione sul conto — chi prenota
   il venerdi per la domenica deve vederla, non trovarla. Stesso colore del
   prezzo (`--brace`), corpo intermedio fra il prezzo e la descrizione. */
.carta-prezzo-nota { margin: -.5rem 0 .9rem; font-size: 1.45rem; font-weight: 700;
                     line-height: 1.2; color: var(--brace); }
/* ⚠⚠⚠ S387 — `pre-line` TIENE GLI A CAPO CHE HA SCRITTO LUI.
   Mario aveva scritto la descrizione con una riga per portata e sul sito usciva
   tutto attaccato: «artigianali Primi», «Carbonara Secondo», «pollo Contorni».
   I titoli delle portate finivano in coda alla riga prima.
   ⚠ `pre-line` e non `pre`: tiene gli a capo ma continua a mandare a capo da
     solo le righe troppo lunghe. Con `pre` una riga lunga uscirebbe dal riquadro.
   ⚠⚠ Misurato col browser, non letto nel foglio: due righe scritte davano una
     riga disegnata. Adesso due. (`misura_righe_descrizione.py`) */
.carta-desc { margin: 0 0 1rem; font-size: 1.06rem; white-space: pre-line; }
.carta-cosa { list-style: none; margin: 0; padding: 0; color: var(--fumo); font-size: 1.02rem; }
.carta-cosa li { padding: .16rem 0; }
@media (min-width: 780px) { .fisso-carte { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* ── 5 · I PIÙ ORDINATI ──────────────────────────────────────────────────── */
.ordinati { padding: 4rem 0; text-align: center; }   /* S389: era 6rem */
.ordinati-fila {
    display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
    gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 1.6rem 1.5rem; scrollbar-width: none;
}
.ordinati-fila::-webkit-scrollbar { display: none; }
.piatto { margin: 0; scroll-snap-align: center; }
.piatto-ovale {
    aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 50% / 42%;              /* ovale, non riquadro */
    border: 1px solid rgba(232,163,61,.22);
    background: var(--carbone);
}
.piatto-ovale img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piatto figcaption { padding: 1rem .4rem 0; }
.piatto h3 { margin: 0 0 .2rem; font-size: 1.1rem; font-weight: 500; }
.piatto-prezzo { margin: 0; color: var(--brace); font-weight: 500; }
@media (min-width: 780px) {
    .ordinati-fila { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; max-width: 58rem; margin: 0 auto; gap: 2rem; }
}

.testo-link { display: inline-block; margin-top: 1.5rem; color: var(--brace); text-decoration: none; border-bottom: 1px solid rgba(232,163,61,.4); }

/* ── 6 · IL LOCALE, AD ARCHI ─────────────────────────────────────────────── */
.locale { padding: 3.5rem 0 4rem; text-align: center; }   /* S389: era 5rem/6rem */
.archi {
    display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 1.6rem 1.5rem; scrollbar-width: none;
}
.archi::-webkit-scrollbar { display: none; }
.arco { margin: 0; scroll-snap-align: center; }
.arco img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
    border-radius: 999px 999px 6px 6px;    /* arco a tutto sesto */
    background: var(--carbone);
}
@media (min-width: 780px) { .archi { grid-auto-columns: 26%; max-width: 76rem; margin: 0 auto; } }

/* ── 7 · LA STRADA ───────────────────────────────────────────────────────
   ⚠ Qui la composizione conta meno della chiarezza: chi legge sta decidendo se
   mettersi in macchina. Due colonne, testo pieno, niente forme. */
.strada { padding: 4rem 1.6rem 4.5rem; background: var(--carbone); }   /* S391: era 6rem */
.strada-due { display: grid; gap: 2.2rem; max-width: 54rem; margin: 0 auto; text-align: center; }
.strada h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 500; color: var(--brace); }
.strada p { margin: 0; }
.strada-nota { max-width: 34rem; margin: 2.6rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(242,234,221,.12); color: var(--fumo); font-size: 1.05rem; text-align: center; }
@media (min-width: 780px) { .strada-due { grid-template-columns: 1fr 1fr; text-align: left; } }

/* ── 8 · LE OCCASIONI ────────────────────────────────────────────────────── */
.occasioni { padding: 4rem 1.6rem 4.5rem; text-align: center; }   /* S389: era 6rem/7rem */
.occasioni p { max-width: 30rem; margin: 0 auto 1rem; }
.occasioni-forte { font-size: clamp(1.3rem, 5.5vw, 1.75rem); line-height: 1.35; }
.occasioni-forte strong { color: var(--brace); font-weight: 700; }

.bottone {
    display: inline-block; margin-top: 1.4rem;
    padding: 1rem 2.1rem; background: var(--vino); color: var(--calce);
    text-decoration: none; font-weight: 500; border-radius: 2px; min-height: 44px;
    font: inherit; font-weight: 500; cursor: pointer;   /* S393: come <button> prendeva il carattere del sistema, 13px Arial */
    transition: background .2s, box-shadow .25s, transform .12s;
}
.bottone:hover { background: #8E2626; box-shadow: 0 8px 30px -12px rgba(232,163,61,.5); }
.bottone:active { transform: translateY(1px); }
.bottone--vuoto { background: transparent; border: 1px solid rgba(122,31,31,.9); }
.bottone--vuoto:hover { background: var(--vino); }

/* ── LA BARRA DEL POLLICE ────────────────────────────────────────────────── */
.pollice { display: none; }
@media (max-width: 720px) {
    .pollice {
        display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        background: rgba(13,10,8,.97);
        border-top: 1px solid rgba(242,234,221,.13);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .pollice a { display: flex; align-items: center; justify-content: center; min-height: 52px; color: var(--calce); text-decoration: none; font-size: 1.02rem; }
    .pollice-primo { background: var(--vino); font-weight: 500; }
}

/* ⚠⚠ S389 — il fondo del piede e' calcolato sul cerchio: barra del pollice +
   disco + un margine. Prima (6rem) gli orari finivano sotto il disco, e Mario lo
   ha visto nella prima schermata che ha mandato. E' l'unico posto della pagina
   dove il testo non puo' scorrere via da sotto il cerchio: e' la fine. */
.piede { padding: 3rem 1.6rem calc(var(--fondo-cerchio) + 112px); text-align: center; color: var(--fumo); font-size: 1.05rem; }
.piede p { margin: .25rem 0; }
.piede-nome { color: var(--calce); font-size: 1.1rem; font-weight: 500; margin-bottom: .8rem; }
.piede a { color: var(--calce); text-decoration: none; }
.piede-orari { margin-top: 1rem; font-size: 1rem; opacity: .85; }

/* ── QUALITÀ MINIMA ──────────────────────────────────────────────────────
   ⚠⚠⚠ Chi ha chiesto meno movimento lo ha fatto per un motivo: a certe persone
   le dissolvenze danno la nausea. La regola sta in fondo per vincere su tutto. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, [data-entra] { animation: none !important; transition: none !important; }
    [data-entra] { opacity: 1 !important; transform: none !important; }
    .spezzone { transition: none !important; }
}
a:focus-visible, .cerchio:focus-visible, .bottone:focus-visible { outline: 2px solid var(--brace); outline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   S374 — L'INTRO: il logo che sale e prende posto nella barra

   ⚠⚠⚠ IL GRIGIO NON E' UNA DECORAZIONE: E' LA SCHERMATA DI CARICAMENTO. Mentre
   il logo sale, il primo video si scarica. L'intro non AGGIUNGE attesa, la
   riempie — ed e' la differenza fra un'intro difendibile e due secondi rubati a
   chi voleva solo sapere se sei aperto.

   ⚠ `#C0C0C0` e' MISURATO sui quattro angoli del file del logo, non stimato:
     e' lo stesso grigio del JPEG, cosi' il rettangolo del logo si fonde con la
     barra e non si vede dove finisce l'uno e comincia l'altra.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --grigio-marchio: #C0C0C0; }

/* Il sipario: copre tutto, e sfuma nel primo video quando il logo e' a posto. */
.sipario {
    position: fixed; inset: 0; z-index: 40;
    background: var(--grigio-marchio);
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.sipario.via { opacity: 0; }

/* La barra col marchio dentro: stesso grigio, cosi' il logo ci sta come se il
   suo fondo fosse la barra. */
.testa--marchio {
    background: var(--grigio-marchio);
    padding: .55rem 1.2rem;
}
.testa--marchio .testa-voci a { color: #241C16; opacity: .88; }
.testa--marchio .testa-voci a:hover { color: #7A1F1F; opacity: 1; }
.testa--marchio .testa-prenota { border-color: rgba(36,28,22,.38); }
.testa--marchio .testa-prenota:hover { background: var(--vino); color: var(--calce); border-color: var(--vino); }

.testa-logo { display: block; line-height: 0; }
.testa-logo img { display: block; height: 42px; width: auto; }

/* ⚠⚠ Durante l'intro il logo sale sopra il sipario e le voci non si vedono:
   compaiono solo quando il logo e' arrivato, come chiesto. */
/* ⚠⚠⚠ L'ALTEZZA SI ALZA SULLA BARRA, NON SUL LOGO. Al primo giro avevo messo
   `z-index: 50` sul logo: non e' servito a niente, perche' un figlio non puo'
   uscire dal contesto di impilamento del padre — e `.testa` sta a 5, sotto il
   sipario che sta a 40. Risultato: due secondi di grigio e basta, il logo non si
   vedeva. Preso misurando, non guardando il codice. */
body.in-intro .testa { z-index: 50; }
.marchio--grande { position: relative; }
.marchio--vola { transition: transform 1.15s cubic-bezier(.62,.02,.24,1); }
.marchio--grande img { height: 84px; }

body.in-intro .testa-voci,
body.in-intro .testa { background: transparent; }
body.in-intro .testa-voci { opacity: 0; }
.testa-voci { transition: opacity .7s ease .15s; }
body.pronto .testa-voci { opacity: 1; }
body.in-intro .fuoco-testo, body.in-intro .scorri { opacity: 0; }
.fuoco-testo, .scorri { transition: opacity .9s ease .35s; }

/* ⚠ Il logo ingrandito ha il fondo grigio del JPEG: durante il volo si vede un
   rettangolo. Va bene finche' il sipario e' dello STESSO grigio — e' proprio il
   trucco. ⚠⚠ Con un logo PNG a fondo trasparente si potrebbe far dissolvere il
   grigio PRIMA che il logo arrivi, che e' piu' bello: vale la pena chiederlo. */

@media (max-width: 720px) {
    .testa--marchio { padding: .5rem 1rem; }
    .testa-logo img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .sipario { display: none; }
    .marchio--vola, .testa-voci, .fuoco-testo, .scorri { transition: none !important; opacity: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S375 — IL LOGO AL CENTRO, LA BARRA CHE SFUMA, UN SOLO «PRENOTA»
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA BARRA A TRE ZONE ─────────────────────────────────────────────────
   Voci a sinistra, logo al centro, «Prenota» a destra. ⚠ Le due colonne
   laterali hanno la STESSA larghezza (`1fr`), o il logo sembra centrato e non lo
   e': basta una voce piu' lunga dell'altra e si sposta di qualche pixel — che a
   occhio si nota, anche senza saper dire perche'. */
.testa--marchio {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: transparent;      /* il fondo lo mette il velo qui sotto */
}
/* ⚠⚠⚠ LE COLONNE SI ASSEGNANO, NON SI LASCIANO ALL'ORDINE DEL DOCUMENTO. Nel
   codice il logo viene per primo (ed e' giusto: e' il nome del locale, chi legge
   con la voce lo vuole sentire per primo), quindi finiva nella colonna 1 e
   restava a sinistra nonostante il `center`. Misurato: x=58 su 390, non 148.
   ⚠ Il numero di colonna e' esplicito: cosi' l'ordine di lettura e quello visivo
     restano indipendenti, e cambiare l'uno non sposta l'altro. */
.testa--marchio .testa-voci    { grid-column: 1; justify-self: start; }
.testa--marchio .testa-logo    { grid-column: 2; justify-self: center; }
.testa--marchio .testa-prenota { grid-column: 3; justify-self: end; }

/* ── IL VELO CHE SFUMA AI LATI ───────────────────────────────────────────
   ⚠⚠ Il grigio pieno da bordo a bordo tagliava il fuoco in due con una riga
   netta — lo stesso difetto che avevamo tolto fra foto e testo. Sfumando ai lati
   la barra si appoggia sull'immagine invece di sedercisi sopra.
   ⚠ Sta su un elemento suo e non sulla barra, o la maschera mangerebbe anche il
     logo e le voci. */
.testa--marchio::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: var(--grigio-marchio);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* ── UN SOLO «PRENOTA» ALLA VOLTA ────────────────────────────────────────
   ⚠⚠⚠ Nascosto finche' il cerchio dell'eroe e' in vista: due pulsanti identici
   a dieci centimetri l'uno dall'altro sono una svista. Compare quando il cerchio
   esce — cosi' su un computer non si resta senza appena si scorre. */
.testa-prenota {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease, background .2s, color .2s;
}
.testa-prenota.mostra { opacity: 1; transform: none; pointer-events: auto; }

/* Sul telefono le voci non ci sono: il logo resta al centro e la barra del
   pollice fa il resto. */
@media (max-width: 720px) {
    .testa--marchio { grid-template-columns: 1fr auto 1fr; }
    .testa--marchio .testa-prenota { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S376 — IL CERCHIO RESTA SEMPRE IN VISTA

   ⚠⚠⚠ Scelta di Mario: il cerchio non scorre via. E' l'unico modo di prenotare
   in tutta la pagina — via quello della barra in alto, via quello della barra
   del pollice. Un'azione, un posto.

   ⚠⚠ Il rischio vero non e' tecnico: un cerchio fisso in mezzo allo schermo
   COPRE il testo che si sta leggendo. Per questo, appena si esce dall'eroe,
   scende in basso e rimpicciolisce: resta lo stesso segno, nello stesso posto
   orizzontale, ma smette di stare in mezzo alla lettura.
   ═══════════════════════════════════════════════════════════════════════════ */

.cerchio {
    position: fixed;
    left: 50%;
    top: 62svh;
    transform: translate(-50%, -50%);
    z-index: 30;
    transition: top .6s cubic-bezier(.3,.7,.3,1),
                width .6s ease, height .6s ease,
                font-size .6s ease, color .25s ease;
}
.cerchio:hover { transform: translate(-50%, -50%) scale(1.03); }

/* ⚠⚠⚠ QUI STAVANO LE REGOLE DELLA «VARIANTE B» (cerchio al centro che sbiadiva
   per far leggere il testo sotto). Sono state SOSTITUITE dalla disposizione
   nuova: freccia sopra, cerchio in fondo, e nell'angolo dopo lo scorrimento.

   ⚠ Le avevo lasciate nel foglio aggiungendo le nuove sotto, e continuavano a
     vincere: la regola `@media (hover: none)` rimpiccioliva ancora il cerchio a
     92px dopo lo scorrimento, mentre doveva restare della stessa misura.
     Misurato — 92 invece di 118 — e preso dalla batteria, non a occhio.
   ⚠⚠ E' l'errore piu' facile in un foglio di stile lungo: due regole per la
     stessa cosa che si annullano a vicenda. Quando si cambia strada, la strada
     vecchia si TOGLIE, non si copre. */

.testa-vuoto { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   S377 — HAMBURGER, FRECCIA, E IL CERCHIO IN BASSO

   ⚠⚠⚠ Il guasto visto da Mario nella schermata: «Menù Contatti» finiva TAGLIATO
   al bordo sinistro — si leggeva «lenù». Tre elementi in una barra da 390px non
   ci stanno, e la griglia li spingeva fuori. Un tasto solo risolve.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── IL GRIGIO PIÙ CORTO ─────────────────────────────────────────────────
   ⚠⚠ Restringendo la maschera il grigio resta solo dietro al logo, e ai lati
   c'e' il fuoco. Due cose insieme: la barra pesa meno sull'immagine, e il tasto
   del menu' sta sul trasparente — quindi puo' essere BIANCO e si vede. */
.testa--marchio::before {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 33%, #000 67%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 33%, #000 67%, transparent 100%);
}

/* ── IL TASTO A HAMBURGER ────────────────────────────────────────────────
   Due linee che diventano una X. ⚠ Due e non tre: con due la rotazione a X e'
   pulita, con tre la terza deve sparire e si vede il salto. */
.menu-tasto {
    grid-column: 3; justify-self: end;
    width: 46px; height: 46px;          /* ⚠ 44px minimi per il pollice */
    display: grid; place-content: center; gap: 7px;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-tasto span {
    display: block; width: 26px; height: 2px;
    background: var(--calce);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0,0,0,.6);   /* leggibile anche su fuoco chiaro */
    transition: transform .32s cubic-bezier(.5,.1,.3,1), opacity .2s;
}
.menu-tasto.aperto span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-tasto.aperto span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* ── IL PANNELLO ─────────────────────────────────────────────────────────── */
.pannello {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* ⚠ S401 — nove voci: il passo scende da 1.6 a 1.05rem, e se lo schermo e' basso
       il pannello scorre invece di tagliare le ultime voci (con `justify-content:
       center` il contenuto che trabocca esce da tutti e due i lati: per questo
       `safe center`, e il ripiego per chi non lo conosce e' il padding). */
    gap: 1.05rem; padding: 6rem 1.6rem 2.5rem; box-sizing: border-box;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    justify-content: safe center;
    background: rgba(13,10,8,.97);
    opacity: 0; transition: opacity .38s ease;
}
.pannello.su { opacity: 1; }

/* ⚠⚠⚠ SENZA QUESTA RIGA IL SITO E' INUTILIZZABILE. `hidden` mette `display:none`
   dal foglio del browser, ma il `display:flex` qui sopra e' una regola
   dell'autore e vince comunque — quindi il pannello restava steso su tutta la
   pagina, invisibile, e **intercettava ogni tocco**: hamburger, cerchio, link,
   niente rispondeva piu'.
   ⚠ Non l'ho trovato leggendo il codice: l'ha detto il browser provando a
     premere il tasto del menu — «<div hidden class="pannello"> intercepts
     pointer events». Un elemento invisibile che blocca i clic non si vede in una
     fotografia: si vede solo provando a toccare. */
.pannello[hidden] { display: none; }
.pannello a {
    color: var(--calce); text-decoration: none;
    font-size: clamp(1.5rem, 6vw, 2.2rem);   /* S401: era 7vw/2.4rem — con nove voci non ci stavano */
    line-height: 1.15; text-align: center;
    font-variation-settings: 'SOFT' 50, 'WONK' 1;
    transition: color .2s;
}
.pannello a:hover { color: var(--brace); }
.pannello-prenota { color: var(--brace) !important; }
.pannello-tel { font-size: 1.05rem !important; color: var(--fumo) !important; margin-top: 1.2rem; }
body.menu-aperto { overflow: hidden; }

/* ⚠⚠⚠ E LA BARRA SALE SOPRA IL PANNELLO, o la X resta sotto e il menu' NON SI
   CHIUDE PIU'. Sul telefono non c'e' nemmeno il tasto Esc: si resta intrappolati
   nel pannello, e l'unica via d'uscita e' chiudere la pagina.
   ⚠ E' la stessa svista del logo durante l'intro: avevo alzato il figlio e non
     il contenitore. Un figlio non esce dal contesto di impilamento del padre —
     due volte lo stesso errore, in due punti diversi, nella stessa giornata.
   ⚠⚠ Trovato dal browser mentre PROVAVA a premere la X, non guardando il codice:
     «<div class="pannello su"> intercepts pointer events». */
body.menu-aperto .testa { z-index: 50; }
body.menu-aperto .cerchio, body.menu-aperto .pollice { opacity: 0; pointer-events: none; }

/* ── LA FRECCIA ──────────────────────────────────────────────────────────
   ⚠ Prima era una linea che scendeva: una linea non indica un verso. Adesso e'
   una freccia, piu' grande, e sta SOPRA il cerchio — l'ordine di lettura e'
   «continua giu'», poi «oppure prenota». */
.scorri {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--fondo-cerchio) + 128px);
    z-index: 2; width: 24px; height: 34px;
    color: rgba(242,234,221,.55);
    background: none; overflow: visible;
    animation: freccia 2.6s ease-in-out infinite;
}
.scorri svg { width: 100%; height: 100%; display: block; }
@keyframes freccia {
    0%, 100% { transform: translate(-50%, 0); opacity: .5; }
    50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* ── IL CERCHIO: IN BASSO, POI IN BASSO A DESTRA ─────────────────────────
   ⚠⚠⚠ Al centro dello schermo copriva le parole — mangiava tre parole di «Dove
   lasciare la macchina». In fondo non copre niente, e appena si scorre si sposta
   nell'angolo restando **della stessa misura**: se rimpicciolisse, per un attimo
   sembrerebbe un altro pulsante. */
:root { --fondo-cerchio: 26px; }
.cerchio {
    position: fixed;
    left: 50%; top: auto;
    bottom: var(--fondo-cerchio);
    transform: translateX(-50%);
    width: 132px; height: 132px;
    font-size: 1.02rem;
    z-index: 30;
    transition: left .55s cubic-bezier(.35,.7,.3,1), bottom .55s ease,
                transform .55s cubic-bezier(.35,.7,.3,1), opacity .3s ease,
                width .55s cubic-bezier(.35,.7,.3,1), height .55s cubic-bezier(.35,.7,.3,1);
}
.cerchio:hover { transform: translateX(-50%) scale(1.04); }

/* ⚠⚠ La sentinella dello scorrimento: 24px in cima, invisibile, non tocca il
   disegno. Quando esce dallo schermo il cerchio si sposta. */
#soglia-scorso { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

/* ⚠⚠⚠ S387 — IL DISCO E' PIENO. Con lo sfondo trasparente le parole della
   pagina passavano DENTRO la scritta «Prenota ora»: non venivano nascoste,
   venivano impastate — e diventavano illeggibili tutte e due, il testo sotto e
   il pulsante sopra.
   ⚠ Il colore e' quello delle sezioni, quindi il disco non si vede come disco:
     si vede che sotto non c'e' niente. E' l'unico modo di tenere insieme le due
     cose che ha chiesto Mario — sempre intero, sempre ben visibile — su uno
     schermo dove un oggetto da 126px nell'angolo destro incontra per forza un
     testo largo quanto la pagina.
   ⚠⚠ L'ultimo 4% sfuma, se no il bordo del disco taglierebbe una linea netta
     accanto al tracciato disegnato a mano. */
body.scorso .cerchio {
    left: auto;
    right: 14px;
    transform: none;
    opacity: 1;
    background: radial-gradient(circle closest-side,
                var(--carbone) 96%, rgba(23,18,14,0) 100%);
    border-radius: 50%;
}
body.scorso .cerchio:hover { transform: scale(1.04); opacity: 1; }

/* Sopra la barra del pollice, che e' alta 52px piu' la tacca del telefono. */
@media (max-width: 720px) {
    :root { --fondo-cerchio: calc(52px + env(safe-area-inset-bottom, 0px) + 14px); }
    .cerchio { width: 126px; height: 126px; font-size: 1rem; }
    /* ⚠⚠ S389 — nell'angolo il disco si stringe a 100px: sul telefono di Mario a
       126 copriva il titolo del menu fisso, la nota dei parcheggi e gli orari nel
       piede. La scritta resta a 1rem (16px, il minimo di §16.6): «Prenota» a 16px
       e' larga ~60px e nel disco ci sta con margine. Nell'eroe resta 126. */
    body.scorso .cerchio { width: 100px; height: 100px; }
    .pollice { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S378 — SI LEGGE, LA FRECCIA RESPIRA, IL CERCHIO E' VIVO

   ⚠⚠⚠ Mario: *«ci sono scritte troppo piccole e una persona anziana non le
   vedrebbe bene»*. Ha ragione, e non e' un dettaglio di gusto: il pubblico di un
   ristorante di paese ha spesso sopra i sessant'anni, e una riga da 14px la
   salta — cioe' la salta proprio chi poi telefona per chiedere quello che c'era
   scritto.
   ⚠ Il minimo qui e' 16px per il testo secondario e 18px per quello che si legge
     davvero. Sotto, non si scende: nemmeno per far stare meglio una riga.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LE MISURE ───────────────────────────────────────────────────────────
   ⚠⚠⚠ CORRETTE ALLA FONTE, non coperte da un blocco in fondo. Al primo giro
   avevo aggiunto qui sotto le misure nuove lasciando le vecchie dov'erano: il
   risultato sullo schermo era giusto (vince l'ultima), ma nel foglio restavano
   sette regole sotto 1rem pronte a tornare a galla al primo ritocco. E' lo
   stesso errore delle regole del cerchio, fatto due volte nella stessa ora.
   ⚠ Quando si cambia una misura, si cambia DOVE STA — non si scrive sotto. */
body { font-size: 1.125rem; }

.viva {
    font-size: clamp(1.18rem, 4.8vw, 1.35rem);
    line-height: 1.45;
}
.tizzone { width: 9px; height: 9px; }
.parola-sotto { font-size: 1.14rem; }
.occhiello    { font-size: 1.1rem; }
.piatto-desc  { font-size: 1.02rem; }

/* ── LA FRECCIA: LONTANA DAL CERCHIO, E CON L'AMBRA CHE SCENDE ───────────
   ⚠⚠⚠ Stava a DIECI PIXEL dal cerchio: cosi' non sembrava un invito a scorrere,
   sembrava l'etichetta del pulsante. Adesso c'e' spazio vero in mezzo, e si
   capisce che sono due cose diverse.
   ⚠ E torna l'ambra che scende, che e' quello che diceva «vai giu'»: una freccia
     ferma e' un'icona, una freccia che scende e' un'indicazione. */
.scorri {
    bottom: calc(var(--fondo-cerchio) + 126px + 78px);
    width: 30px; height: 42px;
    color: var(--brace);
    opacity: .85;
    animation: freccia 2.4s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes freccia {
    0%   { transform: translate(-50%, -9px); opacity: 0; }
    28%  { opacity: .95; }
    72%  { opacity: .95; }
    100% { transform: translate(-50%, 13px); opacity: 0; }
}

/* ── IL CERCHIO RESPIRA ──────────────────────────────────────────────────
   ⚠⚠ I due tracciati disegnati a mano ruotano molto lentamente in versi
   opposti: e' il movimento di una penna che ripassa, non un'animazione da
   applicazione. Trenta secondi — non si deve vedere che gira, si deve solo
   sentire che non e' morto.
   ⚠ E un alone ambrato che pulsa piano sotto: dice «questo si tocca» senza
     doverlo scrivere. */
.cerchio svg path:first-child  { transform-origin: 50% 50%; animation: gira 34s linear infinite; }
.cerchio svg path:last-child   { transform-origin: 50% 50%; animation: gira 46s linear infinite reverse; }
@keyframes gira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cerchio::before {
    content: '';
    position: absolute; inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,163,61,.22) 30%, rgba(232,163,61,0) 70%);
    animation: alone 4.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes alone {
    0%, 100% { opacity: .35; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.04); }
}
.cerchio:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .cerchio svg path, .cerchio::before, .scorri { animation: none !important; }
    .scorri { opacity: .85 !important; transform: translateX(-50%) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   S384 — LA COMPOSIZIONE SU GRIGLIA, NON SU MARGINI NEGATIVI

   ⚠⚠⚠ Da Mario la forma piccola finiva SOPRA il piatto, a destra. Sul banco no:
   misurata a x=-23, cioe' a sinistra. Un difetto che non riesco a riprodurre non
   si indovina — si toglie la fragilita' che lo rende possibile.

   La fragilita' erano i **margini negativi nel flusso normale**: dove finisce un
   blocco dipende da larghezza, margini dei fratelli, collasso dei margini e
   arrotondamenti del browser. Basta che una di queste cose sia diversa di
   qualche pixel e l'elemento va da un'altra parte.

   ⚠ Adesso le tre forme stanno in una GRIGLIA a 12 colonne, ognuna con la sua
     casella dichiarata. La posizione non e' piu' il risultato di un calcolo:
     e' scritta. Non puo' finire altrove.
   ═══════════════════════════════════════════════════════════════════════════ */

.luna {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    padding: 0 0 1.5rem;
    position: relative;
}

/* ⚠⚠⚠ S389 — LE TRE FORME STANNO STRETTE, IN DUE RIGHE, E SI TOCCANO.
   Prima: piatto a destra sulla riga 1, la grande a sinistra sulla riga 2, la
   piccola sulla riga 3 — e sul telefono di Mario venivano fuori DUE BUCHI NERI:
   a destra delle due forme di sinistra, e sotto, prima del menu fisso. Una
   schermata e mezza di nero per tre foto. «Poco wow e troppi spazi vuoti».
   Adesso la grande sta sulla STESSA riga del piatto, appesa in basso a
   sinistra, e la piccola sta sotto il piatto, infilata fra i due: il nero
   fra le forme e' quello di una composizione, non di una pagina finita. */

/* IL PIATTO — colonne 5-13: comincia a meta' e esce dal bordo destro. */
.luna-figura {
    grid-column: 5 / 14;            /* ⚠ 14 su 12: e' cosi' che esce dal bordo */
    grid-row: 1;
    margin: 0;
    width: auto;
    aspect-ratio: 4 / 5;
    z-index: 1;

    /* ⚠⚠⚠ LA FORMA DEL PIATTO STA QUI, E NON SI TOGLIE. Sostituendo il blocco
       vecchio con la griglia mi sono portato via anche border-radius, ritaglio,
       filo d'ambra e animazione: il piatto e' diventato un RETTANGOLO, e Mario
       l'ha visto subito.
       ⚠ Ho corretto l'errore di «aggiungere senza togliere» facendo il suo
         gemello: togliere piu' del necessario. La regola giusta e' sostituire il
         blocco INTERO e rileggerlo, non tagliare a vista.
       ⚠⚠ I raggi sono diversi da quelli delle altre due forme: raggi ripetuti =
         cornice ripetuta. */
    overflow: hidden;
    border-radius: 68% 32% 44% 56% / 38% 62% 38% 62%;
    animation: macchia 24s ease-in-out infinite;
    box-shadow: 0 0 0 1px rgba(232,163,61,.35), 0 24px 60px -30px rgba(0,0,0,.9);
}
.luna-figura img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .95; }
@keyframes macchia {
    0%, 100% { border-radius: 68% 32% 44% 56% / 38% 62% 38% 62%; }
    25%      { border-radius: 34% 66% 71% 29% / 63% 30% 70% 37%; }
    50%      { border-radius: 74% 26% 38% 62% / 29% 71% 29% 71%; }
    75%      { border-radius: 28% 72% 60% 40% / 55% 34% 66% 45%; }
}
@media (prefers-reduced-motion: reduce) { .luna-figura { animation: none !important; } }

.macchia {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(232,163,61,.3), 0 24px 60px -30px rgba(0,0,0,.9);
}
.macchia img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* LA GRANDE — colonne 1-6, STESSA riga del piatto, appesa in basso: esce dal
   bordo sinistro e sconfina sotto il piatto, cosi' a destra sua non c'e' nero
   ma il piatto. ⚠ `grid-column: -1` non esiste: si parte da 1, e per uscire a
   sinistra si usa un margine sulla prima colonna. */
.macchia--1 {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: end;
    margin-left: -14vw;
    margin-bottom: -22%;
    aspect-ratio: 5 / 6;
    border-radius: 42% 58% 66% 34% / 55% 32% 68% 45%;
    animation: macchia1 26s ease-in-out infinite;
    z-index: 2;
}
@keyframes macchia1 {
    0%, 100% { border-radius: 42% 58% 66% 34% / 55% 32% 68% 45%; }
    33%      { border-radius: 66% 34% 38% 62% / 34% 62% 38% 66%; }
    66%      { border-radius: 30% 70% 58% 42% / 62% 40% 60% 38%; }
}

/* LA PICCOLA — seconda riga, sotto il piatto, spinta su fra le altre due. */
.macchia--2 {
    grid-column: 6 / 11;
    grid-row: 2;
    margin-top: -22%;
    aspect-ratio: 1 / 1;
    border-radius: 60% 40% 33% 67% / 38% 66% 34% 62%;
    animation: macchia2 31s ease-in-out infinite;
    z-index: 3;
}
@keyframes macchia2 {
    0%, 100% { border-radius: 60% 40% 33% 67% / 38% 66% 34% 62%; }
    33%      { border-radius: 34% 66% 62% 38% / 66% 36% 64% 34%; }
    66%      { border-radius: 70% 30% 44% 56% / 32% 68% 30% 70%; }
}

@media (min-width: 780px) {
    .luna { max-width: 62rem; margin: 0 auto; padding: 1rem 0 4rem; }   /* S396: era 82rem — su un monitor da 1920 una forma sola era alta 700px */
    .luna-figura { grid-column: 7 / 14; }
    .macchia--1  { grid-column: 2 / 6; grid-row: 2; align-self: start; margin-top: -10%; margin-bottom: 0; }
    .macchia--2  { grid-column: 4 / 7; grid-row: 3; margin-top: -14%; }
}

@media (prefers-reduced-motion: reduce) { .macchia { animation: none !important; } }

/* ── SIAMO APERTI? ───────────────────────────────────────────────────────
   ⚠⚠ Poco testo, grande. E' un'informazione che si legge di sfuggita, spesso
   in macchina: se serve fermarsi a leggere, non ha fatto il suo lavoro. */
.aperti { padding: 3.5rem 1.6rem; text-align: center; background: var(--carbone); }   /* S391: era 4.5rem */
.aperti-stato {
    margin: 0 0 .6rem;
    font-size: clamp(1.7rem, 6.5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variation-settings: 'SOFT' 50, 'WONK' 1;
}
.aperti-stato--si { color: var(--brace); }
.aperti-dettaglio { margin: 0; font-size: 1.14rem; color: var(--calce); }
.aperti-dettaglio strong { color: var(--brace); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   S388 — LA PAGINA «COME ARRIVARE E DOVE PARCHEGGIARE» (dove-siamo.php)

   ⚠⚠ Solo classi NUOVE, nessuna regola esistente toccata: la pagina riusa
   `.strada`, `.aperti`, `.bottone`, `.occhiello`, `.testo-link`, `.occasioni-forte`
   della home, cosi' resta lo stesso vestito. Qui c'e' quello che la home non
   aveva: una testata SENZA il video, e un elenco di fatti.

   ⚠ Chi legge questa pagina spesso e' in macchina o sta per salirci, e spesso ha
     piu' di sessant'anni: niente sotto 1rem (§16.6), pulsanti grandi, poco per
     schermata.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA TESTATA SENZA VIDEO ──────────────────────────────────────────────
   La barra e' `position: absolute` sopra la pagina (e' fatta per stare sul
   fuoco): qui sotto non c'e' un'immagine ma un testo, quindi la testata lascia
   lo spazio della barra — logo da 84px piu' i margini — e poi comincia.
   ⚠ `min-height` e non un'altezza fissa: con l'indirizzo lungo su due righe deve
     potersi allungare, non tagliare. */
.capo {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 7.5rem 1.6rem 1.5rem;   /* S391: era 9.5rem sopra e min-height 62svh — mezza schermata di nero */
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(232,163,61,.10), transparent 70%),
        var(--nero);
}
.capo .occhiello { margin-bottom: 1.2rem; }
.capo h1 {
    margin: 0 0 1.4rem;
    font-size: clamp(2.3rem, 9.5vw, 4.6rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.035em;
    font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 140;
}
.capo-sotto { max-width: 34rem; margin: 0 auto 2.2rem; font-size: 1.14rem; line-height: 1.55; }
.capo-sotto strong { color: var(--brace); font-weight: 500; }

/* Il collegamento sotto ogni parcheggio, e quello in fondo alla sezione della
   home: centrato come il resto. Il margine del paragrafo lo azzera gia'
   `.strada p`, e `.testo-link` porta il suo spazio sopra. */
.strada-link { text-align: center; }

/* ── IN BREVE ────────────────────────────────────────────────────────────
   Un elenco di fatti, uno per riga: la parte della pagina scritta per essere
   copiata — da chi manda l'indirizzo a un amico e da chi risponde al posto
   nostro. Niente riquadri: una riga sottile fra un fatto e l'altro. */
.breve { padding: 4rem 1.6rem 4.5rem; text-align: center; }   /* S391: era 5.5/6rem */
.breve dl { max-width: 34rem; margin: 0 auto; }
.breve dl > div { padding: 1.1rem 0; border-top: 1px solid rgba(242,234,221,.12); }
.breve dl > div:last-child { border-bottom: 1px solid rgba(242,234,221,.12); }
.breve dt { margin: 0 0 .25rem; color: var(--fumo); font-size: 1rem; }
.breve dd { margin: 0; font-size: 1.14rem; line-height: 1.5; }
.breve dd a { color: var(--calce); text-decoration: none; border-bottom: 1px solid rgba(242,234,221,.3); }

/* ── SE VI PERDETE ───────────────────────────────────────────────────────
   Come «Per le occasioni» nella home: una frase grande e un pulsante. Il fondo
   lascia spazio alla barra del pollice e al cerchio. */
.arrivo-aiuto { padding: 3.5rem 1.6rem 4rem; text-align: center; background: var(--carbone); }   /* S391: era 4/8rem */
.arrivo-aiuto .occasioni-forte { margin-bottom: 1.6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   S389 — LA HOME SI ACCORCIA: «SIAMO APERTI» NELL'EROE, UN CENNO AI PARCHEGGI

   Mario, dal telefono, sulla home in anteprima: «dettagli doppi che non servono
   visto che sono gia' nella pagina dove siamo», «poco wow e troppi spazi vuoti,
   lunga da scorrere», e c'e' ancora il carosello da mettere. Quindi: il riquadro
   «siamo aperti» sale nell'eroe sotto la riga viva (stesso pezzo `_aperti.php`,
   vestito compatto); la sezione dei parcheggi diventa una frase con un pulsante;
   le sezioni respirano 4rem invece di 6-7; le tre forme si stringono.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── «SIAMO APERTI» NELL'EROE ─────────────────────────────────────────────
   Il pezzo e' lo stesso della pagina «Come arrivare»; qui e' una riga di
   stato sotto la riga viva: trasparente, stretta, con l'ombra del testo che
   l'eroe da' a tutto cio' che sta sul video. ⚠ Nessuna misura sotto 1rem. */
.fuoco .aperti { padding: 0; background: transparent; margin: -1.6rem 0 2.4rem; }
.fuoco .aperti-stato { font-size: 1.14rem; font-weight: 500; letter-spacing: 0; margin: 0 0 .15rem;
                       text-shadow: 0 2px 16px rgba(0,0,0,.95); }
.fuoco .aperti-dettaglio { font-size: 1rem; color: var(--fumo); text-shadow: 0 2px 16px rgba(0,0,0,.95); }
.fuoco .aperti-dettaglio strong { color: var(--calce); font-weight: 500; }

/* ── IL CENNO: COME ARRIVARE ──────────────────────────────────────────────
   Una frase e un pulsante. Il resto sta nella pagina, dove chi sta decidendo
   se mettersi in macchina lo trova per intero. */
.cenno { padding: 4rem 1.6rem 4.5rem; text-align: center; background: var(--carbone); }
.cenno p { max-width: 30rem; margin: 0 auto 1.6rem; font-size: 1.14rem; line-height: 1.55; }
.cenno p strong { color: var(--brace); font-weight: 500; }

/* ── IL TASTO DEL MENÙ ALLA CARTA (S389) ──────────────────────────────────
   Sotto le foto dei piatti, sopra il menu fisso. Sul fondo nero della sezione
   delle forme, prima del carbone del fisso: cosi' non sembra parte del fisso. */
.carta-tasto { margin: 0; padding: .5rem 1.6rem 3.5rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   S390 — «TAVOLATE E CERIMONIE IN SALA RISERVATA» (eventi.php)

   ⚠ La testata delle pagine di testo ha preso un nome generico: `.capo` e
     `.capo-sotto` stanno accanto a `.arrivo-capo`/`.arrivo-sotto` nello STESSO
     selettore (una regola, due nomi), cosi' la pagina delle cerimonie non porta
     addosso un nome che parla di parcheggi. Riusa `.occasioni`, `.cenno`,
     `.breve`, `.arrivo-aiuto`, `.bottone`. Nuovi qui: i tre fatti e le serate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── COME FUNZIONA: tre fatti ─────────────────────────────────────────────── */
.fatti { padding: 4rem 1.6rem 4.5rem; background: var(--carbone); }
.fatti-tre { display: grid; gap: 2rem; max-width: 60rem; margin: 0 auto; text-align: center; }
.fatti-tre h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 500; color: var(--brace); }
.fatti-tre p { margin: 0; line-height: 1.55; }
.fatti-tre strong { color: var(--calce); font-weight: 700; }
.fatti-tre a { color: var(--calce); text-decoration: none; border-bottom: 1px solid rgba(242,234,221,.3); }
@media (min-width: 780px) { .fatti-tre { grid-template-columns: repeat(3, 1fr); text-align: left; } }

/* ── LE PROSSIME SERATE: quello che la pagina base mostrava, senza riquadri ── */
.serate { padding: 4rem 1.6rem 4.5rem; text-align: center; background: var(--carbone); }
.serate-elenco { max-width: 34rem; margin: 0 auto; }
.serata { padding: 1.3rem 0; border-top: 1px solid rgba(242,234,221,.12); }
.serata:last-child { border-bottom: 1px solid rgba(242,234,221,.12); }
.serata-quando { margin: 0 0 .3rem; color: var(--brace); font-size: 1rem; }
.serata h3 { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 500; line-height: 1.15; }
.serata p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.serata-prezzo { margin-top: .4rem !important; color: var(--fumo); }

/* ═══════════════════════════════════════════════════════════════════════════
   S391 — «COME ARRIVARE» DIVENTA UNA PAGINA COMPOSTA, NON UN FOGLIO DI TESTO

   Mario: «vediamo bene la pagina dove siamo e sistemiamola a wow come tutto».
   Due mosse: lo SCHEMA disegnato a mano sotto la testata (due parcheggi, il
   ristorante, la strada che sale), e il numero grande «4 minuti» come parola
   della pagina. E via mezza schermata di nero dalla testata.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LO SCHEMA ─────────────────────────────────────────────────────────────
   ⚠ Tratti in `currentColor` e colori dalle variabili: lo schema si veste come
     la pagina. I passi sono tratteggiati con le punte tonde: sembrano passi.
   ⚠ I testi dentro l'SVG sono in unita' del viewBox (390): su uno schermo da
     360 si riducono del 8%, quindi partono da 18 per non scendere sotto 16. */
.schema { margin: 0 auto; padding: 0 1rem 2.5rem; max-width: 34rem; color: var(--calce); text-align: center; }
.schema svg { display: block; width: 100%; height: auto; overflow: visible; }
.schema-passi { fill: none; stroke: var(--brace); stroke-width: 2.2; stroke-linecap: round;
                stroke-dasharray: 2 9; opacity: .95; }
.schema-passi--eco { stroke-width: 1.2; opacity: .45; stroke-dasharray: 2 9; stroke-dashoffset: 5; }
.schema-noi path { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .9; }
.schema-noi .schema-noi--eco { stroke-width: .9; opacity: .45; }
.schema-brace { fill: var(--brace); filter: drop-shadow(0 0 6px rgba(232,163,61,.8)); }
.schema-p circle { fill: var(--carbone); stroke: currentColor; stroke-width: 1.4; }
.schema-p text { fill: var(--calce); font-family: inherit; font-size: 22px; font-weight: 700; }
.schema-tetto { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.schema-etichetta { fill: var(--calce); font-family: inherit; font-size: 18px; }
.schema-etichetta--fumo { fill: var(--fumo); }
.schema-nome { fill: var(--calce); font-family: inherit; font-size: 18px; font-weight: 500; }
.schema figcaption { margin: .6rem auto 0; max-width: 26rem; color: var(--fumo); font-size: 1rem; line-height: 1.5; }

/* ── IL NUMERO DELLA PAGINA ────────────────────────────────────────────────── */
.strada-numero { margin: .6rem 0 .2rem; }
.strada .occhiello { margin: 0 auto 2.4rem; max-width: 30rem; }

/* ── L'EROE DELLE PAGINE (S391) ───────────────────────────────────────────────
   «Lo stesso hero della home» (Mario): lo strato del fuoco e' condiviso
   (`_fuoco_strato.php`), il testo no. Qui il titolo e' un indirizzo su due righe,
   non due parole: piu' piccolo del titolo della home, o va a capo quattro volte.
   La riga sotto e' la `.viva` senza tizzone: stessa ombra, stesso posto. */
.fuoco--pagina h1 { font-size: clamp(2.4rem, 10vw, 4.8rem); line-height: .98; letter-spacing: -.03em; margin: 0 0 1.4rem; }
.fuoco--pagina .occhiello { margin-bottom: 1.1rem; text-shadow: 0 2px 16px rgba(0,0,0,.95); }
.viva--pagina { max-width: 32rem; margin: 0 auto 2rem; font-size: 1.14rem; line-height: 1.5; }
.viva--pagina strong { color: var(--brace); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   S392 — IL MENÙ ALLA CARTA (menu.php)

   Righe grandi, prezzi allineati a destra sulla stessa riga del nome, la
   descrizione sotto in grigio, un filo fra un piatto e l'altro. L'indice delle
   categorie scorre col pollice e resta attaccato in alto mentre si legge.
   ⚠ Niente sotto 1rem (§16.6): chi legge un menu' spesso e' lontano dal telefono.
   ═══════════════════════════════════════════════════════════════════════════ */
.capo--breve { padding-bottom: 1.5rem; }

/* ── L'INDICE ─────────────────────────────────────────────────────────────── */
.carta-indice {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .9rem 1.6rem; scrollbar-width: none;
    background: rgba(13,11,9,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(242,234,221,.08);
}
.carta-indice::-webkit-scrollbar { display: none; }
/* S400 — la scia: al centro quando ci sta, scorre quando trabocca */
.carta-indice-scia { display: flex; gap: .6rem; margin: 0 auto; width: max-content; }
.carta-indice a {
    flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px;
    border: 1px solid rgba(242,234,221,.22); color: var(--calce); text-decoration: none;
    font-size: 1rem; white-space: nowrap;
}
.carta-indice a:hover, .carta-indice a:focus-visible { border-color: var(--brace); color: var(--brace); }
/* S400 — il gruppo che si sta leggendo: pieno, non solo bordato */
.carta-indice a.attiva { background: var(--brace); border-color: var(--brace); color: #1a1512; font-weight: 500; }

/* ── LA CARTA ─────────────────────────────────────────────────────────────── */
.carta { padding: 1rem 1.6rem 5rem; max-width: 40rem; margin: 0 auto; }
.carta-categoria { padding: 2.6rem 0 .6rem; scroll-margin-top: 4.2rem; }
/* S400 — Mario: «allineare le categorie al centro»: titoli dei gruppi, sottotitoli e
   sezioni al centro; le righe dei piatti restano nome a sinistra e prezzo a destra. */
.carta-categoria h2 { margin: 0 0 .3rem; text-align: center; }
.carta-categoria .occhiello { text-align: center; margin: 0 0 1rem; }
/* ── I GRUPPI (S397): la madre e' il titolo, le figlie sono sottotitoli ────── */
.carta-sotto { margin-top: 1.6rem; }
.carta-sotto-titolo { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 500; color: var(--brace); text-align: center; }
.carta-sotto .occhiello { text-align: center; margin: 0 0 .6rem; }
.piatti { list-style: none; margin: .6rem 0 0; padding: 0; }
/* la sezione dentro la categoria (S398): un titoletto in maiuscoletto, la riga sotto */
.carta-sezione { margin: 1.6rem 0 -.2rem; color: var(--brace); font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.piatto { padding: 1rem 0; border-top: 1px solid rgba(242,234,221,.12); }
.piatto:last-child { border-bottom: 1px solid rgba(242,234,221,.12); }
.piatto-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.piatto-riga h3 { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.25; text-align: left; }
.piatto-prezzo { flex: 0 0 auto; color: var(--brace); font-weight: 500; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
/* ⚠ a sinistra IN PROPRIO: le regole generiche delle sezioni centrano i paragrafi
   e li stringono; in una carta la descrizione sta sotto il nome, allineata a lui. */
.piatto-descrizione { margin: .35rem 0 0; color: var(--fumo); font-size: 1.02rem; line-height: 1.5; text-align: left; max-width: none; }
.piatto-etichette { margin: .3rem 0 0; color: var(--fumo); font-size: 1rem; text-align: left; max-width: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   S393 — CONTATTI E CHI SIAMO (contatti.php, chi-siamo.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SCRIVETECI: il modulo dei contatti, nel vestito scuro ────────────────── */
.scrivi { padding: 4rem 1.6rem 4.5rem; text-align: center; background: var(--carbone); }
.scrivi .occhiello { margin-bottom: 1.6rem; }
.scrivi-modulo { max-width: 30rem; margin: 0 auto; text-align: left; display: grid; gap: 1rem; }
.scrivi-modulo label { display: grid; gap: .4rem; color: var(--fumo); font-size: 1rem; }
.scrivi-modulo input, .scrivi-modulo textarea {
    width: 100%; box-sizing: border-box; padding: .85rem 1rem;
    background: rgba(242,234,221,.05); color: var(--calce);
    border: 1px solid rgba(242,234,221,.22); border-radius: 6px;
    font: inherit; font-size: 1.05rem; line-height: 1.4;
}
.scrivi-modulo input:focus, .scrivi-modulo textarea:focus { outline: none; border-color: var(--brace); box-shadow: 0 0 0 3px rgba(232,163,61,.18); }
.scrivi-modulo textarea { resize: vertical; min-height: 7rem; }
.scrivi-modulo .bottone { justify-self: center; margin-top: .4rem; }
.scrivi-esito { margin: .4rem 0 0; text-align: center; color: var(--brace); font-size: 1.05rem; }

/* ── LA STORIA: le parole del ristoratore, larghe e lente ─────────────────── */
.storia { padding: 3.5rem 1.6rem 1rem; }
.storia-testo { max-width: 34rem; margin: 0 auto; font-size: 1.2rem; line-height: 1.65; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   S394 — PRENOTA: LA PROCEDURA DEL SITO BASE, NEL VESTITO SCURO (prenota.php)

   ⚠⚠⚠ Il markup della procedura e' UNO (`_prenotazione_wizard.php`, condiviso con la
   vista base): queste regole vestono le sue classi qui, dove il foglio del sito
   base non c'e'. Le regole che fanno FUNZIONARE la procedura (passi nascosti,
   tavoli in posizione assoluta, forme) sono qui per intero: senza, i tre passi
   uscirebbero tutti insieme e la mappa sarebbe un elenco.
   ⚠ Anche le scritte dentro i tavoli della mappa stanno a 1rem (§16.6): il
     numero del tavolo e' proprio la cosa che uno deve leggere per sceglierlo.
   ═══════════════════════════════════════════════════════════════════════════ */
.prenota { padding: 0 1.2rem 5rem; }
.prenota-sumisura .booking-card { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1.2rem; background: var(--carbone); border-radius: 12px; }
.prenota-sumisura .booking-card h3 { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 500; text-align: center; }
.prenota-sumisura .book-step-hidden { display: none !important; }
.prenota-sumisura .book-step-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.prenota-sumisura .book-step-header h3 { margin: 0; flex: 1; text-align: left; }
.prenota-sumisura .form-row-pub { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .prenota-sumisura .form-row-pub { grid-template-columns: 1fr; } }
.prenota-sumisura .form-group-pub { margin-bottom: 1rem; }
.prenota-sumisura .form-group-pub label { display: block; margin-bottom: .4rem; color: var(--fumo); font-size: 1rem; }
.prenota-sumisura .form-group-pub input, .prenota-sumisura .form-group-pub select, .prenota-sumisura .form-group-pub textarea {
    width: 100%; box-sizing: border-box; padding: .85rem 1rem; font: inherit; font-size: 1.05rem; line-height: 1.4;
    background: rgba(242,234,221,.05); color: var(--calce); border: 1px solid rgba(242,234,221,.22); border-radius: 6px;
}
.prenota-sumisura .form-group-pub select option { background: #1a1512; color: var(--calce); }
.prenota-sumisura .form-group-pub input:focus, .prenota-sumisura .form-group-pub select:focus, .prenota-sumisura .form-group-pub textarea:focus {
    outline: none; border-color: var(--brace); box-shadow: 0 0 0 3px rgba(232,163,61,.18);
}
.prenota-sumisura .btn-cta, .prenota-sumisura .btn-book {
    display: inline-block; width: 100%; box-sizing: border-box; padding: .95rem 1.4rem; margin-top: .4rem;
    background: var(--vino, #7a2a2a); color: var(--calce); border: 1px solid rgba(242,234,221,.15); border-radius: 2px;
    font: inherit; font-size: 1.05rem; font-weight: 500; text-align: center; cursor: pointer; min-height: 44px;
}
.prenota-sumisura .btn-cta:disabled, .prenota-sumisura .btn-book:disabled { opacity: .5; cursor: default; }
.prenota-sumisura .book-back { background: none; border: none; padding: .4rem 0; color: var(--brace); font: inherit; font-size: 1rem; cursor: pointer; }
.prenota-sumisura .book-tabs { display: flex; gap: .6rem; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.prenota-sumisura .book-tab { flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(242,234,221,.22); background: transparent; color: var(--calce); font: inherit; font-size: 1rem; cursor: pointer; }
.prenota-sumisura .book-tab.active { border-color: var(--brace); color: var(--brace); }
.prenota-sumisura .book-mappa-container { display: flex; justify-content: center; padding: .8rem; background: rgba(242,234,221,.04); border-radius: 10px; overflow-x: auto; }
.prenota-sumisura .book-mappa-canvas { position: relative; border-radius: 8px; background: rgba(242,234,221,.08); }
.prenota-sumisura .book-tavolo { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid; box-sizing: border-box; transition: transform .15s ease; }
.prenota-sumisura .book-tav-quadrato, .prenota-sumisura .book-tav-rettangolare { border-radius: 6px; }
.prenota-sumisura .book-tav-rotondo, .prenota-sumisura .book-tav-ovale { border-radius: 50%; }
.prenota-sumisura .book-tav-disponibile { background: rgba(232,163,61,.18); border-color: var(--brace); cursor: pointer; }
.prenota-sumisura .book-tav-disponibile:hover { background: rgba(232,163,61,.35); transform: scale(1.06); }
.prenota-sumisura .book-tav-occupato { background: rgba(242,234,221,.06); border-color: rgba(242,234,221,.25); opacity: .55; }
.prenota-sumisura .book-tav-capienza { background: rgba(242,234,221,.04); border-color: rgba(242,234,221,.18); opacity: .55; }
.prenota-sumisura .book-tav-selected { background: var(--brace) !important; border-color: var(--calce) !important; }
.prenota-sumisura .book-tav-selected .book-tav-num, .prenota-sumisura .book-tav-selected .book-tav-posti { color: #1a1512; }
.prenota-sumisura .book-tav-num { font-size: 1rem; font-weight: 700; color: var(--calce); line-height: 1; }
.prenota-sumisura .book-tav-posti { font-size: 1rem; color: var(--fumo); line-height: 1.1; }
.prenota-sumisura .book-legenda { display: flex; gap: 1rem; justify-content: center; margin-top: .8rem; flex-wrap: wrap; }
.prenota-sumisura .book-leg-item { display: flex; align-items: center; gap: .4rem; font-size: 1rem; color: var(--fumo); }
.prenota-sumisura .book-leg-dot { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
.prenota-sumisura .book-leg-disponibile { background: rgba(232,163,61,.18); border-color: var(--brace); }
.prenota-sumisura .book-leg-occupato { background: rgba(242,234,221,.06); border-color: rgba(242,234,221,.25); }
.prenota-sumisura .book-leg-capienza { background: rgba(242,234,221,.04); border-color: rgba(242,234,221,.18); }
.prenota-sumisura .book-tavolo-info { background: rgba(242,234,221,.05); border-radius: 10px; padding: .8rem 1rem; margin-top: .8rem; }
.prenota-sumisura .book-tavolo-nome { font-size: 1.15rem; font-weight: 500; color: var(--brace); }
.prenota-sumisura .book-tavolo-dettagli { font-size: 1rem; color: var(--fumo); margin-top: .2rem; }
.prenota-sumisura .book-sconto-banner:not(:empty) { margin: .6rem 0 1rem; padding: .8rem 1rem; border-radius: 8px; background: rgba(232,163,61,.12); color: var(--calce); font-size: 1rem; }
.prenota-sumisura .book-parcheggio, .prenota-sumisura .book-gdpr, .prenota-sumisura .gdpr-consensi { display: flex; flex-direction: column; gap: .7rem; margin: .9rem 0; }
.prenota-sumisura .book-checkbox-inline, .prenota-sumisura .gdpr-consensi label { display: flex; gap: .6rem; align-items: flex-start; color: var(--fumo); font-size: 1rem; line-height: 1.45; }
.prenota-sumisura .book-checkbox-inline input, .prenota-sumisura .gdpr-consensi input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brace); }
.prenota-sumisura .book-parcheggio-costo, .prenota-sumisura .pg-meta { color: var(--fumo); font-size: 1rem; }
.prenota-sumisura .page-center { text-align: center; }
.prenota-sumisura .pg-mt-sm { margin-top: .6rem; } .prenota-sumisura .pg-mt-md { margin-top: 1rem; } .prenota-sumisura .pg-mb-md { margin-bottom: 1rem; }
.prenota-sumisura .booking-card a { color: var(--brace); }