/* ============================================================================
   PIZZERIA ARCADIA — menù digitale
   Design system. Mobile first: si legge al tavolo, con poca luce, su 4G scarso.
   ========================================================================= */

:root{
  /* fondi: nero caldo, come la sala la sera */
  --nero:        #0F0B0A;
  --nero-2:      #150F0E;
  --carta:       #1B1412;
  --carta-2:     #241A17;
  --carta-3:     #2E211C;

  /* linee */
  --linea:       rgba(236,213,182,.11);
  --linea-2:     rgba(236,213,182,.20);

  /* testo */
  --crema:       #F6EFE3;
  --crema-2:     #E2D5C2;
  --fumo:        #A28E7C;
  --fumo-2:      #94816F;   /* contrasto >= 4,5:1 su tutti i fondi (era 3,3:1) */

  /* marchio */
  --rosso:       #D8232A;
  --rosso-viv:   #F2494A;
  --rosso-cupo:  #7E1319;
  --oro:         #E7AC3C;
  --oro-cupo:    #7A5A1C;
  --verde:       #8CA463;

  --maxw:        640px;
  --pad:         20px;
  --r:           16px;
  --r-s:         10px;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mano:    "Caveat", "Segoe Script", cursive;

  --barra-h:  64px;
  --nav-h:    54px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  background:var(--nero);
}

body{
  margin:0;
  background:var(--nero);
  color:var(--crema);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:calc(var(--barra-h) + env(safe-area-inset-bottom));
}

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; border-radius:6px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* grana leggera: toglie la piattezza dei fondi scuri sugli schermi OLED */
.grana{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.045;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ========================================================== tipografia */

.occhiello{
  font-size:10.5px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--oro);
}
.titolo-sez{
  font-family:var(--display);
  font-weight:600; letter-spacing:-.015em; line-height:1.02;
  font-size:clamp(30px,8.4vw,42px);
  margin:8px 0 6px;
}
.sotto-sez{ color:var(--fumo); font-size:14px; margin:0 }

/* ============================================================== HERO */

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(115% 62% at 50% 6%, rgba(216,35,42,.24), transparent 60%),
    linear-gradient(to bottom,
      rgba(15,11,10,.60) 0%, rgba(15,11,10,.24) 26%,
      rgba(15,11,10,.72) 66%, var(--nero) 99%);
}
.hero__in{
  position:relative; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) 40px; text-align:center;
}
.hero__logo{
  width:min(80vw,340px); margin:0 auto 18px; height:auto;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.6));
}
.hero__claim{
  font-family:var(--display);
  font-weight:400; font-style:italic;
  font-size:clamp(17px,4.6vw,21px); line-height:1.35;
  color:var(--crema); margin:0 auto; max-width:19em;
  text-shadow:0 3px 20px rgba(0,0,0,.7);
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px;
}
.pillola{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--linea-2); border-radius:100px; padding:8px 14px;
  background:rgba(20,14,12,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--crema-2);
}
.pillola svg{ width:13px; height:13px; flex:0 0 auto; fill:var(--rosso-viv) }
.pillola--aperto svg{ fill:var(--verde) }
.pillola--chiuso svg{ fill:var(--fumo) }

.hero__giu{
  margin:26px auto 0; width:1px; height:40px;
  background:linear-gradient(to bottom,transparent,var(--oro),transparent);
  animation:giu 2.6s ease-in-out infinite;
}
@keyframes giu{ 0%,100%{opacity:.2;transform:scaleY(.55)} 50%{opacity:1;transform:scaleY(1)} }

/* ==================================================== barra categorie */

.nav{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(to bottom,rgba(15,11,10,.97),rgba(15,11,10,.90));
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linea);
  height:var(--nav-h);
}
.nav__scroll{
  display:flex; gap:6px; align-items:center; height:100%;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  /* si allinea alla colonna del menu: su telefono vale --pad, su schermi larghi
     rientra fino al bordo della colonna centrata invece di partire da 0 */
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* l'ultima pillola sfuma invece di essere tagliata di netto: cosi' si
     capisce che la striscia continua e si puo' scorrere */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent);
}
.nav__scroll::-webkit-scrollbar{ display:none }
.nav a{
  flex:0 0 auto; scroll-snap-align:center;
  font-size:13px; font-weight:500; letter-spacing:.01em;
  padding:8px 14px; border-radius:100px; white-space:nowrap;
  color:var(--fumo); border:1px solid transparent;
  transition:color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.nav a:hover{ color:var(--crema-2) }
/* Le quattro azioni della barra in fondo sono un modo da telefono. Su un
   monitor la barra sparisce e le due che servono davvero (cercare, e vedere
   il numero) risalgono qui. Nascoste finche' non si arriva al desktop. */
.nav__azioni{ display:none; gap:6px; align-items:center;
  padding-left:16px; margin-left:10px; border-left:1px solid var(--linea) }
.nav__az{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.5px; font-weight:500; color:var(--fumo);
  border:1px solid var(--linea-2); border-radius:100px; padding:7px 14px;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.nav__az svg{ width:14px; height:14px; fill:currentColor; flex:0 0 auto }
.nav__az:hover{ color:var(--crema); border-color:var(--linea-2); background:var(--carta) }
.nav__az--tel{ color:var(--crema-2); font-variant-numeric:tabular-nums }
.nav a[aria-current="true"]{
  color:var(--crema); background:var(--rosso); border-color:var(--rosso-viv);
  box-shadow:0 3px 16px rgba(216,35,42,.35);
}

/* =========================================================== vetrina */

.vetrina{ padding-block:44px 8px }
.vetrina__testa{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:0 }
.vetrina__rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  /* Lo spazio in alto deve essere >= alla sporgenza di .vcard__foto: il binario
     scorre in orizzontale ma ritaglia anche in verticale.
     Il rientro laterale segue la colonna centrata, cosi' la prima card e' in
     asse col titolo; a destra le card continuano a sconfinare, che e' il modo
     in cui si capisce che si scorre. */
  padding-block:42px 26px;
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.vetrina__rail::-webkit-scrollbar{ display:none }
.vetrina__rail::after{ content:""; flex:0 0 4px }

.vcard{
  flex:0 0 min(62vw,232px); scroll-snap-align:center;
  display:flex; flex-direction:column;
  position:relative; text-align:center;
  background:linear-gradient(168deg,var(--carta-2),var(--carta) 62%);
  border:1px solid var(--linea); border-radius:20px;
  padding:14px 14px 16px;
  transition:transform .4s var(--ease-out), border-color .3s var(--ease);
}
.vcard:active{ transform:scale(.975) }
.vcard:hover{ border-color:var(--linea-2) }
.vcard__foto{
  position:relative; aspect-ratio:1; margin:-34px auto 6px; width:88%;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.62));
}
.vcard__foto img{ width:100%; height:100%; object-fit:contain }
.vcard__nome{
  font-family:var(--display);
  font-weight:600; font-size:17px; line-height:1.15; margin:0 0 3px;
}
.vcard__ing{ font-size:11.5px; color:var(--fumo); line-height:1.4; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em }
.vcard__prezzo{ margin-top:auto; font-weight:600; font-size:15px; color:var(--oro); font-variant-numeric:tabular-nums }
.vcard__prezzo::before{ content:"€ "; font-size:.78em; color:var(--fumo); font-weight:500 }

/* ========================================================== speciali */

.speciali{ padding-block:34px 10px }
.speciali__nota{
  font-size:13px; color:var(--fumo); margin:10px 0 20px; line-height:1.55;
  border-left:2px solid var(--oro-cupo); padding-left:12px;
}
.sp-griglia{ display:grid; gap:12px }
.sp{
  display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center;
  background:linear-gradient(150deg,var(--carta-2),var(--carta) 70%);
  border:1px solid var(--linea); border-radius:var(--r); padding:13px 14px;
  text-align:left; width:100%;
  transition:border-color .25s var(--ease), transform .25s var(--ease-out);
}
.sp:active{ transform:scale(.99) }
.sp--ora{ border-color:rgba(231,172,60,.34); background:linear-gradient(150deg,#2A1E14,var(--carta) 72%) }
.sp--fuori{ opacity:.62 }
.sp__foto{ width:76px; height:76px; position:relative }
.sp__foto img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)) }
.sp__foto--vuota{
  border-radius:50%; border:1px dashed var(--linea-2);
  display:grid; place-items:center; color:var(--fumo-2); font-size:22px;
}
.sp__nome{ display:block; font-family:var(--display);
  font-weight:600; font-size:17px; margin:0 0 2px; line-height:1.15 }
.sp__ing{ display:block; font-size:12.5px; color:var(--fumo); margin:0 0 6px; line-height:1.4 }
.sp__riga{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

.tag{
  font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; border:1px solid currentColor; line-height:1.5;
}
.tag--ora{ color:var(--oro) }
.tag--fuori{ color:var(--fumo-2) }
.tag--picc{ color:var(--rosso-viv) }
.tag--esaurito{ color:var(--rosso-viv); border-color:var(--rosso-cupo); background:rgba(216,35,42,.13) }

/* ========================================================= sezioni menu */

.sez{ padding-block:38px 6px; scroll-margin-top:calc(var(--nav-h) + 10px) }
.sez__testa{ position:relative; border-radius:var(--r); overflow:hidden; margin-bottom:20px; isolation:isolate }
.sez__testa img{ width:100%; height:132px; object-fit:cover; opacity:.5; transform:scale(1.02) }
.sez__testa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(15,11,10,.94) 18%,rgba(15,11,10,.45) 62%,rgba(15,11,10,.72));
}
.sez__label{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:0 18px }
.sez__label .titolo-sez{ margin:4px 0 2px }

.lista{ list-style:none; margin:0; padding:0 }
.voce{
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 0; border-bottom:1px solid var(--linea); width:100%; text-align:left;
}
.voce:last-child{ border-bottom:0 }
.voce--tap{ transition:opacity .2s var(--ease) }
/* le bevande hanno l'icona piu' alta del testo: centrarla toglie il vuoto */
.voce--bev{ align-items:center }
.voce--tap:active{ opacity:.62 }
.voce__corpo{ flex:1 1 auto; min-width:0 }
.voce__mini{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--carta-3),var(--carta) 74%) }
.voce__mini img{ width:100%; height:100%; object-fit:contain; padding:2px }
/* adesso sono foto vere di bottiglie: qualche pixel in piu' e l'etichetta
   si riconosce senza aprire la scheda */
.voce__mini--bev{ background:none; border-radius:0; width:46px; height:66px }
.voce__mini--bev img{ padding:0; object-fit:contain }
.voce__testa{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.voce__nome{
  font-family:var(--display);
  font-weight:600; font-size:16.5px; line-height:1.2; margin:0; color:var(--crema);
}
.voce__porz{ font-size:11.5px; color:var(--fumo-2); font-weight:400; letter-spacing:.02em }
.voce__ing{ font-size:13px; color:var(--fumo); margin:3px 0 0; line-height:1.45 }
.voce__nota{ font-size:12px; color:var(--fumo-2); margin:4px 0 0; font-style:italic; line-height:1.45 }
.voce__prezzo{
  flex:0 0 auto; align-self:flex-start; padding-top:1px;
  font-weight:600; font-size:15.5px; color:var(--crema); font-variant-numeric:tabular-nums;
  white-space:nowrap; padding-left:4px;
}
.voce__prezzo span{ font-size:.76em; color:var(--fumo); font-weight:500; margin-right:2px }
.voce__prezzo--assente{ color:var(--fumo-2); font-size:12px; font-weight:500; font-style:italic }
.voce__badge{ display:flex; gap:5px; margin-top:6px; flex-wrap:wrap }
.voce--out .voce__nome,.voce--out .voce__ing{ opacity:.5 }
.voce--out .voce__mini{ filter:grayscale(.8); opacity:.5 }

/* ======================================================= citazione muro */

.muro{
  /* margin-block, NON il margin abbreviato: quando .muro sta insieme a .wrap
     (la citazione fra le speciali e le bruschette) un "margin:44px 0 6px"
     sovrascrive il margin-inline:auto di .wrap e il blocco si incolla a
     sinistra invece di restare centrato. Vale lo stesso per il padding. */
  margin-block:44px 6px; padding-block:30px; padding-inline:22px;
  position:relative;
  border-block:1px solid var(--linea); text-align:center;
}
.muro p{
  font-family:var(--mano); font-size:clamp(21px,5.6vw,27px); line-height:1.35;
  color:var(--crema-2); margin:0 auto; max-width:16em; transform:rotate(-.7deg);
}
.muro cite{ display:block; margin-top:12px; font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--fumo-2) }

/* ============================================================= storia */

.storia{ padding-block:40px 8px }
.storia__testo{ font-size:14.5px; line-height:1.72; color:var(--crema-2) }
.storia__anni{
  display:flex; align-items:baseline; gap:12px; margin:22px 0 0;
  padding-top:20px; border-top:1px solid var(--linea);
}
.storia__num{
  font-family:var(--display);
  font-weight:700; font-size:clamp(46px,14vw,64px); line-height:.9; color:var(--rosso);
}
.storia__lab{ font-size:12.5px; color:var(--fumo); line-height:1.45 }

/* ============================================================== info */

.info{ padding-block:38px 10px }
.info__griglia{ display:grid; gap:10px; margin-top:18px }
.riga-info{
  display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center;
  background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-s); padding:13px 14px;
}
.riga-info svg{ width:19px; height:19px; fill:var(--rosso-viv); justify-self:center }
.riga-info b{ display:block; font-size:14.5px; font-weight:600; color:var(--crema) }
.riga-info span{ display:block; font-size:12.5px; color:var(--fumo) }

.orari{ margin-top:10px; border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden }
.orari div{ display:flex; justify-content:space-between; padding:9px 14px; font-size:13.5px;
  border-bottom:1px solid var(--linea); background:var(--carta) }
.orari div:last-child{ border-bottom:0 }
.orari div[data-oggi="1"]{ background:var(--carta-2); color:var(--crema) }
.orari div[data-oggi="1"] strong::after{ content:" · oggi"; color:var(--oro); font-weight:500; font-size:11.5px }
.orari .chiuso{ color:var(--fumo-2) }

.legale{ margin-top:22px; font-size:11.5px; line-height:1.7; color:var(--fumo-2) }
.legale li{ margin-bottom:4px }

.credit{ margin:34px 0 20px; text-align:center; font-size:11px; color:var(--fumo-2); letter-spacing:.06em }
.credit a{ color:var(--fumo); border-bottom:1px solid var(--linea-2) }

/* ========================================================== barra basso */

.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(15,11,10,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
  /* La striscia resta larga quanto lo schermo (il vetro sfocato deve arrivare
     ai bordi) ma le quattro voci stanno nella stessa colonna del contenuto:
     su un monitor da 1440 px, spalmate su tutta la larghezza, sembravano
     quattro icone smarrite invece di una barra. */
  padding-inline:max(0px, calc((100% - var(--maxw)) / 2));
}
.barra button,.barra a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--barra-h); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--fumo); font-weight:500;
  transition:color .2s var(--ease);
}
.barra svg{ width:20px; height:20px; fill:currentColor }
.barra button:active,.barra a:active{ color:var(--crema) }
.barra .attivo{ color:var(--rosso-viv) }

/* =========================================================== ricerca */

.cerca{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(10,7,6,.96); backdrop-filter:blur(8px);
  flex-direction:column;
}
.cerca[open],.cerca.aperto{ display:flex }
.cerca__testa{ display:flex; gap:10px; padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 12px; align-items:center }
.cerca__input{
  flex:1; background:var(--carta); border:1px solid var(--linea-2); border-radius:100px;
  padding:12px 18px; color:var(--crema); font-size:16px; font-family:var(--sans);
}
.cerca__input::placeholder{ color:var(--fumo-2) }
.cerca__chiudi{ font-size:13px; color:var(--fumo); padding:8px }
.cerca__filtri{ display:flex; gap:7px; overflow-x:auto; padding:0 var(--pad) 12px; scrollbar-width:none }
.cerca__filtri::-webkit-scrollbar{ display:none }
.chip{
  flex:0 0 auto; font-size:12px; padding:7px 13px; border-radius:100px;
  border:1px solid var(--linea-2); color:var(--fumo); white-space:nowrap;
  transition:.2s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--rosso); border-color:var(--rosso-viv); color:#fff }
.cerca__esiti{ flex:1; overflow-y:auto; padding:4px var(--pad) 30px; -webkit-overflow-scrolling:touch }
.cerca__conta{ font-size:12px; color:var(--fumo-2); padding:6px 0 2px }
.cerca__cat{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--oro);
  margin:18px 0 2px; font-weight:600 }
.cerca__vuoto{ text-align:center; color:var(--fumo); padding:50px 20px; font-size:14px }

/* ============================================================= scheda */

.scheda{
  position:fixed; inset:0; z-index:75; display:none;
  align-items:flex-end; justify-content:center;
}
.scheda.aperto{ display:flex }
.scheda__velo{ position:absolute; inset:0; background:rgba(8,5,4,.78); backdrop-filter:blur(3px) }
.scheda__box{
  position:relative; width:100%; max-width:var(--maxw);
  max-height:88svh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--carta-2),var(--nero-2) 46%);
  border:1px solid var(--linea-2); border-bottom:0;
  border-radius:24px 24px 0 0;
  padding:0 var(--pad) calc(28px + env(safe-area-inset-bottom));
  animation:su .34s var(--ease-out);
}
@keyframes su{ from{ transform:translateY(26px); opacity:0 } to{ transform:none; opacity:1 } }
.scheda__presa{ width:38px; height:4px; border-radius:4px; background:var(--linea-2); margin:10px auto 4px }
.scheda__foto{ width:min(74%,240px); aspect-ratio:1; margin:6px auto 4px;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) }
.scheda__foto img{ width:100%; height:100%; object-fit:contain }
.scheda h3{
  font-family:var(--display);
  font-weight:600; font-size:clamp(24px,6.6vw,30px); line-height:1.1; margin:10px 0 4px; text-align:center;
}
.scheda__prezzo{ text-align:center; font-size:20px; font-weight:600; color:var(--oro);
  font-variant-numeric:tabular-nums; margin-bottom:14px }
.scheda__blocco{ border-top:1px solid var(--linea); padding:14px 0 }
.scheda__blocco h4{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fumo-2); margin:0 0 7px; font-weight:600 }
.scheda__ing{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none }
.scheda__ing li{ font-size:13px; background:var(--carta); border:1px solid var(--linea);
  padding:5px 11px; border-radius:100px; color:var(--crema-2) }
.scheda__nota{ font-size:13.5px; color:var(--crema-2); line-height:1.6; margin:0; font-style:italic }
.scheda__badge{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:12px }
.scheda__chiudi{
  width:100%; margin-top:16px; padding:13px; border-radius:100px;
  border:1px solid var(--linea-2); font-size:14px; font-weight:500; color:var(--crema-2);
}

/* ======================================================= tempo/motion */

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

/* ================================================= schermi più larghi */

@media (min-width:720px){
  :root{ --pad:28px; --maxw:760px }
  .vcard{ flex-basis:236px }
  .sp-griglia{ grid-template-columns:1fr 1fr }
  .info__griglia{ grid-template-columns:1fr 1fr }
  .sez__testa img{ height:168px }
}

@media (min-width:1040px){
  :root{ --maxw:900px }
}

/* ============================================== desktop vero (>=1180px)
   Fin qui la pagina era il telefono ingrandito: una colonna stretta in mezzo
   a mezzo metro di nero, il carosello che usciva nel vuoto a destra e la
   barra a schede in fondo, che con un mouse non vuol dire niente. Da qui in
   su diventa un menu' da tavolo aperto: colonna larga, pizze in griglia,
   voci su due colonne, azioni nella barra in alto.
   ===================================================================== */
@media (min-width:1180px){
  :root{ --maxw:1160px; --pad:36px; --nav-h:62px }

  /* --- la barra a schede se ne va, e con lei lo spazio che teneva sotto */
  .barra{ display:none }
  body{ padding-bottom:0 }

  /* --- barra in alto: pillole a sinistra fino al bordo della colonna,
         azioni ancorate a destra. Il rientro passa dalla nav, cosi' le due
         estremita' cadono esatte sui bordi della colonna. */
  .nav{
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    /* A sinistra la prima pillola cade in asse col titolo della sezione.
       A destra invece si arriva al bordo della pagina: rientrare anche di la'
       costava sei categorie su quattordici, e il bordo destro di una barra
       larga quanto lo schermo non lo guarda nessuno. */
    padding-left:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
    padding-right:var(--pad);
  }
  .nav__scroll{ padding-inline:0 }
  .nav__azioni{ display:flex }

  /* --- la vetrina smette di essere un binario che scorre.
         Sedici pizze in griglia si guardano tutte insieme e niente sconfina
         nel nero a destra. Il distacco fra le righe deve restare piu' largo
         della sporgenza della foto (34 px), che qui non e' piu' ritagliata. */
  .vetrina{ padding-block:52px 8px }
  .vetrina__rail{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:58px 20px; overflow:visible;
    width:100%; max-width:var(--maxw); margin-inline:auto;
    padding-block:52px 12px; padding-inline:var(--pad);
  }
  .vetrina__rail::after{ display:none }
  .vcard{ scroll-snap-align:none }
  .vcard:hover{ transform:translateY(-4px); border-color:var(--linea-2) }

  /* --- le voci su due colonne: la pagina era alta 14.000 px con mezzo
         schermo vuoto di fianco. Solo nelle sezioni: gli esiti della
         ricerca usano la stessa classe ma stanno in un pannello stretto. */
  .sez .lista{ columns:2; column-gap:52px; column-rule:1px solid var(--linea) }
  .sez .voce{ break-inside:avoid }

  .sez{ padding-block:52px 6px }
  .sez__testa img{ height:190px }
  .sez__label{ padding:0 30px }

  .sp-griglia{ grid-template-columns:repeat(3,1fr) }
  .sp:hover{ border-color:var(--linea-2) }

  .muro{ margin-block:64px 10px; padding-block:44px }

  /* Le righe di testo continuo non seguono la colonna: tirate su 1460 px
     l'occhio perde il capoverso. Le tabelle di orari, allo stesso modo, non
     hanno motivo di spalancare mezzo metro fra il giorno e "la sera". */
  .storia__testo,.speciali__nota,.legale{ max-width:74ch }
  .avviso{ max-width:820px }   /* il riquadro, non il testo dentro: senno il rosso resta vuoto a destra */
  .orari{ max-width:620px }
  .info__griglia{ max-width:1000px }

  /* --- ricerca: a schermo intero su 1920 e' un muro di testo */
  .cerca__testa,.cerca__filtri,.cerca__esiti{
    width:100%; max-width:720px; margin-inline:auto;
  }
  .cerca__testa{ padding-top:38px }

  /* --- la scheda del piatto non e' piu' un foglio che sale dal basso
         (gesto da telefono) ma una finestrella al centro */
  .scheda{ align-items:center }
  .scheda__box{
    max-width:520px; max-height:86vh;
    border:1px solid var(--linea-2); border-radius:24px;
    padding-bottom:28px; animation:entra .28s var(--ease-out);
  }
  .scheda__presa{ display:none }
  .scheda__box{ padding-top:8px }
}
@keyframes entra{ from{ transform:scale(.97); opacity:0 } to{ transform:none; opacity:1 } }

/* ================================================ monitor grandi (>=1600px)
   A 1920 la colonna da 1160 lasciava 380 px di nero per parte e la barra
   delle categorie ne nascondeva sei su quattordici: qui c'e' spazio, tanto
   vale usarlo. Le voci passano a tre colonne perche' a mezza pagina di
   larghezza il filo fra nome e prezzo diventa lunghissimo.
   ===================================================================== */
@media (min-width:1600px){
  :root{ --maxw:1460px; --pad:40px }
  .sez .lista{ columns:3; column-gap:46px }
  .sez__testa img{ height:220px }
}

/* ============================================================== stampa
   Serve soprattutto al titolare, per ristampare il cartaceo aggiornato senza
   passare dal tipografo. Tutti i colori vanno riscritti a mano: il resto del
   foglio e' pensato per il fondo scuro e su carta bianca sparirebbe. */
@media print{
  .hero,.nav,.barra,.cerca,.scheda,.grana,.vetrina,.hero__giu,.muro{ display:none !important }
  html,body{ background:#fff !important; color:#000 !important; padding:0; font-size:11pt }
  .wrap{ max-width:none; padding:0 }
  .sez__testa{ display:none }
  .sez{ padding-block:14px 0; break-inside:auto }
  .occhiello{ color:#666 !important; font-size:8pt }
  .titolo-sez{ color:#000 !important; font-size:17pt; border-bottom:2px solid #000;
    padding-bottom:3px; margin:14px 0 8px; break-after:avoid }
  .lista{ break-inside:auto }
  .voce{ border-color:#bbb; break-inside:avoid; padding:7px 0 }
  .voce__mini{ display:none }
  .voce__nome,.voce__prezzo,.voce__prezzo span{ color:#000 !important }
  .voce__ing,.voce__nota,.voce__porz{ color:#333 !important }
  .voce--out{ opacity:1 }
  .tag{ color:#444 !important; border-color:#999 !important }
  /* i blocchi che servono davvero anche su carta */
  .storia,.storia__testo,.storia__lab{ color:#000 !important }
  .storia__num{ color:#000 !important }
  .info{ break-before:page }
  .riga-info,.riga-info b,.riga-info span{ color:#000 !important; background:none !important;
    border-color:#999 !important }
  .riga-info svg{ fill:#000 !important }
  .orari,.orari div{ background:none !important; color:#000 !important; border-color:#bbb !important }
  .orari .chiuso{ color:#555 !important }
  .avviso{ background:none !important; border:1.5px solid #000 !important; break-inside:avoid }
  .avviso strong{ color:#000 !important }
  .avviso p{ color:#000 !important }
  .legale,.legale li,.credit{ color:#333 !important; font-size:8.5pt }
  .credit a{ color:#333 !important }
  a[href^="tel:"]::after{ content:"" }
}

/* ============================================================ avviso */
.avviso{
  margin-top:20px; padding:14px 16px; border-radius:var(--r-s);
  background:rgba(216,35,42,.07); border:1px solid rgba(216,35,42,.26);
}
.avviso strong{ display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rosso-viv); margin-bottom:5px }
.avviso p{ margin:0; font-size:13px; line-height:1.6; color:var(--crema-2) }

/* ================================================= avviso di aggiornamento */
.avviso-agg{
  position:fixed; left:12px; right:12px; z-index:55;
  bottom:calc(var(--barra-h) + 12px + env(safe-area-inset-bottom));
  padding:12px 16px; border-radius:100px;
  background:var(--rosso); color:#fff; border:1px solid var(--rosso-viv);
  font-size:13px; font-weight:500; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  animation:su .3s var(--ease-out);
}

/* il marchio secondario del locale, sotto il claim in copertina */
.hero__eburro{
  width:min(52vw,190px); margin:20px auto 0; height:auto;
  opacity:.92; filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}

/* ====================================================== ritorno al sito
   Sopra il menù: una riga per tornare alle altre pagine. Non è fissa — la
   barra appiccicata in cima, nel menù, è quella delle categorie, e due
   barre fisse su un telefono sono metà schermo mangiato. */
.ritorno{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px var(--pad);
  background:var(--nero-2); border-bottom:1px solid var(--linea);
  position:relative; z-index:41;
}
.ritorno__marchio{ line-height:0; flex:0 0 auto }
.ritorno__marchio img{ width:108px; height:auto }
.ritorno__voci{ display:none; gap:4px; margin-left:8px }
.ritorno__voci a{
  padding:7px 12px; border-radius:100px; font-size:13.5px; color:var(--fumo);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.ritorno__voci a:hover{ color:var(--crema-2); background:var(--carta) }
.ritorno__prenota{
  margin-left:auto; padding:9px 18px; border-radius:100px;
  background:var(--rosso); border:1px solid var(--rosso-viv); color:#fff;
  font-size:13.5px; font-weight:600; white-space:nowrap;
}
.ritorno__prenota:hover{ background:var(--rosso-viv) }
@media (min-width:720px){
  .ritorno{ padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad))) }
  .ritorno__voci{ display:flex }
  .ritorno__marchio img{ width:126px }
}
@media print{ .ritorno{ display:none !important } }

/* ========================================================== aggiunte
   Sono venti voci corte tutte allo stesso prezzo: in colonna come le pizze
   diventerebbero un elenco lungo e noioso. In pastiglie si leggono in un
   colpo, e la foto serve a chi non sa cos'e' la provola affumicata. */
.agg__prezzo{
  font-size:14px; color:var(--crema-2); line-height:1.6; margin:0 0 16px;
  padding-left:12px; border-left:2px solid var(--oro-cupo);
}
.agg__prezzo b{ color:var(--oro); font-weight:600 }
.agg{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;
}
.agg__v{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px 8px 8px; border-radius:100px;
  background:var(--carta); border:1px solid var(--linea);
}
.agg__foto{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%; object-fit:cover;
  background:var(--carta-3);
}
.agg__foto--vuota{
  border:1px dashed var(--linea-2); background:none;
}
.agg__nome{ font-size:14px; color:var(--crema-2); line-height:1.3; min-width:0 }
.agg__p{ margin-left:auto; font-size:13px; font-weight:600; color:var(--oro);
  font-variant-numeric:tabular-nums; flex:0 0 auto }
.agg__out{
  margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rosso-viv); border:1px solid rgba(242,73,74,.4);
  border-radius:100px; padding:3px 8px; flex:0 0 auto;
}
.agg__v--out{ opacity:.5 }
.agg__v--out .agg__foto{ filter:grayscale(.85) }