/* Mi Carrò (Corbara), foglio di stile unico.
   Nero del logo e della griglia, giallo del cartellino «My selection» che mettono sulla carne, blu delle tovaglie di sala,
   rosso dei pomodorini di Corbara. Titoli in Rokkitt (la dicitura del logo è una egiziana nera), piccole voci in corsivo
   EB Garamond come il «dal 1953», testo in Hanken Grotesk. */
:root{
  --carbone:#0d0b09; --carbone-2:#17130f; --carbone-3:#241d17;
  --giallo:#fed001; --giallo-scuro:#e2b800;
  --blu:#132543; --blu-2:#1c3459;
  --brace:#e8581a;
  --pomodoro:#a62d17; --pomodoro-scuro:#84210f;
  --foglio:#f7f7f6; --bianco:#fff;
  --inchiostro:#15120f; --grigio:#575049; --sul-nero:#d9d3c9;
  --linea:rgba(21,18,15,.14); --linea-chiara:rgba(255,255,255,.2);
  --titoli:"Rokkitt",Rockwell,"Roboto Slab",Georgia,serif;
  --corsivo:"EB Garamond",Georgia,"Times New Roman",serif;
  --corpo:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --esce:cubic-bezier(.16,1,.3,1);
  --alto:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--alto) + 10px);-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:var(--corpo);font-size:17px;line-height:1.6;color:var(--inchiostro);background:var(--carbone);-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{margin:0}
ul{padding:0;list-style:none}
svg{width:22px;height:22px;fill:currentColor;flex:none}
.wrap{width:min(1240px,100% - 44px);margin-inline:auto}
:focus-visible{outline:3px solid var(--inchiostro);outline-offset:2px;box-shadow:0 0 0 6px var(--giallo);border-radius:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--giallo);color:var(--inchiostro);font-weight:700;padding:.6em 1em;text-decoration:none}
.salta:focus{top:12px}
h1,h2,h3,h4{word-spacing:-.07em}
h2{font-family:var(--titoli);font-weight:700;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.02;letter-spacing:-.005em;text-wrap:balance}

/* ---------- bottoni: rettangolari come il cartellino ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.74em 1.25em;border-radius:3px;font-family:var(--corpo);font-weight:700;font-size:.98rem;line-height:1.2;text-decoration:none;border:2px solid transparent;transition:transform .2s var(--esce),background-color .15s,color .15s,border-color .15s;cursor:pointer}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:.92em 1.5em;font-size:1.04rem}
.btn--giallo{background:var(--giallo);color:var(--inchiostro)}
.btn--giallo:hover{background:#ffe04d}
.btn--vuoto{border-color:rgba(255,255,255,.65);color:#fff}
.btn--vuoto:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
.btn--nero{background:var(--inchiostro);color:#fff}
.btn--nero:hover{background:#000;color:var(--giallo)}
.btn--bordo{border-color:var(--inchiostro);color:var(--inchiostro)}
.btn--bordo:hover{background:var(--inchiostro);color:#fff}

/* ---------- ruota del carro, gira con lo scroll (main.js) ---------- */
.ruota{position:absolute;pointer-events:none;will-change:transform}

/* ---------- 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:var(--carbone);box-shadow:0 1px 0 var(--linea-chiara)}
.testata__in{display:flex;align-items:center;gap:26px;height:var(--alto);width:min(1400px,100% - 44px);margin-inline:auto}
.marchio{display:block;flex:none;opacity:0;pointer-events:none;transition:opacity .25s}
.is-piena .marchio,.menu-aperto .marchio{opacity:1;pointer-events:auto}
.marchio img{width:auto;height:50px}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:#f1ece4;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--giallo);transition:right .25s var(--esce)}
.nav a:hover{color:#fff}.nav a:hover::after{right:0}
.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:3px}
.burger span{display:block;width:26px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.menu-aperto .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-aperto .burger span:nth-child(2){opacity:0}
.menu-aperto .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- copertina ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);background:var(--carbone);color:#fff;overflow:hidden}
.hero__foto{position:relative;grid-column:2;grid-row:1;min-height:100%;overflow:hidden}
.hero__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 66%;animation:respiro 2.2s var(--esce) both}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--carbone) 0,rgba(13,11,9,.62) 14%,rgba(13,11,9,0) 42%),linear-gradient(180deg,rgba(13,11,9,.6) 0,rgba(13,11,9,0) 20%,rgba(13,11,9,0) 80%,var(--carbone) 100%)}
.hero__testo{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:2;padding:calc(var(--alto) + 28px) clamp(16px,2vw,28px) 56px clamp(22px,6.2vw,104px)}
.hero__logo{width:min(470px,100%);height:auto;margin:0 0 26px -4px;animation:entra .9s var(--esce) both}
.hero h1{font-family:var(--titoli);font-weight:700;font-size:clamp(1.75rem,2.9vw,2.75rem);line-height:1.06;letter-spacing:-.005em;text-wrap:balance;max-width:15em;animation:entra .9s .12s var(--esce) both}
.hero__lead{max-width:31em;margin:.95em 0 1.6em;font-size:1.1rem;line-height:1.62;color:var(--sul-nero);text-wrap:pretty;animation:entra .9s .24s var(--esce) both}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;animation:entra .9s .36s var(--esce) both}
.hero__fatti{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:2em;font-family:var(--corsivo);font-style:italic;font-size:1.28rem;line-height:1.25;color:#f3e9d6;animation:entra .9s .48s var(--esce) both}
.hero__fatti li{display:flex;align-items:center;gap:14px}
.hero__fatti li+li::before{content:"";width:6px;height:6px;background:var(--giallo);rotate:45deg}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes respiro{from{transform:scale(1.07);filter:brightness(.55)}to{transform:none;filter:none}}

/* scintille dalla brace */
.scintille{position:absolute;inset:auto 0 0 0;height:78%;z-index:1;pointer-events:none;overflow:hidden}
.scintille i{position:absolute;bottom:-8px;width:3px;height:3px;border-radius:50%;background:#ffc46b;box-shadow:0 0 7px 2px rgba(255,122,30,.85);opacity:0;animation:sale 7s linear infinite}
.scintille i:nth-child(1){left:22%;animation-duration:6.2s;animation-delay:.4s}
.scintille i:nth-child(2){left:34%;animation-duration:8.1s;animation-delay:2.2s}
.scintille i:nth-child(3){left:41%;animation-duration:5.6s;animation-delay:1.1s}
.scintille i:nth-child(4){left:52%;animation-duration:7.4s;animation-delay:3.7s}
.scintille i:nth-child(5){left:58%;animation-duration:6.6s;animation-delay:.9s}
.scintille i:nth-child(6){left:66%;animation-duration:9s;animation-delay:4.6s}
.scintille i:nth-child(7){left:72%;animation-duration:5.9s;animation-delay:2.9s}
.scintille i:nth-child(8){left:79%;animation-duration:7.8s;animation-delay:5.3s}
.scintille i:nth-child(9){left:86%;animation-duration:6.9s;animation-delay:1.8s}
.scintille i:nth-child(10){left:47%;animation-duration:10s;animation-delay:6.1s;width:2px;height:2px}
@keyframes sale{0%{transform:translate(0,0);opacity:0}8%{opacity:1}55%{transform:translate(18px,-46vh);opacity:.85}100%{transform:translate(-10px,-82vh);opacity:0}}

/* ---------- striscia gialla ---------- */
.striscia{background:var(--giallo);color:var(--inchiostro)}
.striscia__in{display:grid;grid-template-columns:repeat(3,1fr);width:min(1240px,100% - 44px);margin-inline:auto}
.striscia__voce{padding:30px 34px 32px;border-left:1px solid rgba(21,18,15,.3)}
.striscia__voce:first-child{border-left:0;padding-left:0}
.striscia__voce:last-child{padding-right:0}
.striscia h2{font-weight:800;font-size:1.72rem;line-height:1.08;margin-bottom:.3em}
.striscia p{font-size:.98rem;line-height:1.5;color:#231d10;text-wrap:pretty}

/* ---------- la brace ---------- */
.brace{position:relative;background:radial-gradient(70% 46% at 92% 42%,rgba(232,88,26,.2),transparent 70%),var(--carbone);color:#fff;padding:clamp(70px,8vw,120px) 0 0;overflow:hidden}
.ruota--brace{width:560px;height:560px;right:-190px;top:-170px;color:rgba(255,255,255,.055)}
.brace__griglia{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(34px,5vw,84px);align-items:stretch}
.brace__chef{position:relative;min-height:0}
.brace__chef img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 50%;border-radius:3px}
.brace__chef figcaption{position:absolute;left:14px;bottom:14px;background:var(--giallo);color:var(--inchiostro);font-family:var(--titoli);font-weight:700;font-size:1.02rem;line-height:1.1;padding:.42em .75em;rotate:-1.5deg}
.brace__lead{margin-top:.95em;font-size:1.12rem;line-height:1.6;color:var(--sul-nero);max-width:37em;text-wrap:pretty}
.voce-loro{margin-top:1em;font-family:var(--corsivo);font-style:italic;font-size:1.42rem;line-height:1.28;color:#f3e9d6;max-width:29em;text-wrap:pretty}

/* cartellini gialli: la forma è quella del segnalino «My selection» infilzato nella carne */
.cartellini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:2em 0 2.4em}
.cartellino{position:relative;display:grid;height:100%;align-content:start;background:var(--giallo);color:var(--inchiostro);text-decoration:none;padding:14px 38px 14px 16px;border-radius:2px;rotate:var(--r,-1.4deg);transition:rotate .35s var(--esce),transform .35s var(--esce),box-shadow .35s}
.cartellini li:nth-child(2) .cartellino{--r:1.1deg}
.cartellini li:nth-child(3) .cartellino{--r:-.7deg}
.cartellino::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:34px;margin-top:-17px;border-radius:7px;background:var(--carbone)}
.cartellino:hover{rotate:0deg;transform:translateY(-5px);box-shadow:0 18px 30px -14px rgba(232,88,26,.65)}
.cartellino__nome{font-family:var(--titoli);font-weight:700;font-size:1.08rem;line-height:1.1}
.cartellino b{font-family:var(--titoli);font-weight:800;font-size:2rem;line-height:1;margin-top:.45em}
.cartellino small{font-size:.8rem;font-weight:600;margin-top:.1em}

.brace__sotto{font-family:var(--titoli);font-weight:700;font-size:1.5rem;line-height:1.1;margin-bottom:.45em}
.listino{margin-bottom:1.6em;max-width:640px}
.listino li{display:flex;align-items:baseline;gap:10px;padding:.42em 0;font-size:1.02rem;line-height:1.3}
.listino small{color:#bdb5a8;font-size:.86rem;white-space:nowrap}
.listino i{flex:1;min-width:18px;border-bottom:1px dotted rgba(255,255,255,.36);transform:translateY(-.25em)}
.listino b{font-family:var(--titoli);font-weight:700;font-size:1.16rem;color:var(--giallo);white-space:nowrap}

.brace__strisciata{display:grid;grid-template-columns:2.15fr 1fr 1fr;gap:6px;margin-top:clamp(50px,6vw,84px)}
.brace__strisciata figure{position:relative;height:clamp(300px,31vw,470px);overflow:hidden}
.brace__strisciata img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--esce)}
.brace__strisciata figure:hover img{transform:scale(1.04)}
.f-griglia img{object-position:50% 60%}
.f-sale figcaption{position:absolute;inset:auto 0 0 0;padding:64px 26px 20px;font-family:var(--corsivo);font-style:italic;font-size:1.32rem;line-height:1.25;color:#fff;background:linear-gradient(0deg,rgba(13,11,9,.86),rgba(13,11,9,0))}

/* ---------- la pizza ---------- */
.pizza{position:relative;background:var(--pomodoro);color:#fff;padding:clamp(70px,8vw,120px) 0;overflow:hidden}
.ruota--pizza{width:620px;height:620px;left:-240px;bottom:-250px;color:rgba(255,255,255,.07)}
.pizza__griglia{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.pizza__lead{margin-top:.95em;font-size:1.12rem;line-height:1.6;color:#fbeee8;max-width:34em;text-wrap:pretty}
.regina{margin-top:2em;padding:24px 28px 22px;background:var(--pomodoro-scuro);border-radius:3px}
.regina__nota{font-family:var(--corsivo);font-style:italic;font-size:1.26rem;line-height:1.2;color:var(--giallo)}
.regina h3{font-family:var(--titoli);font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1.05;margin:.08em 0 .3em}
.regina p{text-wrap:pretty}
.due-prezzi{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:.7em;font-size:.95rem}
.due-prezzi b{font-family:var(--titoli);font-weight:700;font-size:1.3rem;color:var(--giallo)}
.speciali{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin:1.9em 0 2em}
.speciali h4{font-family:var(--titoli);font-weight:700;font-size:1.42rem;line-height:1.1;margin-bottom:.25em}
.speciali p{font-size:.97rem;line-height:1.5;color:#fbeee8;text-wrap:pretty}
.speciali .due-prezzi{font-size:.9rem}
.speciali .due-prezzi b{font-size:1.16rem}
.pizza__foto{position:relative;padding-bottom:34px}
.f-metro{position:relative;rotate:2.4deg;box-shadow:0 34px 60px -30px rgba(40,6,0,.85)}
.f-metro img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.f-metro figcaption{position:absolute;right:14px;top:14px;max-width:13em;font-family:var(--corsivo);font-style:italic;font-size:1.16rem;line-height:1.18;color:var(--inchiostro);background:var(--giallo);padding:.4em .7em;rotate:-2.4deg}
.f-forno{position:absolute;left:-13%;bottom:0;width:58%;rotate:-3deg;box-shadow:0 24px 40px -20px rgba(40,6,0,.9)}
.f-forno img{width:100%;aspect-ratio:9/6.4;object-fit:cover;border:6px solid #fff;border-radius:2px}

/* ---------- tasselli delle categorie ---------- */
.tasselli{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,clamp(230px,21vw,340px));gap:4px;background:var(--carbone)}
.tassello{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:var(--carbone-2)}
.t-vini img{object-position:60% 30%}
.t-pizze img{object-position:50% 40%}
.tassello img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--esce),filter .5s}
.tassello:hover img,.tassello:focus-visible img{transform:scale(1.06);filter:brightness(1.08)}
.tassello::after{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(0deg,rgba(13,11,9,.9) 8%,rgba(13,11,9,0))}
.tassello span{position:absolute;z-index:1;left:18px;right:16px;bottom:15px;font-family:var(--titoli);font-weight:700;font-size:clamp(1.45rem,2.1vw,1.9rem);line-height:1.05}
.tassello small{display:block;font-family:var(--corpo);font-weight:500;font-size:.88rem;line-height:1.3;margin-top:.35em;color:#efe9df;max-height:0;opacity:0;transition:max-height .45s var(--esce),opacity .35s}
.tassello:hover small,.tassello:focus-visible small{max-height:5em;opacity:1}
.t-iniziare{grid-column:1;grid-row:1/3}
.t-brace{grid-column:2/4;grid-row:1}
.t-primi{grid-column:4;grid-row:1}
.t-vini{grid-column:5;grid-row:1/3}
.t-pizze{grid-column:2/4;grid-row:2}
.t-pesce{grid-column:4;grid-row:2}

/* ---------- menu ---------- */
.menu{background:var(--foglio);padding:clamp(70px,8vw,112px) 0 clamp(60px,7vw,96px)}
.testa{max-width:760px;margin:0 0 30px}
.testa__sub{margin-top:.6em;font-size:1.08rem;color:var(--grigio);text-wrap:pretty}
.menu-tools{position:sticky;top:var(--alto);z-index:5;background:var(--foglio);padding:10px 0;margin-bottom:6px;border-bottom:2px solid var(--inchiostro)}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{background:transparent;color:var(--inchiostro);border:0;border-radius:3px;padding:.5em .85em;font-family:var(--titoli);font-size:1.16rem;font-weight:700;line-height:1.1;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.tab:hover{background:#e9e8e5}
.tab[aria-selected="true"]{background:var(--inchiostro);color:var(--giallo)}
.menu-sotto{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:18px 0 18px}
.cerca{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(21,18,15,.32);border-radius:3px;padding:.5em .9em;width:min(380px,100%)}
.cerca svg{width:18px;height:18px;fill:var(--grigio)}
.cerca input{background:none;border:0;outline:0;color:var(--inchiostro);font:inherit;font-size:.98rem;width:100%;min-width:0}
.cerca input::placeholder{color:#645c53;opacity:1}
.cerca:focus-within{border-color:var(--inchiostro);box-shadow:0 0 0 3px var(--giallo)}
.canale{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.canale[hidden]{display:none}
.canale__et{font-size:.92rem;font-weight:600;margin-right:6px}
.canale button{font:inherit;font-weight:700;font-size:.94rem;padding:.42em .95em;background:#fff;color:var(--inchiostro);border:2px solid var(--inchiostro);border-radius:3px;cursor:pointer;transition:background-color .15s}
.canale button:hover{background:#efeeeb}
.canale button[aria-pressed="true"]{background:var(--giallo)}
.menu-lista{min-height:240px}
.menu-gruppo{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.menu-cat{font-family:var(--titoli);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.1;margin:34px 0 4px}
.menu-cat:first-child{margin-top:6px}
.menu-nota{font-family:var(--corsivo);font-style:italic;font-size:1.2rem;line-height:1.3;color:#3d3730;margin:4px 0 8px;max-width:50em;text-wrap:pretty}
.piatto{padding:14px 0 15px;border-bottom:1px solid var(--linea)}
.piatto h4{display:flex;align-items:baseline;gap:10px;font-family:var(--titoli);font-weight:700;font-size:1.26rem;line-height:1.14}
.piatto__nome{min-width:0}
.riga{flex:1;min-width:16px;border-bottom:1px dotted rgba(21,18,15,.45);transform:translateY(-.22em)}
.p{font-weight:800;white-space:nowrap;flex:none}
.p small{font-family:var(--corpo);font-weight:600;font-size:.76rem;margin-left:.4em}
.piatto p{margin-top:.25em;font-size:.97rem;line-height:1.48;color:var(--grigio);text-wrap:pretty}
.varianti{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:.5em;font-size:.88rem;font-weight:500;color:#3d3730}
.varianti b{font-weight:700;color:var(--inchiostro)}
.menu-vuoto{padding:40px 0;font-size:1.05rem}
.allergeni{margin-top:30px;padding-top:14px;font-size:.95rem;color:var(--grigio);max-width:60em}

/* ---------- formati ---------- */
.formati{background:var(--blu);color:#fff;padding:clamp(70px,8vw,112px) 0}
.testa--chiara .testa__sub{color:#cfd7e6}
.misure{display:grid;grid-template-columns:1fr 1fr 1.1fr 1.7fr;gap:28px;align-items:start;margin:6px 0 clamp(44px,5vw,70px)}
.misura h3{font-family:var(--titoli);font-weight:700;font-size:1.6rem;line-height:1.1;margin-top:.6em}
.misura p{font-size:.97rem;line-height:1.45;color:#dfe5f0;text-wrap:pretty}
.misura__prezzi{margin-top:.55em;color:#fff!important}
.misura__prezzi b{font-family:var(--titoli);font-weight:700;font-size:1.2rem;color:var(--giallo)}
/* le forme delle pizze: cornicione e sopra pomodoro con fior di latte */
.forma{position:relative;background:
    radial-gradient(circle at 28% 34%,#fff4d8 0 7%,transparent 7.5%),
    radial-gradient(circle at 66% 28%,#fff4d8 0 8%,transparent 8.5%),
    radial-gradient(circle at 42% 68%,#fff4d8 0 9%,transparent 9.5%),
    radial-gradient(circle at 76% 66%,#fff4d8 0 7%,transparent 7.5%),
    #c83a1d;border:7px solid #e0a557;box-shadow:0 0 0 2px #8f5b22 inset;transition:transform .5s var(--esce)}
.misura:hover .forma{transform:rotate(-6deg) scale(1.04)}
.forma--baby{width:84px;height:84px;border-radius:50%;margin-top:44px}
.forma--tonda{width:128px;height:128px;border-radius:50%;border-width:8px}
.forma--salt{width:150px;height:74px;border-radius:999px 999px 26px 26px;margin-top:54px}
.forma--metro{width:100%;max-width:330px;height:112px;border-radius:56px;border-width:9px;display:flex;align-items:center;justify-content:center;margin-top:16px}
.forma--metro span{font-family:var(--titoli);font-weight:800;font-size:1.3rem;color:var(--inchiostro);background:var(--giallo);padding:.1em .5em;rotate:-2deg}
.regole{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.regola{padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.28)}
.regola h3{font-family:var(--titoli);font-weight:700;font-size:1.46rem;line-height:1.1;color:var(--giallo);margin-bottom:.3em}
.regola p{line-height:1.55;color:#eef1f7;text-wrap:pretty}
.regola b{white-space:nowrap}

/* ---------- chi siamo ---------- */
.chi{position:relative;background:var(--carbone);color:#fff;padding:clamp(80px,9vw,130px) 0;overflow:hidden}
.chi__anno{position:absolute;left:-.04em;top:.06em;font-family:var(--titoli);font-weight:800;font-size:clamp(9rem,31vw,29rem);line-height:.82;color:transparent;-webkit-text-stroke:1px rgba(254,208,1,.22);pointer-events:none;user-select:none}
.chi__griglia{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.chi__testo{padding-top:clamp(40px,8vw,130px)}
.chi__testo p{margin-top:1em;font-size:1.08rem;line-height:1.65;color:var(--sul-nero);text-wrap:pretty}
.social{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:1.6em!important}
.social a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--giallo);padding-bottom:2px}
.social a:hover{color:var(--giallo)}
.social svg{width:19px;height:19px}
.chi__foto{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:stretch}
.chi__foto img{width:100%;object-fit:cover;border-radius:3px}
.chi__foto figcaption{margin-top:.5em;font-family:var(--corsivo);font-style:italic;font-size:1.14rem;line-height:1.22;color:#efe5d2}
.f-chef{grid-row:1/3;display:flex;flex-direction:column}
.f-chef img{flex:1;min-height:0;height:100px;object-position:50% 30%}
.f-terra img{aspect-ratio:1}
.f-squadra{grid-column:2}
.f-squadra img{aspect-ratio:5/4}

/* ---------- prenota e asporto ---------- */
.servizi{display:grid;grid-template-columns:1fr 1fr}
.servizio{display:flex;flex-direction:column;min-width:0}
.servizio__foto{width:100%;aspect-ratio:16/9;object-fit:cover}
.servizio__fig{position:relative}
.servizio__fig figcaption{position:absolute;left:clamp(22px,4.4vw,72px);bottom:16px;font-family:var(--corsivo);font-style:italic;font-size:1.2rem;line-height:1.2;color:var(--inchiostro);background:var(--giallo);padding:.34em .7em;rotate:-1deg}
.servizio__corpo{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(30px,4vw,56px) clamp(22px,4.4vw,72px) clamp(36px,4.4vw,60px)}
.servizio--tavola{background:var(--blu);color:#fff}
.servizio--asporto{background:var(--giallo);color:var(--inchiostro)}
.servizio__lead{margin:.7em 0 1.2em;font-size:1.14rem;line-height:1.5;text-wrap:pretty}
.voci{width:100%;margin-bottom:1.8em}
.voci li{display:grid;grid-template-columns:9.6em minmax(0,1fr);gap:4px 14px;padding:.62em 0;border-top:1px solid var(--linea-chiara);line-height:1.42}
.servizio--asporto .voci li{border-top-color:rgba(21,18,15,.3)}
.voci b{font-family:var(--titoli);font-weight:700;font-size:1.1rem;line-height:1.25}
.servizio--tavola .voci span{color:#e7ebf3}
.servizio__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.servizio--tavola>.servizio__corpo>.btn{margin-top:auto}

/* ---------- buono a sapersi ---------- */
.sapere{background:var(--carbone);color:#fff;padding:30px 0}
.sapere__in{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center}
.sapere li{display:flex;align-items:center;gap:9px;font-size:.96rem;line-height:1.3;font-weight:500}
.sapere svg{width:21px;height:21px;fill:var(--giallo)}

/* ---------- dove siamo ---------- */
.dove{background:var(--foglio);padding:clamp(70px,8vw,112px) 0}
.dove__griglia{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(34px,5vw,76px);align-items:start}
.dove address{margin-top:1em;font-style:normal;font-size:1.1rem;line-height:1.5}
.dove__tel{margin-top:.6em}
.dove__tel a{display:inline-flex;align-items:center;gap:9px;font-family:var(--titoli);font-weight:800;font-size:1.9rem;line-height:1.1;text-decoration:none}
.dove__tel a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--giallo)}
.orari{width:100%;margin:1.5em 0 .8em;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.orari caption{text-align:left;font-family:var(--titoli);font-weight:700;font-size:1.4rem;margin-bottom:.3em}
.orari th,.orari td{padding:.46em .55em;text-align:left;border-top:1px solid var(--linea);white-space:nowrap}
.orari thead th{font-weight:600;font-size:.84rem;color:var(--grigio);border-top:0}
.orari tbody th{font-weight:600}
.orari .chiuso td{color:var(--grigio);font-style:italic}
.orari .oggi th,.orari .oggi td{background:var(--giallo);color:var(--inchiostro)}
.piccolo{font-size:.94rem;color:var(--grigio);margin-bottom:1.3em;text-wrap:pretty}
.dove__mappa picture{display:block}
.dove__mappa img{width:100%;border-radius:3px;box-shadow:0 0 0 1px var(--linea)}
.dove__mappa figcaption{margin-top:.5em;font-size:.84rem;color:var(--grigio)}

/* ---------- piede ---------- */
.piede{background:var(--carbone);color:#e7e1d8;padding:54px 0 44px;text-align:center}
.piede__in{display:flex;flex-direction:column;align-items:center;gap:16px}
.piede img{width:min(270px,70vw);height:auto}
.piede a{color:#fff}
.piede a:hover{color:var(--giallo)}
.piede__legale{font-size:.86rem;color:#b9b2a7;max-width:60em;text-wrap:pretty}

/* ---------- pulsante fisso (solo telefono) ---------- */
.fab{position:fixed;right:14px;bottom:14px;z-index:60;display:none;align-items:center;gap:8px;background:var(--giallo);color:var(--inchiostro);text-decoration:none;font-weight:800;padding:.85em 1.2em;border-radius:3px;box-shadow:0 12px 30px -8px rgba(0,0,0,.6)}
.fab svg{width:19px;height:19px}
.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 (solo con JavaScript attivo: senza, si vede tutto subito) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--esce) var(--ritardo,0ms),transform .95s var(--esce) var(--ritardo,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .scintille{display:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- schermi medi ---------- */
@media (max-width:1180px){
  .nav{gap:18px}
  .nav a{font-size:.9rem}
  .misure{grid-template-columns:repeat(3,1fr)}
  .misura--metro{grid-column:1/-1}
  .tasselli{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,clamp(220px,26vw,320px))}
  .t-iniziare{grid-column:1;grid-row:1/3}
  .t-brace{grid-column:2/5;grid-row:1}
  .t-primi{grid-column:2;grid-row:2}
  .t-pesce{grid-column:3;grid-row:2}
  .t-pizze{grid-column:4;grid-row:2}
  .t-vini{display:block;grid-column:1/-1;grid-row:3;min-height:220px}
  .tassello small{max-height:5em;opacity:1}
}
@media (max-width:980px){
  .brace__griglia,.pizza__griglia,.chi__griglia,.dove__griglia{grid-template-columns:minmax(0,1fr)}
  .brace__chef{max-width:560px}
  .brace__chef img{position:static;height:auto;aspect-ratio:4/5}
  .pizza__foto{max-width:560px;margin-inline:auto;width:90%}
  .f-forno{left:-6%}
  .servizi{grid-template-columns:minmax(0,1fr)}
  .chi__testo{padding-top:clamp(70px,16vw,130px)}
}

/* ---------- telefono ---------- */
@media (max-width:860px){
  :root{--alto:62px}
  body{font-size:16.5px}
  .testata__in{width:calc(100% - 28px);gap:10px}
  .marchio img{height:42px}
  .burger{display:flex;order:3}
  .testata__tel{margin-left:auto;padding:.5em .8em;font-size:.92rem}
  .nav{display:none;position:absolute;left:0;right:0;top:var(--alto);flex-direction:column;gap:0;background:var(--carbone);border-top:1px solid var(--linea-chiara);padding:6px 20px 16px;margin:0}
  .nav.is-open{display:flex}
  .nav a{font-size:1.08rem;padding:.72em 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}

  .hero{display:flex;flex-direction:column;min-height:0}
  .hero__foto{order:1;height:47svh;min-height:300px;max-height:480px}
  .hero__foto img{object-position:50% 72%}
  .hero__foto::after{background:linear-gradient(180deg,rgba(13,11,9,.5) 0,rgba(13,11,9,0) 26%,rgba(13,11,9,0) 62%,var(--carbone) 100%)}
  .hero__testo{order:2;margin-top:-92px;padding:0 20px 42px}
  .hero__logo{width:min(300px,76vw);margin-bottom:18px}
  .hero__lead{font-size:1.02rem;margin:.8em 0 1.3em}
  .hero__cta .btn{flex:1 1 100%}
  .hero__fatti{font-size:1.16rem;margin-top:1.4em}

  .striscia__in{grid-template-columns:minmax(0,1fr)}
  .striscia__voce,.striscia__voce:first-child,.striscia__voce:last-child{padding:20px 0 22px;border-left:0;border-top:1px solid rgba(21,18,15,.3)}
  .striscia__voce:first-child{border-top:0}

  .cartellini{grid-template-columns:minmax(0,1fr);gap:10px;margin:1.6em 0 2em}
  .cartellino{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:12px 40px 12px 16px}
  .cartellino__nome{grid-column:1;grid-row:1/3}
  .cartellino b{grid-column:2;grid-row:1;margin:0;font-size:1.65rem;text-align:right}
  .cartellino small{grid-column:2;grid-row:2;text-align:right}
  .listino li{font-size:.98rem}
  .brace__strisciata{grid-template-columns:1fr 1fr}
  .brace__strisciata figure{height:64vw}
  .f-sale{grid-column:1/-1}
  .f-sale figcaption{font-size:1.14rem;padding:48px 16px 14px}
  .f-metro figcaption{display:none}
  .f-chef img{height:auto;aspect-ratio:3/5}
  .forma--baby{margin-top:36px}.forma--salt{margin-top:48px}.forma--metro{margin-top:0}
  .servizio__fig figcaption{left:14px;bottom:12px;font-size:1.06rem}
  .t-vini img{object-position:50% 30%}

  .speciali{grid-template-columns:minmax(0,1fr);gap:20px}
  .regina{padding:20px 18px 18px}

  .tasselli{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}
  .tassello{height:50vw;min-height:170px}
  .t-iniziare,.t-brace,.t-primi,.t-vini,.t-pizze,.t-pesce{grid-column:auto;grid-row:auto}
  .t-brace,.t-vini{grid-column:1/-1;height:58vw}
  .t-iniziare,.t-primi{height:60vw}
  .tassello span{left:13px;right:10px;bottom:11px;font-size:1.32rem}
  .tassello small{font-size:.8rem;max-height:6em;opacity:1}

  /* trappola nota: la riga delle schede scorre dentro lo schermo, non allarga la pagina */
  .menu-tools{padding:8px 0;margin-inline:-22px;padding-inline:22px;background:var(--foglio)}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-22px;padding-inline:22px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;font-size:1.08rem;padding:.48em .75em}
  .menu-sotto{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .cerca{width:100%}
  .canale__et{width:100%;margin:0}
  .canale button{flex:1}
  .menu-gruppo{grid-template-columns:minmax(0,1fr)}
  .piatto h4{font-size:1.18rem}

  .misure{grid-template-columns:1fr 1fr;gap:26px 18px}
  .forma--salt{width:124px;height:64px}
  .forma--tonda{width:112px;height:112px}
  .forma--baby{width:76px;height:76px}
  .regole{grid-template-columns:minmax(0,1fr)}

  .voci li{grid-template-columns:minmax(0,1fr);padding:.55em 0}
  .servizio__cta .btn,.servizio--tavola>.servizio__corpo>.btn{width:100%}
  .sapere__in{flex-direction:column;align-items:flex-start;gap:10px}
  .orari{font-size:.88rem}
  .orari th,.orari td{padding:.42em .3em}
  .dove__tel a{font-size:1.7rem}
  .fab{display:inline-flex}
  .piede{padding-bottom:84px}
}
@media (max-width:380px){
  .testata__tel span{display:none}
  .testata__tel{padding:.55em .7em}
  .hero__fatti{font-size:1.06rem}
  .orari{font-size:.82rem}
  .orari th,.orari td{white-space:normal;padding:.38em .22em}
}