/* Mimì & Cocò (Lioni) — foglio di stile unico.
   Il rosso della copertina Facebook e del cartellone di Natale, il nero delle loro grafiche, la crema per leggere.
   Titoli in Barlow Condensed (stretto e maiuscolo come «PIZZERIA | KEBAB | BAR | TRATTORIA | CORNETTERIA»),
   testo in Barlow, motto e lavagna in Caveat Brush (a pennello, come le lettere del logo). */
:root{
  --rosso:#96222a; --rosso-scuro:#6c171d; --rosso-acceso:#ad2a33;
  --carbone:#171211; --carbone-2:#211a18; --carbone-3:#2e2421;
  --crema:#f8efe2; --crema-2:#efe0c9; --carta:#fcf8f1; --bianco:#fffdf9;
  --testo:#241b18; --testo-2:#4b3f39; --grigio:#6b5d56; --grigio-chiaro:#bcaea4;
  --paglia:#f2c77b; --lavagna:#22302b; --legno:#7b5232;
  --linea:rgba(36,27,24,.12); --linea-scura:rgba(255,255,255,.12);
  --r:16px; --ombra:0 22px 44px -24px rgba(70,20,15,.5);
  --titoli:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --testo-f:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pennello:"Caveat Brush","Segoe Print","Bradley Hand",cursive;
  --alto:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--alto) + 8px);-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:var(--testo-f);font-size:17px;line-height:1.6;color:var(--testo);background:var(--carta);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0}
svg{width:22px;height:22px;fill:currentColor;flex:none}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:6px}
/* sui fondi scuri e rossi l'anello del fuoco è paglia, sui fondi chiari è rosso: sempre ben visibile */
.testata :focus-visible,.hero :focus-visible,.locale :focus-visible,.sezione--scura :focus-visible,.menu-telefono :focus-visible,.piede :focus-visible,.fab:focus-visible{outline-color:var(--paglia)}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paglia);color:var(--carbone);font-weight:700;padding:.6em 1em;border-radius:10px;text-decoration:none}
.salta:focus{top:12px}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.75em 1.35em;border-radius:999px;font-family:var(--testo-f);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;transition:transform .15s,background-color .15s,color .15s,border-color .15s;white-space:nowrap;cursor:pointer}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:.95em 1.7em;font-size:1.05rem}
.btn--rosso{background:var(--rosso);color:#fff;box-shadow:0 12px 24px -14px rgba(150,34,42,.95)}
.btn--rosso:hover{background:var(--rosso-acceso)}
.btn--vuoto{border-color:rgba(255,255,255,.7);color:#fff}
.btn--vuoto:hover{background:#fff;color:var(--carbone)}
.btn--bianco{background:#fff;color:var(--rosso-scuro)}
.btn--bianco:hover{background:var(--crema)}

/* ---------- barra in alto ---------- */
.testata{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background-color .25s,box-shadow .25s}
.testata.is-piena,.testata.menu-aperto{background:rgba(23,18,17,.97);box-shadow:0 1px 0 var(--linea-scura)}
.testata__in{display:flex;align-items:center;gap:24px;height:var(--alto)}
.marchio{display:flex;align-items:center;flex:none;border-radius:8px}
.marchio img{width:auto;height:46px}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:#f3e8de;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--paglia);transition:right .2s}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.testata__chiama{display:none;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rosso);color:#fff;margin-left:auto;flex:none}
.testata__chiama svg{width:20px;height:20px}
.burger{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-radius:10px;flex:none}
.burger span{display:block;width:26px;height:2px;background:#fff;transition:transform .2s,opacity .2s}

/* ---------- copertina ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr auto;min-height:100vh;min-height:100svh;background:var(--carbone);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 28%,rgba(150,34,42,.38),transparent 52%),radial-gradient(circle at 60% 100%,rgba(242,199,123,.07),transparent 40%)}
.hero__foto{grid-column:2;grid-row:1;position:relative;min-height:0}
/* la foto sfuma nel fondo (maschera, non un velo scuro): niente stacco netto con la colonna del testo */
.hero__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,17,.7) 0%,rgba(23,18,17,0) 22%)}
.hero__testo{grid-column:1;grid-row:1;position:relative;z-index:1;align-self:center;padding:calc(var(--alto) + 44px) clamp(24px,4vw,64px) 56px max(20px,calc((100vw - 1180px) / 2))}
.hero h1{margin:0;line-height:1}
.hero__logo{width:min(540px,100%);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.h1-sotto{display:block;font-family:var(--titoli);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.16em;text-transform:uppercase;color:var(--paglia);margin-top:.55em}
.motto{display:inline-block;font-family:var(--pennello);font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.1;color:#fff;transform:rotate(-3deg);transform-origin:left center;margin-top:.45em}
.hero__lead{max-width:540px;margin:.9em 0 1.8em;font-size:1.13rem;color:#ece1d7;text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__fatti{list-style:none;display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:2.6em;padding-top:1.4em;border-top:1px solid rgba(242,199,123,.28);max-width:640px}
.hero__fatti li{max-width:200px}
.hero__fatti b{display:block;font-family:var(--titoli);font-weight:700;font-size:2rem;line-height:1.05;color:var(--paglia);letter-spacing:.02em}
.hero__fatti span{display:block;margin-top:3px;font-size:.92rem;line-height:1.35;color:#d8cabf}
.hero__fascia{grid-column:1/-1;grid-row:2;position:relative;z-index:1;background:var(--rosso)}
.hero__fascia-in{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 48px;padding:15px 0;font-family:var(--titoli);font-weight:600;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase}
.hero__fascia-in span,.hero__fascia-in a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.hero__fascia-in a:hover{color:var(--paglia)}
.hero__fascia-in svg{width:20px;height:20px;fill:var(--paglia)}

/* ---------- striscia dei punti di forza ---------- */
.striscia{background:var(--crema);border-bottom:1px solid var(--linea)}
.striscia__in{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:40px 0}
.striscia__voce{display:flex;gap:16px;align-items:flex-start}
.striscia__icona{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--rosso);flex:none;box-shadow:0 0 0 6px rgba(150,34,42,.12);transition:transform .3s}
.striscia__voce:hover .striscia__icona{transform:rotate(-12deg) scale(1.06)}
.striscia__icona svg{width:28px;height:28px;fill:#fff}
.striscia h2{font-family:var(--titoli);font-weight:700;font-size:1.45rem;line-height:1.1;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.25em;color:var(--testo)}
.striscia p{font-size:.98rem;color:var(--testo-2)}

/* ---------- sezioni ---------- */
.sezione{padding:104px 0;background:var(--carta)}
.sezione--crema{background:var(--crema)}
.sezione--scura{background:var(--carbone);color:#e8dcd2}
.sezione--taglia{overflow:hidden}
.testa{text-align:center;max-width:780px;margin:0 auto 56px}
.occhiello{display:inline-block;font-family:var(--titoli);font-weight:700;font-size:.95rem;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:var(--rosso);margin-bottom:.8em}
.occhiello--chiaro{color:var(--paglia)}
h2{font-family:var(--titoli);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:.01em;color:var(--testo);text-wrap:balance}
.sezione--scura h2,.testa--chiara h2{color:#fff}
.testa__pala{width:170px;height:auto;margin:16px auto 0}
.testa__sub{margin-top:1.1em;color:var(--grigio);font-size:1.06rem}
.piccolo{font-size:.93rem;color:var(--grigio);margin-top:1em}
.sezione--scura .piccolo{color:var(--grigio-chiaro)}

/* ---------- le pizze: la Racchetta ---------- */
.firma{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:76px}
.firma__foto{position:relative;isolation:isolate;justify-self:end;width:100%;max-width:520px}
.firma__foto::before{content:"";position:absolute;inset:22px -22px -22px 22px;z-index:-1;border-radius:var(--r);background:var(--rosso)}
.firma__foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);box-shadow:var(--ombra)}
.pin{position:absolute;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;transform:translate(-50%,-50%);background:var(--rosso);color:#fff;font-family:var(--titoli);font-weight:700;font-size:1.3rem;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 8px 18px rgba(0,0,0,.35);animation:pulsa 2.6s ease-in-out infinite}
.pin--manico{left:15%;top:75%}
.pin--cuore{left:63%;top:36%;animation-delay:1.3s}
@keyframes pulsa{
  0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 4px rgba(150,34,42,.55),0 8px 18px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 16px rgba(150,34,42,0),0 8px 18px rgba(0,0,0,.35)}
}
.etichetta{display:inline-block;background:var(--rosso);color:#fff;font-family:var(--titoli);font-weight:700;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em 1.05em;border-radius:999px}
.firma h3{font-family:var(--pennello);font-weight:400;font-size:clamp(2.9rem,5.4vw,4.4rem);line-height:1;color:var(--rosso);margin:.28em 0 .3em}
.firma__testo>p:not(.etichetta){font-size:1.1rem;color:var(--testo-2);max-width:500px}
.parti{list-style:none;display:grid;gap:12px;max-width:520px;margin:1.5em 0 1.8em}
.parti li{display:flex;gap:14px;align-items:flex-start;background:var(--bianco);border:1px solid var(--linea);border-radius:14px;padding:14px 16px}
.parti__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rosso);color:#fff;font-family:var(--titoli);font-weight:700;font-size:1.1rem;flex:none}
.parti b{display:block;font-family:var(--titoli);font-weight:700;font-size:1.25rem;line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.parti div span{color:var(--grigio);font-size:.98rem}

/* ---------- le pizze: schede ---------- */
.schede{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scheda{display:flex;flex-direction:column;background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.scheda>img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
.scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra);border-color:rgba(150,34,42,.35)}
.scheda:hover>img{transform:scale(1.05)}
.scheda__corpo{position:relative;z-index:1;flex:1;padding:18px 22px 22px;background:inherit}
.scheda__cat{font-family:var(--titoli);font-weight:700;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rosso)}
.scheda h3{font-family:var(--titoli);font-weight:700;font-size:1.7rem;line-height:1.05;text-transform:uppercase;margin:.15em 0 .35em}
.scheda__corpo p:not(.scheda__cat){color:var(--grigio);font-size:.98rem}
.scheda i[lang]{font-style:italic}
.schede__nota{text-align:center;color:var(--grigio);font-size:.93rem;margin-top:26px}

/* ---------- il locale: tasselli ---------- */
.locale{position:relative;overflow:hidden;background:var(--carbone);color:#fff;padding:100px 0 108px}
.locale::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 8%,rgba(150,34,42,.45),transparent 48%)}
.locale .wrap{position:relative}
.tasselli{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:280px 280px;gap:14px}
.tassello{position:relative;overflow:hidden;border-radius:var(--r);background:var(--carbone-3)}
.tassello--pizzeria,.tassello--trattoria{grid-row:span 2}
.tassello img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.tassello:hover img{transform:scale(1.06)}
.tassello::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,17,0) 42%,rgba(23,18,17,.92))}
.tassello figcaption{position:absolute;left:22px;right:18px;bottom:18px;z-index:1}
.tassello b{display:block;font-family:var(--titoli);font-weight:700;font-size:2rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.tassello--pizzeria b{font-size:2.7rem}
.tassello figcaption span{display:block;margin-top:.35em;font-weight:600;font-size:.96rem;color:var(--paglia)}
.tassello__nota{position:absolute;top:12px;right:12px;z-index:1;font-size:.72rem;font-weight:600;color:#fff;background:rgba(23,18,17,.62);border-radius:999px;padding:.25em .7em}

/* ---------- il menu del giorno ---------- */
.menu-giorno{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:stretch}
.lavagna{position:relative;padding:34px 40px 30px;border:12px solid var(--legno);border-radius:14px;color:#f4efe6;font-family:var(--pennello);
  background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.05),transparent 45%),var(--lavagna);
  box-shadow:inset 0 0 44px rgba(0,0,0,.5),0 0 0 2px #5d3c23,var(--ombra)}
.lavagna__titolo{display:inline-block;font-size:2.3rem;line-height:1;color:var(--paglia);transform:rotate(-2deg);margin-bottom:.3em}
.lavagna h3{font-family:var(--pennello);font-weight:400;font-size:1.7rem;line-height:1.2;color:#fff;margin:.7em 0 .15em;padding-bottom:.1em;border-bottom:2px dashed rgba(255,255,255,.22)}
.lavagna ul{list-style:none}
.lavagna li{font-size:1.5rem;line-height:1.35;color:#ece6da}
.lavagna li::before{content:"– ";color:var(--paglia)}
.lavagna__nota{font-family:var(--testo-f);font-size:.86rem;line-height:1.45;color:#b9c3bd;margin-top:1.5em}
.menu-telefono{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--rosso);color:#fff;border-radius:var(--r);padding:38px 36px 30px;box-shadow:var(--ombra)}
.menu-telefono::after{content:"";position:absolute;right:-26px;top:26px;width:230px;height:71px;background:url("../img/pala-bianca.webp") center/contain no-repeat;opacity:.16;transform:rotate(-20deg);pointer-events:none}
.menu-telefono__icona{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.15)}
.menu-telefono__icona svg{width:28px;height:28px}
.menu-telefono h3{font-family:var(--titoli);font-weight:700;font-size:2.15rem;line-height:1.04;text-transform:uppercase;letter-spacing:.01em}
.menu-telefono>p{color:#f8e6e3;font-size:1.04rem}
.menu-telefono .btn{margin-top:4px}
.menu-telefono .allergeni{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-size:.88rem;color:#f4d9d5}

/* ---------- menu completo (compare solo se dati.js ha delle voci) ---------- */
.menu-completo{margin-top:64px;background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);padding:26px 32px 34px}
.menu-completo[hidden]{display:none}
.menu-completo__titolo{font-family:var(--titoli);font-weight:700;font-size:2rem;line-height:1.1;text-transform:uppercase}
.menu-tools{display:flex;gap:16px;align-items:center;justify-content:space-between;position:sticky;top:var(--alto);z-index:5;background:var(--bianco);padding:12px 0;margin-bottom:22px;border-bottom:1px solid var(--linea)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.tab{background:transparent;color:var(--testo-2);border:1px solid rgba(36,27,24,.2);border-radius:999px;padding:.48em 1em;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.tab:hover{border-color:var(--testo);color:var(--testo)}
.tab[aria-selected="true"]{background:var(--rosso);border-color:var(--rosso);color:#fff}
.cerca{display:flex;align-items:center;gap:8px;flex:none;min-width:280px;background:var(--carta);border:1px solid rgba(36,27,24,.18);border-radius:999px;padding:.5em 1em}
.cerca svg{width:18px;height:18px;fill:var(--grigio)}
.cerca input{width:100%;min-width:0;background:none;border:0;outline:0;color:var(--testo);font:inherit;font-size:.96rem}
.cerca:focus-within{border-color:var(--rosso);box-shadow:0 0 0 3px rgba(150,34,42,.22)}
.menu-lista{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;min-height:200px;align-content:start}
.menu-cat{grid-column:1/-1;display:flex;align-items:center;gap:16px;font-family:var(--titoli);font-weight:700;font-size:1.8rem;text-transform:uppercase;margin:26px 0 4px}
.menu-cat::after{content:"";flex:1;height:1px;background:var(--linea)}
.menu-cat:first-child{margin-top:0}
.menu-nota{grid-column:1/-1;background:var(--crema);border-left:4px solid var(--rosso);border-radius:0 12px 12px 0;padding:.75em 1.1em;margin:4px 0 10px;font-size:.95rem;color:var(--testo-2)}
.piatto{padding:14px 0;border-bottom:1px dashed rgba(36,27,24,.16)}
.piatto h4{display:flex;align-items:baseline;gap:10px;font-size:1.05rem;font-weight:600;line-height:1.3}
.piatto__nome{min-width:0}
.riga{flex:1;min-width:16px;border-bottom:2px dotted rgba(36,27,24,.28);transform:translateY(-4px)}
.piatto .p{font-family:var(--titoli);font-weight:700;font-size:1.18rem;white-space:nowrap}
.piatto p{margin-top:3px;color:var(--grigio);font-size:.94rem;line-height:1.45}
.varianti{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.varianti span{font-size:.8rem;font-weight:600;color:var(--testo-2);background:var(--crema);border-radius:999px;padding:.22em .75em;white-space:nowrap}
.varianti b{color:var(--testo)}
.badge{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--rosso);border-radius:999px;padding:.15em .6em;white-space:nowrap}
.menu-vuoto{grid-column:1/-1;text-align:center;color:var(--grigio);padding:36px 0}

/* ---------- chi siamo ---------- */
.chi{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.chi__foto{position:relative;padding:0 70px 70px 0}
.chi__grande img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);box-shadow:var(--ombra)}
.chi__piccola{position:absolute;right:0;bottom:0;width:54%;border:6px solid var(--carta);border-radius:calc(var(--r) + 4px);overflow:hidden;box-shadow:var(--ombra)}
.chi__piccola img{width:100%;aspect-ratio:72/59;object-fit:cover}
.chi__testo h2{margin-bottom:.5em}
.chi__testo>p:not(.occhiello):not(.social){margin-bottom:1em;font-size:1.05rem;color:var(--testo-2)}
.chi__testo i[lang]{font-family:var(--pennello);font-style:normal;font-size:1.3em;line-height:1;color:var(--rosso)}
.servizi{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:1.4em 0 1.7em}
.servizi li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem}
.servizi li::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:var(--rosso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat}
.social a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;color:var(--testo);border:1px solid rgba(36,27,24,.2);border-radius:999px;padding:.45em 1.15em .45em .5em;transition:border-color .15s,background-color .15s}
.social a:hover{border-color:var(--rosso);background:var(--bianco)}
.social svg{width:32px;height:32px;padding:6px;border-radius:50%;background:var(--rosso);fill:#fff}

/* ---------- come ordinare ---------- */
.ordina{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.ordina__lead{margin-top:.8em;font-size:1.1rem;color:var(--testo-2)}
.modi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 6px}
.modo{display:flex;gap:14px;align-items:flex-start;background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);padding:18px}
.modo svg{width:42px;height:42px;padding:9px;border-radius:12px;background:var(--rosso);fill:#fff}
.modo b{display:block;font-family:var(--titoli);font-weight:700;font-size:1.35rem;line-height:1.1;text-transform:uppercase}
.modo span{display:block;margin-top:2px;color:var(--grigio);font-size:.96rem;line-height:1.4}
.ordina__cta{margin-top:24px}
.ordina__foto{justify-self:center;width:100%;max-width:420px}
.ordina__foto img{width:100%;aspect-ratio:72/100;object-fit:cover;border:9px solid #fff;border-radius:6px;box-shadow:var(--ombra);transform:rotate(2deg)}
.ordina__foto figcaption{margin-top:16px;text-align:center;font-family:var(--pennello);font-size:1.45rem;line-height:1.2;color:var(--rosso);transform:rotate(-1.5deg)}

/* ---------- dove siamo ---------- */
.dove{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.dove address{font-style:normal;font-size:1.15rem;line-height:1.55;margin:1em 0 .5em;color:#e3d6cc}
.dove address b{color:#fff}
.dove__tel a{display:inline-flex;align-items:center;gap:10px;font-family:var(--titoli);font-weight:700;font-size:2rem;letter-spacing:.02em;color:var(--paglia);text-decoration:none}
.dove__tel a:hover{color:#fff}
.orari{width:100%;max-width:440px;border-collapse:collapse;margin:20px 0 4px}
.orari caption{text-align:left;font-family:var(--titoli);font-weight:700;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding-bottom:4px}
.orari th,.orari td{padding:.5em .2em;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;font-weight:400;font-size:.98rem}
.orari tbody th{color:#d9cbc0}
.orari td{text-align:right;white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums}
.orari tr.oggi th,.orari tr.oggi td{color:var(--paglia);font-weight:700}
.orari tr.oggi th::after{content:" · oggi";font-size:.8rem}
.dove .btn{margin-top:22px}
.dove__mappa{min-width:0}
.gmap{position:relative;width:100%;aspect-ratio:5/4;overflow:hidden;border-radius:var(--r);background:#e5e3df;border:1px solid var(--linea-scura)}
.gmap>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- piede ---------- */
.piede{background:#0f0b0a;color:#bfb1a6;padding:56px 0 104px;border-top:4px solid var(--rosso);text-align:center;font-size:.94rem}
.piede__in{display:flex;flex-direction:column;align-items:center;gap:12px}
.piede img{width:220px;height:auto;margin-bottom:6px}
.piede__cosa{font-family:var(--titoli);font-weight:600;font-size:.98rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paglia)}
.piede a{color:#f3e8de}
.piede a:hover{color:var(--paglia)}
.piede__legale{font-size:.84rem;color:#a39589}

/* ---------- pulsante «Chiama» fisso (telefono) ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:60;display:none;align-items:center;gap:8px;background:var(--rosso);color:#fff;text-decoration:none;font-weight:700;padding:.9em 1.35em;border-radius:999px;box-shadow:0 12px 30px -8px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.92)}
.fab svg{width:19px;height:19px}
/* con JavaScript compare solo quando i pulsanti della copertina sono usciti dallo schermo */
.js .fab{opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .25s,transform .25s}
.js .fab.is-visibile{opacity:1;transform:none;pointer-events:auto}

/* ---------- comparsa allo scorrimento ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- schermi medi ---------- */
@media (max-width:1100px){
  :root{--alto:68px}
  .nav{position:fixed;inset:var(--alto) 0 auto;flex-direction:column;gap:0;background:rgba(23,18,17,.98);padding:8px 20px 22px;border-bottom:1px solid var(--linea-scura);transform:translateY(-120%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  .nav.is-open{transform:none;visibility:visible;transition:transform .3s}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linea-scura);font-size:1.08rem}
  .nav a::after{display:none}
  .testata__tel{display:none}
  .testata__chiama{display:grid}
  .burger{display:flex}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0}
  .hero__foto{grid-column:1;grid-row:1;height:min(58svh,560px)}
  .hero__foto img{-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
  .hero__foto::after{background:linear-gradient(180deg,rgba(23,18,17,.72) 0%,rgba(23,18,17,0) 26%)}
  .hero__testo{grid-column:1;grid-row:2;padding:0 max(20px,calc((100vw - 1180px) / 2)) 56px;margin-top:-56px}
  .hero__fascia{grid-row:3}
  .firma{grid-template-columns:1fr;gap:56px}
  .firma__foto{justify-self:center;max-width:540px}
  .schede{grid-template-columns:1fr 1fr}
  .tasselli{grid-template-columns:1fr 1fr;grid-template-rows:300px 220px 220px}
  .tassello--pizzeria{grid-column:span 2;grid-row:auto}
  .tassello--trattoria{grid-row:span 2}
  .menu-giorno,.chi,.ordina,.dove{grid-template-columns:1fr;gap:44px}
  .chi__foto{max-width:620px}
  .gmap{aspect-ratio:4/3}
  .fab{display:inline-flex}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .sezione{padding:72px 0}
  .locale{padding:72px 0 80px}
  .testa{margin-bottom:40px}
  .marchio img{height:38px}
  .hero__foto{height:min(50svh,430px);min-height:260px}
  .hero__foto img{object-position:50% 72%}
  .hero__testo{padding:0 16px 48px;margin-top:-44px}
  .hero__logo{width:min(400px,100%)}
  .occhiello{font-size:.86rem;letter-spacing:.14em}
  .h1-sotto{letter-spacing:.12em}
  .hero__lead{font-size:1.04rem;margin:.8em 0 1.5em}
  .hero__cta .btn{flex:1 1 auto}
  .hero__fatti{gap:14px 18px;margin-top:2em;padding-top:1.2em}
  .hero__fatti li{flex:1 1 40%;max-width:none}
  .hero__fatti b{font-size:1.55rem}
  .hero__fascia-in{flex-direction:column;gap:4px;padding:14px 0;font-size:1.06rem;letter-spacing:.08em}
  .striscia__in{grid-template-columns:1fr;gap:22px;padding:32px 0}
  .firma{gap:44px;margin-bottom:56px}
  .firma__foto::before{inset:14px -12px -14px 12px}
  .firma__foto{width:calc(100% - 12px);justify-self:start}
  .pin{width:36px;height:36px;font-size:1.1rem}
  .schede{grid-template-columns:1fr;gap:14px}
  .scheda{flex-direction:row}
  .scheda>img{width:36%;flex:none;aspect-ratio:auto;object-fit:cover}
  .scheda__corpo{padding:14px 16px 16px}
  .scheda h3{font-size:1.42rem}
  .scheda__cat{font-size:.78rem;letter-spacing:.14em}
  .scheda__corpo p:not(.scheda__cat){font-size:.93rem;line-height:1.45}
  .tasselli{grid-template-rows:240px 220px 190px;gap:10px}
  .tassello--trattoria{grid-row:auto}
  .tassello--kebab{grid-column:span 2}
  .tassello figcaption{left:14px;right:12px;bottom:12px}
  .tassello b{font-size:1.45rem}
  .tassello--pizzeria b{font-size:2rem}
  .tassello figcaption span{font-size:.86rem}
  .lavagna{padding:26px 22px 22px;border-width:10px}
  .lavagna__titolo{font-size:2rem}
  .lavagna h3{font-size:1.5rem}
  .lavagna li{font-size:1.3rem}
  .menu-telefono{padding:30px 22px 24px}
  .menu-telefono h3{font-size:1.85rem}
  .menu-telefono .btn{width:100%}
  .menu-completo{padding:20px 16px 26px}
  .menu-tools{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px;padding:10px 0}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .cerca{min-width:0;width:100%}
  .menu-lista{grid-template-columns:1fr}
  .chi__foto{padding:0 36px 44px 0}
  .chi__piccola{width:56%}
  .servizi{grid-template-columns:1fr}
  .modi{grid-template-columns:1fr}
  .ordina__cta .btn{width:100%}
  .ordina__foto{max-width:330px}
  .dove__tel a{font-size:1.8rem}
  .orari th,.orari td{font-size:.94rem}
}
@media (max-width:380px){
  .hero__fatti b{font-size:1.35rem}
  .hero__fascia-in{font-size:.98rem}
  .scheda h3{font-size:1.3rem}
}