:root {
  --nero: #14110f;
  --forno: #1d1916;
  --forno-2: #191512;
  --brace: #26201c;
  --linea: #3a312a;
  --linea-2: #2c2520;
  --linea-forte: #5a4b3f;
  --crema: #f5ecdc;
  --crema-2: #cdbfa8;
  --spento: #8f8170;
  --oro: #e9b44c;
  --basilico: #4f9a46;
  --scelto: #2f211b;
  --invito: #2a1f19;
  --testa-bg: rgba(20, 17, 15, .78);
  --testa-pieno: rgba(20, 17, 15, .97);
  --vetro: rgba(29, 25, 22, .86);
  --tocco: rgba(255, 255, 255, .08);
  --tocco-2: rgba(255, 255, 255, .16);
  --bordo-testa: rgba(255, 255, 255, .06);
  --verde-bg: #1f2a1c;
  --verde-t: #8fd17f;
  --oro-bg: #2e2716;
  --ombra-foto: rgba(0, 0, 0, .6);
  --scena-1: #3a2a20;
  --scena-2: #1a1512;
  --tinta-1: rgba(232, 70, 43, .18);
  --tinta-2: rgba(233, 180, 76, .07);
  --ombra: 0 20px 50px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
  --pomodoro: #e8462b;
  --pomodoro-2: #ff6a45;
  --r: 18px;
  --titolo: "Fraunces", Georgia, serif;
  --testo: "Manrope", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --nero: #f7f1e6;
    --forno: #fffaf2;
    --forno-2: #fbf4e8;
    --brace: #f1e7d7;
    --linea: #e3d6c1;
    --linea-2: #ece2d2;
    --linea-forte: #c9b597;
    --crema: #221a14;
    --crema-2: #5b4c3f;
    --spento: #8a7866;
    --oro: #b07812;
    --basilico: #3b8a33;
    --scelto: #fde8df;
    --invito: #fff1e3;
    --testa-bg: rgba(247, 241, 230, .82);
    --testa-pieno: rgba(247, 241, 230, .98);
    --vetro: rgba(255, 250, 242, .92);
    --tocco: rgba(0, 0, 0, .06);
    --tocco-2: rgba(0, 0, 0, .11);
    --bordo-testa: rgba(0, 0, 0, .07);
    --verde-bg: #e7f3e2;
    --verde-t: #2f7a28;
    --oro-bg: #fbefd4;
    --ombra-foto: rgba(70, 35, 10, .3);
    --scena-1: #f6e6cf;
    --scena-2: #eadbc2;
    --tinta-1: rgba(232, 70, 43, .12);
    --tinta-2: rgba(233, 180, 76, .16);
    --ombra: 0 20px 44px -22px rgba(70, 35, 10, .35);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --nero: #f7f1e6;
  --forno: #fffaf2;
  --forno-2: #fbf4e8;
  --brace: #f1e7d7;
  --linea: #e3d6c1;
  --linea-2: #ece2d2;
  --linea-forte: #c9b597;
  --crema: #221a14;
  --crema-2: #5b4c3f;
  --spento: #8a7866;
  --oro: #b07812;
  --basilico: #3b8a33;
  --scelto: #fde8df;
  --invito: #fff1e3;
  --testa-bg: rgba(247, 241, 230, .82);
  --testa-pieno: rgba(247, 241, 230, .98);
  --vetro: rgba(255, 250, 242, .92);
  --tocco: rgba(0, 0, 0, .06);
  --tocco-2: rgba(0, 0, 0, .11);
  --bordo-testa: rgba(0, 0, 0, .07);
  --verde-bg: #e7f3e2;
  --verde-t: #2f7a28;
  --oro-bg: #fbefd4;
  --ombra-foto: rgba(70, 35, 10, .3);
  --scena-1: #f6e6cf;
  --scena-2: #eadbc2;
  --tinta-1: rgba(232, 70, 43, .12);
  --tinta-2: rgba(233, 180, 76, .16);
  --ombra: 0 20px 44px -22px rgba(70, 35, 10, .35);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body {
  margin: 0; background: var(--nero); color: var(--crema); font: 16px/1.5 var(--testo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, var(--tinta-1), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, var(--tinta-2), transparent 60%);
  background-repeat: no-repeat;
}
body.fermo { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titolo); font-weight: 650; letter-spacing: -.02em; margin: 0; }
em { font-style: italic; color: var(--accento-testo, var(--pomodoro-2)); font-weight: 500; }
:root[data-theme="light"] { --accento-testo: #d2381c; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accento-testo: #d2381c; } }
.sopratitolo { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--oro); margin: 0 0 12px; }

.nastro {
  background: linear-gradient(90deg, #2a1a12, #3a2216, #2a1a12); color: #f1d3a6; font-size: 12.5px;
  text-align: center; padding: 7px 16px; letter-spacing: .02em;
}
.nastro b { color: #fff; }

/* ---------------------------------------------------------------- testa */
.testa {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px); background: var(--testa-bg);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bordo-testa);
}
.marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marchio-simbolo { height: 40px; width: auto; }
:root[data-theme="light"] .marchio-simbolo, :root[data-theme="light"] .marchio-scritta, :root[data-theme="light"] .eroe-logo, :root[data-theme="light"] .piede-logo { filter: brightness(0) saturate(100%) invert(9%) sepia(12%) saturate(900%) hue-rotate(340deg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .marchio-simbolo, :root:not([data-theme="dark"]) .marchio-scritta, :root:not([data-theme="dark"]) .eroe-logo, :root:not([data-theme="dark"]) .piede-logo { filter: brightness(0) saturate(100%) invert(9%) sepia(12%) saturate(900%) hue-rotate(340deg); }
}
.tema-btn { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--tocco); display: grid; place-items: center; }
.tema-btn:hover { background: var(--tocco-2); }
.tema-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tema-btn .luna { display: none; }
:root[data-theme="light"] .tema-btn .sole { display: none; }
:root[data-theme="light"] .tema-btn .luna { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tema-btn .sole { display: none; } :root:not([data-theme="dark"]) .tema-btn .luna { display: block; } }
.marchio-scritta { height: 19px; width: auto; }
.eroe-logo { width: 150px; margin: 0 0 26px; filter: drop-shadow(0 10px 24px var(--ombra-foto)); }
.piede-logo { width: 130px; }
.marchio-cerchio {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--testo);
  background: radial-gradient(circle at 35% 30%, #ff7a52, var(--pomodoro) 55%, #a8240f); color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 70, 43, .2), 0 6px 18px -6px rgba(232, 70, 43, .8);
}
.marchio-nome { font: 650 22px var(--titolo); letter-spacing: -.02em; }
.marchio-nome i { color: var(--pomodoro-2); margin-left: 2px; }
.vai { display: flex; gap: 22px; margin-left: auto; font-weight: 700; font-size: 14.5px; }
.vai a { text-decoration: none; color: var(--crema-2); }
.vai a:hover { color: var(--crema); }
.chiama { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.chiama svg, .contatto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.pallino { width: 8px; height: 8px; border-radius: 50%; background: #5fd068; box-shadow: 0 0 0 0 rgba(95, 208, 104, .6); animation: polso 2s infinite; }
@keyframes polso { 70% { box-shadow: 0 0 0 9px rgba(95, 208, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 208, 104, 0); } }
.carrello-btn {
  white-space: nowrap; flex: none;
  display: flex; align-items: center; gap: 10px; background: var(--crema); color: var(--nero); border: 0;
  padding: 9px 12px 9px 14px; border-radius: 999px; font-weight: 800; position: relative;
}
.carrello-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.carrello-n {
  min-width: 24px; height: 24px; border-radius: 12px; background: var(--brace); color: var(--crema); font-size: 13px;
  display: grid; place-items: center; padding: 0 6px; transition: background .2s;
}
.carrello-n.pieno { background: var(--pomodoro); color: #fff; }
.carrello-btn.salta { animation: salta .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes salta { 40% { transform: scale(1.12) rotate(-3deg); } }

/* ---------------------------------------------------------------- eroe */
.eroe {
  display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 30px; min-height: min(860px, calc(100vh - 100px));
  padding: clamp(30px, 5vw, 70px) clamp(16px, 4vw, 48px) 50px; max-width: 1400px; margin: 0 auto;
}
h1 { font-size: clamp(48px, 7.4vw, 104px); line-height: .95; font-weight: 700; }
h1 em { font-weight: 450; }
.eroe-sotto { font-size: clamp(17px, 1.5vw, 20px); color: var(--crema-2); max-width: 540px; margin: 22px 0 30px; }
.eroe-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border-radius: 999px;
  font-weight: 800; font-size: 16px; text-decoration: none; border: 0; transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.97); }
.btn-primo {
  background: linear-gradient(180deg, var(--pomodoro-2), var(--pomodoro)); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(232, 70, 43, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primo:hover { box-shadow: 0 14px 36px -10px rgba(255, 106, 69, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-vuoto { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn-vuoto:hover { box-shadow: inset 0 0 0 1.5px var(--crema-2); }
.btn-largo { width: 100%; }
.eroe-fatti { list-style: none; padding: 0; margin: 40px 0 0; display: flex; gap: 32px; flex-wrap: wrap; }
.eroe-fatti li { max-width: 150px; }
.eroe-fatti b { display: block; font: 700 34px var(--titolo); color: var(--oro); }
.eroe-fatti span { font-size: 14px; color: var(--spento); }

.eroe-scena { position: relative; aspect-ratio: 1; width: 100%; max-width: 720px; justify-self: center; }
.alone { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 60, .38), transparent 65%); filter: blur(34px); animation: respiro 5s ease-in-out infinite; }
@keyframes respiro { 50% { transform: scale(1.08); opacity: .8; } }
[data-p] { translate: var(--dx, 0) var(--dy, 0); transition: translate .25s ease-out; }
.piatto-eroe { position: absolute; inset: 7%; animation: entra-pizza 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.eroe-pizza { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 50px var(--ombra-foto)); animation: gira 90s linear infinite; rotate: var(--giro, 0deg); }
@keyframes entra-pizza { from { opacity: 0; transform: scale(.7) rotate(-40deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
.quota { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.quota-linea { stroke: var(--crema); stroke-width: 1.6; stroke-dasharray: 390; stroke-dashoffset: 390; animation: traccia 1.4s .9s cubic-bezier(.6, 0, .2, 1) forwards; }
.quota marker path { fill: var(--crema); }
.quota-tacca { stroke: var(--crema); stroke-width: 1.6; opacity: 0; animation: appare .4s 2.1s forwards; }
.quota-etichetta { opacity: 0; animation: appare .5s 1.9s forwards; }
.quota-etichetta rect { fill: var(--pomodoro); }
.quota-etichetta text { fill: #fff; font: 700 22px var(--titolo); text-anchor: middle; letter-spacing: .02em; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes appare { to { opacity: 1; } }
.volante { position: absolute; width: 22%; filter: drop-shadow(0 18px 18px var(--ombra-foto)); animation: entra-volante .9s cubic-bezier(.2, 1.4, .4, 1) both, galleggia 7s ease-in-out infinite; }
.v1 { left: -6%; top: 54%; width: 24%; animation-delay: 1.1s, 0s; }
.v2 { right: -2%; top: -2%; width: 17%; animation-delay: 1.25s, -2s; }
.v3 { right: -5%; bottom: 8%; width: 21%; animation-delay: 1.4s, -4s; }
.v4 { left: 6%; top: -1%; width: 17%; animation-delay: 1.55s, -5.5s; }
@keyframes entra-volante { from { opacity: 0; scale: .3; } }
.gettone {
  position: absolute; background: var(--vetro); border: 1px solid var(--linea); backdrop-filter: blur(8px);
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--ombra); animation: entra-volante .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.gettone b { color: var(--oro); margin-left: 4px; }
.g1 { top: 30%; left: -8%; animation-delay: 2.2s; }
.g2 { top: 16%; right: -6%; animation-delay: 2.35s; }
.g3 { bottom: 2%; left: 30%; animation-delay: 2.5s; }
@keyframes galleggia { 50% { transform: translateY(-12px) rotate(4deg); } }
.btn-grande { padding: 17px 30px; font-size: 17px; }
h1 .rigo { display: block; animation: sale .9s cubic-bezier(.2, .8, .2, 1) both; }
h1 .rigo:nth-child(2) { animation-delay: .12s; }
@keyframes sale { from { opacity: 0; transform: translateY(40%); } }
.eroe-sotto, .eroe-azioni, .eroe-fatti { animation: sale .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.eroe-azioni { animation-delay: .35s; }
.eroe-fatti { animation-delay: .45s; }
.fatto-premio b { color: var(--pomodoro-2); }
.scorre { overflow: hidden; border-block: 1px solid var(--linea); margin-top: 10px; padding: 18px 0; background: var(--forno-2); }
.scorre-dentro { display: flex; width: max-content; animation: scorre 48s linear infinite; }
.scorre span { font: italic 500 clamp(20px, 2.4vw, 30px) var(--titolo); color: var(--crema-2); padding: 0 26px; white-space: nowrap; display: flex; align-items: center; gap: 52px; }
.scorre span::after { content: "✦"; font-style: normal; font-size: .55em; color: var(--pomodoro); }
@keyframes scorre { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- invito al laboratorio */
.crea-invito {
  max-width: 1224px; margin: 30px auto 0; display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center;
  padding: 40px 48px; border-radius: 32px; cursor: pointer; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--invito), var(--forno-2) 60%); border: 1px solid var(--linea);
  margin-left: clamp(16px, 4vw, 48px); margin-right: clamp(16px, 4vw, 48px);
}
@media (min-width: 1320px) { .crea-invito { margin-left: auto; margin-right: auto; } }
.crea-invito::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 70, 43, .22), transparent 70%); }
.crea-invito h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; margin-bottom: 14px; }
.crea-invito p { color: var(--crema-2); max-width: 560px; margin: 0 0 24px; }
.crea-anteprima svg { width: 100%; overflow: visible; }

/* ---------------------------------------------------------------- menù */
.menu { max-width: 1320px; margin: 0 auto; padding: 80px clamp(16px, 4vw, 48px) 40px; }
.menu-testa { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.menu-testa h2 { font-size: clamp(40px, 5vw, 64px); }
.cerca { display: flex; align-items: center; gap: 10px; background: var(--forno); border: 1px solid var(--linea); border-radius: 999px; padding: 0 18px; min-width: min(380px, 100%); flex: 0 1 380px; }
.cerca:focus-within { border-color: var(--crema-2); }
.cerca svg { width: 18px; height: 18px; fill: none; stroke: var(--spento); stroke-width: 2; flex: none; }
.cerca input { flex: 1; min-width: 0; background: none; border: 0; color: var(--crema); padding: 14px 0; font: inherit; outline: none; }
.schede {
  position: sticky; top: 62px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px 0; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px);
  background: linear-gradient(var(--nero) 70%, transparent);
}
.schede::-webkit-scrollbar { display: none; }
.schede a { flex: none; text-decoration: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--crema-2); background: var(--forno); border: 1px solid var(--linea); transition: .2s; }
.schede a.attiva { background: var(--crema); color: var(--nero); border-color: var(--crema); }
.categoria { padding-top: 34px; }
.cat-titolo { font-size: 30px; display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
.cat-titolo span { font: 700 13px var(--testo); color: var(--spento); }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 66px 22px; padding-top: 50px; }

.piatto {
  position: relative; background: linear-gradient(180deg, var(--forno), var(--forno-2)); border: 1px solid var(--linea-2); border-radius: 26px;
  padding: 116px 20px 18px; display: flex; flex-direction: column; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s;
  outline: none;
}
.piatto:hover, .piatto:focus-visible { transform: translateY(-4px); border-color: var(--linea-forte); box-shadow: var(--ombra); }
.piatto-foto { position: absolute; left: 50%; top: -50px; width: 170px; height: 150px; transform: translateX(-50%); }
.piatto-foto .segnaposto { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.piatto-foto img, .piatto-foto svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px var(--ombra-foto)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.piatto:hover .piatto-foto img, .piatto:hover .piatto-foto svg { transform: scale(1.08) rotate(-6deg); }
.segnaposto { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font: 600 44px var(--titolo); background: var(--brace); color: var(--oro); }
.piatto-testo h3 { font-size: 21px; line-height: 1.15; margin-bottom: 6px; }
.piatto-testo p { margin: 0; color: var(--spento); font-size: 14px; line-height: 1.45; }
.piatto-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.prezzo { font-weight: 800; font-size: 17px; }
.piu {
  height: 40px; min-width: 40px; border-radius: 20px; border: 0; background: var(--crema); color: var(--nero); font-weight: 800; font-size: 20px;
  display: grid; place-items: center; padding: 0 12px; transition: transform .15s, background .2s;
}
.piu-conf { font-size: 13.5px; background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1.5px var(--linea-forte); }
.piatto:hover .piu-conf { background: var(--pomodoro); box-shadow: none; color: #fff; }
.piu:active { transform: scale(.9); }
.crea-carta {
  width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; text-align: left; padding: 20px 24px;
  margin-bottom: 4px; background: repeating-linear-gradient(135deg, rgba(232, 70, 43, .08) 0 12px, transparent 12px 24px), var(--forno); border: 1.5px dashed var(--linea-forte);
}
.crea-carta .crea-piu { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--pomodoro); display: grid; place-items: center; font-size: 30px; color: #fff; }
.crea-carta b { font: 650 24px var(--titolo); }
.crea-carta span:last-child { color: var(--crema-2); font-size: 14px; }
.creazione .piatto-foto svg { width: 140px; }
.vuoto { color: var(--spento); padding: 30px 0; }

/* ---------------------------------------------------------------- chi siamo e contatti */
.chi { max-width: 1320px; margin: 40px auto 0; padding: 60px clamp(16px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.chi-foto { position: relative; aspect-ratio: 1 / 1.05; }
.chi-foto img { position: absolute; border-radius: 26px; object-fit: cover; box-shadow: var(--ombra); border: 1px solid var(--linea); }
.chi-foto img:first-child { width: 72%; height: 82%; left: 0; top: 0; }
.chi-foto img:last-child { width: 50%; height: 56%; right: 0; bottom: 0; border: 6px solid var(--nero); }
.chi h2, .contatti h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.02; margin-bottom: 20px; }
.chi-testo p { color: var(--crema-2); font-size: 17px; margin: 0 0 16px; }
.chi-testo b { color: var(--crema); }
.premio { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(90deg, rgba(233, 180, 76, .14), rgba(233, 180, 76, .03)); border: 1px solid rgba(233, 180, 76, .3); }
.premio > span { font-size: 30px; }
.premio b { display: block; font: 650 20px var(--titolo); }
.premio small { color: var(--oro); font-weight: 700; }
.premio .btn { margin-left: auto; padding: 11px 18px; font-size: 14px; }
.contatti { max-width: 1320px; margin: 0 auto; padding: 60px clamp(16px, 4vw, 48px) 20px; }
.contatti-testa { max-width: 620px; margin-bottom: 30px; }
.contatti-testa p:last-child { color: var(--crema-2); font-size: 17px; margin: 0; }
.contatti-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contatto { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 22px; background: var(--forno); border: 1px solid var(--linea-2); text-decoration: none; transition: border-color .2s; }
.contatto:hover { border-color: var(--linea-forte); }
.contatto svg { width: 26px; height: 26px; color: var(--pomodoro-2); margin-bottom: 10px; }
.contatto small { color: var(--spento); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; }
.contatto b { font-size: 18px; line-height: 1.3; word-break: break-word; }
.contatto span { margin-top: auto; padding-top: 12px; color: var(--oro); font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- come funziona */
.come { max-width: 1320px; margin: 60px auto 0; padding: 0 clamp(16px, 4vw, 48px) 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.passo { border-top: 1px solid var(--linea); padding-top: 20px; }
.passo span { font: 600 14px var(--titolo); color: var(--oro); }
.passo h3 { font-size: 24px; margin: 6px 0 8px; }
.passo p { color: var(--spento); margin: 0; font-size: 15px; }
.piede { border-top: 1px solid var(--linea); padding: 40px clamp(16px, 4vw, 48px) 60px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; color: var(--spento); font-size: 14px; }
.piede p { margin: 12px 0 0; }
.piede-link { display: flex; flex-direction: column; gap: 8px; }
.firma-lab b { color: var(--crema); }

/* ---------------------------------------------------------------- finestre */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(8, 6, 5, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; display: grid; place-items: center; }
.velo.aperto { opacity: 1; }
.velo[hidden] { display: none; }
.chiudi {
  position: absolute; top: 14px; right: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--tocco); font-size: 26px; line-height: 1; display: grid; place-items: center;
}
.chiudi:hover { background: var(--tocco-2); }

.conf {
  position: relative; width: min(1240px, 100vw - 32px); height: min(840px, 100vh - 32px); background: var(--forno); border-radius: 30px;
  display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 1px solid var(--linea);
  transform: translateY(24px) scale(.98); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.aperto .conf, .aperto .cassa { transform: none; }
.conf-scena {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px;
  background: radial-gradient(circle at 50% 45%, var(--scena-1), var(--scena-2) 70%);
}
.conf-tavolo { position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.tagliere { position: absolute; inset: 1%; border-radius: 50%; background: radial-gradient(circle, #6b4a30 0 60%, #523621 61% 70%, transparent 71%); opacity: .55; filter: blur(.5px); }
.conf-tavolo svg, .conf-tavolo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.conf-tavolo img { object-fit: contain; padding: 6%; filter: drop-shadow(0 30px 30px var(--ombra-foto)); }
.conf-tavolo img.tonda { padding: 8%; }
#pizza-sopra { transform: scale(.82); }
.strato.cade > .pezzo { animation: cade .55s cubic-bezier(.25, 1.5, .5, 1) both; transform-box: fill-box; transform-origin: center; }
.strato.cade > .pezzo:nth-child(3n) { animation-delay: .06s; }
.strato.cade > .pezzo:nth-child(3n+1) { animation-delay: .12s; }
@keyframes cade { from { opacity: 0; transform: translateY(-40px) scale(1.5); } }
.conf-scontrino {
  position: absolute; left: 22px; bottom: 22px; width: 250px; background: #f8f1e3; color: #2a211b; border-radius: 6px 6px 0 0; padding: 14px 16px 12px;
  font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); max-height: 46%; display: flex; flex-direction: column;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 8px, transparent 5px, #000 5.5px) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 8px, transparent 5px, #000 5.5px) bottom / 12px 8px repeat-x;
  padding-bottom: 20px;
}
.scontrino-righe { overflow: auto; }
.conf-scontrino div div, .scontrino-tot { display: flex; justify-content: space-between; gap: 10px; }
.conf-scontrino span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scontrino-tot { border-top: 1.5px dashed #b9ab95; margin-top: 8px; padding-top: 8px; font-weight: 800; font-size: 15px; }

.conf-pannello { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--linea); }
.conf-scena { min-width: 0; }
.conf-testa { padding: 30px 30px 12px; }
.conf-testa h2 { font-size: 34px; padding-right: 50px; }
.conf-desc { color: var(--spento); margin: 8px 0 0; font-size: 15px; }
.conf-corpo { flex: 1; overflow-y: auto; padding: 4px 30px 30px; overscroll-behavior: contain; }
.sezione { padding: 18px 0; border-top: 1px solid var(--linea-2); }
.sezione:first-child { border-top: 0; }
.sezione h4 { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .02em; }
.sezione h4 > span { width: 26px; height: 26px; border-radius: 50%; background: var(--brace); border: 1px solid var(--linea); display: grid; place-items: center; font-size: 12px; color: var(--oro); }
.sezione h4 small { color: var(--spento); font-weight: 500; }
.basi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.base {
  background: var(--brace); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 10px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color .2s, background .2s;
}
.base small { color: var(--spento); font-size: 11.5px; line-height: 1.3; min-height: 30px; }
.base em { font: 800 14px var(--testo); color: var(--crema); font-style: normal; }
.base.su { border-color: var(--pomodoro); background: var(--scelto); }
.base-tondo { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px; box-shadow: 0 0 0 5px #d9a25c, 0 6px 12px var(--ombra-foto); }
.base-rossa { background: radial-gradient(circle at 40% 35%, #e05535, #a92713); }
.base-margherita { background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%), radial-gradient(circle at 68% 60%, #fff 0 16%, transparent 17%), radial-gradient(circle at 40% 35%, #e05535, #a92713); }
.base-bianca { background: radial-gradient(circle at 30% 35%, #fffaf0, #efe2c4); }
.base-gialla { background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%), radial-gradient(circle at 40% 35%, #f6c443, #d98a12); }
.base-vuota { background: radial-gradient(circle at 40% 35%, #f6dcae, #e2b878); }
.segmenti { display: flex; flex-wrap: wrap; gap: 8px; }
.segmenti button {
  flex: 1 1 auto; background: var(--brace); border: 1.5px solid transparent; border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.segmenti button small { color: var(--oro); font-size: 12px; }
.segmenti button.su { border-color: var(--pomodoro); background: var(--scelto); }
.segmenti.grande button { padding: 16px; font-size: 16px; }
.segmenti.grande small { color: var(--spento); font-weight: 500; }
.gruppi { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; scrollbar-width: none; }
.gruppi button { flex: none; background: none; border: 0; padding: 6px 12px; border-radius: 999px; color: var(--spento); font-weight: 700; font-size: 14px; }
.gruppi button.su { background: var(--crema); color: var(--nero); }
.cerca-piccola { min-width: 0; width: 100%; flex: none; border-radius: 14px; }
.cerca-piccola input { padding: 11px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--brace); border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 7px 12px 7px 8px; font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s, transform .12s;
}
.chip:active { transform: scale(.95); }
.chip i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); flex: none; }
.chip b { font-size: 12px; color: var(--spento); }
.chip.su { border-color: var(--basilico); background: var(--verde-bg); }
.chip.su b { color: var(--verde-t); }
.chip.doppio { border-color: var(--oro); background: var(--oro-bg); }
.chip.doppio b { color: var(--oro); }
.chip.serie { padding-left: 14px; }
.chip.serie.su b { color: var(--verde-t); }
.chip.tolto { opacity: .65; border-style: dashed; }
.chip.tolto span { text-decoration: line-through; }
.chip.tolto b { color: var(--pomodoro-2); }
.consigli { background: linear-gradient(90deg, rgba(233, 180, 76, .06), transparent); }
.campo {
  width: 100%; background: var(--brace); border: 1.5px solid var(--linea); border-radius: 14px; color: var(--crema); padding: 13px 14px; font: inherit;
  margin-bottom: 10px; outline: none; resize: vertical;
}
.campo:focus { border-color: var(--crema-2); }
.campo.errore { border-color: var(--pomodoro); animation: trema .3s; }
@keyframes trema { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.conf-piede { display: flex; gap: 12px; padding: 16px 30px 20px; border-top: 1px solid var(--linea); background: var(--forno); }
.quanti { display: flex; align-items: center; background: var(--brace); border-radius: 999px; padding: 4px; flex: none; }
.quanti button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; font-size: 22px; }
.quanti button:hover { background: var(--tocco); }
.quanti span { min-width: 26px; text-align: center; font-weight: 800; }
.quanti-piccolo { display: inline-flex; margin-top: 8px; }
.quanti-piccolo button { width: 30px; height: 30px; font-size: 18px; }

/* carrello */
.velo-lato { place-items: stretch end; }
.cassetto {
  width: min(460px, 100vw); height: 100%; background: var(--forno); display: flex; flex-direction: column; border-left: 1px solid var(--linea);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); position: relative;
}
.aperto .cassetto { transform: none; }
.cassetto-testa { padding: 24px 24px 12px; }
.cassetto-testa h2 { font-size: 30px; }
.cassetto-corpo { flex: 1; overflow-y: auto; padding: 0 24px; }
.cassetto-piede { padding: 18px 24px 24px; border-top: 1px solid var(--linea); }
.riga { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea-2); align-items: start; }
.riga-foto img, .riga-foto svg { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 8px var(--ombra-foto)); }
.riga-testo b { display: block; font-size: 16px; }
.riga-testo small { display: block; color: var(--spento); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.riga-prezzo { font-weight: 800; white-space: nowrap; }
.tot-riga { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tot-riga b { font: 700 28px var(--titolo); }
.carrello-vuoto { text-align: center; padding: 30px 10px; color: var(--crema-2); }
.carrello-vuoto svg { width: 200px; margin: 0 auto 10px; display: block; }
.spinta { padding: 22px 0; }
.spinta h4 { margin: 0 0 12px; font-size: 14px; color: var(--crema-2); letter-spacing: .04em; text-transform: uppercase; }
.spinta-fila { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.spinta-voce { flex: none; width: 118px; background: var(--brace); border: 1px solid var(--linea); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; text-align: center; }
.spinta-voce img { width: 100%; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 8px var(--ombra-foto)); }
.spinta-voce span { line-height: 1.2; min-height: 32px; display: grid; place-items: center; }
.spinta-voce b { color: var(--oro); }
.spinta-voce:hover { border-color: var(--crema-2); }

/* cassa */
.cassa {
  position: relative; width: min(640px, 100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--forno);
  border: 1px solid var(--linea); border-radius: 30px; padding: 34px; transform: translateY(24px); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cassa h2 { font-size: 36px; margin-bottom: 20px; }
.cassa label { display: block; font-size: 13px; color: var(--crema-2); font-weight: 600; }
.cassa label .campo { margin-top: 6px; }
.campi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#modulo { margin-top: 20px; }
.cassa-h { margin: 14px 0 10px; font-size: 13px; color: var(--crema-2); text-transform: uppercase; letter-spacing: .08em; }
.orari { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.orari button { flex: none; background: var(--brace); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.orari button.su, .pagamenti button.su { border-color: var(--pomodoro); background: var(--scelto); }
.pagamenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pagamenti button { background: var(--brace); border: 1.5px solid transparent; border-radius: 14px; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.pagamenti small { color: var(--spento); font-size: 12px; }
.riepilogo { margin: 22px 0 18px; padding: 16px; background: var(--brace); border-radius: 16px; font-size: 14px; }
.riepilogo div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.riepilogo-tot { border-top: 1px dashed var(--linea-forte); margin-top: 8px; padding-top: 10px !important; font-size: 17px; }
.nota-demo { text-align: center; color: var(--spento); font-size: 13px; margin: 12px 0 0; }

.segui { text-align: center; }
.segui h2 { margin-bottom: 6px; }
.segui-ora { color: var(--crema-2); margin: 0 0 10px; }
.segui-ora b { font: 700 24px var(--titolo); color: var(--oro); }
.forno { position: relative; width: 220px; height: 220px; margin: 10px auto; }
.forno svg { position: absolute; inset: 0; width: 100%; animation: gira 14s linear infinite; }
.fiamma { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 40, .0), transparent 70%); transition: background .6s; }
.forno.acceso .fiamma { background: radial-gradient(circle, rgba(255, 110, 40, .7), rgba(255, 60, 20, .2) 55%, transparent 70%); animation: respiro 1.2s ease-in-out infinite; }
.passi { list-style: none; padding: 0; margin: 20px auto; max-width: 360px; text-align: left; }
.passi li { display: flex; gap: 14px; padding: 8px 0; opacity: .4; transition: opacity .4s; position: relative; }
.passi li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 32px; bottom: -6px; width: 2px; background: var(--linea); }
.passi li.fatto, .passi li.ora { opacity: 1; }
.passi li.fatto::after { background: var(--basilico); }
.tacca { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea); flex: none; margin-top: 2px; transition: .3s; }
.ora .tacca { border-color: var(--oro); box-shadow: 0 0 0 5px rgba(233, 180, 76, .2); }
.fatto .tacca { background: var(--basilico); border-color: var(--basilico); }
.passi small { display: block; color: var(--spento); }
.vero { font-size: 13.5px; color: var(--crema-2); background: var(--brace); border-radius: 14px; padding: 14px 16px; margin: 6px 0 16px; text-align: left; }

.avviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 140%); background: var(--crema); color: var(--nero);
  padding: 13px 22px; border-radius: 999px; font-weight: 800; box-shadow: var(--ombra); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); max-width: calc(100vw - 32px);
}
.avviso:not(.su) { visibility: hidden; transition: transform .35s, visibility 0s .35s; }
.avviso.su { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- telefono */
@media (max-width: 960px) {
  .eroe { grid-template-columns: 1fr; padding-top: 28px; gap: 10px; }
  .eroe-logo { display: none; }
  .eroe-scena { order: -1; max-width: 400px; }
  .gettone { font-size: 12px; padding: 7px 11px; backdrop-filter: none; }
  .eroe { min-height: 0; }
  .eroe-scena { max-width: 460px; margin-top: 6px; }
  .g1 { left: -2%; } .g2 { right: -1%; } .g3 { display: none; }
  .scorre { padding: 12px 0; }
  .crea-invito { grid-template-columns: 1fr; padding: 28px 22px; gap: 10px; text-align: left; border-radius: 26px; }
  .crea-anteprima { max-width: 240px; margin: 0 auto; }
  .come { grid-template-columns: 1fr 1fr; }
  .vai { display: none; }
  .chiama { margin-left: auto; }
  .chi { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; }
  .contatti-griglia { grid-template-columns: 1fr 1fr; }
  /* sul telefono niente vetro sfocato ne' animazioni pesanti: lo scorrimento resta liscio */
  .testa, .gettone, .velo { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .testa { background: var(--testa-pieno); }
  .alone { animation: none; }
  .conf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .conf-scena { padding: 10px 70px 6px 16px; flex-direction: row; justify-content: flex-start; gap: 12px; }
  .conf-tavolo { width: min(30vh, 250px); flex: none; }
  .conf-scontrino { position: static; width: 150px; font-size: 11px; max-height: 34vh; padding: 10px 10px 18px; align-self: center; }
  .scontrino-righe { display: none; }
  .scontrino-tot { border: 0; margin: 0; padding: 0; flex-direction: column; font-size: 16px; }
  .conf-pannello { border-left: 0; border-top: 1px solid var(--linea); }
  .conf-testa { padding: 16px 16px 4px; }
  .conf-testa h2 { font-size: 26px; }
  .conf-desc { font-size: 14px; }
  .conf-corpo { padding: 0 16px 16px; }
  .conf-piede { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .cassa { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 24px 16px; }
}
@media (max-width: 560px) {
  .chiama span { display: none; }
  .carrello-tot { display: none; }
  .chiama { padding: 10px; }
  .contatti-griglia { grid-template-columns: 1fr; }
  .contatto { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 16px 18px; }
  .contatto svg { margin: 0; }
  .contatto small { width: calc(100% - 40px); }
  .contatto b { width: 100%; font-size: 16px; }
  .contatto span { padding-top: 6px; }
  .premio { flex-wrap: wrap; }
  .marchio-simbolo { height: 34px; }
  .marchio-scritta { height: 15px; }
  .testa { gap: 10px; }
  .carrello-btn { margin-left: auto; }
  .eroe-fatti { gap: 18px; margin-top: 28px; }
  .eroe-fatti b { font-size: 26px; }
  .griglia { grid-template-columns: 1fr 1fr; gap: 58px 12px; }
  .piatto { padding: 84px 12px 12px; border-radius: 20px; }
  .piatto-foto { width: 128px; height: 116px; top: -44px; }
  .piatto-testo h3 { font-size: 17px; }
  .piatto-testo p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .prezzo { font-size: 15px; }
  .piu-conf { font-size: 0; width: 40px; padding: 0; }
  .piu-conf::before { content: "+"; font-size: 20px; }
  .piatto:hover { transform: none; }
  .come { grid-template-columns: 1fr; }
  .campi2, .pagamenti { grid-template-columns: 1fr; }
  .basi { grid-template-columns: repeat(3, 1fr); }
  .base { padding: 10px 6px; }
  .base small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}