/* =========================================================
   da Mammà — ANTEPRIMA "WOW" della home
   Regole di movimento (Second Brain di Filip, skill /motion):
   - interfaccia (pulsanti, menu, tab, pannelli): solo 100/150/200/300 ms, entrata ease-out,
     uscita ease-in, solo transform e opacity, niente rimbalzi né loop decorativi;
   - vetrina (prima schermata e scroll): eccezione marketing, movimenti più lunghi ma legati
     allo scroll o al cursore, e tutto fermo con "riduci movimento".
   ========================================================= */
/* Caratteri del logo, ospitati sul sito (niente Google dal vivo):
   Josefin Sans = "PIZZERIA D'ASPORTO", Allison = il corsivo di "da Mammà" */
@font-face{font-family:"Josefin Sans";src:url(../fonts/josefin-sans.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Allison";src:url(../fonts/allison.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --vino:#6B1015; --vino-2:#57090D; --rosso:#8C1C20; --brace:#E8833A; --oro:#F2B46A;
  --crema:#F4ECDD; --carta:#FBF6EC; --sabbia:#EADFCB; --linea:#DCCBB0;
  --inchiostro:#2A1C19; --grigio:#6B5A50; --notte:#1A0D09; --notte-2:#26140E;
  --su-scuro:#FBF1E4; --su-scuro-2:#D9C2B4;
  --f-titoli:"Josefin Sans","Century Gothic",Arial,sans-serif; --f-testo:"Josefin Sans","Century Gothic",Arial,sans-serif; --f-corsivo:"Allison","Brush Script MT",cursive;
  --margine:clamp(20px,5vw,64px); --testa-h:72px;
  /* token di movimento (interfaccia) */
  --m-100:100ms; --m-150:150ms; --m-200:200ms; --m-300:300ms;
  --entra:cubic-bezier(0.16,1,0.3,1); --esce:cubic-bezier(0.7,0,0.84,0);
  /* colori degli effetti della skill motion-3d-web */
  --s3d-bg:#1A0D09; --s3d-bg-glow:#3A1A10; --s3d-ink:#FBF1E4; --s3d-ink-soft:rgba(251,241,228,.8);
  --s3d-accent:#F2B46A; --s3d-font:var(--f-testo); --s3d-mono:var(--f-testo);
  --cur-accent:#6B1015; --cur-on-accent:#FBF1E4; --cur-light:#FBF1E4; --cur-light-tint:#F2B46A;
  --mo-deep:#1A0D09;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--testa-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--inchiostro);font:400 1.125rem/1.6 var(--f-testo);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul{margin:0}
:focus-visible{outline:3px solid var(--brace);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:fixed;left:12px;top:-80px;z-index:500;background:var(--vino);color:var(--su-scuro);padding:10px 16px;text-decoration:none;font-weight:900}
.salta:focus{top:12px}
.riga{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--margine)}
.riga-stretta{width:min(900px,100%)}
.centro{text-align:center}
.da-completare{background:#FFF1BF;color:var(--inchiostro);padding:1px 6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.lg-m{fill:var(--lm,#921718)}
.lg-w{fill:var(--lw,#3D3C3B)}
.fascia-anteprima{background:#222;color:#fff;text-align:center;font-size:.875rem;line-height:1.4;font-weight:600;padding:8px 16px}
/* parole in risalto: il corsivo del logo, più grande perché Allison è piccolo */
em{font-family:var(--f-corsivo);font-style:normal;font-weight:400;font-size:1.5em;line-height:.8;letter-spacing:0}

/* ---------- Pulsanti sobri e rettangolari, un solo pieno per sezione ---------- */
.pulsante{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1.5px solid currentColor;border-radius:14px;background:transparent;color:var(--vino);
  font:900 .9rem/1 var(--f-testo);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color var(--m-150) var(--entra),color var(--m-150) var(--entra),transform var(--m-100) var(--entra)}
.pulsante:active{transform:scale(.97)}
.pulsante-pieno{background:var(--vino);border-color:var(--vino);color:var(--su-scuro)}
@media (hover:hover){.pulsante-pieno:hover{background:var(--vino-2)}.pulsante:not(.pulsante-pieno):not(.pulsante-chiaro):hover{background:var(--vino);color:var(--su-scuro)}}
.pulsante-chiaro{background:var(--su-scuro);border-color:var(--su-scuro);color:var(--vino)}
.pulsante-grande{min-height:56px;padding:16px 30px;font-size:.95rem}
.collegamento{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:none;padding:0;font:700 1rem var(--f-testo);color:var(--vino);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;cursor:pointer}
.collegamento span{transition:transform var(--m-150) var(--entra)}
@media (hover:hover){.collegamento:hover span{transform:translateX(4px)}}
.collegamento-chiaro{color:var(--su-scuro)}

/* ---------- Testata: trasparente sulla foto, vetro sfocato appena si scorre ---------- */
.testa{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background-color var(--m-300) var(--entra),border-color var(--m-300) var(--entra),box-shadow var(--m-300) var(--entra)}
.testa-in{display:flex;align-items:center;gap:24px;height:var(--testa-h)}
/* vetro: tinta leggerissima, sfocatura forte e saturazione, bordo chiaro come il riflesso di una lastra */
.testa.vetro{background:rgba(251,246,236,.42);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.55);box-shadow:0 10px 30px -18px rgba(42,28,25,.45),inset 0 1px 0 rgba(255,255,255,.6)}
/* sopra le parti scure (scena 3D, firme, invito finale) il vetro diventa fumé */
.testa.vetro.su-scuro{background:rgba(26,13,9,.38);border-bottom-color:rgba(255,255,255,.14);box-shadow:0 10px 30px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.testa.aperto-menu{background:rgba(251,246,236,.94)}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none}
.marchio .lg-mark{width:52px;height:32px}
.marchio .lg-word{width:118px;height:27px;margin-top:4px}
.testa:not(.vetro):not(.aperto-menu) .marchio,.testa.vetro.su-scuro .marchio{--lm:#E0A9A0;--lw:#FBF1E4}
.naviga{display:flex;gap:2px;margin-left:auto}
.naviga a{text-decoration:none;font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;border-radius:10px;color:var(--inchiostro);
  transition:color var(--m-150) var(--entra),background-color var(--m-150) var(--entra)}
.testa:not(.vetro):not(.aperto-menu) .naviga a,.testa.vetro.su-scuro .naviga a{color:var(--su-scuro)}
.naviga a:hover{background:rgba(107,16,21,.08);color:var(--vino)}
.naviga a.attiva{color:var(--vino);background:rgba(255,255,255,.55)}
.testa:not(.vetro) .naviga a:hover,.testa.vetro.su-scuro .naviga a:hover{background:rgba(255,255,255,.12);color:#fff}
.testa:not(.vetro) .naviga a.attiva,.testa.vetro.su-scuro .naviga a.attiva{background:rgba(255,255,255,.16);color:#fff}
.testa-cta{min-height:42px;padding:10px 18px}
.menu-toggle{display:none;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--inchiostro);cursor:pointer;margin-left:auto}
.menu-toggle svg{width:26px;height:26px}
.testa:not(.vetro):not(.aperto-menu) .menu-toggle,.testa.vetro.su-scuro .menu-toggle{color:var(--su-scuro)}
@media (max-width:980px){
  .menu-toggle{display:inline-grid;place-items:center}
  .naviga{position:fixed;inset:var(--testa-h) 12px auto 12px;flex-direction:column;gap:0;margin:0;padding:8px 18px 18px;border-radius:18px;
    background:rgba(251,246,236,.82);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--m-150) var(--esce),transform var(--m-150) var(--esce);box-shadow:0 20px 40px -20px rgba(42,28,25,.45)}
  .naviga.open{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--m-200) var(--entra),transform var(--m-200) var(--entra)}
  .naviga a,.testa:not(.vetro):not(.aperto-menu) .naviga a,.testa.vetro.su-scuro .naviga a{color:var(--inchiostro);font-size:1rem;padding:14px 4px;border-radius:0;border-bottom:1px solid var(--linea)}
}
@media (max-width:420px){.marchio .lg-word{display:none}.testa-cta{display:none}}

/* ---------- 1. Prima schermata ---------- */
.apertura{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--notte);color:var(--su-scuro);padding-block:calc(var(--testa-h) + 32px) 72px}
.apertura-foto{position:absolute;inset:-12% 0 0;z-index:-3}
.apertura-foto img{width:100%;height:100%;object-fit:cover;object-position:62% center;will-change:transform}
.apertura::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(26,13,9,.92) 0%,rgba(26,13,9,.72) 42%,rgba(26,13,9,.15) 75%),linear-gradient(0deg,rgba(26,13,9,.85),rgba(26,13,9,0) 40%)}
/* luce che segue il cursore (Cursor Spotlight) */
.apertura-luce{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:var(--luce,0);transition:opacity var(--m-300) var(--entra);
  background:radial-gradient(circle 340px at var(--mx,70%) var(--my,50%),rgba(255,140,60,.28),transparent 70%)}
.apertura-testo{max-width:640px}
.logo-grande{width:min(420px,78vw);margin-bottom:28px}
.logo-svg{width:100%;height:auto;display:block;--lm:#921718;--lw:#3D3C3B;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 10px 28px rgba(0,0,0,.55))}
.logo-svg use,.logo-svg .lingua{stroke:#FBF1E4;stroke-width:9;stroke-linejoin:round;paint-order:stroke}
/* fiamma del logo: richiesta del cliente (unico loop, solo sul simbolo) */
.lingua{transform-box:fill-box;transform-origin:50% 100%;animation:lingua 1.6s ease-in-out infinite alternate}
.l-sx{animation-duration:1.3s;animation-delay:-.4s}
.l-dx{animation-duration:1.45s;animation-delay:-.9s;animation-name:lingua-dx}
.l-centro{animation-duration:1.1s;animation-name:lingua-centro}
@keyframes lingua{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.96,1.07) skewX(-3deg)}70%{transform:scale(1.02,.95) skewX(2deg)}100%{transform:scale(.98,1.04) skewX(-1deg)}}
@keyframes lingua-dx{0%{transform:scale(1,1) skewX(0)}40%{transform:scale(.97,1.06) skewX(3deg)}75%{transform:scale(1.02,.96) skewX(-2deg)}100%{transform:scale(.98,1.05) skewX(1deg)}}
@keyframes lingua-centro{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.94,1.1) skewX(2.5deg)}60%{transform:scale(1.03,.94) skewX(-2.5deg)}100%{transform:scale(.97,1.07) skewX(1.5deg)}}
.titolo-apertura{font:600 clamp(2.4rem,6vw,4.6rem)/1.02 var(--f-titoli);letter-spacing:-.015em}
.titolo-apertura em,.titolo-sezione em,.titolo-finale em,.s3d__title em{color:var(--oro);font-weight:500}
/* titolo che entra parola per parola (Split Text) */
.fx .parola{display:inline-block;opacity:0;transform:translateY(.45em);animation:parola .7s var(--entra) forwards;animation-delay:calc(.15s + var(--i) * 70ms)}
@keyframes parola{to{opacity:1;transform:none}}
.apertura-sotto{margin-top:20px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--su-scuro-2);max-width:46ch}
.apertura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.stato{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-weight:700;font-size:.95rem;color:var(--su-scuro-2)}
.punto{width:10px;height:10px;border-radius:50%;background:var(--su-scuro-2)}
.stato.aperto .punto{background:#4CB25E;box-shadow:0 0 0 4px rgba(76,178,94,.25)}
.stato.chiuso .punto{background:var(--brace)}
.scendi{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(251,241,228,.6);border-radius:14px}
.scendi span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--su-scuro);animation:scendi 1.8s var(--entra) 3}
@keyframes scendi{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}
@media (max-width:720px){
  .apertura{align-items:flex-end}
  .apertura::before{background:linear-gradient(0deg,rgba(26,13,9,.95) 40%,rgba(26,13,9,.45))}
  .scendi{display:none}
}

/* ---------- 2. Scena 3D ---------- */
.scena-pizza .s3d__stage{background:radial-gradient(ellipse 70% 60% at 66% 48%,var(--s3d-bg-glow) 0%,var(--s3d-bg) 70%)}
.forno-luce{position:absolute;inset:0;pointer-events:none;opacity:var(--forno,0);background:radial-gradient(ellipse 60% 55% at 60% 55%,rgba(255,120,40,.45),transparent 70%)}
.s3d__kicker{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.s3d__title{font-family:var(--f-titoli);font-weight:700;letter-spacing:-.01em}
.s3d__title--fine{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.s3d__fallback img{width:100%;height:auto;border-radius:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.s3d__label > span{font-family:var(--f-testo);font-weight:700;background:rgba(26,13,9,.85)}

/* ---------- 3. Numeri ---------- */
.numeri{background:var(--carta);border-bottom:1px solid var(--linea)}
.numeri-in{display:grid;grid-template-columns:repeat(3,1fr);padding-block:clamp(36px,6vw,64px)}
.numero{display:flex;flex-direction:column;gap:6px;padding:4px 22px;border-left:1px solid var(--linea)}
.numero:first-child{border-left:0;padding-left:0}
.numero b{font:600 clamp(2.4rem,5vw,3.8rem)/1 var(--f-titoli);color:var(--vino);font-variant-numeric:tabular-nums}
.numero > span{color:var(--grigio);font-size:.95rem;max-width:20ch}
@media (max-width:760px){.numeri-in{grid-template-columns:1fr;row-gap:22px}.numero{border-left:0;padding-left:0}}

/* ---------- Titoli di sezione (senza eyebrow) ---------- */
.titolo-sezione{font:600 clamp(2rem,4.4vw,3.4rem)/1.05 var(--f-titoli);letter-spacing:-.01em;color:var(--vino);max-width:22ch;text-wrap:balance}
.titolo-sezione em{color:var(--brace)}
.sezione-sotto{margin-top:14px;color:var(--grigio);max-width:52ch}
.titolo-chiaro{color:var(--su-scuro)}
.sotto-chiaro{color:var(--su-scuro-2)}
.titolo-sezione.centro{margin-inline:auto}
main > section:not(.apertura):not(.s3d):not(.numeri):not(.orizzontale){padding-block:clamp(72px,10vw,128px)}

/* ---------- 4. Ingredienti: scorrimento orizzontale ---------- */
.orizzontale{position:relative;background:var(--crema)}
.orizzontale-fisso{padding-block:clamp(72px,9vw,110px) 40px}
.orizzontale.attivo .orizzontale-fisso{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-block:calc(var(--testa-h) + 16px) 24px}
.orizzontale.attivo .orizzontale-testa{margin-top:auto}
.orizzontale.attivo .nastro{margin-bottom:auto}
.orizzontale-testa{margin-bottom:clamp(28px,4vw,48px)}
.nastro{list-style:none;padding:0 var(--margine);display:flex;gap:clamp(18px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;will-change:transform}
.nastro::-webkit-scrollbar{display:none}
.orizzontale.attivo .nastro{overflow:visible;width:max-content;scroll-snap-type:none}
.ingr{flex:none;width:clamp(240px,26vw,340px);scroll-snap-align:start}
.orizzontale.attivo .ingr{width:min(clamp(240px,26vw,340px),42svh)}   /* la carta intera sta sempre nello schermo */
@media (max-height:780px){.orizzontale.attivo .ingr{width:min(clamp(220px,26vw,340px),32svh)}.orizzontale.attivo .orizzontale-testa{margin-bottom:20px}}
.ingr .n{display:block;margin-top:16px;font:400 1.7rem/1 var(--f-corsivo);color:var(--brace)}
.ingr h3{font:700 1.45rem/1.15 var(--f-titoli);color:var(--vino);margin-top:2px}
.ingr p{margin-top:6px;color:var(--grigio);font-size:.95rem}
/* immagine che si svela (Image Reveal) + inclinazione al passaggio del mouse (Tilt) */
.svela{aspect-ratio:1;overflow:hidden;background:var(--sabbia)}
.svela img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-300) var(--entra)}
.fx .svela{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--entra)}
.fx .svela.is-in{clip-path:inset(0 0 0 0)}
.inclina{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--m-200) var(--entra)}
@media (hover:hover){.ingr:hover .svela img{transform:scale(1.02)}}

/* ---------- 5. Le firme: carte che si impilano (Sticky Cards) ---------- */
.firme{background:var(--notte);color:var(--su-scuro)}
.pila{margin-top:clamp(36px,5vw,56px);display:flex;flex-direction:column;gap:28px}
.carta{position:sticky;top:calc(var(--testa-h) + 24px + var(--k) * 16px);display:grid;grid-template-columns:1.1fr 1fr;min-height:min(70vh,560px);
  background:var(--notte-2);border:1px solid rgba(251,241,228,.12);text-decoration:none;color:inherit;overflow:hidden;
  transform-origin:50% 0;transform:scale(var(--scala,1));box-shadow:0 -20px 40px -24px rgba(0,0,0,.8)}
.carta-foto{position:relative;overflow:hidden;background:#3a2016}
.carta-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-300) var(--entra)}
.carta-testo{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(24px,4vw,56px)}
.carta-n{font:400 2rem/1 var(--f-corsivo);color:var(--oro)}
.carta h3{font:600 clamp(2.2rem,4.4vw,3.6rem)/1 var(--f-titoli)}
.carta-cat{font-weight:900;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--su-scuro-2)}
.carta p{color:var(--su-scuro-2);max-width:40ch}
.carta-prezzo{font:700 1.6rem var(--f-titoli);color:var(--oro);font-variant-numeric:tabular-nums}
.carta-prezzo s{font-size:1rem;color:var(--su-scuro-2);font-weight:400;margin-right:6px}
.carta-cta{align-self:flex-start;margin-top:8px;border:1.5px solid var(--su-scuro);border-radius:14px;padding:12px 20px;font-weight:900;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color var(--m-150) var(--entra),color var(--m-150) var(--entra)}
@media (hover:hover){.carta:hover .carta-cta{background:var(--su-scuro);color:var(--vino)}.carta:hover .carta-foto img{transform:scale(1.02)}}
@media (max-width:760px){.carta{grid-template-columns:1fr;min-height:0}.carta-foto{aspect-ratio:4/3}}

/* ---------- 6. Promo: il testo si riempie scorrendo (Scroll Text Fill) ---------- */
.promo{background:var(--carta)}
.riempi{font:600 clamp(2rem,5.4vw,4.4rem)/1.08 var(--f-titoli);letter-spacing:-.015em;max-width:22ch;color:var(--vino)}
.fx .riempi{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,var(--vino) var(--riempi,0%),rgba(107,16,21,.16) var(--riempi,0%))}
.riempi em{color:var(--oro);font-weight:500}
.fx .riempi em{color:var(--oro)}
.promo-oggi{margin-top:22px;display:inline-block;border-radius:12px;background:var(--vino);color:var(--su-scuro);padding:8px 14px;font-weight:900;letter-spacing:.06em}

/* ---------- 7. Menù per ordinare (markup e logica di ordina.css / ordina.js, qui coi colori e i caratteri del logo) ---------- */
.wow{--wine:var(--vino);--cream:var(--crema);--paper:var(--carta);--line:var(--linea);--muted:var(--grigio);--ink:var(--inchiostro);
  --ember:var(--brace);--red:var(--rosso);--sand:var(--sabbia);--on-wine:var(--su-scuro);--on-wine-muted:var(--su-scuro-2);
  --radius:14px;--ease:var(--entra);--t-xs:.82rem;--t-sm:.95rem;--t-xl:clamp(1.5rem,3vw,2rem);--t-2xl:clamp(2rem,5vw,3rem);
  --f-display:var(--f-titoli);--f-body:var(--f-testo);--header-h:var(--testa-h);--gutter:var(--margine)}
.menu-sez{background:var(--crema)}
.menu-sez .sezione-sotto{max-width:62ch}
.menu-sez h2,.menu-sez h3,.o-sheet h2,.o-sheet h3{font-family:var(--f-titoli);letter-spacing:-.005em}
.o-umori-sec{padding:28px 0 20px}
.o-umori-sec h3{font:700 1.25rem var(--f-titoli);margin-bottom:14px}
.o-catnav{margin-top:8px}
.o-cat-h h2{font-weight:700}
.o-cat-nota{font-family:var(--f-testo);font-style:normal}
.o-allergeni{margin-top:40px;border:1px solid var(--linea);border-radius:14px;padding:0 18px}
.o-allergeni summary{cursor:pointer;min-height:52px;display:flex;align-items:center;font-weight:700;color:var(--vino)}
.o-allergeni[open]{padding-bottom:18px}
/* pulsanti delle finestre del carrello, come i "pulsante" della pagina */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1.5px solid var(--vino);border-radius:14px;
  background:transparent;color:var(--vino);font:900 .85rem/1 var(--f-testo);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color var(--m-150) var(--entra),color var(--m-150) var(--entra),transform var(--m-100) var(--entra)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-wine{background:var(--vino);color:var(--su-scuro)}
@media (hover:hover){.btn-wine:hover:not(:disabled){background:var(--vino-2)}.btn-ghost:hover{background:var(--vino);color:var(--su-scuro)}}
.o-wa{border-color:#1B7F45}
.o-barra-in,.o-barra-cta{border-radius:16px}
.o-barra-cta{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.o-sheet{font-family:var(--f-testo)}
/* con il carrello pieno la barra del carrello prende il posto di quella "Chiama / Ordina" */
body.wow:has(#barraCarrello:not([hidden])){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
body.wow:has(#barraCarrello:not([hidden])) .barra-mobile{display:none}
.o-barra{z-index:95}

/* ---------- 8. Recensioni ---------- */
.recensioni{background:var(--carta);border-block:1px solid var(--linea)}
.rec-griglia{display:grid;gap:18px;margin-top:32px}
@media (min-width:860px){.rec-griglia{grid-template-columns:repeat(3,1fr)}}
.rec{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:24px;border:1px solid var(--linea);border-radius:18px;background:var(--crema)}
.rec blockquote{margin:0;font-size:1.1rem;line-height:1.55}
.rec blockquote p::before{content:"“";color:var(--vino);font-weight:700}
.rec blockquote p::after{content:"”";color:var(--vino);font-weight:700}
.rec figcaption{display:flex;flex-direction:column;gap:2px}
.rec figcaption b{color:var(--vino)}
.rec figcaption span{color:var(--grigio);font-size:.85rem}
.rec-link{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:24px}
.segnaposto-rec{margin:24px 0 16px;padding:18px 20px;max-width:60ch}

/* ---------- 9. Domande ---------- */
.domande{background:var(--crema)}
.faq{margin:36px 0 40px;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:700 1.2rem/1.3 var(--f-titoli);color:var(--inchiostro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1.5px solid var(--vino);color:var(--vino);font:900 1rem var(--f-testo);transition:transform var(--m-200) var(--entra)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 44px 22px 0;color:var(--grigio)}
.faq details[open] p{animation:apri var(--m-200) var(--entra)}
@keyframes apri{from{opacity:0;transform:translateY(-4px)}}

/* ---------- 10. Orari e dove ---------- */
.dove{background:var(--carta);border-top:1px solid var(--linea)}
.dove-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.indirizzo{margin:18px 0 6px;font-size:1.1rem}
.comuni-t{margin-top:26px;font-weight:900;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.comuni{margin-top:6px;font:400 1.15rem var(--f-testo);color:var(--vino)}
.orari{width:100%;border-collapse:collapse}
.orari th,.orari td{padding:14px 4px;border-bottom:1px solid var(--linea);text-align:left;font-weight:400}
.orari td{text-align:right;font-variant-numeric:tabular-nums}
.orari tr.oggi th,.orari tr.oggi td{color:var(--vino);font-weight:900}
.orari tr.oggi th::after{content:" · oggi";font:400 1.5rem/1 var(--f-corsivo);color:var(--brace)}
@media (max-width:760px){.dove-in{grid-template-columns:1fr}}

/* ---------- 11. Invito finale ---------- */
.finale{position:relative;background:var(--vino);color:var(--su-scuro);overflow:hidden;isolation:isolate}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle 420px at var(--mx,80%) var(--my,30%),rgba(242,180,106,.22),transparent 70%)}
.titolo-finale{font:600 clamp(2.4rem,6vw,4.8rem)/1.02 var(--f-titoli);max-width:16ch}
.social{margin-top:36px;color:var(--su-scuro-2)}
.social a{color:var(--su-scuro);font-weight:700}

/* ---------- Piè di pagina ---------- */
.piede{background:var(--notte);color:var(--su-scuro-2);font-size:.85rem;padding-block:32px calc(32px + env(safe-area-inset-bottom,0px))}
.piede-in{display:flex;flex-direction:column;gap:10px}
.piede-logo{width:140px;height:82px;--lm:#F2B46A;--lw:#FBF1E4}
.piede a{color:var(--su-scuro)}
.btn-app{border:1px solid var(--su-scuro-2);border-radius:10px;background:none;color:var(--su-scuro);padding:4px 10px;font:inherit;cursor:pointer}

/* ---------- Barra fissa su telefono ---------- */
.barra-mobile{display:none}
@media (max-width:760px){
  body.wow{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(244,236,221,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea)}
  .barra-mobile .pulsante{min-height:50px}
}

/* ---------- Invito all'app (compare dopo la scena) ---------- */
.invito-app{border-radius:18px;background:var(--carta);border:1px solid var(--linea);box-shadow:0 20px 40px -18px rgba(42,28,25,.5);padding:18px 20px;font-size:.95rem}
.invito-azioni{display:flex;align-items:center;gap:16px;margin-top:12px}
@media (max-width:760px){.invito-app{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ---------- Avviso breve ---------- */
.toast{position:fixed;inset:auto auto calc(96px + env(safe-area-inset-bottom,0px)) 50%;transform:translateX(-50%);margin:0;border:0;background:var(--inchiostro);color:var(--su-scuro);
  padding:10px 18px;font-weight:700;opacity:0;pointer-events:none;transition:opacity var(--m-200) var(--entra)}
.toast.on{opacity:1}

/* ---------- Riduci movimento: tutto fermo e leggibile ---------- */
@media (prefers-reduced-motion:reduce){
  .lingua,.scendi span{animation:none}
  .fx .parola{opacity:1;transform:none;animation:none}
  .fx .svela{clip-path:none}
  .fx .riempi{color:var(--vino);background:none}.fx .riempi em{color:var(--oro)}
  .apertura-foto img{transform:none!important}
  .carta{transform:none!important}
  *{transition-duration:.01ms!important}
}

/* Pagina 404 */
.pagina-404 .errore{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:4px}

/* Schermi larghi ma bassi (es. portatile 1336 × 481): titolo, riga e "Ordina" devono stare nella prima schermata */
@media (min-width:900px) and (max-height:700px){
  .apertura{padding-block:calc(var(--testa-h) + 10px) 22px}
  .logo-grande{width:clamp(170px,30svh,260px);margin-bottom:12px}
  .titolo-apertura{font-size:clamp(2rem,7.4svh,3.2rem)}
  .apertura-sotto{margin-top:10px;font-size:1rem}
  .apertura-azioni{margin-top:16px}
  .pulsante-grande{min-height:50px;padding:13px 26px}
  .stato{margin-top:12px}
  .scendi{display:none}
}

/* =========================================================
   RULLI delle pizze (js/rulli.js): foto di misura contenuta, mai a tutto schermo
   ========================================================= */
.rullo{position:relative;margin-top:clamp(32px,5vw,56px)}
.r-n{font:400 2rem/1 var(--f-corsivo);color:var(--oro)}
.r-cat{font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--su-scuro-2)}
.r-prezzo{font-weight:700;font-size:1.25rem;color:var(--oro);font-variant-numeric:tabular-nums}
.r-prezzo s{font-weight:400;font-size:.95rem;color:var(--su-scuro-2);margin-right:4px}
.rullo-frecce{display:flex;gap:10px}
.rullo-freccia{width:46px;height:46px;border-radius:14px;border:1.5px solid rgba(251,241,228,.5);background:none;color:var(--su-scuro);font:700 1.1rem var(--f-testo);cursor:pointer;
  transition:background-color var(--m-150) var(--entra),color var(--m-150) var(--entra)}
.rullo-freccia:hover{background:var(--su-scuro);color:var(--vino)}

/* A · ruota 3D */
.rullo-a{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(24px,4vw,56px)}
.ra-scena{height:clamp(300px,34vw,400px);perspective:1100px;display:grid;place-items:center;cursor:grab;touch-action:pan-y;user-select:none}
.ra-scena:active{cursor:grabbing}
.ra-cilindro{position:relative;width:clamp(170px,17vw,220px);aspect-ratio:4/5;transform-style:preserve-3d;transition:transform var(--m-300) var(--entra)}
.ra-faccia{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);filter:brightness(.55);
  transition:filter var(--m-300) var(--entra)}
.ra-faccia.davanti{filter:none}
.ra-faccia img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ra-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ra-info h3{font:600 clamp(2rem,3.6vw,3rem)/1 var(--f-titoli)}
.ra-info p{color:var(--su-scuro-2);max-width:38ch}
.rullo-a .rullo-frecce{grid-column:1;justify-self:center}
@media (max-width:760px){.rullo-a{grid-template-columns:1fr}.rullo-a .rullo-frecce{grid-row:2}}

/* B · rullo che rotola */
.rullo-b{overflow:hidden;margin-inline:calc(var(--margine) * -1);padding:8px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rb-binario{display:flex;width:max-content;cursor:grab;touch-action:pan-y;user-select:none;will-change:transform}
.rb-fila{display:flex;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px)}
.rb-pizza{width:clamp(180px,17vw,230px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:inherit}
.rb-tondo{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #3a2016;box-shadow:0 24px 30px -18px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.08)}
.rb-tondo img{width:100%;height:100%;object-fit:cover;transform:rotate(var(--giro,0deg)) scale(1.15);pointer-events:none}
.rb-pizza b{font:600 1.35rem/1.1 var(--f-titoli);margin-top:10px}
.rb-ordina{margin-top:6px;border:1.5px solid rgba(251,241,228,.5);border-radius:12px;padding:7px 14px;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color var(--m-150) var(--entra),color var(--m-150) var(--entra)}
@media (hover:hover){.rb-pizza:hover .rb-ordina{background:var(--su-scuro);color:var(--vino)}}

/* C · carosello a ventaglio */
.rullo-c .rc-pista{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:20px calc(50% - clamp(110px,11vw,140px));outline-offset:6px}
.rullo-c .rc-pista::-webkit-scrollbar{display:none}
.rc-carta{flex:none;width:clamp(220px,22vw,280px);scroll-snap-align:center;display:flex;flex-direction:column;gap:6px;padding:0 10px;text-decoration:none;color:inherit;
  transform-origin:50% 60%;opacity:var(--luce,1);transition:opacity var(--m-200) var(--entra)}
.rc-foto{aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 26px 40px -22px rgba(0,0,0,.85)}
.rc-foto img{width:100%;height:100%;object-fit:cover}
.rc-carta b{font:600 1.5rem/1.1 var(--f-titoli);margin-top:10px}
.r-desc{color:var(--su-scuro-2);font-size:.92rem;line-height:1.4;max-height:0;overflow:hidden;opacity:0;transition:opacity var(--m-200) var(--entra)}
.rc-carta.centro .r-desc{max-height:6em;opacity:1}
.rullo-c .rullo-frecce{justify-content:center;margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .rb-binario{overflow-x:auto;width:auto}.rb-fila[aria-hidden]{display:none}
  .ra-cilindro{transform:none!important;display:flex;gap:12px;width:auto}.ra-faccia{position:static;width:150px;transform:none!important;filter:none}
}

/* Ingredienti tondi, fermi: si svelano dal centro quando entrano */
.svela{border-radius:50%;box-shadow:0 22px 30px -20px rgba(42,28,25,.55)}
@media (hover:hover){.ingr:hover .svela img{transform:scale(1.04)}}
.fx .svela{clip-path:circle(0% at 50% 50%);transition:clip-path 1s var(--entra)}
.fx .svela.is-in{clip-path:circle(50% at 50% 50%)}
.ingr{text-align:center}
.ingr p{margin-inline:auto;max-width:28ch}
@media (prefers-reduced-motion:reduce){.fx .svela{clip-path:none}}

/* Pagina di confronto dei rulli */
.pagina-rulli .confronto-testa{padding-block:clamp(48px,7vw,88px)}
.pagina-rulli .firme{border-top:1px solid rgba(251,241,228,.08)}
.firme-b{background:#22110b}

/* Scena 3D su schermi medi: il testo finale resta leggibile anche se la pizza gli passa dietro */
@media (min-width:721px) and (max-width:1100px){.scena-pizza .s3d__step{z-index:1}.scena-pizza .s3d__step::before{content:"";position:absolute;inset:-40px -60px -40px calc(var(--s3d-gutter) * -1);z-index:-1;background:radial-gradient(ellipse at 30% 50%,rgba(26,13,9,.85),rgba(26,13,9,0) 70%)}}

/* le parole in corsivo non si spezzano a metà ("Bonate / Sopra") */
.titolo-apertura em,.titolo-sezione em,.titolo-finale em,.s3d__title em{white-space:nowrap}

/* Numero di pezzi nel carrello sul pulsante "Ordina" */
.testa-cta{gap:8px}
.testa-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--su-scuro);color:var(--vino);font-size:.75rem;letter-spacing:0}
.rc-carta{cursor:pointer}
.rc-carta.centro .rc-foto{outline:2px solid rgba(242,180,106,.0);transition:outline-color var(--m-200) var(--entra)}
@media (hover:hover){.rc-carta.centro:hover .rc-foto{outline-color:rgba(242,180,106,.8);outline-offset:4px}}
.o-barra-in #bcTot{white-space:nowrap;font-size:1.1rem}

/* ---------- Prossima apertura (CONFIG.PROSSIMA_APERTURA in dati.js) ---------- */
.solo-pre{display:none!important}
.pre-apertura .solo-pre{display:revert!important}
.pre-apertura .solo-aperti,.pre-apertura .o-azioni,.pre-apertura .o-barra,.pre-apertura .testa-n,.pre-apertura #promoToday,
.pre-apertura #promoOggi,.pre-apertura #bannerChiuso,.pre-apertura #bannerRiordina{display:none!important}
.pre-apertura p.prossima{display:inline-flex!important}
.prossima{align-items:center;gap:8px;margin-bottom:18px;padding:8px 16px;border-radius:999px;background:var(--oro);color:var(--notte);
  font:700 .85rem/1 var(--f-testo);letter-spacing:.1em;text-transform:uppercase}
.o-avviso-apertura{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding:16px 20px;border-radius:14px;background:#FFF1D6;border:1px solid #EBCB8B;color:var(--inchiostro)}
.pre-apertura .o-avviso-apertura{display:flex!important}
.o-avviso-apertura b{color:var(--vino);font-size:1.1rem}
.o-avviso-apertura a{color:var(--vino);font-weight:700}