/* POK&DINA · pokè e piadina — stile del sito
   Colori misurati sul design del kit (01-homepage-finale-vivida.png e i tre ingrandimenti), in #hex.
   Caratteri serviti dal sito: Montserrat (il carattere del marchio) per i titoli, Figtree per i testi. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 22/10/2026 · Domenico: «i colori mi sembrano un po' spenti… se si riuscisse ad accenderli leggermente»: salvia, marroni e
     crema un po' più saturi (stessa tinta e stessa luce del marchio). Prima: salvia #618D66, salvia-media #799C74, salvia-chiara
     #9BB38F, marrone-medio #886B5C, crema-macchia #ECEAD6, salvia-tenue #C3CBB3, marrone #432C22. */
  --crema: #FEFDF8;          /* fondo della pagina */
  --crema-macchia: #EFEDD3;  /* macchia chiara accanto al locale */
  --marrone: #452B20;        /* testi, pulsanti, fascia delivery */
  --marrone-medio: #8C6A58;  /* macchie marroni */
  --salvia: #599560;         /* fascia «come funziona» e titoli verdi */
  --salvia-media: #74A36D;   /* macchie salvia */
  --salvia-chiara: #99B88A;  /* «anche a casa», scooter, macchie chiare */
  --glovo: #FEF45B;
  --deliveroo: #1AE9D6;
  --justeat: #FE7916;
  --kraft: #B09B70;           /* il cartone delle ciotole (misurato sul design) */
  --salvia-tenue: #C4CFAF;    /* salvia chiara e grigia del design */
  --ombra-prodotto: drop-shadow(0 22px 20px rgba(69, 43, 32, 0.26)) drop-shadow(0 4px 6px rgba(69, 43, 32, 0.14));

  --font-titoli: "Montserrat", "Arial Black", system-ui, sans-serif;
  --font-testo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raggio: 22px;
  --pillola: 999px;
  --largo: 1280px;
  --margine: clamp(16px, 5.6vw, 80px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --curva: var(--ease-out);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--marrone);
  font-family: var(--font-testo);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
p, li { text-wrap: pretty; }
.intero { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--marrone); color: var(--crema); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 700;
}
.salta:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--salvia); outline-offset: 3px; border-radius: 6px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}

.titolo-xl, .titolo-l {
  font-family: var(--font-titoli);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.titolo-xl { font-size: clamp(44px, 6.5vw, 100px); }
.titolo-l { font-size: clamp(34px, 5.2vw, 78px); }
.titolo-xl span, .titolo-l span { display: block; }
.verde { color: var(--salvia); }
.marrone { color: var(--marrone); }
.salvia-chiara { color: var(--salvia-chiara); }

.occhiello {
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ---------- Icone del kit, colorate con la maschera ---------- */
.ico {
  display: inline-block;
  flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico--freccia { --m: url("/assets/icone/freccia-destra.png"); width: 0.86em; height: 0.86em; }
.ico--esterna { --m: url("/assets/icone/freccia-esterna.png"); width: 0.7em; height: 0.7em; }
.ico--base { --m: url("/assets/icone/base-bowl.png"); }
.ico--proteine { --m: url("/assets/icone/proteine.png"); }
.ico--salse { --m: url("/assets/icone/salse-topping.png"); }
.ico--bianca { color: var(--crema); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 56px;
  padding: 0.95em 1.9em;
  border-radius: var(--pillola);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--curva);
}
.btn:active { transform: scale(0.97); }
.btn--scuro { background: var(--marrone); color: var(--crema); }
.btn--bordo { background: transparent; color: var(--marrone); border-color: var(--marrone); }
.btn--largo { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--scuro:hover { background: var(--salvia); }
  .btn--bordo:hover { background: var(--marrone); color: var(--crema); }
}

/* ---------- Intestazione ---------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--crema);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow 0.25s ease;
}
.testata.e-scesa { box-shadow: 0 6px 24px -14px rgba(69, 43, 32, 0.35); }
.testata__barra {
  display: flex; align-items: center; gap: 24px;
  min-height: 112px;
}
.testata__logo { display: block; flex: none; }
.testata__logo img { width: 252px; height: auto; }
.testata__nav { margin-left: auto; margin-right: auto; }
.testata__nav ul { display: flex; gap: clamp(24px, 3.4vw, 52px); }
.testata__nav a, .piede__nav a, .piede__legali a {
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 2px no-repeat;
  transition: background-size 0.25s var(--curva);
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .testata__nav a:hover, .piede__nav a:hover, .piede__legali a:hover { background-size: 100% 2px; }
}
.testata__cta { flex: none; }
.testata__apri {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  border: 0; border-radius: 14px;
  background: var(--marrone);
  padding: 0;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.testata__apri span {
  display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--crema);
  transition: transform 0.25s var(--curva), opacity 0.2s ease;
}
.testata__apri:active { transform: scale(0.95); }
.testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-telefono {
  position: fixed; inset: 0; top: 0; z-index: -1;
  height: 100dvh;
  background: var(--crema);
  padding: calc(96px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 32px;
}
.menu-telefono[hidden] { display: none; }
.menu-telefono.pronto { visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.menu-telefono.pronto.aperto { visibility: visible; opacity: 1; transition: opacity 320ms var(--ease-out), visibility 0s; }
.menu-telefono.pronto li, .menu-telefono.pronto > .btn { opacity: 0; transform: translateY(24px); transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.menu-telefono.pronto.aperto li, .menu-telefono.pronto.aperto > .btn { opacity: 1; transform: none; transition: opacity 420ms ease, transform 520ms var(--ease-out); }
.menu-telefono.aperto li:nth-child(2) { transition-delay: 50ms; }
.menu-telefono.aperto li:nth-child(3) { transition-delay: 100ms; }
.menu-telefono.aperto > .btn { transition-delay: 150ms; }
.menu-telefono ul { display: flex; flex-direction: column; gap: 4px; }
.menu-telefono nav a {
  display: block; padding: 14px 0;
  font-family: var(--font-titoli); font-weight: 800; font-size: 32px; letter-spacing: -0.03em;
  text-decoration: none;
  border-bottom: 1px solid rgba(69, 43, 32, 0.15);
  touch-action: manipulation;
}
.menu-telefono nav a:active { color: var(--salvia); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__griglia {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
  align-items: center;
  min-height: min(820px, calc(100svh - 104px));
  padding-top: 40px; padding-bottom: 72px;
}
.hero__testo { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 30px; }
.hero__intro { font-size: clamp(18px, 1.85vw, 26px); line-height: 1.45; max-width: 31ch; margin-bottom: 40px; }
.hero__pulsanti { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 64px; }
.hero__icone { display: flex; align-items: center; gap: 22px; margin-bottom: 12px; }
.hero__icone li { display: flex; align-items: center; gap: 22px; }
.hero__icone li + li::before { content: ""; width: 2px; height: 26px; background: var(--marrone); border-radius: 2px; }
.hero__icone img { width: 58px; height: 58px; }
.hero__modi p { font-size: clamp(16px, 1.45vw, 21px); }

.hero__visivo { position: relative; align-self: stretch; }
.hero__foto {
  position: absolute;
  z-index: 1;
  width: min(1110px, 77vw);
  max-width: none;
  left: calc(-1 * min(56px, 4vw));
  top: -18px;
}

/* Macchie organiche (dal design) */
.macchia { position: absolute; display: block; pointer-events: none; }
.m-h1 { width: 140px; height: 180px; left: -9%; top: 40%; fill: var(--marrone-medio); transform: rotate(-18deg); }
.m-h2 { width: 130px; height: 120px; left: 4%; top: -3%; fill: var(--salvia-media); transform: rotate(160deg); }
.m-h3 { width: 74px; height: 64px; left: 22%; top: -5%; fill: var(--salvia-chiara); transform: rotate(30deg); }
.m-h4 { width: 130px; height: 180px; left: -6%; top: 64%; fill: var(--marrone-medio); transform: rotate(200deg); }
.m-h5 { width: 96px; height: 124px; left: -3%; top: 16%; fill: var(--salvia-media); transform: rotate(14deg); }
.m-h6 { width: 120px; height: 116px; left: 4%; top: 84%; fill: var(--salvia-media); transform: rotate(-30deg); }
.m-h7 { width: 54px; height: 50px; left: -12%; top: 58%; fill: var(--marrone-medio); transform: rotate(80deg); }

/* ---------- Di cosa hai voglia oggi ---------- */
.voglia { padding: 64px 0 96px; }
.voglia__titolo {
  position: relative;
  text-align: center;
  font-size: clamp(32px, 4.7vw, 68px);
  margin: 0 auto 52px;
  width: fit-content;
  padding: 0 84px;
}
.voglia__titolo span.verde { display: inline; }
.voglia__deco { position: absolute; top: 50%; width: 70px; height: 90px; transform: translateY(-50%); }
.voglia__deco--sx { left: 0; }
.voglia__deco--dx { right: 0; }
.m-v1 { width: 44px; height: 40px; left: 10px; top: 4px; fill: var(--marrone-medio); transform: rotate(120deg); }
.m-v2 { width: 42px; height: 30px; left: 2px; top: 44px; fill: var(--salvia-chiara); transform: rotate(-12deg); }
.m-v3 { width: 30px; height: 44px; right: 26px; top: 0; fill: var(--salvia-chiara); transform: rotate(20deg); }
.m-v4 { width: 50px; height: 42px; right: 0; top: 42px; fill: var(--marrone-medio); transform: rotate(-20deg); }

.schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.scheda { text-align: center; }
.scheda__foto { border-radius: var(--raggio); overflow: hidden; aspect-ratio: 1 / 1; background: #FFFFFF; margin-bottom: 26px; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover .scheda__foto img { transform: scale(1.04); }
}
.scheda h3 { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.03em; margin-bottom: 8px; }
.scheda p { font-size: clamp(17px, 1.55vw, 22px); max-width: 23ch; margin-inline: auto; }

.voglia__anche { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 56px; font-size: clamp(17px, 1.5vw, 21px); text-align: center; }
.voglia__anche::before, .voglia__anche::after { content: ""; flex: 0 1 130px; height: 1.5px; background: var(--marrone); }
.voglia__anche span { text-wrap: balance; }

/* ---------- Come funziona (fascia verde) ---------- */
.come {
  position: relative;
  overflow: hidden;
  background: var(--salvia);
  color: var(--crema);
  padding: 100px 0 80px;
}
.come__bowl {
  position: absolute; top: 0;
  right: max(var(--margine), calc((100% - var(--largo)) / 2));
  width: min(560px, 39vw);
  pointer-events: none;
}
.come__bowl img {
  width: 100%;
  margin-top: -46%;
  filter: drop-shadow(-16px 26px 26px rgba(40, 50, 30, 0.35));
}
.come__dentro { position: relative; z-index: 1; }
.come__testa { position: relative; max-width: 640px; margin-bottom: min(96px, 7vw); }
.come__testa h2 { font-size: clamp(34px, 5.3vw, 80px); margin-bottom: 18px; }
.come__testa p { font-size: clamp(18px, 1.85vw, 26px); max-width: 26ch; }
.come__raggi {
  position: absolute; width: 74px; height: 56px; left: 450px; top: -52px;
  fill: none; stroke: var(--crema); stroke-width: 4.5; stroke-linecap: round;
}

.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.passo { padding: 0 clamp(20px, 3vw, 48px); }
.passo:first-child { padding-left: 0; }
.passo + .passo { border-left: 2px solid rgba(254, 253, 248, 0.75); }
.passo__segni { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.passo__num { position: relative; display: grid; place-items: center; width: 106px; height: 106px; flex: none; }
.passo__num svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--crema); transform: rotate(-8deg); }
.passo__num b { position: relative; font-family: var(--font-titoli); font-weight: 800; font-size: 34px; color: var(--marrone); letter-spacing: -0.02em; }
.passo .ico { width: 90px; height: 90px; }
.passo h3 { font-family: var(--font-testo); font-weight: 800; font-size: clamp(22px, 2.2vw, 31px); line-height: 1.15; margin-bottom: 10px; max-width: 15ch; }
.passo p { font-size: clamp(17px, 1.55vw, 22px); opacity: 0.95; max-width: 23ch; }

/* ---------- Dove siamo ---------- */
.locale { position: relative; overflow: hidden; }
.locale__griglia { position: relative; z-index: 2; min-height: 620px; display: flex; align-items: center; }
.locale__testo { max-width: 38%; padding: 80px 0; }
.locale__testo h2 { font-size: clamp(36px, 5.3vw, 80px); margin-bottom: 22px; }
.locale__testo p { font-size: clamp(18px, 1.6vw, 22px); max-width: 30ch; margin-bottom: 36px; }
.locale__foto {
  position: absolute; z-index: 1;
  top: 0; right: 0; bottom: 0;
  width: 60%;
  overflow: hidden;
}
.locale__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.locale__macchie { position: absolute; z-index: 1; left: 30%; bottom: 0; width: 280px; height: 240px; }
.m-l1 { width: 150px; height: 130px; left: 0; bottom: -10px; fill: var(--crema-macchia); }
.m-l2 { width: 96px; height: 130px; left: 50px; bottom: 30px; fill: var(--marrone-medio); transform: rotate(-30deg); }
.m-l3 { width: 120px; height: 110px; left: 120px; bottom: 90px; fill: var(--salvia-media); transform: rotate(-60deg); }
.m-l4 { width: 80px; height: 120px; left: 180px; bottom: 10px; fill: var(--salvia-media); transform: rotate(150deg); }

/* ---------- Delivery ---------- */
.delivery { position: relative; overflow: hidden; background: var(--marrone); color: var(--crema); padding: 64px 0 60px; }
.delivery__testa { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.delivery__testa h2 { font-size: clamp(34px, 5vw, 76px); margin-bottom: 14px; }
.delivery__testa p { font-size: clamp(18px, 1.85vw, 26px); text-wrap: balance; }
.delivery__scooter {
  position: relative;
  flex: none;
  width: clamp(160px, 23.6vw, 340px); height: clamp(160px, 23.6vw, 340px);
  margin: -48px 10% -48px 0;
  color: var(--salvia-chiara);
}
.delivery__scooter .ico { --m: url("/assets/icone/delivery-spesso.png"); width: 100%; height: 100%; }
.delivery__scooter::before, .delivery__scooter::after {
  content: ""; position: absolute; height: 4.2%; border-radius: 99px; background: currentColor;
}
.delivery__scooter::before { width: 30%; right: 104%; top: 47%; }
.delivery__scooter::after { width: 20%; right: 104%; top: 58%; }
.delivery__macchie { position: absolute; right: 0; top: 0; bottom: 0; width: 280px; }
.m-d1 { width: 220px; height: 220px; right: -60px; top: -40px; fill: var(--salvia-media); transform: rotate(-20deg); }
.m-d2 { width: 120px; height: 160px; right: -50px; top: 150px; fill: var(--marrone-medio); transform: rotate(30deg); }
.m-d3 { width: 90px; height: 90px; right: 120px; top: 30px; fill: var(--salvia-chiara); transform: rotate(60deg); }

.app { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); }
.app__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.35em;
  min-height: 84px;
  border-radius: var(--pillola);
  font-family: var(--font-titoli); font-weight: 800; font-size: clamp(22px, 2.3vw, 33px); letter-spacing: -0.03em;
  color: #000000;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 0.16s var(--curva), filter 0.2s ease;
}
.app__btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .app__btn:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-2px); }
}
.app__btn--glovo { background: var(--glovo); }
.app__btn--deliveroo { background: var(--deliveroo); }
.app__btn--justeat { background: var(--justeat); }

/* ---------- Piè di pagina ---------- */
.piede { background: var(--crema); padding-top: 28px; }
.piede__riga { display: flex; align-items: center; gap: 32px; padding-bottom: 22px; }
.piede__marchio img { width: 230px; height: auto; margin-bottom: 6px; }
.piede__marchio p { font-size: 19px; }
.piede__nav { margin-left: auto; margin-right: auto; }
.piede__nav ul, .piede__legali { display: flex; gap: clamp(20px, 3vw, 48px); }
.piede__nav a, .piede__legali a { font-size: 18px; }
.piede__info {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid rgba(69, 43, 32, 0.16);
  padding: 16px 0;
  font-size: 15px;
}
.piede__info ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.piede__info p { text-wrap: balance; }
.piede__info a { text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .piede__info a:hover { color: var(--salvia); } }
.piede__legale { padding: 4px 0 22px; font-size: 13px; line-height: 1.55; opacity: 0.85; }
.piede__legale p + p { margin-top: 4px; }
.piede__legale a { text-underline-offset: 2px; }
.credit a { font-weight: 700; }
.piede__motivo {
  height: 88px;
  background: url("/assets/img/pattern-salvia-tortora.webp") left top / auto 260px repeat-x;
}

/* ---------- Pagine di testo (privacy, cookie, note legali, 404) ---------- */
.pagina-testo { padding-block: 56px 96px; }
.legale { max-width: 780px; }
.legale h1 { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.035em; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; margin-bottom: 16px; }
.legale h2 { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(21px, 2vw, 26px); margin: 40px 0 12px; color: var(--salvia); }
.legale p, .legale li { font-size: 17px; line-height: 1.65; }
.legale p + p { margin-top: 12px; }
.legale ul { list-style: disc; padding-left: 1.3em; margin: 10px 0; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--salvia); font-weight: 600; text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(69, 43, 32, 0.18); }
.legale th { font-weight: 700; }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pagina-404 { text-align: center; padding-block: 96px 120px; }
.pagina-404 h1 { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.035em; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.05; margin-bottom: 16px; }
.pagina-404 p { font-size: 20px; margin-bottom: 32px; }
.pagina-404 .hero__pulsanti { justify-content: center; margin-bottom: 0; }

/* ---------- STEP 6 · le sezioni del copy, con le forme del design ---------- */
.hero__titolo { font-size: clamp(36px, 4.15vw, 60px); margin-bottom: 26px; }
.hero__titolo .verde { text-wrap: balance; }
.titolo-m { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(30px, 3.6vw, 52px); }
.titolo-m span { display: block; }
.titolo-m { text-wrap: balance; }
.voglia__titolo { text-wrap: balance; }
.voglia__titolo .verde { display: inline; }

.btn--chiaro { background: var(--crema); color: var(--marrone); }
.btn--bordo-chiaro { background: transparent; color: var(--crema); border-color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .btn--chiaro:hover { background: var(--salvia-chiara); }
  .btn--bordo-chiaro:hover { background: var(--crema); color: var(--marrone); }
}
.sezione__azioni { display: flex; justify-content: center; margin-top: 32px; }
.sezione__azioni--sx { justify-content: flex-start; }
.link-freccia { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); text-underline-offset: 4px; touch-action: manipulation; }
.link-freccia .ico { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-freccia:hover .ico { transform: translate(3px, -3px); } .link-freccia:hover { color: var(--salvia); } }

/* Il menu: quattro schede */
.schede--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.schede--quattro .scheda__foto { margin-bottom: 20px; }
.scheda__prezzo { display: inline-block; margin: 2px auto 10px; padding: 4px 14px; border-radius: var(--pillola); background: var(--salvia); color: var(--crema); font-weight: 700; font-size: clamp(15px, 1.2vw, 17px); }
.schede--quattro h3 { margin-bottom: 6px; }

/* Creala tu: le tre schede dei formati nella fascia verde */
.come__testa h2 { font-size: clamp(32px, 4.3vw, 62px); text-wrap: balance; }
.passo__num--foto { width: 128px; height: 128px; }
.passo__num--foto img { position: relative; width: 84%; height: auto; }
.passo__num--foto img.foto-piccola { width: 64%; }
.passo__prezzo { display: inline-block; margin-bottom: 8px; padding: 3px 13px; border-radius: var(--pillola); background: var(--crema); color: var(--marrone); font-weight: 800; font-size: clamp(15px, 1.25vw, 18px); }
.come__chiusura { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 52px; padding-top: 32px; border-top: 2px solid rgba(254, 253, 248, 0.35); }
.come__chiusura p { font-size: clamp(17px, 1.6vw, 22px); max-width: 40ch; }

/* Come ordinare: la fascia marrone, coi tre passi e le app */
.delivery__titolo { margin-bottom: 44px; }
.ordine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: none; }
.ordine__passo { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 18px; padding: 0 clamp(20px, 3vw, 44px); }
.ordine__passo:first-child { padding-left: 0; }
.ordine__passo + .ordine__passo { border-left: 2px solid rgba(254, 253, 248, 0.3); }
.ordine__num { position: relative; display: grid; place-items: center; width: 88px; height: 88px; }
.ordine__num svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--crema); transform: rotate(-8deg); }
.ordine__num b { position: relative; font-family: var(--font-titoli); font-weight: 800; font-size: 34px; color: var(--marrone); }
.ordine__passo .ico { width: 62px; height: 62px; }
.ordine__passo p { grid-column: 1 / -1; margin-top: 18px; font-size: clamp(17px, 1.55vw, 22px); max-width: 24ch; }
.ico--salvia { color: var(--salvia-chiara); }
.ico--asporto { --m: url("/assets/icone/asporto.png"); }
.ico--esterna-grande { --m: url("/assets/icone/freccia-esterna.png"); }
.delivery .sezione__azioni { margin: 40px 0 56px; }
.delivery__testa { margin-bottom: 32px; padding-top: 40px; border-top: 2px solid rgba(254, 253, 248, 0.3); }
.delivery__testa p { font-size: clamp(19px, 2vw, 28px); font-weight: 600; max-width: 26ch; text-wrap: balance; }

/* Pokè Vegan, Piadina Vegana e Pulled Vegan */
.vegan { padding: 104px 0 96px; overflow: hidden; }
.vegan__griglia { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vegan__testo h2 { margin-bottom: 28px; }
.vegan__elenco li { position: relative; padding-left: 30px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.vegan__elenco li + li { margin-top: 12px; }
.vegan__elenco li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 12px; height: 12px; border-radius: 50%; background: var(--salvia); }
.vegan__nota { margin-top: 28px; padding: 18px 22px; border-left: 4px solid var(--salvia); background: rgba(89, 149, 96, 0.08); border-radius: 0 16px 16px 0; font-size: clamp(16px, 1.35vw, 19px); }
.vegan__foto { position: relative; }
.vegan__cornice { position: relative; z-index: 1; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; overflow: hidden; background: #FFFFFF; aspect-ratio: 1 / 1; max-width: 480px; margin-left: auto; }
.vegan__cornice img { width: 100%; height: 100%; object-fit: cover; }
.m-g1 { width: 150px; height: 150px; left: 4%; top: -4%; fill: var(--salvia-chiara); }
.m-g2 { width: 110px; height: 130px; right: -2%; bottom: -4%; fill: var(--marrone-medio); transform: rotate(40deg); }

/* Recensioni */
.recensioni { background: var(--crema-macchia); padding: 96px 0 88px; }
.recensioni .voglia__titolo { margin-bottom: 14px; }
.recensioni__voto { text-wrap: balance; text-align: center; font-family: var(--font-titoli); font-weight: 700; font-size: clamp(19px, 1.9vw, 27px); color: var(--salvia); margin-bottom: 44px; }
.recensioni__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); max-width: 1040px; margin: 0 auto; }
.recensione { position: relative; background: var(--crema); border-radius: var(--raggio); padding: 40px 36px 30px; overflow: hidden; }
.recensione::before { content: ""; position: absolute; right: -26px; top: -26px; width: 110px; height: 110px; border-radius: 45% 55% 50% 50%; background: var(--salvia-chiara); opacity: 0.35; }
.recensione blockquote { margin: 0 0 18px; }
.recensione blockquote p { position: relative; font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; }
.recensione__chi { font-weight: 700; color: var(--salvia); }

/* Dove siamo: tre righe e due pulsanti */
.locale__testo p { margin-bottom: 14px; }
.locale__testo p:last-of-type { margin-bottom: 30px; }
.locale__pulsanti { display: flex; flex-wrap: wrap; gap: 14px; }

/* Domande frequenti: a fisarmonica, una alla volta */
.domande { padding: 96px 0 104px; }
.domande__elenco { max-width: 900px; margin: 0 auto; border-top: 2px solid rgba(69, 43, 32, 0.14); }
.domanda { border-bottom: 2px solid rgba(69, 43, 32, 0.14); }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(18px, 1.7vw, 24px);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: color 160ms ease;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda__segno {
  flex: none; width: 36px; height: 36px; background-color: var(--salvia);
  -webkit-mask: url("/assets/icone/aggiungi.png") center / contain no-repeat; mask: url("/assets/icone/aggiungi.png") center / contain no-repeat;
  transition: transform 260ms var(--ease-out);
}
.domanda[open] .domanda__segno { -webkit-mask-image: url("/assets/icone/rimuovi.png"); mask-image: url("/assets/icone/rimuovi.png"); transform: rotate(180deg); }
.domanda summary:active .domanda__segno { transform: scale(0.92); }
.domanda p { padding: 0 56px 26px 4px; font-size: clamp(17px, 1.45vw, 20px); }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--salvia); } }

/* La chiusura: «Pokè o piadina? Provale entrambe» */
.chiusura { position: relative; overflow: hidden; background: var(--salvia); color: var(--crema); padding: 84px 0; }
.chiusura__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.chiusura h2 { font-size: clamp(34px, 4.6vw, 70px); margin-bottom: 20px; }
.chiusura p { font-size: clamp(18px, 1.7vw, 24px); margin-bottom: 32px; max-width: 30ch; }
.chiusura .hero__pulsanti { margin-bottom: 0; }
.chiusura__foto img { width: 100%; max-width: 600px; margin-left: auto; filter: drop-shadow(-14px 24px 26px rgba(40, 50, 30, 0.35)); }

/* Il piè di pagina coi testi del copy */
.piede__info address { font-style: normal; display: flex; flex-wrap: wrap; gap: 4px 0; }
.piede__info address > span + span::before { content: "·"; margin: 0 10px; opacity: 0.6; }

/* La barra del telefono: «Ordina su WhatsApp» sempre a portata di pollice */
.barra-telefono { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1200px) {
  .m-h1 { left: 3%; }
  .m-h4 { left: 4%; }
  .m-h7 { left: 1%; top: 60%; }
}
@media (max-width: 1100px) {
  .testata__nav ul { gap: 22px; }
  .testata__logo img { width: 180px; }
  .come__raggi { left: 360px; }
}

/* ---------- Telefono e tablet stretto ---------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; scroll-padding-bottom: 96px; }
  .testata__barra { min-height: 72px; gap: 12px; }
  .testata__logo img { width: 158px; }
  .testata__nav, .testata__cta { display: none; }
  .testata__apri { display: flex; }

  .hero__griglia { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; padding-bottom: 48px; }
  .hero h1 { margin-bottom: 18px; }
  .hero__intro { margin-bottom: 26px; }
  .hero__pulsanti { flex-direction: column; gap: 12px; margin-bottom: 0; }
  .hero__pulsanti .btn { width: 100%; }
  .hero__visivo { order: 2; height: clamp(300px, 78vw, 560px); margin: 18px calc(-1 * var(--margine)) 0; }
  .hero__foto { width: 100%; right: auto; left: 0; top: 50%; transform: translateY(-50%); }
  .hero__modi { order: 3; margin-top: 12px; }
  .hero__testo { display: contents; }
  .hero__testo > * { position: relative; z-index: 2; }
  .m-h1 { width: 96px; height: 120px; left: 2%; top: 6%; }
  .m-h2 { width: 76px; height: 76px; left: 26%; top: 0; }
  .m-h3 { width: 50px; height: 44px; left: 52%; top: 2%; }
  .m-h4 { width: 80px; height: 110px; left: -4%; top: 52%; }
  .m-h5 { width: 64px; height: 80px; left: 12%; top: 36%; }
  .m-h6 { width: 70px; height: 70px; left: 10%; top: 78%; }
  .m-h7 { display: none; }

  .voglia { padding: 40px 0 64px; }
  .voglia__titolo { padding: 0 44px; margin-bottom: 32px; }
  .voglia__deco { width: 40px; height: 56px; }
  .m-v1 { width: 28px; height: 26px; left: 4px; top: 0; }
  .m-v2 { width: 28px; height: 20px; left: 0; top: 28px; }
  .m-v3 { width: 20px; height: 28px; right: 14px; top: 0; }
  .m-v4 { width: 32px; height: 28px; right: 0; top: 26px; }

  .come { padding: 0 0 36px; }
  .come__bowl { position: relative; top: auto; right: auto; width: min(64%, 360px); margin: 0 var(--margine) 4px auto; }
  .come__bowl img { margin-top: -16%; }
  .come__testa { min-height: 0; margin-bottom: 44px; }
  .come__raggi { display: none; }
  .passi { grid-template-columns: 1fr; }
  .passo { padding: 26px 0; }
  .passo:first-child { padding-top: 0; }
  .passo + .passo { border-left: 0; border-top: 2px solid rgba(254, 253, 248, 0.6); }
  .passo__segni { margin-bottom: 14px; }
  .passo__num { width: 74px; height: 74px; }
  .passo__num b { font-size: 25px; }
  .passo .ico { width: 62px; height: 62px; }
  .hero__icone img { width: 52px; height: 52px; }
  .passo h3 { max-width: none; }
  .passo p { max-width: none; }

  .locale { display: flex; flex-direction: column; }
  .locale__griglia { min-height: 0; }
  .locale__testo { max-width: none; padding: 56px 0 36px; }
  .locale__foto { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .locale__macchie { left: -34px; right: auto; bottom: -26px; top: auto; width: 180px; height: 160px; z-index: 2; }
  .m-l1 { width: 100px; height: 86px; }
  .m-l2 { width: 64px; height: 86px; left: 30px; bottom: 20px; }
  .m-l3 { width: 80px; height: 74px; left: 80px; bottom: 60px; }
  .m-l4 { width: 54px; height: 80px; left: 120px; bottom: 6px; }

  .delivery { padding: 52px 0 calc(48px + env(safe-area-inset-bottom, 0px)); }
  .delivery__testa { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 28px; }
  .delivery__scooter { width: 140px; height: 140px; margin: 0 40px -36px 0; align-self: flex-end; order: -1; }
  .delivery__macchie { width: 160px; }
  .m-d1 { width: 140px; height: 140px; right: -50px; top: -30px; }
  .m-d2 { width: 70px; height: 96px; right: -36px; top: 110px; }
  .m-d3 { width: 54px; height: 54px; right: 70px; top: 14px; }
  .app { grid-template-columns: 1fr; gap: 14px; }
  .app__btn { min-height: 62px; font-size: 24px; }

  .piede__riga { flex-direction: column; align-items: flex-start; gap: 18px; }
  .piede__nav { margin: 0; }
  .piede__nav ul { flex-wrap: wrap; gap: 4px 22px; }
  .piede__info { flex-direction: column; align-items: flex-start; }
  .piede__info li:first-child { flex-basis: 100%; }
  .piede__motivo { height: 64px; background-size: auto 200px; }
}

/* Le schede delle categorie: una riga che scorre, sul telefono */
@media (max-width: 760px) {
  .schede {
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--margine));
    padding: 0 var(--margine) 8px;
    scroll-padding-inline: var(--margine);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .schede::-webkit-scrollbar { display: none; }
  .scheda { flex: 0 0 80%; scroll-snap-align: start; }
  .scheda__foto { margin-bottom: 16px; }
  .voglia__anche { margin-top: 32px; gap: 14px; }
  .voglia__anche::before, .voglia__anche::after { flex-basis: 32px; }
}

@media (max-width: 380px) {
  .hero__pulsanti .btn { padding-inline: 1.3em; }
  .testata__logo img { width: 140px; }
}




/* ---------- STEP 6 · telefono ---------- */
@media (max-width: 1100px) {
  .schede--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .barra-telefono {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: linear-gradient(to top, rgba(254, 253, 248, 0.96) 70%, rgba(254, 253, 248, 0));
    transform: translateY(110%); visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
  }
  .barra-telefono.mostra { transform: none; visibility: visible; transition: transform 380ms var(--ease-out), visibility 0s; }
  .hero__titolo { margin-bottom: 16px; }
  .passo__num--foto { width: 104px; height: 104px; }
  .come__chiusura { margin-top: 12px; flex-direction: column; align-items: flex-start; }
  .delivery__titolo { margin-bottom: 28px; }
  .ordine { grid-template-columns: 1fr; }
  .ordine__passo { padding: 22px 0; }
  .ordine__passo:first-child { padding-top: 0; }
  .ordine__passo + .ordine__passo { border-left: 0; border-top: 2px solid rgba(254, 253, 248, 0.25); }
  .ordine__num { width: 70px; height: 70px; }
  .ordine__num b { font-size: 27px; }
  .ordine__passo .ico { width: 48px; height: 48px; }
  .ordine__passo p { margin-top: 12px; max-width: none; }
  .delivery .sezione__azioni { margin: 8px 0 40px; }
  .delivery .sezione__azioni .btn { width: 100%; }
  .delivery__testa { padding-top: 32px; }
  .vegan { padding: 64px 0 56px; }
  .vegan__griglia { grid-template-columns: 1fr; }
  .vegan__foto { order: -1; max-width: 340px; margin: 0 auto 8px; width: 82%; }
  .vegan__cornice { margin: 0 auto; }
  .recensioni { padding: 64px 0 56px; }
  .recensioni__voto { margin-bottom: 28px; }
  .recensioni__elenco { grid-template-columns: 1fr; gap: 14px; }
  .recensione { padding: 26px 22px 20px; }
  .recensione blockquote p { font-family: var(--font-testo); font-weight: 700; letter-spacing: -0.01em; font-size: 19px; }
  .locale__testo p { max-width: none; }
  .vegan__nota { padding: 14px 16px; font-size: 16px; }
  .locale__pulsanti .btn { flex: 1 1 100%; }
  .domande { padding: 64px 0 64px; }
  .domanda summary { padding: 20px 2px; }
  .domanda__segno { width: 30px; height: 30px; }
  .domanda p { padding: 0 8px 22px 2px; }
  .chiusura { padding: 60px 0 48px; }
  .chiusura__griglia { grid-template-columns: 1fr; gap: 24px; }
  .chiusura .hero__pulsanti { flex-direction: column; }
  .chiusura .hero__pulsanti .btn { width: 100%; }
  .chiusura__foto img { margin: 0 auto; max-width: 360px; }
  .piede__info address { flex-direction: column; }
  .piede__info address > span + span::before { content: none; }
}
@media (max-width: 760px) {
  .schede--quattro { display: flex; }
  .schede--quattro .scheda { flex-basis: 78%; }
}

/* =====================================================================
   STEP 5-bis · IL MOVIMENTO (regole di Emil Kowalski, 09 § 0-bis-2)
   Solo transform e opacity; curve --ease-out e --ease-in-out; hover solo col mouse.
   ===================================================================== */

/* 1 · La hero entra al caricamento, col CSS, senza aspettare il JavaScript.
   La foto non parte mai trasparente: si assesta appena (scale), così la prima schermata resta veloce. */
@keyframes entra-su { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes foto-assesta { from { scale: 1.045; } to { scale: 1; } }
@keyframes macchia-entra { from { opacity: 0; scale: 0.95; } to { opacity: 1; scale: 1; } }
.hero .occhiello, .hero h1 > *, .hero__intro, .hero__pulsanti, .hero__modi {
  animation: entra-su 800ms var(--ease-out) both;
}
.hero .occhiello { animation-delay: 60ms; }
.hero h1 > :first-child { animation-delay: 140ms; }
.hero h1 > :last-child { animation-delay: 220ms; }
.hero__intro { animation-delay: 320ms; }
.hero__pulsanti { animation-delay: 400ms; }
.hero__modi { animation-delay: 480ms; }
.hero__foto { animation: foto-assesta 1400ms var(--ease-out) both; }
.hero__visivo .macchia { animation: macchia-entra 900ms var(--ease-out) both, respira 9s var(--ease-in-out) 900ms infinite alternate; }
.hero__visivo .m-h2 { animation-delay: 300ms, 1200ms; animation-duration: 900ms, 11s; }
.hero__visivo .m-h3 { animation-delay: 380ms, 1300ms; animation-duration: 900ms, 7s; }
.hero__visivo .m-h1 { animation-delay: 460ms, 1400ms; animation-duration: 900ms, 10s; }
.hero__visivo .m-h5 { animation-delay: 520ms, 1500ms; animation-duration: 900ms, 8s; }
.hero__visivo .m-h4 { animation-delay: 600ms, 1600ms; animation-duration: 900ms, 12s; }
.hero__visivo .m-h7 { animation-delay: 660ms, 1700ms; animation-duration: 900ms, 7.5s; }
.hero__visivo .m-h6 { animation-delay: 720ms, 1800ms; animation-duration: 900ms, 9.5s; }

/* 2 · Le macchie respirano: si spostano e girano appena, piano, sempre (il background che tiene viva la pagina) */
@keyframes respira {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 7px -12px; rotate: 7deg; }
}
.locale__macchie .macchia, .delivery__macchie .macchia, .voglia__deco .macchia { animation: respira 10s var(--ease-in-out) infinite alternate; }
.locale__macchie .m-l2, .delivery__macchie .m-d2, .voglia__deco .m-v2, .voglia__deco .m-v4 { animation-duration: 8s; animation-delay: -3s; }
.locale__macchie .m-l3, .delivery__macchie .m-d3 { animation-duration: 12s; animation-delay: -6s; }

/* 3 · Le sezioni arrivano scorrendo (.reveal → .in, una volta sola). Senza JavaScript tutto resta visibile. */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .schede .reveal:nth-child(2), .js .app li:nth-child(2) { transition-delay: 80ms; }
.js .schede .reveal:nth-child(3), .js .app li:nth-child(3) { transition-delay: 160ms; }

/* 4 · I passi 01-02-03 arrivano uno dopo l'altro, e la macchia del numero si gira al suo posto */
.js .passo.reveal:nth-child(2) { transition-delay: 80ms; }
.js .passo.reveal:nth-child(3) { transition-delay: 160ms; }
.js .passo.reveal .passo__num { transform: rotate(-24deg) scale(0.95); transition: transform 900ms var(--ease-out); transition-delay: inherit; }
.js .passo.reveal.in .passo__num { transform: none; }
.js .passo.reveal .passo__segni .ico { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 800ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + 220ms); }
.js .passo.reveal.in .passo__segni .ico { opacity: 1; transform: none; }
.passo:nth-child(2) { --d: 80ms; }
.passo:nth-child(3) { --d: 160ms; }

/* 5 · La foto del locale si svela da destra a sinistra */
.js .locale__foto.reveal { opacity: 1; transform: none; clip-path: inset(0 0 0 38%); transition: clip-path 1200ms var(--ease-out); }
.js .locale__foto.reveal img { scale: 1.08; transition: scale 1400ms var(--ease-out); }
.js .locale__foto.reveal.in { clip-path: inset(0 0 0 0); }
.js .locale__foto.reveal.in img { scale: 1; }

/* 6 · Lo scooter arriva da sinistra con le sue linee di velocità, poi resta in moto */
.js .delivery__scooter.reveal { transform: translateX(-90px); }
.js .delivery__scooter.reveal.in { transform: none; transition: opacity 700ms ease, transform 1100ms var(--ease-out); }
@keyframes in-moto { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes vento { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.55); opacity: 0.55; } }
.delivery__scooter .ico { animation: in-moto 420ms var(--ease-in-out) infinite alternate; }
.delivery__scooter::before, .delivery__scooter::after { transform-origin: right center; animation: vento 1.3s var(--ease-in-out) infinite; }
.delivery__scooter::after { animation-delay: -0.45s; }

/* 7 · La bowl della fascia verde e la foto della hero: profondità leggera scorrendo (la muove main.js con transform) */
.come__bowl, .hero__foto { will-change: transform; }

/* 8 · L'intestazione cambia scorrendo: il logo si fa più piccolo, compare l'ombra */
.testata__logo img { transform-origin: left center; transition: transform 300ms var(--ease-out); }
.testata.e-scesa .testata__logo img { transform: scale(0.86); }

/* 9 · Le frecce dei pulsanti rispondono al mouse; col dito risponde il pulsante (:active) */
.btn .ico, .app__btn .ico { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ico--freccia { transform: translateX(4px); }
  .app__btn:hover .ico--esterna { transform: translate(3px, -3px); }
}
.app__btn:active { transform: scale(0.97); transition-duration: 120ms; }
.menu-telefono nav a { transition: color 150ms ease; }

/* Meno movimento, non zero: restano le dissolvenze, si tolgono gli spostamenti; le macchie stanno ferme */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .occhiello, .hero h1 > *, .hero__intro, .hero__pulsanti, .hero__modi { animation-name: dissolvi; animation-duration: 500ms; }
  .hero__foto { animation: none; }
  .hero__visivo .macchia { animation: dissolvi 600ms ease both; }
  .locale__macchie .macchia, .delivery__macchie .macchia, .voglia__deco .macchia,
  .delivery__scooter .ico, .delivery__scooter::before, .delivery__scooter::after { animation: none; }
  .js .reveal, .js .delivery__scooter.reveal { transform: none; transition: opacity 600ms ease; }
  .js .passo.reveal .passo__num, .js .passo.reveal .passo__segni .ico { transform: none; }
  .js .locale__foto.reveal { clip-path: none; opacity: 0; transition: opacity 700ms ease; }
  .js .locale__foto.reveal.in { opacity: 1; }
  .js .locale__foto.reveal img { scale: 1; }
  .menu-telefono.pronto li, .menu-telefono.pronto > .btn { transform: none; }
  .come__bowl, .hero__foto { will-change: auto; }
}
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }

/* ---------- STEP 6 · il movimento sulle sezioni nuove (stesse regole del 5-bis) ---------- */
.js .schede .reveal:nth-child(4) { transition-delay: 240ms; }
.js .ordine__passo.reveal:nth-child(2), .js .recensione.reveal:nth-child(2) { transition-delay: 80ms; }
.js .ordine__passo.reveal:nth-child(3) { transition-delay: 160ms; }
.js .ordine__passo.reveal .ordine__num { transform: rotate(-24deg) scale(0.95); transition: transform 900ms var(--ease-out); transition-delay: inherit; }
.js .ordine__passo.reveal.in .ordine__num { transform: none; }
.js .vegan__foto.reveal { transform: translateY(34px) scale(0.97); }
.js .vegan__foto.reveal.in { transform: none; }
.vegan__foto .macchia, .chiusura__foto { animation: respira 11s var(--ease-in-out) infinite alternate; }
.chiusura__foto { animation-name: respira-piano; }
@keyframes respira-piano { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes risposta { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.domanda[open] p { animation: risposta 320ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .vegan__foto .macchia, .chiusura__foto { animation: none; }
  .js .ordine__passo.reveal .ordine__num, .js .vegan__foto.reveal { transform: none; }
  .domanda[open] p { animation: dissolvi 200ms ease; }
  .barra-telefono { transition: opacity 200ms ease; transform: none; opacity: 0; }
  .barra-telefono.mostra { opacity: 1; }
}

/* =====================================================================
   STEP 6-bis · LE PAGINE INTERNE (menu, creala-tu, contatti), coi pezzi della home
   ===================================================================== */

/* La testa delle pagine interne: la hero della home, più bassa */
.pagina-hero { position: relative; overflow: hidden; padding: 48px 0 72px; }
.pagina-hero__griglia { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); gap: 40px; align-items: center; }
.pagina-hero__testo { position: relative; z-index: 2; }
.pagina-hero__testo--largo { max-width: 860px; }
.pagina-hero__nota { font-size: clamp(17px, 1.45vw, 20px); max-width: 44ch; margin: -18px 0 34px; }
.pagina-hero .hero__pulsanti { margin-bottom: 0; }
.pagina-hero__visivo { position: relative; }
.pagina-hero__visivo > img { position: relative; z-index: 1; width: 100%; max-width: 620px; margin-left: auto; }
.pagina-hero__macchie { position: absolute; right: 2%; top: 10%; width: 300px; height: 260px; }
.m-p1 { width: 120px; height: 150px; left: -2%; top: 8%; fill: var(--marrone-medio); transform: rotate(-18deg); }
.m-p2 { width: 120px; height: 110px; right: 4%; top: -4%; fill: var(--salvia-media); transform: rotate(150deg); }
.m-p3 { width: 90px; height: 84px; left: 14%; bottom: -2%; fill: var(--salvia-chiara); transform: rotate(30deg); }
.pagina-hero__macchie .m-p1 { left: 10%; top: 20%; }
.pagina-hero__macchie .m-p2 { right: 10%; top: 0; }
.pagina-hero__macchie .m-p3 { left: 48%; bottom: 0; }
.pagina-hero--bassa { padding: 40px 0 56px; }

/* L'indice del menu: resta in cima, scorre di lato */
.indice { position: sticky; top: calc(112px + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--crema); border-bottom: 1px solid rgba(69, 43, 32, 0.12); }
.indice__voci { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.indice__voci::-webkit-scrollbar { display: none; }
.indice__voci a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--pillola);
  background: var(--crema-macchia); white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 16px;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.indice__voci a:active { transform: scale(0.97); }
.indice__voci a.attiva { background: var(--marrone); color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .indice__voci a:hover { background: var(--salvia); color: var(--crema); } }

/* Le sezioni del menu */
.menu-sezione { padding: 80px 0; scroll-margin-top: 180px; }
.menu-sezione--chiara { background: var(--crema-macchia); }
.menu-sezione--verde { background: var(--salvia); color: var(--crema); }
.menu-sezione__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-bottom: 36px; }
.menu-sezione__testa h2 { margin-bottom: 14px; }
.menu-sezione__testa p { font-size: clamp(17px, 1.5vw, 21px); max-width: 52ch; }
.menu-sezione__testa p + p { margin-top: 8px; }
.menu-sezione__foto { width: 250px; }
.menu-sezione__foto img { width: 100%; }
.menu-sezione__foto--tonda img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; border: 6px solid var(--crema); }
.menu-fascia { margin: 8px 0 18px; }
.menu-fascia span { display: inline-block; padding: 6px 18px; border-radius: var(--pillola); background: var(--salvia); color: var(--crema); font-family: var(--font-titoli); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; }
.voci + .menu-fascia { margin-top: 40px; }
.menu-frase { margin: 44px 0 18px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; max-width: 60ch; }
.menu-gusti { font-weight: 700; color: var(--salvia); }

.voci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.voci--cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.voci--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voci--due { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voce { display: flex; flex-direction: column; background: var(--crema); border-radius: var(--raggio); padding: 12px 12px 16px; border: 1.5px solid rgba(69, 43, 32, 0.1); color: var(--marrone); }
.menu-sezione--chiara .voce { border-color: transparent; }
.voce--foto { padding: 0; border: 0; background: transparent; }
.voce--foto .voce__visivo { height: 100%; margin: 0; }
.voce__visivo { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--crema-macchia); margin-bottom: 14px; }
.menu-sezione--chiara .voce__visivo { background: #F4F1E4; }
.voce__visivo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
.voce__visivo--foto { background: #FFFFFF; }
.voce__visivo--foto img { object-fit: cover; }
.voce__visivo--ritaglio img { inset: 8%; width: 84%; height: 84%; }
.voce__visivo--ingredienti img { inset: auto; width: 56%; height: auto; aspect-ratio: 1 / 1; filter: drop-shadow(0 8px 10px rgba(69, 43, 32, 0.18)); }
.voce__visivo--n1 img { left: 18%; top: 18%; width: 64%; }
.voce__visivo--n2 img:nth-child(1) { left: 6%; top: 12%; width: 62%; }
.voce__visivo--n2 img:nth-child(2) { right: 6%; bottom: 8%; width: 48%; }
.voce__visivo--n3 img:nth-child(1) { left: 4%; top: 6%; width: 62%; }
.voce__visivo--n3 img:nth-child(2) { right: 4%; top: 22%; width: 46%; }
.voce__visivo--n3 img:nth-child(3) { left: 22%; bottom: 4%; width: 44%; }
@media (hover: hover) and (pointer: fine) { .voce:hover .voce__visivo img { transform: scale(1.05); } }
.voce h3 { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; margin: 0 2px 6px; }
.voce__ingredienti { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45; margin: 0 2px 12px; }
.voce__piede { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.voce__prezzo { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(17px, 1.35vw, 20px); color: var(--salvia); letter-spacing: -0.02em; }
.btn--piccolo { min-height: 42px; padding: 0.55em 1em; font-size: 14px; background: var(--marrone); color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .btn--piccolo:hover { background: var(--salvia); } }

.righe { display: grid; gap: 12px; }
.righe--sola { margin-top: 20px; }
.riga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px 20px; background: var(--crema); color: var(--marrone); border-radius: 18px; padding: 14px 16px 14px 22px; }
.riga__foto { grid-column: 1; width: 56px; height: 56px; }
.riga__foto img { width: 100%; height: 100%; object-fit: contain; }
.riga:not(:has(.riga__foto)) { grid-template-columns: minmax(0, 1fr) auto auto; }
.riga__nome { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(17px, 1.4vw, 21px); }
.riga__prezzo { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(17px, 1.4vw, 21px); color: var(--salvia); }

/* La fascia verde senza la bowl (Come funziona, Ordinare su WhatsApp) */
.come--pagina { padding: 88px 0 80px; }
.come__testa--larga { max-width: none; margin-bottom: 44px; }
.ordine--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.come .ordine__passo + .ordine__passo { border-left-color: rgba(254, 253, 248, 0.45); }
.come__dopo { margin-top: 40px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 600; }
.come .ordine__passo p a, .come__chiusura a:not(.btn) { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.link-tel { text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Il compositore */
.compositore { padding: 88px 0 96px; }
.compositore__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 3vw, 48px); align-items: start; }
.tappe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tappa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--pillola);
  background: var(--crema-macchia); color: var(--marrone); font: 700 15px/1.1 var(--font-testo); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.tappa:active { transform: scale(0.97); }
.tappa[aria-current="step"] { background: var(--marrone); color: var(--crema); }
.tappa.fatta:not([aria-current="step"]) { background: var(--salvia); color: var(--crema); }
.tappa__conta:empty { display: none; }
.tappa__conta { font-size: 13px; opacity: 0.85; padding: 2px 8px; border-radius: var(--pillola); background: rgba(254, 253, 248, 0.22); }
.tappa:not([aria-current="step"]):not(.fatta) .tappa__conta { background: rgba(69, 43, 32, 0.1); }
@media (hover: hover) and (pointer: fine) { .tappa:not([aria-current="step"]):hover { background: var(--salvia-chiara); } }
.passo-c { margin-top: 28px; }
.compositore.attivo .passo-c:not(.aperto) { display: none; }
.compositore.attivo .passo-c.aperto { animation: risposta 380ms var(--ease-out); }
.passo-c__titolo { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 8px; scroll-margin-top: 140px; outline: none; }
.passo-c__nota { font-size: clamp(16px, 1.3vw, 18px); margin: 0 0 16px; }
.passo-c__titolo + .scelte, .passo-c__titolo + .avviso + .scelte, .passo-c__titolo + .formati { margin-top: 16px; }
.avviso { margin: 0 0 14px; padding: 12px 16px; border-left: 4px solid var(--marrone); background: rgba(140, 106, 88, 0.12); border-radius: 0 12px 12px 0; font-weight: 600; }
.avviso[hidden] { display: none; }
/* l'ora del ritiro fuori orario: sotto i due campi, su tutta la riga */
.ricetta__campi .avviso--ora { grid-column: 1 / -1; margin: 0; }

.formati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.formato {
  width: 100%; height: 100%; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: start; gap: 4px; text-align: left;
  padding: 18px 18px 20px; border-radius: var(--raggio); border: 3px solid transparent; background: var(--crema-macchia); color: var(--marrone);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 140ms var(--ease-out);
}
.formato:active { transform: scale(0.98); }
.formato[aria-pressed="true"] { border-color: var(--salvia); background: #E3E8D5; }
.formato__img { display: grid; place-items: center; width: 108px; height: 108px; margin-bottom: 6px; background: var(--crema); border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%; }
.formato__img img { width: 84%; height: auto; }
.formato__img--piccola img { width: 62%; }
.formato__nome { font-family: var(--font-titoli); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.formato__prezzo { font-family: var(--font-titoli); font-weight: 800; font-size: 20px; color: var(--salvia); }
.formato__desc { font-size: 15px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .formato:hover { border-color: var(--salvia-chiara); } }

.scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.scelta {
  position: relative; width: 100%; min-height: 72px; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: center; text-align: left;
  padding: 8px 12px 8px 8px; border-radius: 18px; border: 2.5px solid transparent; background: var(--crema-macchia); color: var(--marrone);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 140ms var(--ease-out);
}
.scelta:active { transform: scale(0.97); }
.scelta img { grid-row: 1 / span 2; width: 52px; height: 52px; object-fit: contain; }
.scelta__nome { font-weight: 700; font-size: 15px; line-height: 1.2; }
.scelta__piu { grid-column: 2; font-size: 12.5px; font-weight: 700; color: var(--salvia); }
.scelta[aria-pressed="true"] { background: var(--salvia); color: var(--crema); border-color: var(--salvia); }
.scelta[aria-pressed="true"] .scelta__piu { color: var(--crema); }
.scelta[aria-pressed="true"]::after { content: ""; position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--crema) url("/assets/icone/selezionato.png") center / 100% no-repeat; }
.scelta[aria-disabled="true"] { opacity: 0.42; }
@media (hover: hover) and (pointer: fine) { .scelta:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { border-color: var(--salvia-chiara); } }

.ricetta { position: sticky; top: 132px; background: var(--crema-macchia); border-radius: 26px; padding: 26px 24px 22px; }
.ricetta__titolo { font-family: var(--font-titoli); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 14px; }
.ricetta__messaggio { background: var(--crema); border-radius: 16px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.ricetta__saluto { font-weight: 600; }
.ricetta__righe li { margin-top: 2px; }
.ricetta__righe b { font-weight: 700; }
.ricetta__totale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-weight: 700; font-size: 18px; }
.ricetta__totale strong { font-family: var(--font-titoli); font-weight: 800; font-size: 30px; color: var(--salvia); letter-spacing: -0.02em; }
.ricetta__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.campo { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo textarea {
  width: 100%; font: 500 16px/1.3 var(--font-testo); color: var(--marrone); background: var(--crema);
  border: 2px solid rgba(69, 43, 32, 0.18); border-radius: 12px; padding: 10px 12px; min-height: 46px;
  transition: border-color 150ms ease;
}
.campo textarea { resize: vertical; min-height: 64px; }
.campo input:focus, .campo textarea:focus { border-color: var(--salvia); outline: none; }
.ricetta__invia { margin-bottom: 10px; }
.ricetta__fatto { font-weight: 600; color: var(--salvia); margin-bottom: 8px; }
.ricetta__fatto[hidden] { display: none; }
.ricetta__ricomincia { border: 0; background: none; padding: 8px 0; font: 700 15px var(--font-testo); color: var(--marrone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.ricetta .thk-nota-modulo, .ricetta .nota-modulo { font-size: 12.5px; margin-top: 6px; }
.barra-creala { display: none; }

.supplementi { background: var(--crema-macchia); padding: 80px 0; }
.supplementi__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.supplementi__scheda { background: var(--crema); border-radius: var(--raggio); padding: 34px 32px; }
.supplementi__scheda h2 { margin-bottom: 18px; font-size: clamp(26px, 2.6vw, 38px); }
.supplementi__scheda .titolo-m span { display: inline; }
.supplementi__scheda p { margin-top: 14px; font-size: clamp(16px, 1.35vw, 19px); }

/* Contatti */
.dove { padding: 40px 0 88px; }
.dove__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.dove__testo h2 { margin-bottom: 20px; }
.dove__indirizzo { font-style: normal; display: grid; font-family: var(--font-titoli); font-weight: 700; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 14px; }
.dove__testo > p { font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 28px; max-width: 40ch; }
.mappa { position: relative; border-radius: 26px; overflow: hidden; background: var(--salvia); color: var(--crema); min-height: 220px; }
.mappa__segnaposto { display: flex; align-items: center; gap: 24px; padding: 32px; min-height: 220px; background-image: radial-gradient(circle at 85% 20%, rgba(153, 184, 138, 0.6) 0 90px, transparent 91px), radial-gradient(circle at 70% 110%, rgba(140, 106, 88, 0.45) 0 70px, transparent 71px); }
.ico--posizione { --m: url("/assets/icone/posizione.png"); width: 72px; height: 72px; color: var(--crema); }
.mappa__azioni { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.link-freccia--chiaro { color: var(--crema); }
.mappa iframe { display: block; width: 100%; height: 360px; border: 0; }
.mappa__sotto { padding: 12px 18px; display: flex; justify-content: flex-end; }
.dove__foto { position: relative; }
.dove__foto img { position: relative; z-index: 1; border-radius: 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dove__foto .m-g1 { left: -40px; top: -30px; z-index: 0; }

.orari { background: var(--crema-macchia); padding: 72px 0; }
.orari__dentro { text-align: center; }
.orari h2 { margin-bottom: 12px; }
.orari__ora { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.15; color: var(--salvia); text-wrap: balance; }

.delivery__testa--pagina { border-top: 0; padding-top: 0; margin-bottom: 36px; }
.delivery__testa--pagina h2 { margin-bottom: 18px; }
.delivery__testa--pagina h2 span { display: inline; }
.delivery__testa--pagina p { font-weight: 500; max-width: 40ch; }
.delivery__testa--pagina .delivery__nota { margin-top: 10px; font-size: clamp(15px, 1.3vw, 18px); opacity: 0.85; }
.vegan__cornice--foto { aspect-ratio: 9 / 10; border-radius: 32px; }
.sul-posto { background: var(--crema); }
.sul-posto__testo { font-size: clamp(18px, 1.6vw, 22px); max-width: 34ch; }
.social { padding: 80px 0 96px; }
.social__dentro { text-align: center; }
.social__dentro h2 { margin-bottom: 14px; }
.social__dentro .titolo-m span { display: inline; }
.social__dentro p { font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 28px; }
.social .hero__pulsanti { justify-content: center; margin-bottom: 0; }

/* Il menu della pagina aperta, nell'intestazione e nel piè di pagina */
.testata__nav a[aria-current="page"], .piede__nav a[aria-current="page"] { background-size: 100% 2px; font-weight: 700; }
.menu-telefono nav a[aria-current="page"] { color: var(--salvia); }

/* Le entrate delle pagine interne: come la home */
.js .voci .reveal:nth-child(2), .js .righe .reveal:nth-child(2) { transition-delay: 60ms; }
.js .voci .reveal:nth-child(3), .js .righe .reveal:nth-child(3) { transition-delay: 120ms; }
.js .voci .reveal:nth-child(4) { transition-delay: 180ms; }
.js .voci .reveal:nth-child(5) { transition-delay: 240ms; }
.js .ordine__passo.reveal:nth-child(4) { transition-delay: 240ms; }
.pagina-hero__testo > :not(h1), .pagina-hero .hero__titolo > * { animation: entra-su 800ms var(--ease-out) both; }
.pagina-hero__testo > :nth-child(2) { animation-delay: 220ms; }
.pagina-hero__testo > :nth-child(3) { animation-delay: 300ms; }
.pagina-hero__testo > :nth-child(4) { animation-delay: 380ms; }
.pagina-hero .hero__titolo > :last-child { animation-delay: 120ms; }
.pagina-hero__visivo > img { animation: foto-assesta 1400ms var(--ease-out) both; }
.pagina-hero .macchia { animation: macchia-entra 900ms var(--ease-out) 300ms both, respira 10s var(--ease-in-out) 1200ms infinite alternate; }

@media (max-width: 1100px) {
  .voci { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voci--cinque { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compositore__griglia { grid-template-columns: minmax(0, 1fr) 320px; }
  .formati { grid-template-columns: 1fr; }
  .formato { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; }
  .formato__img { grid-row: 1 / span 3; width: 96px; height: 96px; margin: 0; }
}
@media (max-width: 900px) {
  .pagina-hero { padding: 24px 0 48px; }
  .pagina-hero__griglia { grid-template-columns: 1fr; gap: 12px; }
  .pagina-hero__visivo > img { max-width: 420px; margin: 0 auto; }
  .pagina-hero__nota { margin: -8px 0 24px; }
  .pagina-hero__macchie { width: 160px; height: 140px; right: -20px; top: auto; bottom: 10px; opacity: 0.7; }
  .pagina-hero .hero__pulsanti { flex-direction: column; }
  .pagina-hero .hero__pulsanti .btn { width: 100%; }
  .indice { top: calc(72px + env(safe-area-inset-top, 0px)); }
  .indice__voci { margin: 0 calc(-1 * var(--margine)); padding: 12px var(--margine); scroll-padding-inline: var(--margine); }
  .menu-sezione { padding: 56px 0; scroll-margin-top: 136px; }
  .menu-sezione__testa { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 24px; }
  .menu-sezione__testa:has(.menu-sezione__foto) { grid-template-columns: minmax(0, 1fr) 104px; }
  .pagina-hero--bassa .pagina-hero__macchie { display: none; }
  .menu-sezione__foto { width: 104px; }
  .menu-sezione__foto--tonda img { border-width: 4px; }
  .voci, .voci--cinque, .voci--tre, .voci--due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .voce { padding: 8px 8px 12px; border-radius: 18px; }
  .voce__visivo { border-radius: 12px; margin-bottom: 10px; }
  .voce h3 { font-size: 17px; }
  .voce__ingredienti { font-size: 14px; margin-bottom: 10px; }
  .voce__piede { flex-direction: column; align-items: stretch; gap: 8px; }
  .voce__piede .btn--piccolo { width: 100%; padding-inline: 0.6em; font-size: 13.5px; }
  .riga { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 12px 12px 14px; gap: 10px 12px; }
  .riga:not(:has(.riga__foto)) { grid-template-columns: minmax(0, 1fr) auto; }
  .riga .btn--piccolo { grid-column: 1 / -1; width: 100%; }
  .riga__foto { width: 48px; height: 48px; }
  .come--pagina { padding: 56px 0 48px; }
  .ordine--quattro { grid-template-columns: 1fr; }
  .compositore { padding: 56px 0 72px; }
  .compositore__griglia { grid-template-columns: minmax(0, 1fr); }
  .compositore__passi { min-width: 0; }
  .tappe { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--margine)); padding: 4px var(--margine) 8px; scrollbar-width: none; position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--crema); }
  .tappe::-webkit-scrollbar { display: none; }
  .tappa { white-space: nowrap; }
  .scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scelta { min-height: 64px; grid-template-columns: 44px minmax(0, 1fr); padding: 6px 10px 6px 6px; }
  .scelta img { width: 44px; height: 44px; }
  .scelta__nome { font-size: 14.5px; }
  .ricetta { position: static; }
  .ricetta__campi { grid-template-columns: 1fr; }
  .compositore.attivo .barra-creala {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--crema); box-shadow: 0 -10px 24px -16px rgba(69, 43, 32, 0.45);
    transform: translateY(110%); visibility: hidden; transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
  }
  .compositore.attivo .barra-creala.mostra { transform: none; visibility: visible; transition: transform 380ms var(--ease-out), visibility 0s; }
  .barra-creala__totale { display: grid; line-height: 1.1; font-weight: 700; font-size: 13px; }
  .barra-creala__totale strong { font-family: var(--font-titoli); font-size: 22px; color: var(--salvia); }
  .barra-creala .btn { min-height: 50px; padding-inline: 1.1em; font-size: 15px; }
  .supplementi { padding: 56px 0; }
  .supplementi__griglia { grid-template-columns: 1fr; }
  .supplementi__scheda { padding: 26px 22px; }
  .dove { padding: 24px 0 56px; }
  .dove__griglia { grid-template-columns: 1fr; }
  .dove__foto { max-width: 360px; width: 86%; margin: 0 auto; }
  .mappa__segnaposto { flex-direction: column; align-items: flex-start; padding: 24px; }
  .ico--posizione { width: 56px; height: 56px; }
  .mappa iframe { height: 300px; }
  .orari { padding: 52px 0; }
  .social { padding: 56px 0 64px; }
  .social .hero__pulsanti { flex-direction: column; }
  .social .hero__pulsanti .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-hero__testo > :not(h1), .pagina-hero .hero__titolo > * { animation-name: dissolvi; animation-duration: 500ms; }
  .pagina-hero__visivo > img { animation: none; }
  .pagina-hero .macchia { animation: dissolvi 600ms ease both; }
  .compositore.attivo .passo-c.aperto { animation: dissolvi 200ms ease; }
  .compositore.attivo .barra-creala { transition: opacity 200ms ease; transform: none; opacity: 0; }
  .compositore.attivo .barra-creala.mostra { opacity: 1; }
}

/* Le righe dei modelli legali vicino ai moduli, ai prezzi e alle recensioni */
.thk-avviso-modulo { font-size: 12.5px; line-height: 1.45; opacity: 0.85; margin: 2px 0 10px; }
.thk-avviso-modulo a { font-weight: 700; }
.ricetta__iva, .menu-iva { font-size: 13px; opacity: 0.8; }
.ricetta__iva { margin: -12px 0 14px; text-align: right; }
.menu-iva { margin-top: 14px; }
.thk-nota-recensioni { text-align: center; font-size: 13px; opacity: 0.8; margin-top: 18px; }


/* =====================================================================
   SALTO DI LIVELLO (21/10/2026) · i prodotti come ritagli che galleggiano
   Un solo sistema: il ritaglio grande, la stessa ombra, una macchia del kit dietro, e può uscire dal bordo.
   ===================================================================== */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prodotto__img, .piatto__img, .formato-h__img, .trio, .toast, .combo__piatto, .combo__patatine, .twister__img, .volo__piatto { filter: var(--ombra-prodotto); }
.piatto__img--taglio { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16%); mask-image: linear-gradient(to left, transparent 0, #000 16%); }

/* l'adesivo del prezzo: una macchia del marchio, girata */
.adesivo {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25em;
  padding: 0.55em 0.95em; min-width: 5.2em;
  border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%;
  background: var(--marrone); color: var(--crema);
  font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.02em; font-size: 17px; line-height: 1.05;
  transform: rotate(-7deg);
  box-shadow: 0 8px 16px -8px rgba(69, 43, 32, 0.55);
}
.adesivo--chiaro { background: var(--crema); color: var(--marrone); }

/* ---------- HOME · Il menu: quattro schede grandi, il piatto esce dall'alto ---------- */
.piatti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); margin-top: 140px; }
.piatto {
  position: relative; border-radius: 30px; padding: clamp(150px, 15vw, 196px) 22px 28px; text-align: center;
  transition: scale 160ms var(--ease-out);
}
.piatto--tortora { background: var(--crema-macchia); }
.piatto--salvia-chiara { background: var(--salvia-tenue); }
.piatto__foto { position: absolute; left: 50%; top: -112px; width: 92%; aspect-ratio: 1 / 1; transform: translateX(-50%); pointer-events: none; }
.piatto__foto .macchia { position: absolute; left: 8%; top: 10%; width: calc(100% - 8% - 8%); height: calc(100% - 10% - 6%); fill: var(--crema); }
.piatto--tortora .piatto__foto .macchia { fill: var(--salvia-tenue); }
.piatto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
.piatto .adesivo { position: absolute; top: clamp(96px, 10vw, 128px); right: 14px; z-index: 2; }
.piatto h3 { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -0.03em; margin-bottom: 8px; }
.piatto__link { text-decoration: none; color: inherit; }
.piatto__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; }
.piatto__link:focus-visible { outline: none; }
.piatto:has(.piatto__link:focus-visible) { outline: 3px solid var(--salvia); outline-offset: 4px; }
.piatto__testo { font-size: clamp(16px, 1.35vw, 19px); max-width: 22ch; margin-inline: auto; }
.piatto:active { scale: 0.98; }
.piatto:active .piatto__img { transform: rotate(-5deg) translateY(-6px); }
@media (hover: hover) and (pointer: fine) {
  .piatto:hover .piatto__img { transform: rotate(-7deg) translateY(-12px) scale(1.04); }
}

/* ---------- HOME · Creala tu: i tre formati come la tavola «regole di composizione» ---------- */
.come__testa--centro { margin: 0 auto 36px; text-align: center; max-width: 820px; }
.come__testa--centro p { margin-inline: auto; max-width: 34ch; }
.come__testa--centro .come__raggi { left: auto; right: -10px; top: -40px; }
.formati-h { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formato-h { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(14px, 2.4vw, 40px); }
.formato-h + .formato-h { border-left: 2px solid rgba(254, 253, 248, 0.35); }
.formato-h__foto { position: relative; width: 100%; height: 290px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px; }
.formato-h__foto .macchia { position: absolute; width: 92%; height: 66%; left: 4%; bottom: 2%; fill: var(--salvia-chiara); }
.formato-h:nth-child(2) .formato-h__foto .macchia { fill: var(--marrone-medio); }
.formato-h__img { position: relative; width: auto; height: 100%; max-width: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
.formato-h__foto--snack .formato-h__img { height: 85%; }
.formato-h__foto--piadina .formato-h__img { height: 88%; }
.formato-h h3 { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -0.03em; }
.formato-h .adesivo { position: absolute; top: 18px; right: clamp(8px, 2vw, 34px); z-index: 2; font-size: 19px; }
.formato-h__nota { font-size: 16px; margin-top: 4px; opacity: 0.95; }
.dosi { display: grid; gap: 8px; margin-top: 16px; width: 100%; max-width: 270px; text-align: left; }
.dose { display: flex; align-items: center; gap: 12px; padding: 5px 16px 5px 5px; border-radius: var(--pillola); background: rgba(254, 253, 248, 0.16); font-weight: 700; font-size: 16px; }
.dose__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--crema); }
.dose__ico img { width: 30px; height: 30px; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .formato-h:hover .formato-h__img { transform: translateY(-8px) rotate(-3deg); } }
.come .come__chiusura { justify-content: center; text-align: center; }

/* il motivo del marchio, in crema sul verde (come nella brochure): una striscia sul bordo della fascia */
.motivo-bordo {
  height: 74px; margin-top: 48px; background-color: var(--crema);
  -webkit-mask: url("/assets/img/motivo-maschera.webp") left center / auto 150px repeat-x;
  mask: url("/assets/img/motivo-maschera.webp") left center / auto 150px repeat-x;
  opacity: 0.9;
}
.come:has(> .motivo-bordo) { padding-bottom: 0; }

/* ---------- HOME · Pokè Vegan: il piatto che galleggia ---------- */
.prodotto { position: relative; }
.prodotto__macchia { position: absolute; left: 4%; top: 6%; width: calc(100% - 4% - 4%); height: calc(100% - 6% - 6%); fill: var(--salvia-tenue); z-index: 0; }
.prodotto__macchia--crema { fill: var(--crema); }
.prodotto__macchia--marrone { fill: var(--marrone-medio); }
.prodotto__macchia--salvia { fill: var(--salvia-chiara); }
.prodotto__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.vegan__foto.prodotto { max-width: 470px; margin-left: auto; }
.vegan__foto .prodotto__img { transform: rotate(-8deg); }

/* ---------- HOME · Dove siamo: il mosaico delle foto vere ---------- */
.locale { overflow: hidden; }
.locale__griglia { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: center; min-height: 0; padding-top: 96px; padding-bottom: 96px; }
.locale__testo { max-width: none; padding: 0; }
.mosaico { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(380px, 38vw, 540px); }
.mosaico__foto { position: relative; z-index: 1; margin: 0; border-radius: 24px; overflow: hidden; background: var(--crema-macchia); }
.mosaico__foto--grande { grid-row: 1 / span 2; }
.mosaico__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mosaico__foto:hover img { transform: scale(1.04); } }
.mosaico .macchia { z-index: 0; }
.mosaico .m-l1 { left: -46px; bottom: -40px; top: auto; width: 150px; height: 130px; fill: var(--crema-macchia); }
.mosaico .m-l2 { right: -30px; top: -40px; left: auto; bottom: auto; width: 110px; height: 140px; fill: var(--marrone-medio); }
.mosaico .m-l3 { right: 22%; bottom: -36px; left: auto; width: 96px; height: 90px; fill: var(--salvia-media); }

/* ---------- /MENU · ogni categoria come nella brochure ---------- */
.pagina-hero--menu .pagina-hero__griglia { grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); }
.volo { position: relative; }
.volo__piatto { position: relative; z-index: 2; width: 112%; max-width: none; margin-left: -6%; }
.volo__pezzo { position: absolute; z-index: 3; width: 92px; height: auto; filter: drop-shadow(0 10px 10px rgba(69, 43, 32, 0.22)); pointer-events: none; }
.pagina-hero--menu .volo__pezzo--1 { left: -4%; top: 8%; width: 88px; }
.pagina-hero--menu .volo__pezzo--2 { right: -2%; top: -2%; width: 104px; }
.pagina-hero--menu .volo__pezzo--3 { right: 2%; bottom: 4%; width: 112px; }
.pagina-hero--menu .volo__pezzo--4 { left: 8%; bottom: -2%; width: 96px; }
.pagina-hero--menu .volo__pezzo--5 { left: 42%; top: -8%; width: 74px; }

.categoria { position: relative; padding: 84px 0; overflow-x: clip; scroll-margin-top: 170px; }
.categoria--tortora { background: var(--crema-macchia); }
.categoria--salvia-chiara { background: var(--salvia-tenue); }
.categoria--verde { background: var(--salvia); color: var(--crema); }
.categoria--stretta { padding: 72px 0; }
.categoria__griglia { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; }
.categoria--rovescio .categoria__visivo { order: -1; }
.categoria__titolo { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-size: clamp(36px, 4.2vw, 62px); margin-bottom: 16px; }
.categoria__prezzo { display: inline-block; margin-left: 0.25em; font-weight: 500; color: var(--salvia); letter-spacing: -0.02em; }
.categoria--salvia-chiara .categoria__prezzo { color: var(--marrone); }
.categoria__intro { font-size: clamp(17px, 1.45vw, 20px); max-width: 48ch; }
.categoria__intro + .categoria__intro { margin-top: 6px; }
.categoria__intro--stacco { margin-top: 36px; font-weight: 600; }
.categoria__intro--forte { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }
.categoria__fascia { margin: 26px 0 2px; }
.categoria__fascia span { display: inline-block; padding: 5px 16px; border-radius: var(--pillola); background: var(--salvia); color: var(--crema); font-family: var(--font-titoli); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.categoria--salvia-chiara .categoria__fascia span { background: var(--marrone); }

/* la lista delle ricette: nome forte, ingredienti, prezzo a destra; il pulsante di WhatsApp leggero */
.ricette { margin-top: 18px; }
.proposta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 2px; align-items: center;
  padding: 14px 10px; margin: 0 -10px; border-radius: 16px;
  border-bottom: 1.5px dashed rgba(69, 43, 32, 0.18);
  transition: background-color 200ms ease;
}
.categoria--verde .proposta, .twister .proposta { border-bottom-color: rgba(254, 253, 248, 0.3); }
.proposta:last-child { border-bottom: 0; }
.proposta__testa { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proposta h3 { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(17px, 1.35vw, 19px); letter-spacing: 0.01em; text-transform: uppercase; }
.proposta__prezzo { margin-left: auto; font-family: var(--font-titoli); font-weight: 800; font-size: 18px; color: var(--salvia); white-space: nowrap; }
.categoria--verde .proposta__prezzo, .twister .proposta__prezzo { color: var(--crema); }
.chips { display: inline-flex; padding-left: 6px; }
.chips img { width: 34px; height: 34px; margin-left: -7px; padding: 3px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 1.5px rgba(69, 43, 32, 0.1); object-fit: contain; }
.proposta__ingredienti { grid-column: 1; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.45; max-width: 50ch; }
.ordina {
  grid-column: 2; justify-self: end; align-self: end;
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--pillola);
  border: 1.5px solid rgba(69, 43, 32, 0.35); color: var(--marrone); text-decoration: none;
  font-weight: 700; font-size: 13.5px; white-space: nowrap;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}
.ordina:active { transform: scale(0.97); }
.categoria--verde .ordina, .twister .ordina { border-color: rgba(254, 253, 248, 0.55); color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .ordina:hover { background: var(--marrone); border-color: var(--marrone); color: var(--crema); }
  .categoria--verde .ordina:hover, .twister .ordina:hover { background: var(--crema); color: var(--marrone); }
  .proposta[data-piatto]:hover { background: rgba(254, 253, 248, 0.6); }
}
.proposta.attiva { background: rgba(254, 253, 248, 0.6); }
.ricette--righe .proposta__testa { grid-column: 1; }
.ricette--righe .ordina { grid-row: 1; }
.ricette--righe .proposta__prezzo { margin-left: auto; }
.ricette--due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.ricette--due .proposta { border-bottom: 1.5px dashed rgba(69, 43, 32, 0.18); }

/* i tre piatti della pokè, sovrapposti: passando sulla ricetta, il suo piatto viene avanti */
.piatti-trio { position: relative; height: clamp(420px, 40vw, 580px); }
.piatti-trio .prodotto__macchia { left: 6%; top: 8%; width: calc(100% - 6% - 4%); height: calc(100% - 8% - 4%); fill: var(--salvia-tenue); }
.trio { position: absolute; z-index: 1; height: auto; transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.trio--1 { width: 56%; left: 0; top: 2%; }
.trio--2 { width: 54%; right: 0; top: 12%; z-index: 2; }
.trio--3 { width: 62%; left: 20%; bottom: 0; z-index: 3; }
.piatti-trio.con-luce .trio:not(.in-luce) { opacity: 0.55; }
.trio.in-luce { z-index: 4; transform: scale(1.07) translateY(-6px) rotate(-4deg); }

.volo--piadina { min-height: 440px; display: flex; align-items: center; }
.volo--piadina .prodotto__macchia { left: 6%; top: 10%; width: calc(100% - 6% - 6%); height: calc(100% - 10% - 4%); }
.volo--piadina .prodotto__img { width: 92%; margin-left: 4%; transform: rotate(-6deg); }
.volo--piadina .volo__pezzo--1 { left: -2%; top: 4%; width: 104px; }
.volo--piadina .volo__pezzo--2 { right: 0; top: 0; width: 96px; }
.volo--piadina .volo__pezzo--3 { left: 2%; bottom: 2%; width: 100px; }
.volo--piadina .volo__pezzo--4 { right: 6%; bottom: -2%; width: 110px; }
.categoria__visivo.prodotto .prodotto__img { width: 96%; margin: 0 auto; }

.toast-duo { position: relative; height: clamp(380px, 34vw, 480px); }
.toast-duo .prodotto__macchia { left: 4%; top: 10%; width: calc(100% - 4% - 2%); height: calc(100% - 10% - 6%); }
.toast { position: absolute; z-index: 1; height: auto; transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.toast--1 { width: 82%; right: -4%; top: 0; transform: rotate(5deg); }
.toast--2 { width: 92%; left: -2%; bottom: 2%; transform: rotate(-5deg); z-index: 2; }
.toast-duo.con-luce .toast:not(.in-luce) { opacity: 0.55; }
.toast.in-luce { z-index: 4; transform: scale(1.05) rotate(-2deg); }

.combo { position: relative; min-height: 420px; display: flex; align-items: center; }
.combo .prodotto__macchia { left: 6%; top: 8%; width: calc(100% - 6% - 6%); height: calc(100% - 8% - 2%); }
.combo__piatto { position: relative; z-index: 1; width: 90%; height: auto; margin-left: 2%; }
.combo__patatine { position: absolute; z-index: 2; width: 28%; height: auto; right: 0; bottom: -2%; transform: rotate(9deg); }

/* Pata Twister: la fascia scura */
.twister { position: relative; background: var(--marrone); color: var(--crema); padding: 56px 0 0; overflow-x: clip; }
.twister__dentro { display: flex; align-items: center; gap: clamp(20px, 4vw, 64px); }
.twister__img { width: clamp(150px, 20vw, 280px); height: auto; margin-top: -110px; flex: none; transform: rotate(-8deg); }
.ricette--twister { flex: 1; margin: 0; }
.ricette--twister .proposta { border: 0; }
.ricette--twister h3 { font-weight: 300; font-size: clamp(36px, 5vw, 72px); letter-spacing: 0.04em; }
.ricette--twister .proposta__prezzo { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; }
.motivo-bordo--basso { margin-top: 24px; background-color: var(--salvia-media); opacity: 1; }

/* Dolci: i dieci gusti come gettoni tondi */
.categoria__griglia--dolci { margin-bottom: 72px; }
.menu-gusti { font-weight: 700; color: var(--salvia); margin-top: 6px; max-width: 48ch; }
.gusti { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 10px; margin-top: 24px; }
.gusto a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.gusto__img { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--crema); box-shadow: 0 10px 18px -12px rgba(69, 43, 32, 0.6); transition: transform 220ms var(--ease-out); }
.gusto__img img { width: 66px; height: 66px; object-fit: contain; }
.gusto__nome { font-weight: 800; font-size: 14px; text-align: center; }
.gusto a:active .gusto__img { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .gusto a:hover .gusto__img { transform: translateY(-6px) rotate(-6deg); } }
.dolce { position: relative; min-height: 420px; display: flex; align-items: center; }
.dolce .prodotto__macchia { left: 8%; top: 10%; width: calc(100% - 8% - 8%); height: calc(100% - 10% - 6%); }
.dolce .prodotto__img { position: relative; z-index: 1; width: 96%; height: auto; transform: rotate(-10deg); }
.categoria__griglia--centrifughe { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.categoria__griglia--centrifughe .prodotto { max-width: 400px; }

/* la chiusura del menu: gli ingredienti del Creala tu che piovono */
.pioggia { position: relative; height: 360px; }
.pioggia img { position: absolute; width: 118px; height: auto; filter: drop-shadow(0 12px 12px rgba(40, 50, 30, 0.3)); }
.pioggia img:nth-child(1) { left: 6%; top: 6%; }
.pioggia img:nth-child(2) { left: 40%; top: 0; width: 132px; }
.pioggia img:nth-child(3) { right: 4%; top: 12%; }
.pioggia img:nth-child(4) { left: 18%; top: 44%; width: 126px; }
.pioggia img:nth-child(5) { right: 22%; top: 46%; width: 108px; }
.pioggia img:nth-child(6) { left: 4%; bottom: 0; width: 96px; }
.pioggia img:nth-child(7) { right: 6%; bottom: 2%; width: 112px; }

/* ---------- /CREALA-TU · la ciotola vista dall'alto ---------- */
.ciotola {
  --d: 176px;
  position: relative; display: block; width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--crema);
  border: calc(var(--d) * 0.07) solid var(--kraft);
  box-shadow: inset 0 calc(var(--d) * 0.035) calc(var(--d) * 0.08) rgba(69, 43, 32, 0.22), 0 18px 26px -14px rgba(69, 43, 32, 0.55);
}
.ciotola--piccola { --d: 146px; }
.ciotola--grande { --d: 280px; margin: 0 auto; }
.ciotola__simbolo { position: absolute; left: 50%; top: 50%; width: 36%; height: auto; transform: translate(-50%, -50%); opacity: 0.45; transition: opacity 250ms ease; }
.ciotola.piena .ciotola__simbolo { opacity: 0; }
.ciotola__base { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.ciotola__base img { position: absolute; width: 92%; height: 92%; object-fit: contain; animation: base-entra 520ms var(--ease-out) both; }
.ciotola__strato { position: absolute; inset: 0; }
.pezzo { position: absolute; width: 30%; height: auto; translate: -50% -50%; filter: drop-shadow(0 6px 6px rgba(69, 43, 32, 0.28)); animation: pezzo-cade 640ms linear(0, 0.29 7%, 0.88 18%, 1.09 25%, 1.13 29%, 1.08 36%, 0.98 47%, 0.99 58%, 1) both; }
.pezzo--salsa { width: 24%; }
.pezzo--topping { width: 16%; }
.pezzo.via { animation: pezzo-via 180ms var(--ease-out) forwards; }
@keyframes pezzo-cade { from { opacity: 0; transform: translateY(-70%) scale(1.3) rotate(var(--r0, 0deg)); } 30% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); } }
@keyframes pezzo-via { to { opacity: 0; transform: scale(0.6) rotate(var(--r, 0deg)); } }
@keyframes base-entra { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.piatto-vivo { position: relative; margin: -4px auto 18px; max-width: 300px; }
.piadina-viva { position: relative; width: 100%; aspect-ratio: 1188 / 864; }
.piadina-viva[hidden] { display: none; }
.piadina-viva__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: var(--ombra-prodotto); }
.piadina-viva__img[hidden] { display: none; }
.piadina-viva .pezzo { width: 24%; }
.piadina-viva .pezzo--topping { width: 13%; }

/* i formati: la tavola «regole di composizione» */
.formati { gap: 16px; }
.formato { position: relative; grid-template-rows: auto auto auto 1fr; justify-items: center; text-align: center; padding: 24px 18px 22px; }
.formato__visivo { display: grid; place-items: center; height: 190px; width: 100%; margin-bottom: 8px; }
.formato__visivo--piadina img { width: 92%; height: auto; filter: var(--ombra-prodotto); transform: rotate(-6deg); }
.formato__nome { font-size: 24px; }
.formato__prezzo.adesivo { position: absolute; top: 14px; right: 12px; font-size: 18px; }
.formato__desc { width: 100%; }
.formato .dosi { margin: 12px auto 0; max-width: 240px; }
.formato .dose { display: flex; background: var(--crema); font-size: 15px; padding: 4px 14px 4px 4px; }
.formato .dose__ico { width: 34px; height: 34px; background: var(--crema-macchia); }
.formato .dose__ico img { width: 26px; height: 26px; }
.formato[aria-pressed="true"] .ciotola { box-shadow: inset 0 calc(var(--d) * 0.035) calc(var(--d) * 0.08) rgba(69, 43, 32, 0.22), 0 0 0 6px var(--salvia-chiara), 0 18px 26px -14px rgba(69, 43, 32, 0.55); }

.volo--creala { min-height: 440px; display: grid; place-items: center; }
.volo__piatto--bowl { width: 66%; margin: 0; }
.volo--creala .volo__pezzo { width: 96px; }
.volo--creala .volo__pezzo--1 { left: 4%; top: 8%; --dx: -60px; --dy: -40px; }
.volo--creala .volo__pezzo--2 { right: 4%; top: 4%; --dx: 60px; --dy: -50px; width: 108px; }
.volo--creala .volo__pezzo--3 { left: 0; top: 46%; --dx: -80px; --dy: 0px; width: 86px; }
.volo--creala .volo__pezzo--4 { right: 0; top: 44%; --dx: 80px; --dy: 10px; }
.volo--creala .volo__pezzo--5 { left: 10%; bottom: 2%; --dx: -50px; --dy: 50px; width: 90px; }
.volo--creala .volo__pezzo--6 { right: 12%; bottom: 0; --dx: 50px; --dy: 60px; width: 70px; }
.volo--creala .volo__pezzo--7 { left: 44%; top: -4%; --dx: 0px; --dy: -70px; width: 80px; }

/* ---------- /CONTATTI · il locale vero in alto, e due foto del posto ---------- */
.foto-locale { position: relative; display: grid; place-items: center; }
.foto-locale__img { position: relative; z-index: 1; width: min(440px, 100%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 30px; transform: rotate(2.5deg); box-shadow: 0 30px 40px -24px rgba(69, 43, 32, 0.55); }
.foto-locale .m-p1 { left: 2%; top: 10%; }
.foto-locale .m-p2 { right: 0; top: -2%; }
.foto-locale .m-p3 { left: 18%; bottom: -4%; }
.dove__griglia { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.dove .mappa { min-height: 300px; }
.dove .mappa__segnaposto { min-height: 300px; }
.coppia { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coppia__foto { position: relative; z-index: 1; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--crema-macchia); box-shadow: 0 24px 34px -24px rgba(69, 43, 32, 0.5); }
.coppia__foto:nth-of-type(2) { transform: translateY(36px); }
.coppia__foto img { width: 100%; height: 100%; object-fit: cover; }
.coppia .m-g1 { left: -30px; top: -30px; z-index: 0; }
.coppia .m-g2 { right: -20px; bottom: -40px; z-index: 0; }

/* ---------- il movimento del salto di livello (regole di Emil, come il 5-bis) ---------- */
@keyframes vola-entra { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(0.7) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes fluttua { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -10px; rotate: 6deg; } }
.pagina-hero .volo__pezzo { animation: vola-entra 900ms var(--ease-out) both, fluttua 5s var(--ease-in-out) 900ms infinite alternate; }
.pagina-hero .volo__pezzo--2 { animation-delay: 80ms, 1000ms; animation-duration: 900ms, 6s; }
.pagina-hero .volo__pezzo--3 { animation-delay: 160ms, 1100ms; animation-duration: 900ms, 4.6s; }
.pagina-hero .volo__pezzo--4 { animation-delay: 240ms, 1200ms; animation-duration: 900ms, 5.4s; }
.pagina-hero .volo__pezzo--5 { animation-delay: 320ms, 1300ms; animation-duration: 900ms, 6.4s; }
.pagina-hero .volo__pezzo--6 { animation-delay: 400ms, 1400ms; }
.pagina-hero .volo__pezzo--7 { animation-delay: 480ms, 1500ms; animation-duration: 900ms, 5.8s; }
.pagina-hero .volo__piatto { animation: foto-assesta 1400ms var(--ease-out) both; }
.categoria .volo__pezzo, .pioggia img { animation: fluttua 6s var(--ease-in-out) infinite alternate; }
.categoria .volo__pezzo:nth-of-type(even), .pioggia img:nth-child(even) { animation-duration: 7.5s; animation-delay: -2s; }
.js .twister__img.reveal.in { transform: rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
  .pagina-hero .volo__pezzo { animation: dissolvi 500ms ease both; }
  .categoria .volo__pezzo, .pioggia img { animation: none; }
  .pezzo { animation: dissolvi 200ms ease both; }
  .pezzo.via { animation: none; opacity: 0; }
  .ciotola__base img { animation: dissolvi 200ms ease both; }
  .trio, .toast, .piatto__img, .formato-h__img { transition-duration: 0.01ms; }
}

/* ---------- telefono e tablet ---------- */
@media (max-width: 1100px) {
  .piatti { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 150px; }
  .gusti { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .piatti { margin-top: 120px; }
  .formati-h { grid-template-columns: 1fr; gap: 44px; }
  .formato-h + .formato-h { border-left: 0; border-top: 2px solid rgba(254, 253, 248, 0.3); padding-top: 36px; }
  .formato-h__foto { height: 230px; }
  .dosi { max-width: 320px; }
  .motivo-bordo { height: 56px; margin-top: 36px; -webkit-mask-size: auto 112px; mask-size: auto 112px; }
  .vegan__foto.prodotto { max-width: 340px; margin: 0 auto 8px; width: 86%; }
  .locale__griglia { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; gap: 36px; }
  .mosaico { height: auto; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; }
  .mosaico__foto--grande { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .mosaico__foto:not(.mosaico__foto--grande) { aspect-ratio: 4 / 5; }
  .mosaico .m-l2 { right: -40px; top: -30px; width: 90px; height: 110px; }
  .pagina-hero--menu .pagina-hero__griglia { grid-template-columns: 1fr; }
  .volo__piatto { width: 100%; margin: 0; }
  .pagina-hero--menu .volo__pezzo { width: 64px; }
  .categoria { padding: 64px 0; scroll-margin-top: 130px; }
  .categoria__griglia, .categoria__griglia--centrifughe { grid-template-columns: 1fr; gap: 24px; }
  .categoria__visivo { order: -1; max-width: 420px; width: 100%; margin: 0 auto; }
  .piatti-trio { height: clamp(300px, 80vw, 400px); }
  .volo--piadina, .combo, .dolce { min-height: 0; }
  .volo--piadina .volo__pezzo { width: 64px; }
  .toast-duo { height: clamp(280px, 72vw, 360px); }
  .proposta { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 6px; margin: 0 -6px; }
  .proposta__ingredienti { grid-column: 1 / -1; }
  .proposta .ordina { grid-column: 1 / -1; justify-self: start; margin-top: 8px; min-height: 40px; }
  .ricette--righe .proposta__testa { grid-column: 1 / -1; }
  .ricette--righe .ordina { grid-row: auto; }
  .ricette--due { grid-template-columns: 1fr; }
  .chips img { width: 30px; height: 30px; }
  .twister { padding-top: 40px; }
  .twister__dentro { gap: 16px; }
  .twister__img { width: 132px; margin-top: -70px; }
  .ricette--twister h3 { font-size: 34px; }
  .gusti { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
  .gusto__img { width: 58px; height: 58px; }
  .gusto__img img { width: 46px; height: 46px; }
  .gusto__nome { font-size: 12.5px; }
  .pioggia { height: 220px; }
  .pioggia img { width: 78px; }
  .pioggia img:nth-child(2), .pioggia img:nth-child(4) { width: 86px; }
  .volo--creala { min-height: 0; padding: 24px 0 8px; }
  .volo--creala .volo__pezzo { width: 64px; }
  .formato { padding: 18px 14px; }
  .formato__visivo { height: 150px; }
  .foto-locale__img { width: min(340px, 86%); }
  .dove__griglia { grid-template-columns: 1fr; }
  .coppia { max-width: 420px; margin: 8px auto 40px; }
  .barra-creala__mini { display: block; flex: none; width: 46px; height: 46px; position: relative; }
  .barra-creala__mini .ciotola { --d: 280px; position: absolute; left: 0; top: 0; transform: scale(calc(46 / 280)); transform-origin: 0 0; }
  .barra-creala__mini .piadina-viva { position: absolute; left: 0; top: 0; width: 280px; transform: scale(calc(46 / 280)); transform-origin: 0 0; }
  .barra-creala__totale small { display: block; font-weight: 700; font-size: 12px; opacity: 0.75; }
}
@media (max-width: 760px) {
  .piatti { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margine)); padding: 118px var(--margine) 10px; scroll-padding-inline: var(--margine); scrollbar-width: none; margin-top: 8px; }
  .piatti::-webkit-scrollbar { display: none; }
  .piatto { flex: 0 0 76%; scroll-snap-align: start; padding-top: 150px; }
  .piatto__foto { top: -100px; width: 84%; }
  .piatto .adesivo { top: 96px; }
}
/* la foto vera dei dolci al bancone, come una polaroid appoggiata */
.polaroid { position: absolute; z-index: 2; right: -2%; bottom: -6%; width: 34%; margin: 0; padding: 8px 8px 22px; background: #FFFFFF; border-radius: 6px; transform: rotate(7deg); box-shadow: 0 18px 28px -16px rgba(69, 43, 32, 0.55); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
@media (max-width: 900px) { .polaroid { width: 36%; right: 0; bottom: -4%; } }
.volo__strato { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.barra-creala__mini .pezzo, .barra-creala__mini .ciotola__base img { animation: none; }
.piadina-viva.senza-base .piadina-viva__img { opacity: 0.55; }
.ciotola[hidden] { display: none; }

/* telefono: il menu più corto e più calmo (piatti un po' più piccoli, il pulsante accanto agli ingredienti) */
@media (max-width: 900px) {
  .categoria { padding: 52px 0; }
  .categoria__visivo { max-width: 310px; }
  .piatti-trio { height: 300px; max-width: 340px; }
  .toast-duo { height: 250px; }
  .categoria__titolo { font-size: 34px; margin-bottom: 10px; }
  .proposta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 4px; margin: 0 -4px; }
  .proposta__ingredienti { grid-column: 1; font-size: 14.5px; }
  .proposta .ordina { grid-column: 2; justify-self: end; align-self: end; margin-top: 0; min-height: 40px; padding: 0 12px; font-size: 13px; }
  .ricette--righe .proposta__testa { grid-column: 1; }
  .ricette--righe .ordina { grid-row: 1; align-self: center; }
  .proposta h3 { font-size: 15.5px; }
  .categoria__fascia { margin-top: 18px; }
  .categoria__griglia--dolci { margin-bottom: 40px; }
}

/* i formati del compositore, da tablet e telefono: il disegno a sinistra, il nome accanto, le dosi sotto */
@media (max-width: 1100px) {
  .formati { grid-template-columns: 1fr; gap: 12px; }
  .formato { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; justify-items: start; text-align: left; column-gap: 16px; padding: 16px 16px 16px 14px; }
  .formato__visivo { grid-row: 1; grid-column: 1; width: 112px; height: 112px; margin: 0; }
  .formato .ciotola { --d: 104px; }
  .formato .ciotola--piccola { --d: 88px; }
  .formato__nome { grid-row: 1; grid-column: 2; font-size: 22px; }
  .formato__desc { grid-row: 2; grid-column: 1 / -1; }
  .formato .dosi { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; margin: 12px 0 0; }
  .formato .dose { padding: 3px 11px 3px 3px; font-size: 14px; white-space: nowrap; }
  .formato .dose__ico { width: 28px; height: 28px; }
  .formato .dose__ico img { width: 22px; height: 22px; }
}
@media (max-width: 900px) {
  .piatto-vivo { max-width: 240px; }
  .piatto-vivo .ciotola--grande { --d: 236px; }
  .barra-creala__totale strong { white-space: nowrap; }
}

/* telefono: i tre formati della fascia verde in una riga che scorre col dito */
@media (max-width: 900px) {
  .come:has(> .motivo-bordo) { padding-top: 60px; }
  .come__testa--centro .come__raggi { display: none; }
  .formati-h {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--margine)); padding: 12px var(--margine) 8px; scroll-padding-inline: var(--margine);
    scrollbar-width: none;
  }
  .formati-h::-webkit-scrollbar { display: none; }
  .formato-h { flex: 0 0 78%; scroll-snap-align: start; padding: 18px 14px 22px; border-radius: 26px; background: rgba(254, 253, 248, 0.1); }
  .formato-h + .formato-h { border: 0; padding-top: 18px; }
  .formato-h__foto { height: 200px; }
  .dosi { gap: 6px; }
  .dose { font-size: 15px; padding: 4px 14px 4px 4px; }
  .dose__ico { width: 32px; height: 32px; }
  .dose__ico img { width: 25px; height: 25px; }
}

.ciotola__base .b1 { left: -18%; top: -14%; rotate: -12deg; }
.ciotola__base .b2 { left: 28%; top: -20%; rotate: 24deg; }
.ciotola__base .b3 { left: -14%; top: 30%; rotate: 160deg; }
.ciotola__base .b4 { left: 26%; top: 26%; rotate: 70deg; }

/* le migliorate trasparenti restano intere (margini trasparenti): qui si compensa la misura del soggetto */
.twister { --tw: clamp(380px, 44vw, 620px); }
.twister__dentro { position: relative; padding-left: calc(var(--tw) * 0.42 + 28px); min-height: calc(var(--tw) * 0.32); }
.twister__img { position: absolute; left: calc(var(--tw) * -0.3 + var(--margine)); top: calc(-110px - var(--tw) * 0.07); width: var(--tw); max-width: none; margin: 0; }
.js .twister__img.reveal.in, .twister__img { transform: rotate(-8deg); }
.combo__patatine { width: 42%; right: -8%; bottom: -6%; }
.combo__piatto { width: 112%; margin-left: -8%; }
.categoria__griglia--centrifughe .prodotto__img { width: 128%; max-width: none; margin-left: -18%; }
@media (max-width: 900px) {
  .twister { --tw: 300px; }
  .twister__dentro { padding-left: calc(var(--tw) * 0.42 + 4px); }
  .twister__img { top: calc(-70px - var(--tw) * 0.07); }
}

/* =====================================================================
   CONTROLLO INDIPENDENTE, giro 1 (21/10/2026)
   ===================================================================== */
/* 4-5 · i lati tagliati delle foto ora sfumano nel file (scontorna.py): niente maschera CSS, niente cunei */
.piatto__img--taglio { -webkit-mask-image: none; mask-image: none; }

/* 3 · fascia verde della home: la bowl senza flacone, coi lati che sfumano, sulle macchie del kit */
.formato-h__foto { height: 320px; }
.formato-h__foto .macchia { width: 86%; height: 72%; left: 7%; bottom: 0; }
.formato-h__foto--snack .formato-h__img { height: 85%; }
.formato-h__foto--piadina .formato-h__img { height: 78%; transform: rotate(-6deg); }

/* 8 · la scheda Avocado toast: la macchia dietro nel colore del kit, non bianca */
.piatto--salvia-chiara .piatto__foto .macchia { fill: var(--salvia-chiara); }
.piatto__foto .macchia { top: 22%; height: 64%; }

/* 6 · i due avocado toast: quello al pollo dietro, a sinistra; il suo lato tagliato sotto quello al salmone */
.toast--1 { width: 82%; left: -6%; right: auto; top: 0; transform: rotate(-5deg); }
.toast--2 { width: 90%; right: -6%; left: auto; bottom: 4%; transform: rotate(4deg); }

/* 7 · la testa del menu: gli ingredienti volano intorno al piatto, mai sopra */
.volo--menu { padding: 64px 56px 56px; }
.volo--menu .volo__piatto { width: 100%; margin: 0; }
.pagina-hero--menu .volo__pezzo { width: 64px; }
.pagina-hero--menu .volo__pezzo--1 { left: 0; top: 36%; }
.pagina-hero--menu .volo__pezzo--2 { right: 2%; top: 0; width: 70px; }
.pagina-hero--menu .volo__pezzo--3 { right: 0; bottom: 30%; }
.pagina-hero--menu .volo__pezzo--4 { left: 6%; bottom: 0; }
.pagina-hero--menu .volo__pezzo--5 { left: 34%; top: 0; width: 58px; }

/* 9-10 · le righe del menu: una regola sola, il prezzo in una colonna fissa a destra */
.proposta { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 16px; row-gap: 4px; align-items: start; }
.proposta__testa { grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 34px; }
.proposta__prezzo { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0; text-align: right; }
.proposta__ingredienti { grid-column: 1; grid-row: 2; }
.proposta .ordina { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }
.proposta:not(.proposta--prezzo) { grid-template-columns: minmax(0, 1fr) auto; }
.ricette--righe .proposta { row-gap: 8px; }
.ricette--righe .proposta .ordina { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
.ricette--righe .proposta__testa { grid-column: 1; }
.ricette--righe .ordina { align-self: start; }
.ricette--due .proposta { margin: 0; }

/* 12 · da computer il prodotto resta accanto alla sua lista mentre si scorre */
@media (min-width: 901px) {
  .categoria__griglia { align-items: start; }
  .categoria__visivo { position: sticky; top: 190px; }
  .categoria__griglia--dolci .categoria__visivo, .categoria__griglia--centrifughe .categoria__visivo { top: 170px; }
}

/* 13 · Pata Twister: grassetto, una riga, prezzo e pulsante allineati */
.twister__dentro { padding-left: calc(var(--tw) * 0.5 + 24px); }
.ricette--twister .proposta { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 20px; padding: 10px 0; margin: 0; }
.ricette--twister .proposta__testa { grid-column: 1; grid-row: 1; }
.ricette--twister .proposta__prezzo { grid-column: 2; grid-row: 1; }
.ricette--twister .proposta .ordina { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
.ricette--twister h3 { font-weight: 800; font-size: clamp(22px, 4.4vw, 64px); letter-spacing: 0.01em; white-space: nowrap; }

/* 15 · piccoli allineamenti */
.passo-c__nota { margin-top: 18px; }
.formati + .passo-c__nota { margin-top: 20px; }
.ordine { align-items: start; }
.ordine__passo { grid-template-rows: 88px auto; align-items: center; align-content: start; }
.ordine__passo p { align-self: start; }

/* 2 · la testa del Creala tu: la ciotola del compositore che si riempie da sola */
.hero-ciotola { position: relative; display: grid; place-items: center; min-height: 500px; }
.ciotola--hero { --d: 380px; position: relative; z-index: 2; }
.ciotola__base--hero img { animation-delay: 150ms; }
.ciotola--hero .pezzo { width: 31%; }
.ciotola--hero .pezzo--topping { width: 17%; }
.ciotola--hero .h1 { animation-delay: 450ms; }
.ciotola--hero .h2 { animation-delay: 650ms; }
.ciotola--hero .h3 { animation-delay: 850ms; }
.ciotola--hero .h4 { animation-delay: 1050ms; }
.ciotola--hero .h5 { animation-delay: 1250ms; }
.ciotola--hero .h6 { animation-delay: 1450ms; }
.ciotola--hero .h7 { animation-delay: 1550ms; }
.ciotola--hero .pezzo { left: 0; top: 0; }
.orbita { position: absolute; z-index: 3; left: 50%; top: 50%; width: calc(380px + 150px); height: calc(380px + 150px); translate: -50% -50%; animation: gira 40s linear infinite; pointer-events: none; }
.orbita__pezzo { position: absolute; width: 70px; height: auto; filter: drop-shadow(0 8px 8px rgba(69, 43, 32, 0.25)); animation: gira 40s linear infinite reverse; }
.orbita__pezzo--1 { left: -4px; top: 50%; translate: 0 -50%; }
.orbita__pezzo--2 { right: -4px; top: 18%; }
@keyframes gira { to { rotate: 360deg; } }
.hero-ciotola .m-p1 { left: 2%; top: 4%; }
.hero-ciotola .m-p2 { right: 2%; top: 2%; }
.hero-ciotola .m-p3 { left: 12%; bottom: 0; }

@media (max-width: 900px) {
  /* 1 · la barra del telefono del Creala tu: due righe, il pulsante intero sotto */
  .compositore.attivo .barra-creala { flex-wrap: wrap; row-gap: 8px; padding-top: 10px; }
  .barra-creala__totale { flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .barra-creala__totale small { display: inline; }
  .barra-creala .btn { flex: 1 1 100%; min-height: 48px; font-size: 15px; white-space: normal; }
  body:has(.compositore.attivo) { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

  .hero-ciotola { min-height: 0; padding: 40px 0 30px; }
  .ciotola--hero { --d: min(250px, 66vw); }
  .orbita { width: calc(min(250px, 66vw) + 100px); height: calc(min(250px, 66vw) + 100px); }
  .orbita__pezzo { width: 48px; }

  .volo--menu { padding: 46px 30px 40px; }
  .pagina-hero--menu .volo__pezzo { width: 44px; }
  .pagina-hero--menu .volo__pezzo--2 { width: 48px; }
  .pagina-hero--menu .volo__pezzo--5 { width: 40px; }

  /* 10 · da telefono: nome, ingredienti tondi e prezzo in alto; gli ingredienti larghi; il pulsante piccolo sotto */
  .proposta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .proposta__ingredienti { grid-column: 1 / -1; }
  .proposta .ordina, .ricette--righe .proposta .ordina { grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: start; margin-top: 6px; min-height: 36px; padding: 0 12px; font-size: 12.5px; }
  .ricette--righe .proposta .ordina { grid-row: 2; }
  .ricette--twister .proposta { grid-template-columns: minmax(0, 1fr) auto; }
  .ricette--twister .proposta .ordina { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .twister { --tw: 260px; }
  .twister__dentro { padding-left: calc(var(--tw) * 0.48); min-height: 110px; }
  .ricette--twister h3 { font-size: 24px; }

  .vegan__nota { padding: 10px 12px; font-size: 15px; line-height: 1.45; }
  .ordine__passo { grid-template-rows: 72px auto; }
}
@media (max-width: 360px) {
  .ricette--twister h3 { font-size: 21px; }
  .twister { --tw: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .ciotola--hero .pezzo, .ciotola__base--hero img { animation: none; opacity: 1; }
  .orbita, .orbita__pezzo { animation: none; }
}
.ciotola--hero { --d: 420px; }
.orbita { width: calc(420px + 150px); height: calc(420px + 150px); }
.ciotola--hero .pezzo { width: 36%; }
.ciotola--hero .pezzo--topping { width: 20%; }
@media (max-width: 900px) {
  .ciotola--hero { --d: min(260px, 68vw); }
  .orbita { width: calc(min(260px, 68vw) + 96px); height: calc(min(260px, 68vw) + 96px); }
  .volo--menu { padding: 58px 50px 48px; }
  .pagina-hero--menu .volo__pezzo, .pagina-hero--menu .volo__pezzo--2 { width: 42px; }
  .pagina-hero--menu .volo__pezzo--1 { left: 0; top: 40%; }
  .pagina-hero--menu .volo__pezzo--3 { right: 0; bottom: 34%; }
  .pagina-hero--menu .volo__pezzo--4 { left: 4%; bottom: 0; }
}
@media (max-width: 900px) {
  /* 13 · Pata Twister da telefono: il nome intero su una riga, sotto il prezzo e il pulsante, allineati */
  .twister { --tw: 220px; }
  .twister__dentro { padding-left: calc(var(--tw) * 0.46); min-height: 96px; }
  .ricette--twister .proposta { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  .ricette--twister .proposta__testa { grid-column: 1 / -1; grid-row: 1; }
  .ricette--twister .proposta__prezzo { grid-column: 1; grid-row: 2; justify-self: start; }
  .ricette--twister .proposta .ordina { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; }
  .ricette--twister h3 { font-size: clamp(20px, 6.4vw, 28px); }
}

/* =====================================================================
   CONTROLLO INDIPENDENTE, giro 2 (21/10/2026)
   ===================================================================== */
/* l'avviso del cambio di formato, in cima ai passi */
.avviso--cambio { margin: 14px 0 0; }

/* 1 · la bowl della fascia verde: larga com'è, senza flacone; le misure uguali per Snack e Regular */
.formato-h__foto { height: 300px; }
.formato-h__img { height: auto; max-height: 100%; width: auto; max-width: 100%; }
.formato-h__foto--snack .formato-h__img { max-height: 85%; }
.formato-h__foto .macchia { width: 90%; height: 70%; left: 5%; }

/* 5 · i due avocado toast: quello al pollo dietro a sinistra (il lato tagliato sfuma arrotondato nel file),
   quello al salmone davanti a destra */
.toast--1 { width: 78%; left: -2%; top: 2%; transform: rotate(-4deg); }
.toast--2 { width: 90%; right: -6%; bottom: 2%; transform: rotate(4deg); }

@media (max-width: 1100px) {
  /* 2 · i formati del compositore: l'adesivo del prezzo sull'angolo del disegno, il nome su una riga */
  .formato__prezzo.adesivo { top: 6px; left: 70px; right: auto; font-size: 15px; padding: 0.45em 0.75em; min-width: 0; }
  .formato__nome { white-space: nowrap; }
}
@media (max-width: 900px) {
  /* 3 · la ciotola della testa e i pezzi che le girano intorno restano dentro lo schermo */
  .ciotola--hero { --d: min(250px, 62vw); }
  .orbita { width: min(calc(min(250px, 62vw) + 76px), calc(100vw - 24px)); height: min(calc(min(250px, 62vw) + 76px), calc(100vw - 24px)); }
  .orbita__pezzo { width: 42px; }
  .orbita__pezzo--1 { left: 0; }
  .orbita__pezzo--2 { right: 0; }
  .hero-ciotola { overflow: hidden; }

  /* 4 · la barra del telefono, compatta (~88 px): mini ciotola, totale e conto in una riga, il pulsante sotto */
  .compositore.attivo .barra-creala { row-gap: 6px; column-gap: 10px; padding: 7px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .barra-creala__mini { width: 30px; height: 30px; }
  .barra-creala__mini .ciotola { transform: scale(calc(30 / 280)); }
  .barra-creala__mini .piadina-viva { transform: scale(calc(30 / 280)); }
  .barra-creala__totale { font-size: 12px; gap: 6px; align-items: center; }
  .barra-creala__totale strong { font-size: 18px; }
  .barra-creala .btn { min-height: 42px; padding: 0.5em 0.9em; font-size: 14px; white-space: nowrap; }
  body:has(.compositore.attivo) { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  /* il pulsante del riepilogo: l'etichetta intera e la freccia dentro il pulsante */
  .ricetta { padding: 22px 16px 18px; }
  .ricetta__invia { font-size: 15px; padding: 0.85em 1em; white-space: normal; text-align: center; line-height: 1.2; gap: 0.45em; }
  .ricetta__invia .ico { flex: none; }
}
@media (max-width: 360px) {
  .formato { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; padding: 14px 12px 14px 10px; }
  .formato__visivo { width: 88px; height: 88px; }
  .formato .ciotola { --d: 82px; }
  .formato .ciotola--piccola { --d: 70px; }
  .formato__nome { font-size: 19px; }
  .formato__prezzo.adesivo { left: 52px; font-size: 14px; }
}
@media (max-width: 900px) {
  .compositore.attivo .barra-creala { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); row-gap: 5px; }
  .barra-creala .btn { min-height: 40px; }
}
@media (max-width: 900px) {
  .hero-ciotola { overflow: visible; }
  .orbita { width: min(calc(min(250px, 62vw) + 76px), calc(100vw - 40px)); height: min(calc(min(250px, 62vw) + 76px), calc(100vw - 40px)); }
}
.toast--2 { bottom: 8%; }

/* =====================================================================
   I MEDAGLIONI e LA HERO A DUE STRADE (21/10/2026, Domenico: «sfumate al lato, sono brutte… le farai più piccole»)
   Le foto tagliate dal bordo stanno intere in un cerchio, col loro fondo, un filo del colore del kit e la macchia dietro.
   ===================================================================== */
.medaglione {
  display: block; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 50%;
  border: 5px solid var(--crema);
  box-shadow: 0 0 0 2px var(--salvia-chiara), 0 22px 30px -20px rgba(69, 43, 32, 0.55);
}

/* home · la scheda Piadine: il medaglione esce dall'alto come gli altri piatti */
.piatto__medaglione { position: absolute; left: 50%; top: 50%; width: 70%; translate: -50% -46%; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .piatto:hover .piatto__medaglione { transform: rotate(-6deg) translateY(-8px); } }
.piatto:active .piatto__medaglione { transform: rotate(-4deg); }

/* home · la fascia verde: tre medaglioni, la Snack più piccola */
.formato-h__foto { height: 250px; align-items: center; }
.formato-h__foto .macchia { width: 88%; height: 88%; left: 6%; top: 6%; bottom: auto; }
.formato-h__medaglione { position: relative; width: 200px; box-shadow: 0 0 0 2px var(--salvia-chiara), 0 22px 30px -18px rgba(30, 40, 25, 0.6); }
.formato-h__medaglione--piccolo { width: 164px; }
@media (hover: hover) and (pointer: fine) { .formato-h:hover .formato-h__medaglione { transform: translateY(-6px); } }
.formato-h__medaglione { transition: transform 400ms var(--ease-out); }

/* home · la chiusura: il sacchetto nel medaglione */
.chiusura__medaglione { width: min(400px, 100%); margin-left: auto; border-color: var(--crema); box-shadow: 0 0 0 3px var(--salvia-chiara), 0 30px 40px -24px rgba(30, 40, 25, 0.6); }
.chiusura__foto { animation-name: none; }

/* /menu · Piadine e Dolci: il medaglione con la macchia dietro */
.categoria__medaglione { position: relative; z-index: 1; width: min(360px, 82%); margin: 0 auto; }
.volo--piadina { min-height: 0; padding: 40px 0; justify-content: center; }
.volo--piadina .prodotto__macchia { left: 10%; top: 6%; width: 80%; height: 88%; }
.dolce { min-height: 0; padding: 30px 0; justify-content: center; }
.dolce .prodotto__macchia { left: 8%; top: 4%; width: 84%; height: 90%; }
.dolce .polaroid { right: 2%; bottom: -2%; width: 30%; }

/* /menu · Avocado toast: il toast al pollo nel medaglione, quello al salmone intero davanti */
.toast-duo { height: auto; min-height: 380px; }
.toast-medaglione { position: absolute; z-index: 1; left: 4%; top: 0; width: 52%; transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.toast--2 { width: 86%; right: -4%; left: auto; bottom: 0; top: auto; }
.toast-duo.con-luce .toast-medaglione:not(.in-luce) { opacity: 0.55; }
.toast-medaglione.in-luce { z-index: 4; transform: scale(1.05); }

/* /creala-tu · i formati: gli stessi medaglioni */
.formato__medaglione { width: 150px; }
.formato__medaglione--piccolo { width: 124px; }
.formato__visivo { height: 170px; }

/* la hero a due strade: due schede dello stesso peso, i pulsanti allo stesso livello */
.strade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 40px; max-width: 640px; }
.strada { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px 20px; border-radius: 26px; background: var(--crema-macchia); }
.strada__img { position: relative; display: grid; place-items: center; width: 104px; height: 96px; margin-bottom: 10px; }
.strada__img .macchia { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--salvia-tenue); }
.strada__piatto { position: relative; width: 104px; height: auto; filter: var(--ombra-prodotto); }
.ciotola--mini { --d: 92px; position: relative; }
.ciotola--mini .ciotola__base img { animation: none; }
.ciotola--mini .pezzo { width: 34%; animation: none; }
.strada__etichetta { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; margin-bottom: 6px; }
.strada__riga { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; margin-bottom: 16px; }
.strada__btn { margin-top: auto; min-height: 48px; padding: 0.75em 1.3em; font-size: 16px; }
.hero__griglia { min-height: min(860px, calc(100svh - 104px)); }
.hero .strade { animation: entra-su 800ms var(--ease-out) 320ms both; }
@media (prefers-reduced-motion: reduce) { .hero .strade { animation: dissolvi 500ms ease both; } }

@media (max-width: 1100px) {
  .formato__medaglione { width: 100px; }
  .formato__medaglione--piccolo { width: 84px; }
  .formato__visivo { height: 104px; }
}
@media (max-width: 900px) {
  .strade { grid-template-columns: 1fr; gap: 12px; margin: 4px 0 8px; }
  .strada { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px 16px 12px; }
  .strada__img { grid-row: 1 / span 2; width: 84px; height: 80px; margin: 0; }
  .strada__piatto { width: 84px; }
  .ciotola--mini { --d: 76px; }
  .strada__etichetta { grid-column: 2; margin: 0 0 2px; }
  .strada__riga { grid-column: 2; margin: 0; font-size: 15px; }
  .strada__btn { grid-column: 1 / -1; width: 100%; margin-top: 12px; }
  .formato-h__foto { height: 200px; }
  .formato-h__medaglione { width: 172px; }
  .formato-h__medaglione--piccolo { width: 140px; }
  .chiusura__medaglione { margin: 0 auto; width: min(300px, 80%); }
  .categoria__medaglione { width: min(280px, 76%); }
  .toast-duo { min-height: 0; height: clamp(260px, 72vw, 340px); }
  .toast-medaglione { width: 50%; }
}
@media (max-width: 360px) {
  .formato__medaglione { width: 80px; }
  .formato__medaglione--piccolo { width: 68px; }
  .formato__visivo { height: 84px; }
}
.voglia__sotto { text-align: center; font-size: clamp(17px, 1.5vw, 21px); margin: -30px auto 8px; max-width: 46ch; }
.strade { max-width: 660px; }
.strada__img { width: 124px; height: 112px; }
.strada__img .macchia { left: 6%; top: 4%; width: 88%; height: 92%; }
.strada__piatto { width: 118px; }
.ciotola--mini { --d: 100px; }
@media (max-width: 900px) {
  .voglia__sotto { margin: -18px auto 4px; font-size: 16px; }
  .strada__img { width: 84px; height: 80px; }
  .strada__piatto { width: 84px; }
  .ciotola--mini { --d: 76px; }
}
.toast-medaglione { width: 46%; left: 0; top: 0; }
.toast--2 { width: 80%; right: -2%; bottom: 0; }
.toast-duo { min-height: 420px; }
@media (max-width: 900px) { .toast-duo { height: clamp(280px, 78vw, 360px); } .toast-medaglione { width: 48%; } }
.strade { max-width: min(560px, calc(100% - 48px)); }
.strada__piatto { width: 96px; }
.ciotola--mini { --d: 86px; }
@media (max-width: 1100px) { .strade { max-width: 100%; } }
@media (max-width: 900px) { .strada__piatto { width: 74px; } .ciotola--mini { --d: 68px; } }
/* la macchia dietro l'immagine delle due schede: più grande dell'immagine, così si vede */
.strada__img .macchia { left: -14%; top: -12%; width: 128%; height: 126%; }
.strada__img { margin-bottom: 14px; }

/* =====================================================================
   La ciotola piena (Daniele, 22/10/2026): ogni scelta riempie il suo spicchio fino al bordo, con più mucchietti.
   Lo strato dei pezzi è tondo come l'interno della ciotola: quello che arriva al bordo ci finisce sotto, come in una vera pokè.
   ===================================================================== */
.ciotola .ciotola__strato { border-radius: 50%; overflow: hidden; }
.pezzo { transition: left 420ms var(--ease-out), top 420ms var(--ease-out), width 420ms var(--ease-out); }
.pezzo--salsa { filter: drop-shadow(0 8px 8px rgba(69, 43, 32, 0.32)); }
.pezzo--topping { filter: drop-shadow(0 2px 2px rgba(69, 43, 32, 0.22)); }
@media (prefers-reduced-motion: reduce) { .pezzo { transition: none; } }

/* =====================================================================
   22/10/2026 · Domenico: «da telefono è un po' buggato perché sale sopra tutto d'un colpo».
   Sul menu le righe dei prodotti (decine) non entrano più salendo tutte insieme: ci sono già. Titoli, intro e foto delle
   categorie arrivano con un passo corto (12 px, mezzo secondo). Da telefono ogni ingresso del sito è più corto e più fermo.
   ===================================================================== */
.js .proposta.reveal, .js .gusto.reveal { opacity: 1; transform: none; transition: none; }
.js .categoria__titolo.reveal, .js .categoria__intro.reveal, .js .categoria__fascia.reveal, .js .menu-gusti.reveal { transform: translateY(12px); transition: opacity 450ms var(--ease-out), transform 500ms var(--ease-out); }
.js .categoria__visivo.reveal { transform: none; transition: opacity 600ms var(--ease-out); }
.js .categoria__titolo.reveal.in, .js .categoria__intro.reveal.in, .js .categoria__fascia.reveal.in, .js .menu-gusti.reveal.in { transform: none; }
@media (max-width: 900px) {
  .js .reveal { transform: translateY(14px); transition: opacity 450ms var(--ease-out), transform 500ms var(--ease-out); }
  .js .reveal.in { transform: none; }
  .js .schede .reveal:nth-child(n), .js .app li:nth-child(n), .js .passo.reveal:nth-child(n) { transition-delay: 0ms; }
}

/* 22/10/2026 · Domenico: «"la tua ricetta personalizzata" è prima di tutto perché è il prodotto principale».
   La scheda «Componi il tuo piatto» viene prima e si distingue: salvia tenue, filo salvia; il menu classico resta crema. */
.strada--principale { background: var(--salvia-tenue); box-shadow: inset 0 0 0 2px var(--salvia); }
.strada--principale .strada__img .macchia { fill: var(--crema); }

/* 22/10/2026 · Domenico: «da mobile bisogna prima mettere la hero con l'immagine e poi i pulsanti».
   Da telefono: titolo, foto della bowl e della piadina, poi le due schede, poi «Aperti tutti i giorni». */
@media (max-width: 900px) {
  .hero__titolo { order: 0; }
  .hero__visivo { order: 1; margin-top: 0; margin-bottom: 18px; }
  .hero .strade { order: 2; }
  .hero__modi { order: 3; }
}

/* 22/10/2026 · collaudo (step 7): il mosaico di «Dove siamo» con le due foto piccole in una colonna; da telefono i formati
   del Creala tu con le dosi in una colonna sola; due titoli entro 3 righe a 390 px. */
.mosaico { grid-template-rows: 1fr; }
.mosaico__foto--grande { grid-row: auto; }
.mosaico__colonna { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.mosaico__colonna .mosaico__foto { flex: 1 1 0; min-height: 0; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mosaico__foto--grande { grid-column: auto; }
  .mosaico__colonna { flex-direction: row; }
  .mosaico__colonna .mosaico__foto { aspect-ratio: 4 / 5; }
  .formato .dosi { display: grid; grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 480px) {
  #menu-titolo { font-size: 25px; padding-inline: 22px; }
  #menu-titolo .voglia__deco { transform: scale(0.7); }
  #consegna-titolo { font-size: 27px; }
  #consegna-titolo span { display: inline; }
}

/* 22/10/2026 · collaudo (step 7), secondo gruppo: i pezzi della ciotola restano dentro la ciotola (non salgono sopra la testata
   né sopra la barra in basso); l'avviso del cambio di formato si vede intero sotto la barra dei passi; titoli entro 4 righe. */
.ciotola, .piadina-viva { isolation: isolate; }
[data-avviso-di="cambio"] { scroll-margin-top: 140px; }
.unito { white-space: nowrap; }

/* 23/10/2026 · audit del pannello (M6): da telefono la foto in cima sta tutta dentro il suo riquadro, qualunque foto metta
   il cliente (scontornata o normale, orizzontale o verticale): non sale mai sopra il titolo verde e non scende sulle due
   schede. Con la foto scontornata di oggi il disegno resta quello di prima (la foto è più larga che alta). */
@media (max-width: 900px) {
  .hero__foto { top: 0; bottom: 0; height: 100%; object-fit: contain; object-position: 50% 50%; transform: none; }
}

/* 9-bis · l'avviso armonizzato della garanzia nelle condizioni di vendita */
.legale figure { margin: 18px 0 8px; }
.legale figure img { display: block; width: 100%; max-width: 560px; height: auto; border: 1px solid rgba(69, 43, 32, 0.18); }
.legale figcaption { font-size: 14px; line-height: 1.5; margin-top: 8px; }

/* 9-bis · la frase delle foto migliorate, sotto le foto della pagina (mai nel footer: Domenico 23/10/2026) */
.nota-foto-pagina { padding-top: 8px; padding-bottom: 28px; }
.nota-foto-pagina .thk-nota-foto { font-size: 13px; line-height: 1.5; color: rgba(69, 43, 32, 0.72); max-width: 640px; }