/* Legàmi di Gusto — la home fedele al design approvato (versione 8), rifinita · step 5, 04/11/2026
   Montserrat servito dal sito; colori misurati sul design con confronta-design.py --colori.
   Step 5-bis (04/11/2026): lo stesso design, vivo. Il movimento è tutto in fondo, «il movimento». */

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

:root {
  /* i colori del design (home-approvata.png), in #hex */
  --nero: #000000;          /* il fondo, come il logo */
  --arancio: #FC8C00;       /* i pulsanti, lo spicchio del logo, i punti della mappa */
  --bianco: #F8F8F8;        /* i testi */
  --grigio-scuro: #1E1E1E;  /* le frecce del carosello, le linee */
  --grigio: #303036;        /* bordi spenti */
  --grigio-lago: #323437;   /* il lago della mappa */
  --grigio-strade: #404040; /* le strade della mappa */
  --grigio-testo: #A0A0A0;  /* i testi secondari */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --contenitore: 1240px;
  --testata-h: 64px;
  --sezione: clamp(48px, 5vw, 72px);
  --raggio: 10px;
  --lato: max(16px, env(safe-area-inset-left, 0px));
  --lato-dx: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  :root {
    --testata-h: 76px;
    --lato: max(32px, env(safe-area-inset-left, 0px));
    --lato-dx: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--nero);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 8px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--nero);
  color: var(--bianco);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; border-radius: 4px; }
.arancio { color: var(--arancio); }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }   /* niente parole sole sull'ultima riga */
.hero-titolo .arancio, .titolo-sezione .arancio { display: inline-block; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 64px);
  margin-inline: auto;
  padding-left: var(--lato);
  padding-right: var(--lato-dx);
}
.sezione { padding-block: var(--sezione); }

.salta {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  background: var(--arancio); color: var(--nero);
  padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform .2s var(--ease-out);
}
.salta:focus { transform: none; }

/* ── titoli ───────────────────────────────────────────────────────────── */
.titolo-sezione { font-size: clamp(32px, 3.75vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; }
.titolo-medio { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.titolo-piccolo { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
.sezione-sotto { margin-top: .5em; font-size: clamp(17px, 1.6vw, 23px); font-weight: 500; }

/* ── pulsanti ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .45em 1.35em;
  border: 2px solid transparent; border-radius: var(--raggio);
  font: inherit; font-size: 17px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.btn .ico { width: 22px; height: 22px; }
.btn:active { transform: scale(.97); }
.btn-arancio { background: var(--arancio); color: var(--nero); }
.btn-contorno { background: transparent; color: var(--bianco); border-color: var(--bianco); }
.btn-medio { min-height: 48px; font-size: 16px; padding: .4em 1.15em; }
.btn-presto { border-color: var(--grigio); color: var(--grigio-testo); font-size: 15px; font-weight: 600; cursor: default; }
.btn-presto:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-arancio:hover { background: #FFA028; }
  .btn-contorno:not(.btn-presto):hover { background: var(--bianco); color: var(--nero); }
}

/* ── intestazione ─────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--nero);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .2s ease, transform .28s var(--ease-out);
}
.testata.scorsa { box-shadow: 0 1px 0 var(--grigio-scuro); }
.testata-dentro {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--testata-h);
  max-width: calc(var(--contenitore) + 64px); margin-inline: auto;
  padding-left: var(--lato); padding-right: var(--lato-dx);
}
.testata-logo { justify-self: start; position: relative; z-index: 2; display: block; touch-action: manipulation; }
.testata-logo img { height: 44px; width: auto; }
.nav-voci { display: flex; gap: clamp(28px, 4.6vw, 72px); }
.nav-voci a {
  position: relative; display: block; padding: 10px 2px;
  font-size: 16px; font-weight: 600; text-decoration: none; touch-action: manipulation;
}
.nav-voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--arancio); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) { .nav-voci a:hover::after { transform: scaleX(1); } }
.nav-voci a:active { opacity: .7; }
.nav-azioni { display: none; }
.testata-destra { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
.lingue-posto:empty { display: none; }
.btn-testata { min-height: 44px; padding: .3em 1.05em; font-size: 15px; gap: .5em; }
.btn-testata .ico { width: 19px; height: 19px; }
@media (max-width: 767px) { .btn-testata { display: none; } }
.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--bianco);
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform .16s var(--ease-out);
}
.menu-btn { position: relative; }
.menu-btn .riga { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease-out); }
html.menu-aperto .menu-btn .riga { transition-duration: .3s; }
.nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.menu-btn:active { transform: scale(.94); }
html.menu-aperto .menu-btn .riga:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
html.menu-aperto .menu-btn .riga:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
@media (min-width: 768px) { .testata-logo img { height: 54px; } }

@media (max-width: 767px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 1; height: 100dvh;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: calc(var(--testata-h) + env(safe-area-inset-top, 0px) + 28px) var(--lato-dx) calc(28px + env(safe-area-inset-bottom, 0px)) var(--lato);
    background: var(--nero);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
  }
  html.menu-aperto .nav {
    opacity: 1; visibility: visible;
    transition: opacity .3s var(--ease-out), visibility 0s;
  }
  /* le voci arrivano una dopo l'altra; alla chiusura se ne vanno insieme, più in fretta */
  .nav-voci li, .nav-azioni {
    opacity: 0; translate: 0 18px;
    transition: opacity .15s var(--ease-out), translate .15s var(--ease-out);
  }
  html.menu-aperto .nav-voci li, html.menu-aperto .nav-azioni {
    opacity: 1; translate: 0 0;
    transition: opacity .45s var(--ease-out) 40ms, translate .45s var(--ease-out) 40ms;
  }
  html.menu-aperto .nav-voci li:nth-child(2) { transition-delay: 90ms; }
  html.menu-aperto .nav-voci li:nth-child(3) { transition-delay: 140ms; }
  html.menu-aperto .nav-voci li:nth-child(4) { transition-delay: 190ms; }
  html.menu-aperto .nav-azioni { transition-delay: 250ms; }
  .nav-voci { flex-direction: column; gap: 2px; }
  .nav-voci a { padding: 10px 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
  .nav-voci a::after { display: none; }
  .nav-azioni { display: grid; gap: 12px; }
}

/* ── hero: tutta nera, a livelli ──────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 0 clamp(20px, 3vh, 36px);
}
.hero::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: min(1180px, 130%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(252, 140, 0, .09), rgba(252, 140, 0, 0));
  pointer-events: none;
}
@media (min-width: 768px) { .hero { min-height: calc(100svh - var(--testata-h)); } }
.hero-scena {
  position: relative; margin-inline: auto;
  width: min(1280px, 100%, max(640px, calc((100svh - var(--testata-h) - 120px) * 16 / 9)));
  aspect-ratio: 16 / 9;
}
.strato {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.strato-basilico-dx  { --x: 77.34%; --y: 1.94%;  --w: 10.16%; }
.strato-pomodorino-sx { --x: 22.34%; --y: 6.67%;  --w: 6.72%; }
.strato-basilico-sx  { --x: 7.03%;  --y: 17.78%; --w: 11.09%; }
.strato-pizza        { --x: 7.5%;   --y: 33.06%; --w: 70.31%; z-index: 1; }
.strato-spicchio     { --x: 58.44%; --y: 9.72%;  --w: 36.72%; z-index: 2; }
.strato-pomodorino-dx { --x: 89.06%; --y: 45.83%; --w: 6.09%; z-index: 2; }
.strato-logo         { --x: 38.91%; --y: .83%;   --w: 22.19%; z-index: 3; }
@media (max-width: 767px) {
  .hero-scena { width: 100%; max-width: 460px; aspect-ratio: 390 / 400; }
  .strato-logo          { --x: 20.51%; --y: 0%;     --w: 58.97%; }
  .strato-basilico-dx   { --x: 81.03%; --y: 5%;     --w: 16.92%; }
  .strato-pomodorino-sx { --x: 5.64%;  --y: 13%;    --w: 11.28%; }
  .strato-basilico-sx   { --x: 0%;     --y: 37.5%;  --w: 17.95%; }
  .strato-pizza         { --x: 2.05%;  --y: 53%;    --w: 89.74%; }
  .strato-spicchio      { --x: 54.87%; --y: 33%;    --w: 44.1%; }
  .strato-pomodorino-dx { --x: 89.74%; --y: 84%;    --w: 9.23%; }
}
.hero-testo { position: relative; z-index: 4; margin-top: clamp(14px, 2.4vh, 28px); }
.hero-titolo { font-size: clamp(34px, 4.25vw, 62px); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; }
.hero-sotto { margin-top: .45em; font-size: clamp(17px, 1.6vw, 24px); font-weight: 500; }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: clamp(20px, 2.8vh, 32px); }
.hero-azioni .btn { min-width: 250px; }
@media (max-width: 767px) {
  .hero-azioni { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-azioni .btn { min-width: 0; width: 100%; }
}

/* ── consegna e mappa ─────────────────────────────────────────────────── */
.consegna { padding-top: calc(var(--sezione) * .5); }
.consegna-griglia { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .consegna-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
}
.consegna-testo p { margin-top: 16px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.42; }
.consegna-testo .consegna-sera { margin-top: 20px; }
.consegna-paesi { max-width: 23em; text-wrap: balance; }
.unito { white-space: nowrap; }
.consegna-testo .btn { margin-top: 28px; }
.mappa { position: relative; aspect-ratio: 880 / 400; }
.mappa-disegno { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.mappa-lago { fill: var(--grigio-lago); }
.mappa-strade path { fill: none; stroke: var(--grigio-strade); stroke-width: 2.5; stroke-linecap: round; }
.mappa-punti circle { fill: var(--arancio); }
.mappa-punti .mappa-luino-alone { opacity: .22; }
.mappa-paesi { position: absolute; inset: 0; pointer-events: none; }
.paese {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(clamp(12px, 1.6vw, 18px), -52%);
  font-size: clamp(12px, 1.4vw, 19px); font-weight: 600; line-height: 1; white-space: nowrap;
}
.paese-luino { transform: translate(clamp(16px, 2.2vw, 26px), -54%); font-size: clamp(18px, 2.3vw, 32px); font-weight: 700; }
.consegna-scatola {
  position: absolute; left: -2%; bottom: -15%; width: 25%; z-index: 2;
  transform: rotate(-7deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .7));
}
/* 3 Step, secondo giro (06/11/2026): fra 540 e 767 px la scatola, ruotata, usciva dallo schermo di 1-8 px: lì parte dal
   bordo della mappa. Sotto e sopra resta com'era. */
@media (min-width: 540px) and (max-width: 767px) { .consegna-scatola { left: 0; } }
.mappa-nota { margin-top: 18px; text-align: right; font-size: 15px; font-style: italic; }
@media (max-width: 899px) { .mappa-nota { margin-top: 26px; } }

/* ── che pizza ti va? ─────────────────────────────────────────────────── */
.pizze .titolo-sezione { margin-bottom: clamp(20px, 2.6vw, 36px); }
.carosello { position: relative; max-width: calc(var(--contenitore) + 64px); margin-inline: auto; }
.carosello-binario {
  --gap-car: clamp(16px, 2.4vw, 32px);
  display: flex; gap: var(--gap-car);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px var(--lato-dx) 12px var(--lato);
  scroll-padding-inline: var(--lato);
}
.carosello-binario::-webkit-scrollbar { display: none; }
.pizza-scheda { flex: 0 0 78%; scroll-snap-align: start; text-align: center; }
.pizza-foto { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.pizza-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .28s ease; }
.pizza-nome { margin-top: 12px; font-size: clamp(19px, 1.9vw, 27px); font-weight: 700; line-height: 1.2; }
.pizza-nota { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; }
.freccia { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pizza-scheda:hover .pizza-foto img { transform: scale(1.04) rotate(-2deg); }
}
@media (min-width: 768px) {
  .carosello-binario {
    padding-inline: 96px; scroll-padding-inline: 96px;
  }
  .pizza-scheda { flex-basis: calc((100% - 3 * var(--gap-car)) / 3.1); }
  .freccia {
    position: absolute; top: 40%; z-index: 2; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
    background: var(--grigio-scuro); color: var(--bianco);
    cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .16s var(--ease-out);
  }
  .freccia .ico { width: 13px; height: 22px; }
  .freccia-prec { left: var(--lato); }
  .freccia-succ { right: var(--lato-dx); }
  .freccia:active { transform: translateY(-50%) scale(.93); }
  .freccia:disabled { opacity: .35; cursor: default; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .freccia:not(:disabled):hover { background: var(--arancio); color: var(--nero); }
}
.pizze-dettagli { display: grid; gap: 18px; margin-top: clamp(24px, 2.8vw, 40px); }
.impasti { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; font-size: clamp(16px, 1.35vw, 19px); }
.pillola {
  display: inline-flex; align-items: center; min-height: 42px; padding: 4px 20px;
  border: 1.5px solid var(--bianco); border-radius: 999px; font-size: clamp(15px, 1.25vw, 17px); font-weight: 600;
}
.impasti-testo { display: inline-flex; align-items: center; gap: 14px; }
.impasti-testo::before { content: ""; width: 1.5px; height: 22px; background: var(--bianco); }
.pizze-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: clamp(15px, 1.25vw, 18px); }
.nota-corsivo { font-style: italic; }
@media (max-width: 767px) {
  .impasti-testo { flex-basis: 100%; }
  .impasti-testo::before { display: none; }
}

/* ── non solo pizza: i piatti ─────────────────────────────────────────── */
.cucina-testa { max-width: 1000px; }
.cucina-scena { position: relative; margin-top: clamp(20px, 2.6vw, 36px); }
.piatto { position: relative; }
.piatto img { width: 100%; }
.piatto-nome { position: absolute; font-size: clamp(18px, 1.85vw, 27px); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.cucina-punti { display: grid; gap: 22px; }
.cucina-punti li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: start; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.36; }
.cucina-punti .ico { width: 44px; height: 50px; }
.cucina-punti .ico-largo { width: 50px; height: 36px; margin-top: 4px; }
@media (min-width: 900px) {
  .cucina-scena { height: clamp(480px, 42vw, 600px); }
  .piatto { position: absolute; }
  .piatto-carbonara { left: 0; top: 0; width: 49%; }
  .piatto-carbonara .piatto-nome { left: 3%; top: 10%; }
  .piatto-fusilli { left: 39%; top: 35%; width: 45%; }
  .piatto-fusilli .piatto-nome { right: 100%; top: 64%; margin-right: 1%; }
  .cucina-scena .cucina-punti { position: absolute; right: 0; top: 2%; width: min(32%, 400px); }
}
@media (max-width: 899px) {
  .piatto-carbonara { width: 80%; }
  .piatto-carbonara .piatto-nome { left: 0; top: 0; }
  .piatto-fusilli { width: 76%; margin: -10% 0 0 auto; }
  .piatto-fusilli .piatto-nome { right: 100%; left: auto; top: 42%; margin-right: 2%; font-size: 17px; }
  .cucina-punti { margin-top: 28px; }
}

/* ── il locale davanti al lago ────────────────────────────────────────── */
.cucina { padding-bottom: clamp(16px, 2vw, 28px); }
.locale { position: relative; padding-bottom: var(--sezione); }
[data-fascia] > .cornice { position: relative; height: clamp(300px, 30vw, 480px); overflow: hidden; }
[data-fascia] > .cornice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
[data-fascia] > .cornice::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .2) 52%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, #000 100%);
}
.locale-testo { position: relative; z-index: 1; margin-top: clamp(-140px, -8vw, -64px); }
.locale-riga { display: grid; gap: 26px; margin-top: clamp(20px, 2.4vw, 30px); }
.locale-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.locale-numeri li { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35; }
.locale-numeri strong { display: block; font-size: clamp(18px, 1.8vw, 26px); }
.locale-numeri li:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .locale-riga { grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
  .locale-numeri { grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(32px, 4.5vw, 80px); }
  .locale-numeri li:nth-child(3) { grid-column: auto; }
}

/* ── le mani e i social ───────────────────────────────────────────────── */
.mani-griglia { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .mani-griglia { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); } }
/* la foto larga in cornice accanto al testo (/ordina, l'asporto) */
.cornice[data-larga] { aspect-ratio: 16 / 9; }
.cornice[data-larga] img { object-position: 50% 92%; }
@media (min-width: 900px) { .cornice[data-larga] { aspect-ratio: 2 / 1; } }
.mani-video {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 16px;
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; text-decoration: none; touch-action: manipulation;
}
.mani-video .ico { width: 30px; height: 30px; transition: color .2s ease; }
.mani-social-testo { margin-top: 6px; font-size: clamp(16px, 1.35vw, 19px); }
.social { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 16px; }
.social a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; text-decoration: none; touch-action: manipulation; }
.social .ico { width: 26px; height: 26px; }
.mani-video:active, .social a:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .mani-video:hover .ico, .social a:hover .ico { color: var(--arancio); }
}

/* ── l'app ────────────────────────────────────────────────────────────── */
.app-blocco { display: grid; gap: 24px; justify-items: center; text-align: center; }
.app-icona { width: clamp(112px, 10.5vw, 150px); height: auto; border-radius: 28px; }
.app-sotto { margin-top: 8px; font-size: clamp(16px, 1.5vw, 21px); }
.cucina-punti[data-paesi], .cucina-punti[data-elenco="app"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: 20px; }
.cucina-punti[data-paesi] li, .cucina-punti[data-elenco="app"] li { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.3; text-align: left; }
.cucina-punti[data-paesi] .ico, .cucina-punti[data-elenco="app"] .ico { width: 30px; height: 30px; }
.app-store { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; min-width: 210px; min-height: 60px;
  padding: 8px 22px 8px 18px; border: 1.5px solid var(--bianco); border-radius: 12px;
  text-decoration: none; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.store .ico { width: 28px; height: 30px; }
.store span { display: flex; flex-direction: column; font-size: 22px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-align: left; }
.store small { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 479px) {
  .app-store { gap: 12px; flex-wrap: nowrap; }
  .store { min-width: 0; min-height: 56px; padding: 8px 14px 8px 12px; gap: 9px; }
  .store span { font-size: 18px; }
  .store .ico { width: 24px; height: 26px; }
}
.store:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .store:hover { background: var(--bianco); color: var(--nero); } }
@media (min-width: 768px) {
  .app-blocco { grid-template-columns: auto auto; justify-content: center; justify-items: start; align-items: center; text-align: left; column-gap: clamp(28px, 3.5vw, 52px); row-gap: 34px; }
  .cucina-punti[data-paesi], .cucina-punti[data-elenco="app"] { justify-content: flex-start; }
  .app-store { grid-column: 1 / -1; justify-self: center; }
}

/* ── contatti e orari ─────────────────────────────────────────────────── */
.contatti-griglia { display: grid; gap: 34px; }
@media (min-width: 900px) { .contatti-griglia { grid-template-columns: 1fr minmax(0, 460px); align-items: center; gap: 56px; } }
.contatti-tel {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 12px;
  font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.01em; text-decoration: none;
}
.contatti-tel .ico { width: .82em; height: .82em; }
.contatti-azioni { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 22px; }
.contatti-azioni .btn-arancio { min-width: 180px; }
.contatti-dx { display: grid; gap: 22px; }
.contatti-dx li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.48; }
.contatti-dx .ico { width: 24px; height: 26px; margin-top: 1px; }
.contatti-dx p + p { margin-top: 6px; }
.contatti-dx .orari > div + div { margin-top: 6px; }
.orari > div { text-wrap: pretty; }
/* il pannello (6-ter): le chiusure, le stagioni e «chiusi per un po'» sotto gli orari (sito-thk/orari.js) */
.thk-orari-eccezioni { margin-top: 12px; }
.thk-orari-eccezioni p { color: var(--arancio); font-weight: 600; text-wrap: pretty; }
.thk-orari-eccezioni p + p { margin-top: 6px; }
.thk-orari-eccezioni .thk-orari-stagione { color: rgba(248, 248, 248, .86); font-weight: 400; }
.contatti-dx a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contatti-dx a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ── piede e barra delle azioni ───────────────────────────────────────── */
.piede { border-top: 1px solid var(--grigio-scuro); padding-top: clamp(30px, 3.4vw, 44px); }
.piede-riga { display: grid; gap: 20px; justify-items: center; text-align: center; }
.piede-logo img { height: 50px; width: auto; }
.piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.piede-link a { padding: 8px 0; font-size: 16px; font-weight: 500; text-decoration: none; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .piede-link a:hover { color: var(--arancio); } }
@media (min-width: 768px) {
  .piede-riga { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: 48px; }
  .piede-link { justify-content: flex-start; gap: 4px 56px; }
}
.barra-azioni { padding: 22px 0 8px; }
.barra-dentro {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px);
  max-width: 1040px; margin-inline: auto; padding-left: var(--lato); padding-right: var(--lato-dx);
}
.barra-azioni .btn { min-height: 50px; font-size: 16px; }
.piede-legale {
  display: grid; gap: 6px; padding-top: 22px; padding-bottom: 28px;
  font-size: 13px; line-height: 1.5; color: var(--grigio-testo); text-align: center;
}
.piede-legale a { color: var(--bianco); }
@media (min-width: 768px) { .piede-legale { grid-template-columns: 1fr auto; text-align: left; } }
@media (max-width: 767px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .barra-azioni {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--nero); border-top: 1px solid var(--grigio-scuro);
  }
  .barra-dentro { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .barra-azioni .btn { min-height: 48px; padding: 6px 10px; gap: 6px; font-size: 13.5px; white-space: nowrap; border-width: 1.5px; }
  .barra-azioni .ico { width: 18px; height: 18px; }
}

@media (max-width: 374px) {
  .barra-azioni .btn-contorno .ico { display: none; }
}

/* ── pagine legali e 404 ──────────────────────────────────────────────── */
.pagina-testo { padding-block: clamp(40px, 6vw, 84px); }
.legale { max-width: 820px; }
.legale h1 { margin-bottom: .35em; font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.legale h2 { margin: 1.8em 0 .5em; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.25; }
.legale p, .legale li { font-size: 16px; line-height: 1.65; }
.legale p + p { margin-top: .8em; }
.legale ul { margin: .6em 0; padding-left: 1.3em; list-style: disc; }
.legale li + li { margin-top: .35em; }
.legale a { color: var(--arancio); }
.legale table { width: 100%; margin: 1em 0; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.legale th, .legale td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--grigio); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.legale th:nth-child(1) { width: 27%; }
.legale th:nth-child(2) { width: 19%; }
.legale th:nth-child(4) { width: 19%; }
@media (max-width: 767px) { .legale table { font-size: 13.5px; } .legale th, .legale td { padding-right: 8px; } }
.errore { display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: clamp(72px, 12vw, 160px); }
.errore p { max-width: 520px; }
.errore-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin-top: 8px; }

/* ── i rimandi «Scopri …» e i link del copy (step 6): link nel testo, mai un pulsante in più ── */
.link-scopri {
  font-weight: 700; color: var(--bianco); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 5px;
  touch-action: manipulation; transition: color .2s ease;
}
.link-scopri .ico { display: inline-block; vertical-align: -.15em; }
.link-scopri .ico-freccia { width: .55em; height: .9em; margin-left: .45em; transition: transform .2s ease; }
.hero-chiama .link-scopri, .pizze-vai .link-scopri, .locale-azioni .link-scopri, .contatti-dx .link-scopri {
  display: inline-flex; align-items: center; min-height: 44px;
}
.hero-chiama .link-scopri .ico:not(.ico-freccia) { width: 20px; height: 20px; margin-right: .55em; }
.link-scopri:active, .locale-google:active, .app-sotto a:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .link-scopri:hover, .locale-google:hover { color: var(--arancio); }
  .link-scopri:hover .ico-freccia { transform: translateX(3px); }
}
.hero-chiama { margin-top: 10px; font-size: 17px; }
.pizze-vai { font-size: clamp(16px, 1.3vw, 18px); }
.locale-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.locale-google { text-decoration: none; color: inherit; transition: color .2s ease; }
.app-sotto a[href^="tel"] { color: inherit; font-weight: 600; text-decoration: none; }
.contatti-nota { margin-top: 4px; font-size: clamp(16px, 1.35vw, 19px); color: var(--grigio-testo); }
.contatti-dx .link-scopri { font-size: clamp(15px, 1.3vw, 18px); text-decoration: underline; text-decoration-color: var(--arancio); }
.nav-voci a[aria-current="page"]::after { transform: scaleX(1); }

/* ══ le pagine interne (6-bis): gli stessi pezzi della home, ricomposti ══════
   La fascia con la foto che sfuma nel nero (come la sala), le foto sfumate sui quattro lati (come le mani),
   le pillole, le voci con le icone, il carosello che scorre col dito, la mappa disegnata, i pulsanti. */
[data-pagina] .consegna { padding-top: var(--sezione); }
[data-fascia] > .cornice { height: clamp(280px, 34vw, 520px); }
[data-fascia] .titolo-sezione { max-width: 19em; }
[data-fascia] .sezione-sotto { max-width: 40em; }
.sezione-sotto + .sezione-sotto { margin-top: .6em; }
[data-pagina] .pizze-vai { margin-top: 18px; }
.pizze-vai .link-scopri, .contatti-azioni .link-scopri { display: inline-flex; align-items: center; min-height: 44px; }
.contatti-azioni { align-items: center; }
[data-pagina] a[href^="tel:"]:not(.btn) { color: inherit; font-weight: 600; text-decoration: none; touch-action: manipulation; transition: color .2s ease; }
[data-pagina] a[href^="tel:"]:not(.btn):active { opacity: .7; }
@media (hover: hover) and (pointer: fine) { [data-pagina] a[href^="tel:"]:not(.btn):hover { color: var(--arancio); } }
@media (min-width: 900px) {
  [data-colonne="app"] { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
[data-passi] { display: grid; gap: 18px; margin-top: 24px; }
[data-passi] li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.4; }
[data-passo] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--arancio); color: var(--nero); font-size: 20px; font-weight: 800; }
.sezione-sotto[data-nota] { margin-top: 22px; font-size: clamp(16px, 1.45vw, 21px); font-weight: 700; }
[data-schermata] img { width: min(100%, 300px); margin-inline: auto; border-radius: 28px; border: 1.5px solid var(--grigio); }
@media (max-width: 899px) { [data-schermata] img { width: min(62%, 240px); border-radius: 22px; } }
.cucina-punti[data-paesi] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 18px; }
.cucina-punti[data-paesi] li { display: flex; align-items: center; gap: 10px; font-size: clamp(16px, 1.45vw, 20px); font-weight: 600; }
.cucina-punti[data-paesi] .ico { width: 20px; height: 22px; color: var(--arancio); }
[data-fascia-breve] { display: flex; gap: 22px; align-items: flex-start; }
[data-icona-grande] { width: 46px; height: 50px; margin-top: 4px; }
[data-fascia-breve] .ico-largo { width: 54px; height: 40px; }
[data-fascia-breve] p { margin-top: .6em; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.42; }
[data-fascia-breve] .titolo-piccolo + p, [data-fascia-breve] .titolo-medio + p { margin-top: .5em; }
[data-colonne="uguali"] { display: grid; gap: 44px; }
@media (min-width: 900px) { [data-colonne="uguali"] { grid-template-columns: 1fr 1fr; gap: 64px; } }
[data-pillole] { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
[data-elenco="gusti"] { display: grid; gap: 12px; margin-top: 20px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.4; }
@media (min-width: 900px) { [data-elenco="gusti"] { grid-template-columns: 1fr 1fr; gap: 14px 56px; } }
[data-pagina] .pizze .carosello { margin-top: clamp(24px, 3vw, 44px); }
[data-foto] .pizza-foto { aspect-ratio: 4 / 5; overflow: hidden; }
[data-foto] .pizza-foto img { width: 100%; height: 100%; object-fit: cover; }
[data-foto-link] { display: block; width: 100%; height: 100%; }
[data-foto-link]:active { opacity: .85; }
.mani-griglia[data-coppia] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); }
@media (hover: hover) and (pointer: fine) {
  [data-foto]:hover .pizza-foto img { transform: scale(1.03); }
}
[data-logo] img { width: min(70%, 360px); margin-inline: auto; }
[data-icone] { display: flex; gap: 18px; margin-top: 14px; }
[data-icone] .ico { width: 28px; height: 30px; color: var(--arancio); }
.contatti-dx[data-giorni] { display: grid; margin-top: 20px; font-size: clamp(16px, 1.45vw, 21px); }
.contatti-dx[data-giorni] li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--grigio-scuro); transition: color .2s ease; }
.contatti-dx[data-giorni] strong { font-weight: 700; }
.contatti-dx[data-giorni] [data-chiuso] span:last-child { color: var(--grigio-testo); }
.contatti-dx[data-giorni] [data-oggi] { color: var(--arancio); }
@media (min-width: 900px) { .cucina-punti[data-colonne="tre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; } }
.cucina-punti[data-colonne="tre"] { margin-top: 24px; }
.cucina-punti[data-colonne="tre"] + .sezione-sotto { margin-top: 24px; }
.app .app-store { margin-top: 28px; justify-content: flex-start; }
.app-blocco .app-store { margin-top: 0; justify-content: center; }
.cucina-punti[data-elenco="app"] { display: grid; gap: 8px; margin-top: 16px; font-size: clamp(16px, 1.35vw, 19px); text-align: left; }
.cucina-punti[data-elenco="app"] li { position: relative; padding-left: 20px; }
.cucina-punti[data-elenco="app"] li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); }
[data-solo-telefono] { margin-top: 20px; }
@media (min-width: 768px) { [data-solo-telefono] { display: none; } }
.cucina-punti[data-domande] { display: grid; gap: 24px; margin-top: 26px; }
@media (min-width: 900px) { .cucina-punti[data-domande] { grid-template-columns: 1fr 1fr; gap: 30px 64px; } }
.cucina-punti[data-domande] h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.3; }
.cucina-punti[data-domande] p { margin-top: 6px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45; }
.allergeni-blocco { margin-top: clamp(40px, 4.5vw, 64px); }
.thk-allergeni { font-size: 14px; line-height: 1.5; color: var(--grigio-testo); }
.thk-allergeni ol { margin-top: 10px; padding-left: 1.4em; list-style: decimal; columns: 2; column-gap: 32px; }
@media (min-width: 900px) { .thk-allergeni ol { columns: 4; } }
@keyframes posa-foto { from { scale: 1.06; } }
[data-fascia] > .cornice img { animation: posa-foto 1.6s var(--ease-out) both; }
[data-fascia] .locale-testo > * { animation: entra-su .8s var(--ease-out) .15s both; }
[data-fascia] .locale-testo > :nth-child(2) { animation-delay: .25s; }
[data-fascia] .locale-testo > :nth-child(3) { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  [data-fascia] > .cornice img { animation: none; }
  [data-fascia] .locale-testo > * { animation-name: dissolvi; }
  @media (hover: hover) and (pointer: fine) { [data-foto]:hover .pizza-foto img { transform: none; } }
}

/* ══ il movimento · step 5-bis ═══════════════════════════════════════════
   Curve: --ease-out per entrate e uscite, --ease-in-out per quello che si sposta sullo schermo, ease per
   hover e colori. Si muovono solo transform e opacity. translate, rotate e scale sono le proprietà
   singole della trasformazione: si sommano a transform, che resta a main.js (lo scroll, con
   el.style.transform sull'elemento che si muove) e al tocco (:active). */

/* ── la hero entra al caricamento, col solo CSS ───────────────────────────
   La pizza e il logo non partono mai trasparenti: si posano (la prima schermata non rallenta).
   Lo spicchio si alza dalla pizza ruotando sul punto dove la mozzarella tocca la pizza; basilico e
   pomodorini escono da dietro la pizza e restano sospesi, con un galleggiare lento. */
@keyframes entra-su { from { opacity: 0; translate: 0 32px; } }
@keyframes dissolvi { from { opacity: 0; } }
@keyframes posa-pizza { from { translate: 0 3.5%; scale: .965; } }
@keyframes posa-logo { from { scale: .93; } }
@keyframes alza-spicchio { from { opacity: 0; rotate: 9deg; translate: 0 4%; } 45% { opacity: 1; } }
@keyframes vola-basilico-sx { from { opacity: 0; translate: 85% 70%; rotate: 40deg; } }
@keyframes vola-pomodorino-sx { from { opacity: 0; translate: 70% 140%; rotate: -70deg; } }
@keyframes vola-basilico-dx { from { opacity: 0; translate: -80% 90%; rotate: -35deg; } }
@keyframes vola-pomodorino-dx { from { opacity: 0; translate: -130% 30%; rotate: 80deg; } }
@keyframes fluttua-a { to { translate: 0 -8%; rotate: -5deg; } }
@keyframes fluttua-b { to { translate: 0 7%; rotate: 6deg; } }
@keyframes sospendi { to { rotate: -2deg; } }

.hero::before { animation: dissolvi 1.6s var(--ease-out) both; }
.strato-pizza { transform-origin: 50% 100%; animation: posa-pizza 1.1s var(--ease-out) both; }
.strato-logo { animation: posa-logo 1s var(--ease-out) .05s both; }
.strato-spicchio {
  transform-origin: 10% 92%;
  animation: alza-spicchio 1.2s var(--ease-out) .15s both, sospendi 3.8s var(--ease-in-out) 1.4s infinite alternate;
}
.strato-basilico-sx { animation: vola-basilico-sx 1.1s var(--ease-out) .3s both, fluttua-a 5.2s var(--ease-in-out) 1.4s infinite alternate; }
.strato-pomodorino-sx { animation: vola-pomodorino-sx 1.1s var(--ease-out) .38s both, fluttua-b 4.6s var(--ease-in-out) 1.5s infinite alternate; }
.strato-basilico-dx { animation: vola-basilico-dx 1.1s var(--ease-out) .34s both, fluttua-b 5.8s var(--ease-in-out) 1.45s infinite alternate; }
.strato-pomodorino-dx { animation: vola-pomodorino-dx 1.1s var(--ease-out) .44s both, fluttua-a 4.2s var(--ease-in-out) 1.55s infinite alternate; }
.strato-spicchio, .strato-basilico-sx, .strato-pomodorino-sx, .strato-basilico-dx, .strato-pomodorino-dx { will-change: transform; }
.hero-titolo { animation: entra-su .8s var(--ease-out) .2s both; }
.hero-titolo .arancio { animation: entra-su .8s var(--ease-out) .32s both; }
.hero-sotto { animation: entra-su .8s var(--ease-out) .4s both; }
.hero-azioni .btn { animation: entra-su .8s var(--ease-out) .48s both; }
.hero-azioni .btn + .btn { animation-delay: .54s; }
.hero-chiama { animation: entra-su .8s var(--ease-out) .6s both; }

/* ── l'intestazione cambia scorrendo: la linea sotto e il logo più raccolto; da telefono si nasconde
   scendendo e torna appena si risale (main.js: .scorsa e .nascosta) ─────── */
.testata-logo img { transform-origin: 0 50%; transition: transform .25s var(--ease-out); }
.testata.scorsa .testata-logo img { transform: scale(.88); }
@media (max-width: 767px) {
  .testata.nascosta { transform: translateY(-100%); transition: box-shadow .2s ease, transform .2s var(--ease-out); }
  .testata.nascosta:focus-within { transform: none; }
}

/* ── le entrate allo scroll: .reveal → .in (main.js), una volta sola ─────
   Se main.js non parte, il paracadute in <head> toglie la classe js e si vede tutto. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .consegna-mappa.reveal, .js .piatto-fusilli.reveal, .js .mani-testo.reveal { transition-delay: .1s; }
/* a cascata: i figli arrivano uno dopo l'altro, a 70 ms */
.js .reveal.cascata { opacity: 1; transform: none; }
.js .cascata > * { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal:not(.in) .cascata > *, .js .reveal.cascata:not(.in) > * { opacity: 0; transform: translateY(24px); }
.js .cascata > :nth-child(2) { transition-delay: 70ms; }
.js .cascata > :nth-child(3) { transition-delay: 140ms; }
.js .cascata > :nth-child(4) { transition-delay: 210ms; }
.js .cascata > :nth-child(5) { transition-delay: 280ms; }
/* le pizze entrano di lato, dentro il loro binario: la riga si scorre col dito */
.pizze { overflow-x: clip; }
.js .reveal.carosello-binario:not(.in) > * { transform: translateX(56px); }

/* ── la consegna: la scatola arriva sulla mappa, le strade compaiono, i paesi si accendono uno a uno
   partendo da Luino, e da Luino parte un'onda lenta ───────────────────── */
.mappa-strade { transition: opacity 1s var(--ease-out) .1s; }
.js .consegna-mappa:not(.in) .mappa-strade { opacity: 0; }
.mappa-punti circle { transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease-out) .38s, transform .6s var(--ease-out) .38s; }
.js .consegna-mappa:not(.in) .mappa-punti circle { opacity: 0; transform: translateY(-16px); }
.mappa-punti circle:nth-child(2), .mappa-punti circle:nth-child(3) { transition-delay: .25s; }
.mappa-punti circle:nth-child(4) { transition-delay: .44s; }
.mappa-punti circle:nth-child(5) { transition-delay: .5s; }
.mappa-punti circle:nth-child(6) { transition-delay: .56s; }
.paese { transition: opacity .6s var(--ease-out) .46s, translate .6s var(--ease-out) .46s; }
.js .consegna-mappa:not(.in) .paese { opacity: 0; translate: -10px 0; }
.paese-luino { transition-delay: .33s; }
.paese:nth-child(3) { transition-delay: .52s; }
.paese:nth-child(4) { transition-delay: .58s; }
.paese:nth-child(5) { transition-delay: .64s; }
.consegna-scatola { transition: opacity .7s var(--ease-out) .15s, translate 1s var(--ease-out) .15s, rotate 1s var(--ease-out) .15s; }
.js .consegna-mappa:not(.in) .consegna-scatola { opacity: 0; translate: -14% 22%; rotate: -9deg; }
@keyframes onda { to { transform: scale(2.4); opacity: 0; } }
.consegna-mappa.in .mappa-luino-alone { animation: onda 2.8s var(--ease-out) 1.1s infinite; }

/* ── i numeri che salgono da zero: la cifra vera resta al suo posto, trasparente, e sopra scorre quella
   che sale (main.js): l'impaginazione non si muove ────────────────────── */
.conta { position: relative; }
.conta.contando { color: transparent; }
.conta.contando::after {
  content: attr(data-valore);
  content: attr(data-valore) / "";
  position: absolute; top: 0; right: 0;
  color: var(--bianco);
}

/* ── i piatti: un filo di profondità allo scroll (main.js) e, col mouse, si avvicinano ── */
.piatto img { will-change: transform; transition: scale .28s ease, rotate .28s ease; }
@media (hover: hover) and (pointer: fine) {
  .piatto:hover img { scale: 1.035; rotate: -2deg; }
}

/* ── al tocco, al mouse e alla tastiera ─────────────────────────────── */
.contatti-tel { transform-origin: 0 50%; touch-action: manipulation; transition: color .2s ease, transform .16s var(--ease-out); }
.contatti-tel:active { transform: scale(.97); }
.testata-logo:active, .piede-logo:active, .contatti-dx a:active, .piede-link a:active, .piede-legale a:active { opacity: .7; }
.piede-link a, .contatti-dx a { transition: color .2s ease; }
.social .ico { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .contatti-tel:hover, .contatti-dx a:hover { color: var(--arancio); }
}

/* ── la barra delle azioni da telefono arriva quando i pulsanti della hero escono dallo schermo
   (main.js: html.barra-vista); fuori dalla home c'è sempre ─────────────── */
@media (max-width: 767px) {
  .barra-azioni { transition: transform .28s var(--ease-out), opacity .28s var(--ease-out); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.barra-vista) .pagina-home .barra-azioni { transform: translateY(calc(100% + 1px)); opacity: 0; transition-duration: .2s; }
  html.js:not(.barra-vista) .pagina-home .barra-azioni:focus-within { transform: none; opacity: 1; }
}

/* ── meno movimento, non zero: restano le dissolvenze, se ne vanno gli spostamenti ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strato-pizza, .strato-logo { animation: none; }
  .strato-spicchio, .strato-basilico-sx, .strato-pomodorino-sx, .strato-basilico-dx, .strato-pomodorino-dx { animation: dissolvi .9s var(--ease-out) .15s both; }
  .hero-titolo, .hero-titolo .arancio, .hero-sotto, .hero-azioni .btn, .hero-chiama { animation-name: dissolvi; }
  .testata.scorsa .testata-logo img { transform: none; }
  .js .reveal { transform: none; transition: opacity .6s var(--ease-out); }
  .js .reveal:not(.in) .cascata > *, .js .reveal.cascata:not(.in) > *, .js .reveal.carosello-binario:not(.in) > * { transform: none; }
  .js .consegna-mappa:not(.in) .mappa-punti circle { transform: none; }
  .js .consegna-mappa:not(.in) .paese { translate: none; }
  .js .consegna-mappa:not(.in) .consegna-scatola { translate: none; rotate: none; }
  .consegna-mappa.in .mappa-luino-alone { animation: none; }
  .nav-voci li, .nav-azioni, html.menu-aperto .nav-voci li, html.menu-aperto .nav-azioni { translate: none; }
  @media (hover: hover) and (pointer: fine) {
    .pizza-scheda:hover .pizza-foto img { transform: none; }
    .piatto:hover img { scale: none; rotate: none; }
  }
}

/* ══ il salto di livello · step 6-quater (04/11/2026) ═══════════════════════════
   Stessa struttura, stesso copy, stesso kit: cambia la qualità grafica (Design/SALTO-DI-LIVELLO.md).
   1 · la hero della home in una schermata · 2 · luce calda e profondità · 3 · scala dei titoli e aria
   4 · le fasce delle pagine interne · 5 · i dettagli · 6 · il telefono. Il movimento resta quello del 5-bis. */
:root { --sezione: clamp(60px, 6.6vw, 104px); }

/* 3 · i titoli: più grandi, più stretti; i sottotitoli più leggeri */
.titolo-sezione { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.032em; }
.titolo-medio { font-size: clamp(29px, 3vw, 46px); line-height: 1.06; letter-spacing: -.026em; }
.titolo-piccolo { font-size: clamp(23px, 2.2vw, 33px); line-height: 1.16; letter-spacing: -.016em; }
.sezione-sotto, .hero-sotto, .consegna-testo p, .mani-social-testo, .app-sotto { color: rgba(248, 248, 248, .86); }
.pizza-nome { font-size: clamp(20px, 1.95vw, 28px); letter-spacing: -.01em; }
.contatti-tel { font-size: clamp(32px, 3.3vw, 50px); }

/* 1 · la hero della home: scena, titolo e pulsanti nella prima schermata */
.hero-titolo { font-size: clamp(38px, 4.5vw, 66px); line-height: .99; letter-spacing: -.036em; }
@media (min-width: 1024px) {
  .hero { justify-content: center; padding-bottom: clamp(24px, 3.6vh, 44px); }
  .hero-scena { width: min(1280px, 100%, max(600px, calc((100svh - var(--testata-h) - 300px) * 16 / 9))); }
  .hero-testo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 72px);
    align-items: end; margin-top: clamp(10px, 1.8vh, 22px);
  }
  .hero-titolo { grid-column: 1 / -1; }
  .hero-sotto { grid-column: 1; grid-row: 2; max-width: 34em; margin-top: .7em; }
  .hero-azioni { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; padding-bottom: 6px; flex-wrap: nowrap; }
  .hero-chiama { grid-column: 1; grid-row: 3; margin-top: 4px; }
}

/* 2 · luce calda: il forno dietro la pizza, una luce morbida sotto, e lo stesso bagliore nelle sezioni */
.hero::before {
  top: 54%; width: min(1400px, 150%); aspect-ratio: 2 / 1;
  background:
    radial-gradient(closest-side, rgba(252, 140, 0, .17), rgba(252, 140, 0, .06) 52%, rgba(252, 140, 0, 0) 100%);
}
.hero-scena::after {
  content: ""; position: absolute; left: 10%; width: 66%; bottom: -3%; height: 16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(252, 140, 0, .16), rgba(252, 140, 0, 0));
}
.pizze .carosello::before, .cucina-scena::before, .mappa::before, [data-logo]::before, [data-colonne="app"] [data-schermata]::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(252, 140, 0, .12), rgba(252, 140, 0, 0));
}
.pizze .carosello::before { left: 8%; right: 8%; top: 6%; height: 70%; }
.cucina-scena::before { left: -4%; width: 90%; top: 4%; height: 96%; }
.mappa::before { left: 22%; width: 36%; top: 12%; height: 62%; }
[data-mappa="locale"]::before { left: 30%; width: 32%; top: 28%; height: 52%; background: radial-gradient(closest-side, rgba(252, 140, 0, .16), rgba(252, 140, 0, 0)); }
[data-logo], [data-colonne="app"] [data-schermata] { position: relative; }
[data-logo]::before { inset: -6% 4%; }
[data-colonne="app"] [data-schermata]::before { inset: 0 2%; }
/* il bagliore sta dietro a tutto quello che c'è nel suo contenitore, senza toccare le posizioni dei figli */
.pizze .carosello, .cucina-scena, .mappa, [data-logo], [data-colonne="app"] [data-schermata], .hero-scena { isolation: isolate; }
.app-icona { box-shadow: 0 0 0 1px rgba(252, 140, 0, .22), 0 18px 60px -12px rgba(252, 140, 0, .45); }
[data-schermata] img { box-shadow: 0 24px 70px -20px rgba(252, 140, 0, .38); }

/* 4 · le fasce delle pagine interne: più alte, il titolo dentro la sfumatura */
[data-fascia] > .cornice { height: clamp(340px, 44vw, 640px); }
[data-fascia] > .cornice::after {
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .1) 18%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .78) 80%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, #000 100%);
}
[data-fascia] .locale-testo { margin-top: clamp(-230px, -13vw, -96px); }
[data-fascia] .titolo-sezione { font-size: clamp(36px, 4.6vw, 70px); text-shadow: 0 2px 36px rgba(0, 0, 0, .55); }

/* 5 · i dettagli: pulsanti, icone, piede, orari, domande */
.btn-arancio { box-shadow: 0 14px 34px -16px rgba(252, 140, 0, .75); }
.btn-contorno { border-width: 1.5px; }
[data-icona-grande], .cucina-punti[data-paesi] .ico, [data-icone] .ico { color: var(--arancio); }
[data-icona-grande] { width: 52px; height: 56px; }
[data-passi] { gap: 22px; }
.contatti-dx[data-giorni] li { padding: 14px 0; }
.contatti-dx[data-giorni] [data-chiuso] { color: var(--grigio-testo); }
.contatti-dx[data-giorni] [data-oggi] { font-weight: 700; }
.cucina-punti[data-domande] li { padding-top: 22px; border-top: 1px solid var(--grigio-scuro); }
.cucina-punti[data-domande] p { color: rgba(248, 248, 248, .82); }
.piede { position: relative; border-top: 0; }
.piede::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(1240px, 92%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(252, 140, 0, 0), rgba(252, 140, 0, .75), rgba(252, 140, 0, 0));
}
@media (min-width: 768px) {
  .barra-dentro { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; gap: 16px; }
  .barra-azioni .btn { min-height: 48px; }
}

/* la mappa del locale (/contatti): il lungolago acceso, il pontile del battello, la scatola su Piazza Libertà */
[data-mappa="locale"] [data-riva] { fill: none; stroke: var(--arancio); stroke-width: 4; stroke-linecap: round; }
[data-mappa="locale"] [data-riva-alone] { fill: none; stroke: var(--arancio); stroke-width: 16; stroke-linecap: round; opacity: .18; }
[data-mappa="locale"] [data-pontile] { fill: none; stroke: var(--bianco); stroke-width: 6; stroke-linecap: round; }
[data-mappa="locale"] [data-pontile-testa] { fill: var(--bianco); }
[data-mappa="locale"] [data-rotta] { fill: none; stroke: var(--grigio-testo); stroke-width: 2; stroke-dasharray: 4 9; stroke-linecap: round; opacity: .7; }
[data-mappa="locale"] .paese:not(.paese-luino) { opacity: .55; font-size: clamp(11px, 1.15vw, 15px); }
.js .consegna-mappa:not(.in) [data-mappa="locale"] .paese:not(.paese-luino) { opacity: 0; }
[data-mappa="locale"] .paese:nth-child(4), [data-mappa="locale"] .paese:nth-child(5) { transform: translate(calc(-100% - clamp(12px, 1.6vw, 18px)), -52%); }
[data-mappa="locale"] .paese-luino { font-size: clamp(20px, 2.6vw, 36px); }
[data-mappa="locale"] .consegna-scatola { left: 55%; top: 9%; bottom: auto; width: 15%; transform: rotate(-5deg); }
.js .consegna-mappa:not(.in) [data-mappa="locale"] [data-riva], .js .consegna-mappa:not(.in) [data-mappa="locale"] [data-riva-alone] { opacity: 0; }
[data-mappa="locale"] [data-riva], [data-mappa="locale"] [data-riva-alone] { transition: opacity .9s var(--ease-out) .2s; }

/* 6 · il telefono */
@media (max-width: 767px) {
  .hero-titolo { font-size: clamp(36px, 10vw, 44px); }
  [data-fascia] > .cornice { height: clamp(300px, 86vw, 380px); }
  [data-fascia] .locale-testo { margin-top: -84px; }
  [data-mappa="locale"] .consegna-scatola { left: 50%; top: 15%; width: 14%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mappa="locale"] [data-riva], [data-mappa="locale"] [data-riva-alone] { transition: opacity .6s var(--ease-out); }
}

/* ══ step 7 · le pagine interne coi pezzi della home (04/11/2026) ═══════════════
   Le varianti di pagina sono attributi data-* sulle classi della home; queste righe tengono la grafica del salto
   identica, togliendo quello che le classi della home porterebbero in più. */
[data-pagina] .pizze-vai { font-size: inherit; }
[data-fascia-breve] .pizze-vai { margin-top: .6em; font-size: clamp(16px, 1.45vw, 21px); }   /* come i paragrafi della fascia, prima */
.mani-griglia[data-colonne="uguali"] { align-items: start; }
.mani-griglia[data-coppia] { align-items: normal; }
[data-fascia-breve] { max-width: none; }
.cucina-punti[data-elenco="gusti"] li { display: block; font-size: inherit; line-height: 1.4; }
.sezione-sotto[data-nota] { color: var(--bianco); }
.cucina-punti[data-paesi] { justify-content: normal; }
.cucina-punti[data-paesi] li { line-height: 1.55; }
.cucina-punti[data-elenco="app"] { justify-content: normal; }
.cucina-punti[data-elenco="app"] li { display: block; gap: 0; font-size: inherit; line-height: 1.55; }
.contatti-dx[data-giorni] { gap: 0; }
.contatti-dx[data-giorni] li { font-size: inherit; line-height: 1.55; align-items: normal; }
.cucina-punti[data-domande] li { display: block; font-size: inherit; line-height: inherit; }
/* la cascata delle domande frequenti: la 6ª e la 7ª in fila alle altre */
.js .cascata > :nth-child(6) { transition-delay: 350ms; }
.js .cascata > :nth-child(7) { transition-delay: 420ms; }
.js .cascata > :nth-child(8) { transition-delay: 490ms; }
/* le frecce di una riga che non scorre non si vedono: non sono comandi morti */
[data-carosello][data-fermo] .freccia { display: none; }
/* a 320 px un rimando lungo va a capo, e la griglia dei contatti non si allarga */
.contatti-griglia { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contatti-griglia { grid-template-columns: 1fr minmax(0, 460px); } }
@media (max-width: 374px) { .link-scopri { white-space: normal; } }

/* ══ 2 Step · le modifiche del 05/11/2026 ═══════════════════════════════════════
   9 · niente più bordi che svaniscono nel nero: foto in cornice, angoli arrotondati, luce calda
   1 3 4 5 10 · i formati in proporzione · 11 · /menu · 12 · /il-locale · 13 · come si ordina · 14 · la sala */

/* 9 · la cornice: bordi netti, angoli arrotondati, un filo chiaro e la luce calda sotto */
.cornice {
  position: relative; margin: 0; overflow: hidden; border-radius: clamp(14px, 1.6vw, 22px); background: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(248, 248, 248, .08), 0 30px 60px -30px rgba(252, 140, 0, .55);
}
.cornice img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
@media (hover: hover) and (pointer: fine) { .cornice:hover img { transform: scale(1.04); } [data-fascia] > .cornice:hover img { transform: none; } }
/* le foto che sfumavano: adesso in cornice anche loro */
[data-foto] .pizza-foto {
  border-radius: clamp(14px, 1.6vw, 22px); box-shadow: 0 0 0 1px rgba(248, 248, 248, .08), 0 30px 60px -30px rgba(252, 140, 0, .55);
}
/* le fasce in alto delle pagine interne: la foto in cornice, il titolo dentro, con un velo scuro solo dietro al testo */
[data-fascia] { padding-top: clamp(12px, 2vw, 28px); }
[data-fascia] > .cornice {
  width: calc(100% - var(--lato) - var(--lato-dx)); max-width: var(--contenitore); margin-inline: auto;
  height: clamp(300px, 40vw, 580px); border-radius: clamp(18px, 2.2vw, 30px);
  box-shadow: 0 0 0 1px rgba(248, 248, 248, .08), 0 40px 90px -40px rgba(252, 140, 0, .6);
}
[data-fascia] > .cornice::after { background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, 0) 58%); }
[data-fascia] .locale-testo { margin-top: clamp(-190px, -12vw, -120px); padding-left: calc(var(--lato) + clamp(22px, 3vw, 52px)); padding-right: calc(var(--lato-dx) + clamp(22px, 3vw, 52px)); }
[data-fascia] .titolo-sezione { font-size: clamp(32px, 4.2vw, 64px); }
@media (max-width: 767px) {
  [data-fascia] > .cornice { height: clamp(240px, 64vw, 320px); }
  [data-fascia] > .cornice::after { background: none; }
  [data-fascia] .locale-testo { margin-top: 22px; padding-left: var(--lato); padding-right: var(--lato-dx); }
}

/* 1 3 4 5 10 · i formati: in fila, in proporzione, col segno della grandezza e una riga per formato */
.formati .pizza-scheda { position: relative; display: flex; flex-direction: column; align-items: center; }
.formati .pizza-foto { align-items: flex-end; }
.formati .pizza-foto img { scale: var(--scala, 1); transform-origin: 50% 100%; }
.formati .pizza-nome { margin-top: 14px; font-size: clamp(18px, 1.55vw, 22px); }
.taglia { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.taglia i { display: block; border-radius: 50%; border: 1.5px solid var(--grigio-testo); }
.taglia i:nth-child(1) { width: 8px; height: 8px; }
.taglia i:nth-child(2) { width: 12px; height: 12px; }
.taglia i:nth-child(3) { width: 16px; height: 16px; }
.taglia[data-taglia="1"] i:nth-child(1), .taglia[data-taglia="2"] i:nth-child(-n+2), .taglia[data-taglia="3"] i { background: var(--arancio); border-color: var(--arancio); }
.formato-riga { margin-top: 8px; max-width: 15em; font-size: clamp(14px, 1.12vw, 16px); line-height: 1.4; color: rgba(248, 248, 248, .8); }
.etichetta {
  position: absolute; top: 0; left: 50%; z-index: 2; translate: -50% 0;
  padding: 5px 12px; border-radius: 999px; background: var(--arancio); color: var(--nero);
  font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; white-space: nowrap;
}
@media (min-width: 768px) {
  .carosello-binario.formati { padding-inline: var(--lato) var(--lato-dx); scroll-padding-inline: var(--lato); }
  .formati .pizza-scheda { flex-basis: calc((100% - 5 * var(--gap-car)) / 6); }
}
@media (max-width: 767px) { .formati .pizza-scheda { flex-basis: 46%; } }

/* 13 · 11 · le schede: un pezzo del kit e la sua etichetta, senza riquadri (il sito resta aperto e nero) */
.schede { display: grid; gap: clamp(22px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: clamp(28px, 3.4vw, 48px); }
.scheda { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.scheda > img, [data-mosaico="coppia"] img {
  width: min(64%, 180px); height: auto; aspect-ratio: auto;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(252, 140, 0, .14));
  transition: transform .28s ease;
}
.scheda-titolo { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.25; }
.scheda p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .scheda:hover > img, .scheda:hover [data-mosaico="coppia"] img { transform: translateY(-6px) rotate(-2deg) scale(1.04); } }
.app .schede { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 559px) { .app .schede { gap: 14px; } .app .schede .scheda-titolo { font-size: 15px; } }
.scheda[data-scheda="tonda"] > img {
  width: min(62%, 168px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #111; filter: none;
  box-shadow: 0 0 0 1px rgba(248, 248, 248, .1), 0 22px 46px -18px rgba(252, 140, 0, .55);
}
[data-schede="gusti"] .scheda[data-scheda="tonda"] > img[src*="vola-"] { object-fit: contain; padding: 14%; }
[data-schede="gusti"] .scheda { text-align: left; align-items: flex-start; }
[data-schede="gusti"] .scheda > img { margin-inline: auto; }
[data-schede="piatti"] { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
[data-schede="piatti"] .scheda > img { width: 100%; animation: galleggia-piatto 4.6s var(--ease-in-out) infinite alternate; }
[data-schede="piatti"] .scheda:nth-child(2) > img { animation-duration: 5.4s; animation-delay: -1.2s; }
[data-schede="piatti"] .scheda:nth-child(3) > img { width: 82%; animation-duration: 5s; animation-delay: -2.4s; }
@keyframes galleggia-piatto { to { translate: 0 -10px; } }
[data-schede="due"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.scheda[data-scheda="lunga"] { padding-top: 34px; }
.scheda[data-scheda="lunga"] .etichetta { top: 0; }
[data-mosaico="coppia"] { display: flex; justify-content: center; gap: 0; }
[data-mosaico="coppia"] img { width: min(46%, 170px); }
[data-mosaico="coppia"] img + img { margin-left: -6%; translate: 0 10%; }
[data-centro] { text-align: center; margin-inline: auto; max-width: 40em; margin-top: clamp(24px, 3vw, 36px); }
[data-fascia-breve] > img { width: clamp(92px, 11vw, 150px); height: auto; flex: none; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6)); }
@media (max-width: 559px) { [data-fascia-breve] { flex-direction: column; gap: 14px; } }

/* 11 · gli ingredienti che volano sul /menu, come quelli della hero */
[data-volano] { position: relative; }
[data-volano] .strato { z-index: 0; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); }
[data-volano] > :not(.strato) { position: relative; z-index: 1; }
[data-fluttua="a"] { animation: fluttua-a 5.6s var(--ease-in-out) infinite alternate; }
[data-fluttua="b"] { animation: fluttua-b 6.4s var(--ease-in-out) infinite alternate; }
/* 3 Step, secondo giro (06/11/2026): da 900 px la mozzarella e l'oliva che volano sulle pizze non toccano più il testo
   («Verace», «Focaccia», in tutte e 5 le lingue): la mozzarella un po' più su, accanto alla foto della Verace; l'oliva
   subito sotto le schede, sempre al centro. Sotto i 900 px restano dov'erano (lì non toccano niente). */
@media (min-width: 900px) {
  [data-volano] > .strato[src*="vola-mozzarella"] { --y: 50% !important; }
  [data-volano] > .strato[src*="vola-oliva"] { --y: calc(100% + 8px) !important; }
}
/* 3 Step, terzo giro (06/11/2026): al telefono il pomodorino che vola sulle pizze toccava la fine di una riga della Verace
   solo a certe larghezze, diverse per lingua (misurate a 1 px coi testi di oggi). Lì va un po' più a destra (esce dal bordo,
   come nel disegno); a ogni altra larghezza, 390 compreso, resta dov'era. Se cambiano i testi, le fasce si rimisurano. */
@media (min-width: 349px) and (max-width: 356px), (min-width: 365px) and (max-width: 374px), (min-width: 403px) and (max-width: 415px) {
  html[lang="it"] [data-volano] > .strato[src*="vola-pomodorino"] { --x: 96% !important; }
}
@media (min-width: 341px) and (max-width: 347px), (min-width: 359px) and (max-width: 373px) {
  html[lang="en"] [data-volano] > .strato[src*="vola-pomodorino"] { --x: 96% !important; }
}
@media (min-width: 341px) and (max-width: 347px), (min-width: 359px) and (max-width: 367px), (min-width: 413px) and (max-width: 423px) {
  html[lang="es"] [data-volano] > .strato[src*="vola-pomodorino"] { --x: 96% !important; }
}
@media (min-width: 345px) and (max-width: 352px), (min-width: 363px) and (max-width: 372px), (min-width: 417px) and (max-width: 430px) {
  html[lang="fr"] [data-volano] > .strato[src*="vola-pomodorino"] { --x: 96% !important; }
}
@media (min-width: 324px) and (max-width: 325px), (min-width: 341px) and (max-width: 348px), (min-width: 359px) and (max-width: 367px), (min-width: 414px) and (max-width: 427px) {
  html[lang="de"] [data-volano] > .strato[src*="vola-pomodorino"] { --x: 96% !important; }
}

/* 14 · 12 · la sala in composizione: foto vere, sovrapposte, con profondità */
.locale-griglia { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .locale-griglia { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.locale-griglia .locale-testo { margin-top: 0; }
.locale-griglia .locale-riga { grid-template-columns: 1fr; }
.locale-griglia .locale-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; justify-content: stretch; }
.locale-griglia .locale-numeri li:nth-child(3) { grid-column: 1 / -1; }
.mosaico { position: relative; }
.mosaico[data-mosaico="sala"] { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(10px, 1.4vw, 18px); margin-bottom: clamp(48px, 6vw, 84px); }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(1) { grid-row: span 2; }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(2) { aspect-ratio: 1; translate: 0 -14px; }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(3) { aspect-ratio: 4 / 5; }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(4) { position: absolute; z-index: 2; left: 36%; bottom: -16%; width: 30%; aspect-ratio: 4 / 5; rotate: -5deg; }
.mosaico[data-mosaico="mani"] { padding: 6% 16% 12% 0; }
.mosaico[data-mosaico="mani"] > .cornice:nth-child(1) { aspect-ratio: 3 / 2; }
.mosaico[data-mosaico="mani"] > .cornice:nth-child(2) { position: absolute; z-index: 2; right: 0; top: 0; width: 30%; aspect-ratio: 3 / 4; rotate: 4deg; }
.mosaico[data-mosaico="mani"] > .cornice:nth-child(3) { position: absolute; z-index: 3; right: 9%; bottom: 0; width: 27%; aspect-ratio: 1; rotate: -4deg; }
.mosaico[data-mosaico="bento"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 12vw, 190px); gap: clamp(10px, 1.2vw, 16px); }
.mosaico[data-mosaico="bento"] > .cornice:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaico[data-mosaico="bento"] > .cornice:nth-child(4) { grid-row: span 2; }
.mosaico[data-mosaico="bento"] > .cornice:nth-child(5) { grid-column: span 2; }
@media (min-width: 900px) { .locale-griglia[data-griglia="sala"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); margin-top: clamp(40px, 5vw, 72px); } }
.locale-griglia[data-griglia="sala"] { margin-top: clamp(32px, 4vw, 56px); }
.locale-numeri[data-numeri="grandi"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); }
.locale-numeri[data-numeri="grandi"] li { font-size: clamp(14px, 1.3vw, 19px); }
.locale-numeri[data-numeri="grandi"] strong { font-size: clamp(22px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.02em; color: var(--arancio); }
.locale-numeri[data-numeri="grandi"] li:nth-child(3) { grid-column: auto; }
@media (max-width: 559px) { .locale-numeri[data-numeri="grandi"] { grid-template-columns: 1fr; } .locale-numeri[data-numeri="grandi"] li { display: flex; gap: .4em; align-items: baseline; } .locale-numeri[data-numeri="grandi"] strong { display: inline; } }

/* 13 · i passi dell'ordine con le icone */
[data-passi] { text-align: left; }
[data-passo] .ico { width: 22px; height: 22px; }
.app-testo [data-passi] { margin-top: 18px; }
.app-testo [data-passi] + .app-sotto { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  [data-fluttua], [data-schede="piatti"] .scheda > img { animation: none; }
  @media (hover: hover) and (pointer: fine) {
    .cornice:hover img { transform: none; }
    .scheda:hover > img, .scheda:hover [data-mosaico="coppia"] img { transform: none; }
  }
}
/* 2 Step · ritocchi dopo le foto: i nomi dei formati allineati, il mosaico della sala senza buchi, l'elenco della sala in una colonna */
.formati .pizza-foto { width: 100%; }
.mosaico[data-mosaico="bento"] > .cornice:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.locale-griglia[data-griglia="sala"] .cucina-punti[data-elenco="gusti"] { grid-template-columns: 1fr; }

/* 2 Step · seconda parte (05/11/2026): i pezzi nuovi del kit, il menu e il locale più chiari in home ═══════════════
   10 · i formati tondi visti dall'alto, in proporzione, sulla stessa linea; sotto il nome il segno della grandezza o
   «Su prenotazione» · 6 · il terzo piatto · 18 · la testata col rimando, i numeri del locale · 11 · i quattro piatti */
.carosello-binario.formati { --gap-car: clamp(16px, 1.8vw, 26px); }
.formati .pizza-foto { aspect-ratio: 1 / 1; order: -2; }
.formati .pizza-foto img { object-position: 50% 100%; transform-origin: 50% 100%; }
.formati .pizza-nome { order: -1; }
.formati .etichetta { position: static; translate: none; margin-top: 10px; }
@media (min-width: 768px) { .formati .pizza-scheda { flex-basis: calc((100% - 4 * var(--gap-car)) / 4.5); } }
@media (min-width: 1200px) { .formati .pizza-scheda { flex-basis: calc((100% - 6 * var(--gap-car)) / 7); } }

/* 18 · la testata delle sezioni del cibo: il titolo, cosa c'è, e il rimando al menu ben visibile */
.sezione-testa { display: grid; gap: 18px 48px; align-items: end; }
.sezione-testa > .pizze-vai { margin: 0; }
.pizze .sezione-testa .titolo-sezione { margin-bottom: 0; }
.pizze .sezione-testa .sezione-sotto { margin-top: .55em; }
.pizze .sezione-testa + .carosello { margin-top: clamp(24px, 3vw, 44px); }
.cucina-testa.sezione-testa { max-width: none; }
@media (min-width: 900px) { .sezione-testa { grid-template-columns: minmax(0, 1fr) auto; } }

/* 6 · tre piatti: la carbonara dietro a sinistra, l'astice dietro a destra sotto le due voci, i fusilli davanti */
@media (min-width: 900px) {
  .cucina-scena { height: clamp(520px, 46vw, 660px); }
  .piatto-carbonara { width: 44%; }
  .piatto-fusilli { left: 31%; top: 38%; width: 41%; z-index: 2; }
  .piatto-astice { right: 0; top: 33%; width: 37%; z-index: 1; }
  .piatto-astice .piatto-nome { right: 4%; top: 100%; margin-top: 4px; text-align: right; }
  .cucina-scena .cucina-punti { width: min(31%, 390px); top: 0; }
}
@media (max-width: 899px) {
  .piatto-astice { width: 74%; margin-top: -6%; }
  .piatto-astice .piatto-nome { left: 100%; top: 38%; margin-left: 2%; font-size: 17px; }
}
/* 9-ter, riletture delle lingue (06/11/2026): sul telefono le didascalie accanto ai fusilli e all'astice, nelle lingue più
   lunghe dell'italiano, vanno a capo nello spazio che c'è, a 8 px dal bordo dello schermo (e, se una parola non ci sta, la
   spezzano col trattino della lingua): niente più scorrimento di lato. L'italiano resta com'era: la regola non lo tocca. */
@media (max-width: 899px) {
  html:not([lang="it"]) .piatto-fusilli .piatto-nome,
  html:not([lang="it"]) .piatto-astice .piatto-nome { white-space: normal; width: max-content; hyphens: auto; -webkit-hyphens: auto; }
  html:not([lang="it"]) .piatto-fusilli .piatto-nome { max-width: calc(29.5% + 8px); }
  html:not([lang="it"]) .piatto-astice .piatto-nome { max-width: calc(33% + 8px); }
}
/* 9-ter, riletture delle lingue (06/11/2026): sul telefono, nelle altre lingue, i rimandi «Scopri …» con la freccia vanno a
   capo invece di uscire dallo schermo («Zones de livraison et comment commander»), e in tedesco le parole lunghe dei titoli
   («Schiffsanlegestelle» a 320 px) si dividono col trattino. L'italiano resta com'era: queste regole non lo toccano. */
@media (max-width: 767px) {
  html:not([lang="it"]) .link-scopri { white-space: normal; }
  html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}
/* 9-ter, riletture delle lingue (06/11/2026): la barra in fondo sul telefono, nelle altre lingue. «In der App bestellen»,
   «Commander sur l'app»: il primo pulsante può andare su due righe, gli altri due perdono l'icona e un po' di margine, così
   «Reservieren», «Réserver» e «Appeler» restano dentro il loro pulsante (a 320 px, se serve, col trattino). L'italiano no. */
@media (max-width: 767px) {
  html:not([lang="it"]) .barra-dentro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  html:not([lang="it"]) .barra-azioni .btn { padding: 6px; white-space: normal; line-height: 1.12; text-align: center; hyphens: auto; -webkit-hyphens: auto; }
  html:not([lang="it"]) .barra-azioni .btn-contorno .ico { display: none; }
}
@media (max-width: 374px) {
  html:not([lang="it"]) .barra-azioni .btn-arancio .ico { display: none; }
}
.js .piatto-astice.reveal { transition-delay: .18s; }

/* 18 · il locale in home: i due numeri grandi, come in /il-locale, e il rimando come pulsante */
.locale-griglia .locale-numeri .conta { display: block; width: fit-content; margin-bottom: 4px; font-size: clamp(44px, 4.6vw, 66px); line-height: 1; letter-spacing: -.03em; color: var(--arancio); }
.locale-griglia .locale-numeri .conta.contando::after { color: var(--arancio); }
.locale-griglia .locale-azioni { gap: 14px 18px; }
.locale-griglia .locale-riga { margin-top: clamp(26px, 3vw, 42px); }
.locale-griglia .locale-numeri li:nth-child(-n+2) strong { display: inline; }

/* 11 · /menu: quattro piatti in fila (due per riga da telefono), il tiramisù un po' più piccolo */
[data-schede="piatti"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { [data-schede="piatti"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-schede="piatti"] .scheda:nth-child(3) > img { width: 100%; }
[data-schede="piatti"] .scheda:nth-child(4) > img { width: 78%; animation-duration: 5.8s; animation-delay: -3.2s; }
/* 9 · /contatti: la mappa senza sfumature, il lago fino al bordo e gli angoli arrotondati, come le foto in cornice */
[data-mappa="locale"] .mappa-disegno { clip-path: inset(0 round clamp(14px, 1.6vw, 22px)); }
/* /menu, prezzi: la foto torna a destra, come prima della tornata */
@media (min-width: 900px) { .mani-griglia[data-inversa] > .cornice { order: 2; } }
/* 4 · 11 · /menu: il titolo della riga di foto; da telefono gli impasti in tre per riga e i gusti in elenco, con la foto piccola accanto */
[data-foto-titolo] { margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 767px) {
  [data-schede="impasti"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  [data-schede="impasti"] .scheda > img { width: 92%; }
  [data-schede="impasti"] .scheda-titolo { font-size: 14px; }
  [data-schede="gusti"] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  [data-schede="gusti"] .scheda { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; }
  [data-schede="gusti"] .scheda[data-scheda="tonda"] > img { width: 88px; margin: 0; }
  [data-schede="gusti"] .scheda p { font-size: 15px; }
}
/* 14 · la sala in colonna (sotto i 900 px): la birra che sporge sotto il mosaico non tocca il titolo; il margine è in % della
   larghezza, come la sporgenza (il 16% dell'altezza del mosaico, che è circa la sua larghezza) */
@media (max-width: 899px) { .mosaico[data-mosaico="sala"] { margin-bottom: 17%; } }

/* 2 Step · il giro di correzione (05/11/2026) ═════════════════════════════════════════════════════════════════════
   9 · le fasce in alto delle pagine interne, da 768 px: titolo, sottotitolo e pulsanti tutti DENTRO la cornice, sopra la
   foto. Cornice e testo stanno nella stessa cella della griglia: la cornice cresce col testo e il bordo non lo taglia mai;
   il velo scuro solo dietro al testo, in basso a sinistra. A 390 px resta com'è: il testo sotto la foto. */
@media (min-width: 768px) {
  [data-fascia] { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-fascia] > .cornice, [data-fascia] > .locale-testo { grid-area: 1 / 1; }
  [data-fascia] > .cornice { height: auto; min-height: clamp(380px, 40vw, 580px); }
  [data-fascia] > .cornice img { position: absolute; inset: 0; }
  [data-fascia] > .cornice::after {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .52) 38%, rgba(0, 0, 0, 0) 72%),
      linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 64%);
  }
  [data-fascia] .locale-testo { align-self: end; margin-top: 0; padding-top: clamp(150px, 16vw, 240px); padding-bottom: clamp(30px, 3.6vw, 56px); }
}

/* 7 · /menu: le foto di Moreno di nuovo sulla pagina, in cornice: la margherita accanto agli esempi delle pizze, la
   carbonara e i fusilli accanto al titolo della cucina del mese */
[data-gusti-foto] > .cornice { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { [data-schede="gusti"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mani-griglia[data-gusti-foto] { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; } }
@media (max-width: 899px) { [data-gusti-foto] > .cornice { aspect-ratio: 4 / 3; } }
.mosaico[data-mosaico="piatti-foto"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.mosaico[data-mosaico="piatti-foto"] > .cornice { aspect-ratio: 4 / 5; }
.mani-griglia[data-cucina-foto] + .schede { margin-top: clamp(40px, 5vw, 76px); }
@media (min-width: 900px) {
  .mani-griglia[data-cucina-foto] { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .mosaico[data-mosaico="piatti-foto"] > .cornice:nth-child(2) { translate: 0 28px; }
}

/* 3 Step · voce 1: in home anche la pizza Moreno, al posto dei tranci: otto schede in fila da 1200 px */
@media (min-width: 1200px) {
  .formati[data-otto] .pizza-scheda { flex-basis: calc((100% - 7 * var(--gap-car)) / 8); min-width: 0; }
  .formati[data-otto] .pizza-nome { font-size: clamp(17px, 1.35vw, 20px); }
}

/* 3 Step · voce 2: in /menu la pizza Moreno per prima, su tutta la riga, così gli esempi restano due per riga */
@media (min-width: 768px) {
  [data-schede="gusti"] .scheda[data-evidenza] { grid-column: 1 / -1; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: clamp(20px, 2.4vw, 32px); }
  [data-schede="gusti"] .scheda[data-evidenza] > img { width: 100%; margin: 0; }
}

/* ── il pannello (6-ter, 05/11/2026): il menu coi prezzi e le foto del menu, sotto «Menu completo e prezzi».
      Vuoti alla consegna: sul sito compaiono quando il locale li mette dal pannello ── */
.listino { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); }
.listino-parte .titolo-piccolo { color: var(--arancio); }
.listino-voci { list-style: none; padding: 0; margin: 14px 0 0; }
.listino-voci li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--grigio-scuro); }
.listino-nome { font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; }
.listino-ingredienti { display: block; margin-top: 3px; font-weight: 400; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.45; color: var(--grigio-testo); }
.listino-prezzo { font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); white-space: nowrap; color: var(--arancio); font-variant-numeric: tabular-nums; }
.menu-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.menu-foto .cornice { display: block; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; background: #0d0d0d; }
.menu-foto img { display: block; width: 100%; height: auto; }

/* ── il pannello, 7-bis (05/11/2026) ──────────────────────────────────────────────────────────────────────────────────
   M4 · le foto della sala nel pannello si possono aggiungere, fino a 8. Con 4 foto il mosaico è quello del disegno, con la
   quarta inclinata che sporge; dalla quinta in poi la quarta entra nella griglia, dritta, e niente la copre. L'ultima foto
   rimasta sola sulla sua riga (6 e 8 foto) prende tutta la riga, così non resta un buco. */
.mosaico[data-mosaico="sala"] > .cornice:nth-child(4):not(:last-child) { position: relative; z-index: auto; left: auto; bottom: auto; width: auto; rotate: none; aspect-ratio: 1.04; }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(n+5):nth-child(odd) { aspect-ratio: .8; } /* le colonne stanno 1,3 a 1: 1,04 e 0,8 danno due foto alte uguali */
.mosaico[data-mosaico="sala"] > .cornice:nth-child(n+6):nth-child(even) { aspect-ratio: 1.04; }
.mosaico[data-mosaico="sala"] > .cornice:nth-child(n+6):nth-child(even):last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.mosaico[data-mosaico="sala"]:has(> .cornice:nth-child(5)) { margin-bottom: 0; }

/* piccolo 15 · una parola lunghissima scritta dal pannello va a capo, non allarga la pagina */
body { overflow-wrap: break-word; }

/* B1 · gli allergeni del menu coi prezzi: i numeri accanto al piatto; la legenda (.thk-allergeni) è già nel foglio, dalla costruzione (30 § 3, Legale/avvisi.html) */
.listino-allergeni { margin-left: 2px; font-weight: 400; font-size: .68em; line-height: 0; color: var(--grigio-testo); white-space: nowrap; }

/* ── 9-ter (05/11/2026) · le lingue ─────────────────────────────────────────────────────────────────────────────────
   Il menù a tendina (sito-thk/lingue.css, il kit) nello stile del sito: nero, Montserrat, bordi spenti e l'arancio per
   la lingua aperta e quella della pagina. In alto sta nella barra (accanto al menù, visibile anche da telefono); nel
   piede si apre verso l'alto. */
details.lingue {
  --thk-lingue-pulsante-testo: var(--bianco); --thk-lingue-pulsante-fondo: transparent; --thk-lingue-bordo: var(--grigio);
  --thk-lingue-fondo: #0d0d0d; --thk-lingue-testo: var(--bianco); --thk-lingue-evidenza: rgba(252, 140, 0, .14);
  --thk-lingue-fuoco: var(--arancio); --thk-lingue-raggio: 999px; --thk-lingue-raggio-elenco: var(--raggio);
  font-family: "Montserrat", system-ui, sans-serif; font-size: 14px;
}
details.lingue > summary { font-weight: 700; letter-spacing: .08em; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
details.lingue > summary:hover, details.lingue[open] > summary { border-color: var(--arancio); color: var(--arancio); }
details.lingue > ul { border: 1px solid var(--grigio); box-shadow: 0 18px 44px rgba(0, 0, 0, .65); }
details.lingue > ul a { font-weight: 600; }
details.lingue > ul a[aria-current="true"] { color: var(--arancio); }
.piede-riga details.lingue > ul { top: auto; bottom: calc(100% + 6px); }
.legale-prevale { color: var(--grigio-testo); }
.legale-prevale a { color: var(--arancio); }

/* audit 7-bis, giro 2 · piccolo 15: la colonna del testo delle frasi con l'icona può stringersi sotto la parola più lunga,
   così una parola di 40 lettere va a capo e non allarga la pagina */
.cucina-punti li { grid-template-columns: 50px minmax(0, 1fr); }