@import url("tokens.css");
@import url("fonts.css");

/* =====================================================================
   LESS · Tavola Calda — foglio di stile del sito
   Il linguaggio è quello del volantino 4 facciate (settembre 2026):
   tenda a righe rosse, fascia scozzese, testate rosse, listino con
   filetto punteggiato, blocco rosso per il CLUB.
   I colori e i font vengono da tokens.css: non scriverne di nuovi qui.
   ===================================================================== */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x va su html, non su body: sul body farebbe diventare il body
   stesso il contenitore di scorrimento, e la pagina smetterebbe di scorrere
   a livello di documento (ancore e barra delle sezioni non funzionerebbero). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--crema);color:var(--testo);
  font-family:var(--font-testo);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.005em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:4px}
main{flex:1}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.wrap-stretto{width:min(100% - var(--gutter)*2,var(--max-stretto));margin-inline:auto}
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salta{position:absolute;left:-9999px;top:0;background:var(--rosso);color:#fff;padding:.7rem 1rem;z-index:100}
.salta:focus{left:.5rem;top:.5rem}

/* ---------- Elementi del volantino ---------- */

/* Tenda — proporzioni misurate sul volantino a 300 dpi:
   striscia 9,12 pt · vuoto 10,08 pt · altezza 19,9 pt. Angoli vivi.
   Il vuoto è più largo della striscia: è il dettaglio che la fa somigliare. */
.tenda{--striscia:clamp(8px,2.2vw,17px);
  height:calc(var(--striscia)*2.18);position:relative;flex:none;
  background:repeating-linear-gradient(90deg,
    var(--rosso) 0 var(--striscia),
    var(--crema) var(--striscia) calc(var(--striscia)*2.105))}
.tenda::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:linear-gradient(rgba(20,26,23,.11),transparent)}

/* ============ SCOZZESE — REGOLE FISSE ============
   1. Mai come fondo di un'area grande. Solo bande strette, oppure la forma
      dietro una parola o uno slogan breve tutto maiuscolo (vedi FRITTI).
   2. La banda è alta ESATTAMENTE DUE QUADRETTI: mai quadretti tagliati
      in altezza. L'altezza si calcola sempre da --quadro, non a mano.
   3. La banda ha SEMPRE il colore del blocco a cui appartiene: banda verde
      su blocco verde, banda rossa su blocco rosso. Mai due colori nello
      stesso blocco.
   Misure prese dal volantino: quadretto ~8,3 pt, banda ~16,6 pt = 2 quadretti.
   ================================================== */
:root{--quadro:clamp(7px,1.9vw,13px)}

.fascia-scozzese,
.con-banda::before{
  background-color:var(--banda-fondo,var(--verde));
  background-image:
    repeating-linear-gradient(90deg,var(--banda-velo,rgba(255,255,255,.14)) 0 var(--quadro),
      transparent var(--quadro) calc(var(--quadro)*2)),
    repeating-linear-gradient(180deg,transparent 0 var(--quadro),
      var(--banda-velo,rgba(255,255,255,.14)) var(--quadro) calc(var(--quadro)*2))}
.fascia-scozzese{height:calc(var(--quadro)*2);flex:none}

/* Parola su scozzese. I tre toni sono quelli campionati sul volantino:
   #EB7074 di base, due bande incrociate di rosso pieno al 45%. */
.parola-scozzese{display:inline-block;color:var(--crema);text-transform:uppercase;
  padding:.06em .45em;border-radius:9px;
  background-color:#EB7074;
  background-image:repeating-linear-gradient(90deg,rgba(223,23,35,.45) 0 .62em,transparent .62em 1.24em),
                   repeating-linear-gradient(0deg,rgba(223,23,35,.45) 0 .62em,transparent .62em 1.24em)}
.parola-scozzese--verde{background-color:#4c8375;
  background-image:repeating-linear-gradient(90deg,rgba(14,79,62,.5) 0 .62em,transparent .62em 1.24em),
                   repeating-linear-gradient(0deg,rgba(14,79,62,.5) 0 .62em,transparent .62em 1.24em)}

/* Occhiello: la piccola etichetta maiuscola spaziata */
.occhiello{font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--verde);margin:0 0 .7rem}
.occhiello--chiaro{color:rgba(255,248,231,.72)}

/* Filetto rosso corto sotto i claim */
.filetto{width:96px;height:4px;background:var(--rosso);border:0;margin:1.6rem auto}
/* Il segno <=> al posto del filetto, sotto "Perché LESS?" */
.segno-sez{width:clamp(56px,9vw,84px);margin:1.5rem auto;color:var(--rosso)}
.segno-sez svg{width:100%;height:auto;display:block}
.filetto--sx{margin-inline:0}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-testo);font-weight:600;font-size:1rem;line-height:1;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--rosso{background:var(--rosso);color:#fff}
.btn--rosso:hover{background:#c31019}
.btn--crema{background:var(--crema);color:var(--rosso)}
.btn--linea{background:transparent;color:var(--verde);border-color:rgba(14,79,62,.42)}
.btn--linea:hover{border-color:var(--verde);background:rgba(14,79,62,.06)}
.btn--linea-chiara{background:transparent;color:var(--crema);border-color:rgba(255,248,231,.5)}
.btn--linea-chiara:hover{background:rgba(255,248,231,.12)}
.btn--grande{font-size:1.06rem;padding:1.05rem 2rem}

/* Pillole informative (min. 24h, da 4 a 12 porzioni…) */
.pillole{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;padding:0;list-style:none}
.pillole li{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:.6rem 1.1rem;border:1.5px solid rgba(255,248,231,.45);color:var(--crema)}
.pillole--scure li{border-color:rgba(14,79,62,.4);color:var(--verde)}

/* ---------- Testata ---------- */
.testata{position:sticky;top:0;z-index:50;background:rgba(255,248,231,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.testata__in{display:flex;align-items:center;gap:1rem;min-height:64px}
.testata__logo{display:flex;align-items:center;text-decoration:none;padding:.4rem 0}
.testata__logo img{width:auto;height:clamp(30px,3.6vw,42px)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.nav a{text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde);padding:.55rem .7rem;border-radius:999px}
.nav a:hover{background:rgba(14,79,62,.08)}
.nav a[aria-current="page"]{color:var(--rosso)}
.nav .btn{margin-left:.5rem;padding:.65rem 1.1rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:760px){
  .nav a:not(.btn){padding:.45rem .45rem;font-size:.7rem;letter-spacing:.08em}
  .nav .btn{margin-left:.25rem;padding:.6rem .8rem;font-size:.72rem}
}

/* Testata rossa delle pagine interne, come le facciate 2 e 3 del volantino */
.testata-rossa{background:var(--rosso);color:#fff;padding:1.4rem 0}
.testata-rossa .wrap{display:flex;align-items:center;gap:1.2rem;justify-content:space-between}
.testata-rossa img{height:clamp(32px,4vw,46px);width:auto;filter:brightness(0) invert(1)}
.testata-rossa p{margin:0;text-align:right;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.9);max-width:18ch;line-height:1.5}

/* ---------- Copertina con foto ---------- */
.copertina{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.copertina__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.copertina::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,26,23,.62),rgba(20,26,23,.42) 45%,rgba(20,26,23,.78))}
.copertina__in{padding:clamp(2.4rem,7vw,4.5rem) 0 clamp(2rem,5vw,3.4rem)}
.copertina__logo{height:clamp(52px,9vw,84px);width:auto;filter:brightness(0) invert(1);margin-bottom:1.6rem}
.copertina h1{font-size:clamp(2.1rem,7.6vw,4rem);font-style:italic;text-wrap:balance;max-width:16ch}
.copertina h1 span{display:block}
.copertina__sotto{margin-top:1.2rem;max-width:44ch;color:rgba(255,255,255,.9);font-size:var(--t-m)}
.copertina__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

/* Stato aperto/chiuso */
.stato{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:.45rem 1rem;color:#fff;margin-bottom:1.4rem}
.stato__pallino{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);flex:none}
.stato--aperto .stato__pallino{background:#57d18d;box-shadow:0 0 0 4px rgba(87,209,141,.22)}
.stato--chiuso .stato__pallino{background:#ff8a90;box-shadow:0 0 0 4px rgba(255,138,144,.2)}
.stato--scuro{background:rgba(14,79,62,.09);border-color:var(--linea);color:var(--verde)}
.stato--scuro.stato--aperto .stato__pallino{background:#1a9d5c}
.stato--scuro.stato--chiuso .stato__pallino{background:var(--rosso)}
/* Seconda riga del badge: gli orari, visibili solo da chiusi */
.stato{flex-wrap:wrap;row-gap:.2rem}
.stato__orari{flex-basis:100%;font-weight:500;font-size:.74rem;opacity:.85;padding-left:calc(9px + .55rem)}

.stato__evento{font-weight:700;opacity:1}
.stato__orari:not([hidden]) + .stato__evento{margin-top:.1rem}

/* ---------- Sezioni ---------- */
.sez{padding:clamp(2.4rem,6vw,4rem) 0}
.sez--chiara{background:var(--bianco-caldo)}
.sez--verde{background:var(--verde);color:var(--crema)}
.sez--rossa{background:var(--rosso);color:#fff}
.sez--verde h2,.sez--rossa h2{color:var(--crema)}
.sez--centro{text-align:center}

/* Claim nel linguaggio del volantino: rosso dritto + verde corsivo */
.claim{font-size:clamp(1.9rem,6.6vw,3.2rem);color:var(--rosso);text-wrap:balance}
.claim em{display:block;font-style:italic;color:var(--verde)}
.intro{margin:0 auto;max-width:52ch;color:var(--testo-soft);font-size:1.02rem}

/* LESS Club: testo a sinistra, telefono con la schermata dell'app a destra (sotto, su schermi stretti) */
.club-hero{display:grid;gap:clamp(1.8rem,5vw,4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.telefono{display:block;width:min(100%,250px);margin:0 auto;padding:11px;border-radius:38px;
  background:#1a1a1a;box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,255,255,.08);
  transform:rotate(-3deg);transition:transform .25s}
.telefono:hover{transform:rotate(0) translateY(-4px)}
.telefono img{display:block;width:100%;height:auto;border-radius:28px;background:#fff}

/* Perché LESS?: il poster della sala, rielaborato in orizzontale.
   Parola in due colori (verde corsivo + rosso), frase con le enfasi verdi in corsivo,
   "Zero sprechi" su forma scozzese rossa: l'unico maiuscolo, come da regola. */
.perche{text-align:center}
.perche__griglia{display:grid;gap:clamp(1.6rem,4vw,3rem);margin-top:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.perche__parola{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.01em;
  font-size:clamp(2.3rem,7.4vw,3.8rem);transform:rotate(-3deg);margin:0}
.perche__parola em{font-style:italic;color:var(--verde)}
.perche__parola b{color:var(--rosso)}
.perche__testo{margin:1rem auto 0;font-size:var(--t-m);max-width:30ch;text-wrap:balance}
.perche__testo strong{font-family:var(--font-display);font-weight:700;font-style:italic;color:var(--verde)}
.perche__badge{margin-top:clamp(1.8rem,4vw,2.6rem);font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,3vw,1.4rem);letter-spacing:.06em}
.perche__badge .parola-scozzese{transform:rotate(-2deg)}

/* Riga delle categorie: ogni voce ha un trattamento diverso, come sul volantino.
   In home sta in una sezione propria fra "Perché LESS?" e i piatti al banco, sullo stesso fondo crema */
.categorie-sez{padding-top:0}
.categorie{display:flex;flex-wrap:wrap;gap:.45rem .8rem;justify-content:center;align-items:baseline;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,4.6vw,1.6rem);
  margin:0;padding:0;list-style:none}
.categorie a{text-decoration:none}
.categorie .c1{color:var(--rosso);text-transform:uppercase}
.categorie .c2{color:var(--verde);font-style:italic}
.categorie .c3{color:var(--rosso);text-transform:uppercase;box-shadow:inset 0 -.13em 0 var(--verde)}
.categorie .c4{color:var(--verde);font-style:italic}
/* .c5 usa .parola-scozzese: la forma di FRITTI sul volantino */
.categorie .c6{color:var(--rosso);text-transform:uppercase} /* EXTRA: non è sul volantino, solo nella pagina menu */
.categorie .punto{color:var(--testo-tenue);font-weight:400}
.sotto-categorie{margin:1rem 0 0;font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verde)}

/* ---------- Listino ---------- */
.menu-sez{margin-bottom:clamp(2.2rem,5vw,3.4rem);scroll-margin-top:90px}
@media (max-width:760px){.menu-sez{scroll-margin-top:132px}}
.menu-sez__titolo{font-size:clamp(1.6rem,5.6vw,2.3rem);color:var(--rosso);text-transform:uppercase;
  padding-bottom:.5rem;border-bottom:1.5px solid var(--rosso);margin-bottom:.3rem}
.piatti{list-style:none;margin:0;padding:0}
.piatto{padding:.85rem 0;border-bottom:1px solid rgba(14,79,62,.14)}
.piatto:last-child{border-bottom:0}
.piatto__riga{display:flex;align-items:baseline;gap:.5rem}
.piatto__nome{font-size:1.06rem;color:var(--verde);flex:none;max-width:calc(100% - 6.5rem)}
.piatto__punti{flex:1;min-width:1.2rem} /* solo spaziatore: niente puntini, divide la riga sottile del .piatto (come i piatti della settimana) */
.piatto__prezzo{flex:none;font-family:var(--font-display);font-weight:700;color:var(--rosso);
  font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.piatto__prezzo small{font-family:var(--font-testo);font-weight:500;font-size:.7rem;
  letter-spacing:.04em;color:var(--testo-tenue);margin-left:.15rem}
.piatto__desc{margin:.25rem 0 0;font-size:.9rem;color:var(--testo-soft);max-width:62ch}
.piatto__tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid rgba(14,79,62,.35);color:var(--verde);
  border-radius:999px;padding:.1rem .45rem;margin-left:.4rem;vertical-align:.14em}

/* ---------- Piatti del giorno ---------- */
.oggi{background:var(--verde);border-radius:var(--r);padding:clamp(1.4rem,4vw,2.2rem);
  color:var(--crema);position:relative;overflow:hidden}
.oggi--rossa{background:var(--rosso);color:#fff}

/* Banda in cima a un blocco pieno. Il colore lo eredita dal blocco:
   basta impostare --banda-fondo sul blocco stesso. */
.con-banda{position:relative;overflow:hidden}
.con-banda::before{content:"";position:absolute;top:0;left:0;right:0;z-index:1;
  height:calc(var(--quadro)*2)}
.sez--verde.con-banda,.oggi{--banda-fondo:var(--verde);--banda-velo:rgba(255,255,255,.14)}
.sez--rossa.con-banda,.oggi--rossa{--banda-fondo:var(--rosso);--banda-velo:rgba(255,255,255,.2)}
.oggi.con-banda{padding-top:calc(clamp(1.4rem,4vw,2.2rem) + var(--quadro)*2)}
.sez.con-banda{padding-top:calc(clamp(2.4rem,6vw,4rem) + var(--quadro)*2)}
.oggi h2{font-size:clamp(1.5rem,5vw,2rem);color:var(--crema)}
.oggi__lista{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.9rem}
.oggi__voce{display:grid;grid-template-columns:1fr auto;gap:.15rem .9rem;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid rgba(255,248,231,.22)}
.oggi__voce:last-child{border-bottom:0;padding-bottom:0}
.oggi__nome{font-family:var(--font-display);font-weight:700;font-size:1.08rem}
.oggi__desc{grid-column:1;font-size:.88rem;color:rgba(255,248,231,.78)}
.oggi__prezzo{grid-column:2;grid-row:1 / span 2;font-family:var(--font-display);font-weight:700;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.oggi__vuoto{color:rgba(255,248,231,.82);font-size:.94rem;margin:1rem 0 0}

/* ---------- Nastro scorrevole ---------- */
.nastro{background:var(--rosso);color:var(--crema);padding:.5rem 0;overflow:hidden;white-space:nowrap;flex:none}
.nastro__pista{display:inline-block;width:max-content;animation:scorri 34s linear infinite;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.92rem,2.6vw,1.05rem)}
.nastro span{padding:0 1rem}
.nastro .segno{width:1.5em;height:.72em;display:inline-block;vertical-align:-.02em;opacity:.55}
/* Il -50% e' meta' della PISTA, quindi la pista deve essere larga esattamente
   quanto il suo contenuto: da qui width:max-content. Senza, dentro l'elemento
   flex con overflow:hidden l'inline-block misurava 3211 px mentre il contenuto
   ne occupava 3614, il nastro tornava indietro 201 px in anticipo e ogni 34
   secondi si vedeva uno scatto. (29/9/2026) */
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Schede ---------- */
.griglia{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{background:var(--bianco-caldo);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.3rem;box-shadow:var(--ombra)}
.card h3{font-size:1.12rem;color:var(--verde);margin-bottom:.45rem}
.card p{font-size:.92rem;color:var(--testo-soft);margin-bottom:0}
.card a{color:var(--rosso);font-weight:600;text-decoration:none}
.card a:hover{text-decoration:underline}

/* ---------- Blocco CLUB ---------- */
.club__claim{font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:clamp(1.2rem,4.6vw,1.7rem);color:#fff;margin:.5rem 0 1rem}
.club__numeri{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-top:1.2rem}
.club__numeri div{background:rgba(255,255,255,.14);border-radius:12px;padding:1rem 1.15rem}
.club__numeri b{display:block;font-family:var(--font-display);font-size:2.1rem;line-height:1;color:#fff}
.club__numeri span{display:block;margin-top:.3rem;font-size:.9rem;color:rgba(255,255,255,.9)}
.passi{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem}
.passi li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline}
.passi b{font-family:var(--font-display);font-size:1.5rem;color:rgba(255,255,255,.55)}
.passi span{font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,4vw,1.2rem);color:var(--crema)}

/* ---------- Form ---------- */
.form{display:grid;gap:1.1rem}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.9rem;font-weight:600;color:var(--verde)}
.campo input,.campo textarea,.campo select{font-family:inherit;font-size:1rem;color:var(--testo);
  background:var(--bianco-caldo);border:1px solid rgba(14,79,62,.35);border-radius:var(--r-s);
  padding:.8rem .9rem;width:100%}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo textarea:focus{border-color:var(--verde);outline:none;
  box-shadow:0 0 0 3px rgba(14,79,62,.13)}
.campo__aiuto{font-size:.78rem;color:var(--testo-tenue)}
.campo__errore{font-size:.78rem;color:var(--rosso);font-weight:600}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.9rem;color:var(--testo-soft)}
.consenso input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--verde)}
.esca{position:absolute;left:-9999px}
.esito{border-radius:var(--r-s);padding:.9rem 1.1rem;font-size:.94rem;font-weight:500}
.esito--ok{background:rgba(14,79,62,.1);color:var(--verde)}
.esito--ko{background:rgba(224,24,35,.1);color:var(--rosso)}

/* ---------- Consigliaci: stelle e scelte ---------- */
/* Le stelle chiudono il questionario: vuote con filetto verde, piene di rosso al
   passaggio e alla scelta. Da una a quattro sono radio nascosti con l'etichetta a
   forma di stella; la quinta è un vero link (<a>) alla recensione Google, così si
   apre al tocco anche dove la navigazione da script è bloccata (Safari iOS). */
.stelle{border:0;margin:0;padding:.4rem 0 0;text-align:center;border-top:1px solid var(--linea)}
.stelle legend{float:left;width:100%;text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,4vw,1.4rem);color:var(--rosso);padding:1.2rem 0 .8rem}
.stelle__fila{display:flex;justify-content:center;gap:clamp(.25rem,1.6vw,.7rem);clear:both}
.stelle__fila label,.stelle__fila a{cursor:pointer;display:block;width:clamp(46px,12vw,76px);height:clamp(46px,12vw,76px);
  padding:4px;border-radius:50%;transition:transform .12s ease}
.stelle__fila label:hover,.stelle__fila a:hover{transform:scale(1.08)}
.stelle__fila svg{width:100%;height:100%;fill:transparent;stroke:var(--verde);stroke-width:1.1;
  stroke-linejoin:round;transition:fill .15s ease,stroke .15s ease}
.stelle__fila label.piena svg,.stelle__fila a.piena svg{fill:var(--rosso);stroke:var(--rosso)}
.stelle__fila input:focus-visible + label,.stelle__fila a:focus-visible{outline:3px solid var(--rosso);outline-offset:2px}
.stelle__parola{margin:.7rem 0 .4rem;font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:clamp(1.15rem,4vw,1.5rem);color:var(--verde);min-height:1.4em}
.stelle--scelto .stelle__parola{color:var(--rosso)}
.stelle__nota{margin:1rem 0 0;font-size:.9rem;color:rgba(255,255,255,.82)}
/* I blocchi che compaiono dopo il voto: la testata fissa non deve coprirne l'inizio */
#verso-google{scroll-margin-top:64px}

/* Scelte a pillola: caselle e radio vestite come le pillole del volantino */
.scelte{border:0;margin:0;padding:0;min-width:0}
.scelte legend{font-size:.9rem;font-weight:600;color:var(--verde);padding:0;margin-bottom:.5rem}
.scelte__fila{display:flex;flex-wrap:wrap;gap:.5rem}
.scelte__fila label{position:relative;cursor:pointer}
.scelte__fila input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.scelte__fila span{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  border:1.5px solid rgba(14,79,62,.35);color:var(--verde);border-radius:999px;padding:.55rem 1rem;
  background:var(--bianco-caldo);transition:background .15s ease,color .15s ease,border-color .15s ease}
.scelte__fila label:hover span{border-color:var(--verde)}
.scelte__fila input:checked + span{background:var(--rosso);border-color:var(--rosso);color:#fff}
.scelte__fila input:focus-visible + span{outline:3px solid var(--rosso);outline-offset:2px}
.campo--errore input,.campo--errore textarea{border-color:var(--rosso)}

/* ---------- Piede ---------- */
.pie{background:var(--verde);color:var(--crema);padding:clamp(2.2rem,5vw,3rem) 0 2rem;flex:none}
.pie a{color:var(--crema);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__griglia{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pie__logo{height:42px;width:auto;filter:brightness(0) invert(1)}
.pie h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-testo);
  font-weight:600;color:rgba(255,248,231,.62);margin-bottom:.7rem}
.pie__social{display:inline-flex;align-items:center;gap:.5rem}
.pie__social svg{flex:none}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.92rem}
.pie__nota{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,248,231,.22);
  font-size:.76rem;color:rgba(255,248,231,.62);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}


/* Variante fitta: la pagina Menu porta l'intero repertorio, non i 21 del volantino */
.listino--fitto .menu-sez{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.listino--fitto .menu-sez__titolo{font-size:clamp(1.25rem,4vw,1.7rem)}
.listino--fitto .piatto{padding:.6rem 0}
.listino--fitto .piatto__nome{font-size:.96rem}
.listino--fitto .piatto__prezzo{font-size:.96rem}
.listino--fitto .piatto__desc{font-size:.82rem;margin-top:.15rem}

/* Elenco dei piatti sempre presenti: due colonne, corpo piccolo */
.sempre{columns:2;column-gap:2rem;list-style:none;margin:1.3rem 0 0;padding:0}
.sempre li{break-inside:avoid;font-size:.92rem;padding:.32rem 0;color:rgba(255,248,231,.92);
  display:flex;align-items:baseline;gap:.5rem}
.sempre__nome{flex:1}
.sempre__prezzo{flex:none;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sempre__prezzo small{font-weight:400;font-size:.76em;color:rgba(255,248,231,.62);margin-left:.1em}

/* In colonna stretta il prezzo va sotto il nome: in riga si staccherebbe
   dalla voce a cui appartiene, perché il nome va a capo più volte. */
@media (max-width:640px){
  .sempre{column-gap:1.2rem}
  .sempre li{display:block;font-size:.82rem;padding:.4rem 0}
  .sempre__prezzo{display:block;font-size:.92em;
    font-weight:600;color:rgba(255,248,231,.8)}
}

/* Navigazione delle sezioni del menu: si stacca sotto la testata e segue
   la lettura. Solo da telefono: su schermo grande il listino si vede tutto. */
.nav-sezioni{display:none}
@media (max-width:760px){
  .nav-sezioni{display:flex;gap:.45rem;position:sticky;top:64px;z-index:40;
    margin:0 calc(var(--gutter)*-1);padding:.6rem var(--gutter);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:rgba(255,248,231,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--linea)}
  .nav-sezioni::-webkit-scrollbar{display:none}
  .nav-sezioni a{flex:none;text-decoration:none;white-space:nowrap;
    font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--verde);border:1.5px solid rgba(14,79,62,.28);border-radius:999px;
    padding:.5rem .9rem;transition:background .18s ease,color .18s ease,border-color .18s ease}
  .nav-sezioni a[aria-current="true"]{background:var(--rosso);border-color:var(--rosso);color:#fff}
}

.caricamento{color:var(--testo-tenue);font-size:.92rem;padding:1rem 0}

/* Avviso statistiche (analytics.js): striscia sottile in fondo, una riga */
.cookie-avviso{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--bianco-caldo);border-top:1px solid var(--linea-forte);padding:.45rem var(--gutter)}
.cookie-avviso p{font-size:.8rem;line-height:1.2;margin:0;min-width:0;white-space:nowrap}
.cookie-avviso a{color:var(--verde);text-decoration:underline}
.cookie-avviso__tasti{display:flex;gap:.4rem;flex:none}
.cookie-avviso .btn{padding:.3rem .8rem;font-size:.78rem;border-radius:999px}