/* ======================================================================
   PIZZERIA REMONTADA — Design system "Menù di carta"
   Ripreso dal menù cartaceo del locale: carta color crema, cornici di
   maiolica blu, acquerelli di pomodori e basilico, titoli serif blu,
   scritte a mano verdi. Le classi Tailwind (colori, font) sono in
   sviluppo/tailwind.config.js e usano gli stessi valori qui sotto.
   ====================================================================== */

/* Font ospitati sul sito (nessuna richiesta a Google): Bai Jamjuree, Libre Baskerville, Great Vibes */
@font-face {
  font-family: "Bai Jamjuree";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bai-jamjuree-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bai-jamjuree-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bai-jamjuree-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/libre-baskerville-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --carta: #F8F2E8;        /* fondo carta del menù */
  --carta-2: #F1E7D5;      /* carta un filo più scura (riquadri) */
  --inchiostro: #2B2B2A;   /* testo dei piatti */
  --blu: #27436B;          /* titoli "PIZZE CLASSICHE" */
  --maiolica: #2E5B86;     /* linee della cornice */
  --maiolica-chiaro: #7393B3;
  --oro-chiaro: #E3C77F;   /* oro per i testi sul blu (contrasto leggibile) */
  --oro: #C9A24E;          /* spighe, dettagli del logo */
  --pomodoro: #C3361F;     /* pulsanti principali */
  --pomodoro-scuro: #962614;
  --verde: #2F4E46;        /* scritta "Menù" e logo */

  --font-titoli: "Libre Baskerville", Georgia, serif;
  --font-testo: "Bai Jamjuree", system-ui, sans-serif;
  --font-mano: "Great Vibes", cursive;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  /* grana della carta: rumore SVG molto leggero, disegnato una sola volta */
  background-color: var(--carta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--inchiostro);
  font-family: var(--font-testo);
  overflow-x: hidden;
}

.font-display { font-family: var(--font-titoli); }
.font-script { font-family: var(--font-mano); font-weight: 400; }

/* titoli di sezione, come "PIZZE CLASSICHE" sul menù */
.titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blu);
  font-size: clamp(24px, 3.6vw, 36px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
}

.spiga {
  display: block;
  width: 190px;
  height: auto;
  margin: 0.6rem auto 0.4rem;
}

/* ---------------------------------------------------------------------
   BOTTONI — spessore che si schiaccia al click
   --------------------------------------------------------------------- */
.btn-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-3d:active { transform: translateY(3px); }

.btn-3d-accent {
  background: var(--pomodoro);
  color: #FFF8EE;
  box-shadow: 0 4px 0 var(--pomodoro-scuro), 0 8px 18px rgba(150, 38, 20, 0.22);
}
.btn-3d-accent:hover { background: #B32F1A; }
.btn-3d-accent:active { box-shadow: 0 1px 0 var(--pomodoro-scuro); }

.btn-3d-dark {
  background: var(--blu);
  color: var(--carta);
  box-shadow: 0 4px 0 #17294A, 0 8px 18px rgba(23, 41, 74, 0.22);
}
.btn-3d-dark:active { box-shadow: 0 1px 0 #17294A; }

.btn-3d-outline {
  background: rgba(255, 252, 246, 0.85);
  color: var(--blu);
  border: 1.5px solid rgba(39, 67, 107, 0.35);
  box-shadow: 0 3px 0 rgba(39, 67, 107, 0.18);
}
.btn-3d-outline:active { box-shadow: 0 1px 0 rgba(39, 67, 107, 0.18); }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(39, 67, 107, 0.25);
  color: var(--blu);
  background: rgba(255, 252, 246, 0.7);
}

/* ---------------------------------------------------------------------
   HEADER — carta con doppia riga blu sotto, come le cornici del menù
   --------------------------------------------------------------------- */
.site-header {
  background: rgba(248, 242, 232, 0.94);
  border-bottom: 3px double rgba(46, 91, 134, 0.55);
  transition: box-shadow 0.3s ease;
}
#site-header.is-scrolled { box-shadow: 0 4px 18px rgba(39, 67, 107, 0.08); }

.nav-links a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blu);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--pomodoro); }

/* ---------------------------------------------------------------------
   COPERTINA — come la prima pagina del menù
   --------------------------------------------------------------------- */
.copertina {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(28px, 6vh, 64px) 20px 0;
}
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
}
.deco-tl { top: 0; left: 0; width: clamp(130px, 21vw, 300px); }
.deco-tr { top: 0; right: 0; width: clamp(105px, 16vw, 240px); }
.deco-bl { bottom: 0; left: 0; width: clamp(120px, 20vw, 290px); }
.deco-br { bottom: 0; right: 0; width: clamp(80px, 13vw, 190px); }

.copertina-testo {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.copertina-logo {
  display: block;
  width: clamp(170px, 24vw, 280px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(43, 43, 42, 0.12));
}
.copertina-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--blu);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  margin-top: 1.1rem;
  text-wrap: balance;
}
.copertina-eyebrow {
  display: block;
  font-family: var(--font-testo);
  font-size: clamp(11.5px, 1.2vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.copertina-titolo .font-script {
  color: var(--pomodoro);
  font-size: 1.45em;
  line-height: 0.6;
  padding: 0 0.05em;
}
.copertina-sotto {
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: rgba(43, 43, 42, 0.75);
  max-width: 34rem;
  margin: 0.6rem auto 0;
}

/* mezza pizza che esce dal bordo inferiore e "si appoggia" sulla fascia blu */
.copertina-pizza {
  position: relative;
  z-index: 1;
  width: clamp(300px, 46vw, 600px);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  margin-top: clamp(28px, 5vh, 56px);
}
.copertina-pizza img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 -6px 22px rgba(43, 43, 42, 0.18));
}

/* ---------------------------------------------------------------------
   FASCIA BLU — punti forti
   --------------------------------------------------------------------- */
.fascia-blu {
  background: var(--blu);
  color: var(--carta);
  border-top: 3px solid var(--oro);
}
.pilastro { text-align: center; }
.pilastro svg {
  width: 42px;
  height: 42px;
  margin: 0 auto 0.6rem;
  fill: none;
  stroke: var(--oro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pilastro-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.25;
}
.pilastro-testo {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(248, 242, 232, 0.7);
  margin-top: 0.3rem;
  max-width: 15rem;
  margin-inline: auto;
}
@media (max-width: 639px) {
  .pilastro svg { width: 26px; height: 26px; margin-bottom: 0.35rem; }
  .pilastro-titolo { font-size: 10px; line-height: 1.2; }
  .pilastro-testo { font-size: 9px; line-height: 1.3; margin-top: 0.25rem; color: rgba(248, 242, 232, 0.82); }
}

/* ---------------------------------------------------------------------
   FILM — "Come nasce la nostra pizza", fotogrammi guidati dallo scroll.
   Fondo crema come la pagina: il video non ha bordi, sembra stampato sul
   menù. Su computer i testi stanno nei lati vuoti, sul telefono sotto.
   --------------------------------------------------------------------- */
.film {
  position: relative;
  height: 560vh;
  background: var(--carta);
}
@media (max-width: 767px) { .film { height: 480vh; } }

.film-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* stessa posizione che film.js usa per disegnare i fotogrammi */
.film-poster {
  position: absolute;
  left: 50%;
  top: 56%;
  height: 80%;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 80%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 80%, transparent 100%);
}
@media (max-width: 767px) {
  .film-poster { top: 36%; width: 160%; height: auto; }
}
@media (min-width: 768px) {
  /* come in film.js: l'altezza del video non supera il 54% della larghezza */
  .film-poster { height: min(80%, 54vw); }
}
.film-poster { transition: opacity 0.4s ease; }
.film-poster.hidden-poster { opacity: 0; }

/* bordi alto e basso che sfumano nella carta della pagina */
.film-sfumatura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--carta) 0%, rgba(248, 242, 232, 0) 14%),
    linear-gradient(to top, var(--carta) 0%, rgba(248, 242, 232, 0) 14%);
}

.film-chap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 5rem 1.5rem 7rem; /* sul telefono resta posto per la barra "Vedi carrello" */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.film-chap.is-on { visibility: visible; }
.film-chap > * { will-change: transform; }
/* il titolo iniziale è visibile appena la sezione arriva */
.film-chap-centro { justify-content: center; opacity: 1; visibility: visible; }

@media (min-width: 768px) {
  .film-chap { align-items: center; padding: 5rem clamp(2rem, 5vw, 5rem); }
  .film-chap-dx { justify-content: flex-end; }
  .film-chap-centro { align-items: flex-start; padding-top: clamp(5rem, 9vh, 7rem); }
}

.film-testo {
  max-width: 22rem;
  /* alone color carta dietro i testi: restano leggibili anche sopra le mani */
  background: rgba(248, 242, 232, 0.72);
  box-shadow: 0 0 60px 44px rgba(248, 242, 232, 0.72);
  border-radius: 40px;
}
.film-chap-centro .film-testo { background: transparent; box-shadow: none; }
@media (min-width: 768px) {
  /* titolo iniziale più largo: "Come nasce la nostra pizza" sta su una riga e non copre il panetto */
  .film-chap-centro .film-testo { max-width: 46rem; }
  .film-chap-centro .film-p { max-width: 34rem; }
}
@media (min-width: 768px) {
  .film-chap-sx .film-testo, .film-chap-dx .film-testo { max-width: min(24rem, 24vw); }
  .film-chap-dx .film-testo { text-align: right; }
  .film-chap-dx .film-azioni { justify-content: flex-end; }
}
/* sul telefono la pizza sta in alto: i testi in basso, su un velo di carta */
@media (max-width: 767px) {
  .film-chap { justify-content: center; text-align: center; }
  .film-chap .film-testo { max-width: 24rem; }
  .film-chap .film-azioni { justify-content: center; }
  .film-chap-centro { align-items: flex-end; }
}

.film-numero {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomodoro);
}
.film-titolo {
  text-wrap: balance;
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--blu);
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.18;
  margin-top: 0.5rem;
}
.film-p {
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.6;
  color: rgba(43, 43, 42, 0.75);
  margin-top: 0.75rem;
  max-width: 22rem;
}
.film-p { text-wrap: balance; }
.film-chap-dx .film-p { margin-left: auto; }
@media (max-width: 767px) { .film-chap .film-p { margin-inline: auto; } }

.film-barra {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: min(220px, 50vw);
  height: 3px;
  margin-left: max(-110px, -25vw);
  border-radius: 999px;
  background: rgba(39, 67, 107, 0.14);
  overflow: hidden;
}
.film-barra span {
  display: block;
  height: 100%;
  background: var(--pomodoro);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------------------------------------------------------------------
   DAL NOSTRO FORNO — piatti scontornati come nel menù
   --------------------------------------------------------------------- */
.piatto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
}
.piatto-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.piatto-foto img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(43, 43, 42, 0.18));
  transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}
.piatto:hover .piatto-foto img { transform: rotate(-8deg) scale(1.04); }
.piatto-nome {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--blu);
  font-size: 16px;
  margin-top: 0.7rem;
}
.piatto-nota {
  font-size: 12px;
  color: rgba(43, 43, 42, 0.6);
  margin-top: 0.15rem;
  line-height: 1.35;
}

/* ---------------------------------------------------------------------
   CORNICE DI MAIOLICA — doppia riga blu disegnata in CSS (sempre nitida)
   e angoli con peperoncino presi dal menù. --s scala tutta la cornice.
   --------------------------------------------------------------------- */
@property --s { syntax: "<number>"; inherits: true; initial-value: 1; }

.cornice {
  --s: 1;
  position: relative;
  background: var(--carta);
  padding: calc(64px * var(--s)) calc(54px * var(--s));
}
.cornice::before,
.cornice::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* Le righe combaciano con quelle degli angoli e dei fregi (misurate sul PDF):
   ai lati a 14-16px e 18-19px, in alto e in basso a 19,5-21,5px e 24-25px. */
.cornice::before {
  top: calc(19.5px * var(--s)); bottom: calc(19.5px * var(--s));
  left: calc(14px * var(--s)); right: calc(14px * var(--s));
  border: 2px solid var(--maiolica);
}
.cornice::after {
  top: calc(24px * var(--s)); bottom: calc(24px * var(--s));
  left: calc(18px * var(--s)); right: calc(18px * var(--s));
  border: 1px solid var(--maiolica-chiaro);
}

.cornice-angolo,
.cornice-fregio,
.cornice-lato {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  /* il fondo carta copre le righe sotto gli ornamenti */
  background-color: var(--carta);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.cornice-angolo {
  width: calc(138px * var(--s));
  height: calc(114px * var(--s));
  background-image: url("../img/cornice/angolo.webp");
}
.cornice-angolo.tl { top: 0; left: 0; }
.cornice-angolo.tr { top: 0; right: 0; transform: scaleX(-1); }
.cornice-angolo.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.cornice-angolo.br { bottom: 0; right: 0; transform: scale(-1, -1); }

.cornice-fregio {
  width: calc(74px * var(--s));
  height: calc(34px * var(--s));
  left: 50%;
  margin-left: calc(-37px * var(--s));
  background-image: url("../img/cornice/fregio.webp");
}
.cornice-fregio.top { top: calc(3px * var(--s)); }
.cornice-fregio.bottom { bottom: calc(3px * var(--s)); transform: scaleY(-1); }

.cornice-lato {
  width: calc(28px * var(--s));
  height: calc(56px * var(--s));
  top: 50%;
  margin-top: calc(-28px * var(--s));
  background-image: url("../img/cornice/lato.webp");
}
.cornice-lato.left { left: calc(3px * var(--s)); }
.cornice-lato.right { right: calc(3px * var(--s)); transform: scaleX(-1); }

.cornice-contenuto { position: relative; z-index: 2; }

@media (max-width: 640px) {
  .cornice { --s: 0.62; padding: 56px 22px 52px; }
}

/* ---------------------------------------------------------------------
   MENÙ — categorie e righe come sul cartaceo
   --------------------------------------------------------------------- */
#cat-pills {
  position: relative;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  justify-content: safe center;
}
#cat-pills::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--blu);
  background: transparent;
  border: 1px solid rgba(39, 67, 107, 0.22);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cat-pill:hover { border-color: var(--blu); }
.cat-pill-active {
  background: var(--blu);
  color: var(--carta);
  border-color: var(--blu);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 252, 246, 0.9);
  border: 1px solid rgba(39, 67, 107, 0.25);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  color: rgba(39, 67, 107, 0.6);
}
.search-box:focus-within { border-color: var(--blu); }
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: var(--inchiostro);
}
.search-box input::placeholder { color: rgba(43, 43, 42, 0.45); }

/* ---- menù richiudibile: da chiuso è un riquadro piccolo, da aperto occupa tutta la larghezza ---- */
.menu-guscio {
  --s: 0.62;
  max-width: 33rem;
  margin-inline: auto;
  transition: --s 0.6s cubic-bezier(.3, .7, .2, 1), max-width 0.6s cubic-bezier(.3, .7, .2, 1);
}
.menu-guscio.is-aperto { max-width: 72rem; }
@media (min-width: 641px) { .menu-guscio.is-aperto { --s: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-guscio { transition: none; } }

.menu-caption { color: var(--blu); font-size: clamp(24px, 3vw, 30px); line-height: 1; }
.menu-titolo { color: var(--verde); font-size: clamp(60px, 9vw, 84px); line-height: 0.95; margin-top: 0.15rem; }
.menu-sotto { font-size: 14px; font-weight: 600; color: rgba(43, 43, 42, 0.7); margin-top: 0.1rem; }
.menu-toggle { margin-top: 0.8rem; }
.menu-freccia { transition: transform 0.4s ease; animation: menu-invito 1.8s ease-in-out infinite; }
.menu-guscio.is-aperto .menu-freccia { transform: rotate(180deg); animation: none; }
@keyframes menu-invito { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .menu-freccia { animation: none; } }

/* il corpo si apre con una transizione fluida dell'altezza */
.menu-corpo {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(.3, .7, .2, 1), visibility 0s 0.6s;
}
.menu-guscio.is-aperto .menu-corpo {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.6s cubic-bezier(.3, .7, .2, 1), visibility 0s;
}
.menu-corpo-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu-corpo { transition: none; } }

/* ---- categorie: frecce per capire che si scorre ---- */
.pills-wrap { position: relative; }
.pills-freccia {
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 52px;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pills-freccia.is-visibile { opacity: 1; pointer-events: auto; }
.pills-sx { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--carta) 50%, rgba(248, 242, 232, 0)); }
.pills-dx { right: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--carta) 50%, rgba(248, 242, 232, 0)); }
.pills-freccia span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--blu);
  color: var(--carta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(23, 41, 74, 0.3);
}
.pills-dx.is-visibile span { animation: pills-invito 1.5s ease-in-out infinite; }
@keyframes pills-invito { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pills-dx.is-visibile span { animation: none; } }

.menu-cat { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.menu-cat-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blu);
  text-align: center;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.2;
}
.menu-cat-sotto {
  text-align: center;
  font-size: 12.5px;
  color: rgba(43, 43, 42, 0.6);
  margin-top: 0.25rem;
}
.menu-cat-lista {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3.5rem;
  margin-top: 1.1rem;
}
@media (min-width: 900px) {
  .menu-cat-lista { grid-template-columns: 1fr 1fr; }
}

.voce {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px dashed rgba(39, 67, 107, 0.2);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.voce:hover, .voce:focus-visible {
  background: rgba(39, 67, 107, 0.05);
  outline: none;
}
.voce-foto {
  width: 26px;
  height: auto;
  flex-shrink: 0;
  margin-top: -2px;
}
.voce-testo { flex: 1; min-width: 0; }
.voce-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.voce-nome {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--inchiostro);
}
.voce-prezzo {
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  color: var(--inchiostro);
  white-space: nowrap;
}
.voce-ingr {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(43, 43, 42, 0.72);
  margin-top: 0.15rem;
}
.voce-badge {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pomodoro);
  border: 1px solid rgba(195, 54, 31, 0.4);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.voce-add {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--blu);
  border: 1.5px solid rgba(39, 67, 107, 0.35);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.voce:hover .voce-add {
  background: var(--pomodoro);
  border-color: var(--pomodoro);
  color: #fff;
}

.menu-note {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 3px double rgba(46, 91, 134, 0.35);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(43, 43, 42, 0.68);
}
.menu-note li { font-weight: 700; color: rgba(43, 43, 42, 0.85); }

/* ---------------------------------------------------------------------
   PIZZA STUDIO — la pizza prende forma mentre scegli (js/studio.js)
   --------------------------------------------------------------------- */
.studio-app {
  /* su telefono è una colonna semplice: così la pizza può restare fissa in alto */
  display: block;
  background: var(--carta-2);
  border: 1px solid rgba(39, 67, 107, 0.12);
  border-radius: 1.5rem;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.studio-pannello { margin-top: 1rem; }
@media (min-width: 900px) {
  .studio-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .studio-pannello { margin-top: 0; }
}

/* la pizza resta in vista: in alto su telefono, a sinistra su computer */
.studio-palco {
  position: sticky;
  top: 64px;
  z-index: 3;
  background: var(--carta-2);
  /* lo sfondo arriva fino ai bordi del riquadro e copre i bollini delle farciture */
  padding: 0.5rem 1rem 0.75rem;
  margin: -0.5rem -1rem 0;
}
@media (min-width: 900px) { .studio-palco { top: 96px; padding: 0; margin: 0; background: transparent; } }

.studio-suono {
  position: absolute;
  top: 0.4rem;
  right: 0.2rem;
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blu);
  background: var(--carta);
  border: 1px solid rgba(39, 67, 107, 0.25);
  transition: transform 0.12s ease, background-color 0.15s ease;
}
.studio-suono:active { transform: scale(0.92); }
.studio-suono .ico-off { display: none; }
.studio-suono.is-muto { color: rgba(43, 43, 42, 0.7); }
.studio-suono.is-muto .ico-on { display: none; }
.studio-suono.is-muto .ico-off { display: block; }

.studio-stage {
  position: relative;
  width: min(70vw, 280px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
@media (min-width: 900px) { .studio-stage { width: min(100%, 480px); } }

.studio-base,
.studio-livello,
.studio-alone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.studio-base { transition: opacity 1.4s ease; }
.studio-base-cruda { filter: drop-shadow(0 14px 18px rgba(43, 43, 42, 0.18)); }

/* il sugo si scopre con un cerchio che si allarga e gira un po', come il mestolo */
.studio-sugo {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--r, -6%), transparent calc(var(--r, -6%) + 5%));
  mask-image: radial-gradient(circle at 50% 50%, #000 var(--r, -6%), transparent calc(var(--r, -6%) + 5%));
  transform: rotate(var(--giro, 0deg));
}
.studio-base-cotta, .studio-base-cotta-sugo { opacity: 0; }

/* cotta: la base cruda lascia il posto a quella sfornata (con o senza sugo) */
.studio-stage.cotta .studio-base-cruda { opacity: 0; }
.studio-stage.cotta .studio-sugo { opacity: 0; }
.studio-stage.cotta .studio-base-cotta { opacity: 1; }
.studio-stage.cotta.con-sugo .studio-base-cotta { opacity: 0; }
.studio-stage.cotta.con-sugo .studio-base-cotta-sugo { opacity: 1; }

.studio-pezzo {
  position: absolute;
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  transition: filter 1.2s ease, scale 1.2s ease;
}
/* in forno i formaggi si sciolgono un po' e tutto prende colore */
.studio-stage.cotta .studio-pezzo { filter: saturate(1.08) brightness(0.97) sepia(0.08); }
.studio-stage.cotta .studio-formaggio { scale: 1.14; filter: brightness(1.02) sepia(0.12) blur(0.3px); }

/* l'alone caldo del forno (niente legna: solo calore) */
.studio-alone {
  inset: -14%;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 92, 0) 44%, rgba(255, 152, 54, 0.55) 56%, rgba(214, 72, 28, 0.35) 64%, rgba(214, 72, 28, 0) 72%);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.studio-stage.in-forno .studio-alone {
  opacity: 1;
  transform: scale(1);
  animation: studio-calore 0.9s ease-in-out infinite alternate;
}
.studio-stage.in-forno .studio-base,
.studio-stage.in-forno .studio-livello { animation: studio-tremolio 0.35s ease-in-out infinite alternate; }
@keyframes studio-calore {
  from { filter: brightness(1) hue-rotate(0deg); transform: scale(0.98); }
  to { filter: brightness(1.25) hue-rotate(-8deg); transform: scale(1.03); }
}
@keyframes studio-tremolio {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-0.6px) scale(1.004); }
}

.studio-msg {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blu);
  min-height: 2.6em;
  margin-top: 0.6rem;
  padding: 0 0.5rem;
}
.studio-msg-pop { animation: studio-pop 0.35s ease; }
@keyframes studio-pop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.studio-gruppo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blu);
  display: flex;
  justify-content: space-between;
}
.studio-gruppo span { color: rgba(43, 43, 42, 0.72); letter-spacing: 0.04em; }
.studio-aiuto { font-size: 12px; color: rgba(43, 43, 42, 0.74); margin-top: 0.25rem; }

.studio-basi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
.studio-base-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.25;
  padding: 0.55rem 0.7rem;
  border-radius: 1rem;
  background: var(--carta);
  border: 1.5px solid rgba(39, 67, 107, 0.18);
  color: var(--inchiostro);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.studio-base-btn img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.studio-base-btn strong { display: block; font-weight: 700; }
.studio-base-btn.is-on { border-color: var(--pomodoro); background: #fff8f2; box-shadow: 0 0 0 3px rgba(195, 54, 31, 0.12); }

.studio-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.7rem;
}
@media (min-width: 560px) { .studio-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.studio-chip { position: relative; }
.studio-chip-add {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem 0.5rem;
  border-radius: 1rem;
  background: var(--carta);
  border: 1.5px solid rgba(39, 67, 107, 0.14);
  color: var(--inchiostro);
  transition: border-color 0.15s ease, transform 0.12s ease, background-color 0.15s ease;
}
.studio-chip-add:hover { border-color: rgba(39, 67, 107, 0.4); }
.studio-chip-add:active { transform: scale(0.95); }
.studio-chip.is-on .studio-chip-add { border-color: var(--pomodoro); background: #fff8f2; }
.studio-chip-foto { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.studio-chip-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.studio-chip-nome { font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.studio-chip-prezzo { font-size: 11px; color: rgba(43, 43, 42, 0.74); }
.studio-chip-conto {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pomodoro);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(150, 38, 20, 0.3);
}
.studio-chip-meno {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blu);
  color: var(--carta);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(23, 41, 74, 0.3);
}

.studio-piede {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 3px double rgba(46, 91, 134, 0.3);
}
.studio-totale-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(43, 43, 42, 0.72); }
.studio-totale { font-family: var(--font-titoli); font-weight: 700; font-size: 24px; color: var(--pomodoro); line-height: 1.1; }
.studio-ricomincia { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }
.studio-inforna { position: relative; overflow: hidden; }
.studio-inforna span { position: relative; z-index: 1; }
/* barra di cottura dentro il pulsante */
.studio-inforna::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #E8A23A, #F2C14E);
  transform: scaleX(0);
  transform-origin: left center;
}
.studio-inforna.is-cottura::before { animation: studio-barra var(--durata, 2600ms) linear forwards; }
@keyframes studio-barra { to { transform: scaleX(1); } }
.studio-app.is-occupato .studio-pannello { pointer-events: none; }

/* ---------------------------------------------------------------------
   DOVE SIAMO
   --------------------------------------------------------------------- */
.scheda {
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid rgba(39, 67, 107, 0.15);
  border-radius: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.info-riga { display: flex; align-items: flex-start; gap: 0.85rem; }
.info-riga svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: var(--blu);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blu);
}
.info-valore { font-size: 14px; color: rgba(43, 43, 42, 0.8); line-height: 1.5; }

.mappa {
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: 300px;
  border: 3px double rgba(46, 91, 134, 0.5);
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.footer {
  background: var(--blu);
  color: var(--carta);
  border-top: 3px solid var(--oro);
  margin-top: 2.5rem;
}
.footer-sep { width: 48px; height: 1px; margin-inline: auto; background: rgba(201, 162, 78, 0.55); }
.footer-wa {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 78, 0.6);
  color: var(--oro-chiaro);
  font-weight: 700;
  font-size: 13px;
  transition: background-color 0.15s ease;
}
.footer-wa:hover { background: rgba(201, 162, 78, 0.14); }
.footer-titolo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: 0.8rem;
}

/* ---------------------------------------------------------------------
   REVEAL ON SCROLL — nascosti solo se JS è attivo (classe "js" su <html>)
   --------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.js .reveal.reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .piatto:hover .piatto-foto img { transform: none; }
}

/* ---------------------------------------------------------------------
   BADGE APERTO/CHIUSO
   --------------------------------------------------------------------- */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  line-height: 1.2;
}
.open-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.open-badge-open { background: rgba(76, 122, 52, 0.14); color: #3E6A2B; }
.open-badge-closed { background: rgba(195, 54, 31, 0.12); color: #A02C18; }

/* ---------------------------------------------------------------------
   CONFIGURATORE — "Pizza Studio" (dentro il popup)
   --------------------------------------------------------------------- */
.config-group {
  background: rgba(255, 252, 246, 0.8);
  border: 1px solid rgba(39, 67, 107, 0.12);
  border-radius: 1rem;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}
.config-group-highlight {
  background: rgba(201, 162, 78, 0.1);
  border-color: rgba(201, 162, 78, 0.45);
}
.config-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--carta);
  border: 1px solid rgba(39, 67, 107, 0.2);
  color: var(--inchiostro);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.config-opt-active {
  background: var(--blu);
  color: var(--carta);
  border-color: var(--blu);
}
.config-opt-price { font-size: 10.5px; opacity: 0.7; }

/* ---------------------------------------------------------------------
   POPUP PRODOTTO — sale dal basso su mobile, centrato su desktop
   --------------------------------------------------------------------- */
#product-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.32s ease;
}
#product-modal.modal-open { transform: translateY(0); pointer-events: auto; }
@media (min-width: 640px) {
  #product-modal {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 500px;
    max-height: 85vh;
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  #product-modal.modal-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

#toast { transition: opacity 0.3s ease, transform 0.3s ease; }

/* ---------------------------------------------------------------------
   MAPPA SU RICHIESTA, PREFERENZE COOKIE, PAGINA PRIVACY
   --------------------------------------------------------------------- */
.mappa { position: relative; background: var(--carta-2); }
.mappa iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.mappa-anteprima {
  min-height: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.5rem 1.25rem;
  color: var(--blu);
}
.mappa-attiva .mappa-anteprima { display: none; }
.mappa-titolo { font-family: var(--font-titoli); font-weight: 700; font-size: 20px; margin-top: 0.2rem; }
.mappa-indirizzo { font-size: 14px; color: rgba(43, 43, 42, 0.8); }
.mappa-link { font-size: 13px; font-weight: 700; color: var(--blu); text-decoration: underline; text-underline-offset: 3px; margin-top: 0.3rem; }
.mappa-nota { font-size: 11.5px; line-height: 1.45; color: rgba(43, 43, 42, 0.72); max-width: 22rem; margin-top: 0.4rem; }
.mappa-nota a { text-decoration: underline; text-underline-offset: 2px; }

.footer-link {
  color: rgba(248, 242, 232, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.footer-link:hover { color: var(--oro-chiaro); }

.noscript-avviso {
  background: var(--blu);
  color: var(--carta);
  text-align: center;
  font-size: 14px;
  padding: 0.8rem 1rem;
}
.noscript-avviso a { text-decoration: underline; }

/* pagina Privacy e cookie */
.privacy-pagina h1 { margin-bottom: 0.4rem; }
.privacy-data { font-size: 12.5px; color: rgba(43, 43, 42, 0.72); margin-bottom: 1.2rem; }
.privacy-pagina p, .privacy-pagina li { font-size: 15px; line-height: 1.7; color: rgba(43, 43, 42, 0.88); margin-top: 0.7rem; }
.privacy-pagina h2 { font-family: var(--font-titoli); font-weight: 700; color: var(--blu); font-size: 22px; line-height: 1.25; margin-top: 2.2rem; }
.privacy-pagina h3 { font-weight: 700; color: var(--blu); font-size: 16px; margin-top: 1.2rem; }
.privacy-pagina ul { list-style: disc; padding-left: 1.3rem; }
.privacy-pagina a { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }
.privacy-scheda {
  background: rgba(255, 252, 246, 0.8);
  border: 1px solid rgba(39, 67, 107, 0.15);
  border-radius: 1rem;
  padding: 0.2rem 1.2rem 1rem;
  margin-top: 1rem;
}
.privacy-scheda h3 { margin-top: 1rem; }
.privacy-tabella { overflow-x: auto; margin-top: 1rem; border: 1px solid rgba(39, 67, 107, 0.2); border-radius: 0.8rem; }
.privacy-tabella table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 34rem; }
.privacy-tabella th, .privacy-tabella td { text-align: left; padding: 0.65rem 0.8rem; vertical-align: top; border-bottom: 1px solid rgba(39, 67, 107, 0.12); }
.privacy-tabella th { background: rgba(39, 67, 107, 0.08); color: var(--blu); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.privacy-tabella tr:last-child td { border-bottom: none; }
.privacy-tabella tr.gruppo td { background: rgba(39, 67, 107, 0.06); color: var(--blu); font-weight: 700; font-size: 12.5px; }
/* segnaposto ancora da compilare: ben visibile, così non passa inosservato */
.da-compilare { background: #FFE9A8; color: #6B4A00; padding: 0.05rem 0.35rem; border-radius: 0.3rem; font-weight: 700; }

/* Decorazioni della copertina: si caricano dopo il logo (vedi script in fondo a index.html) */
.deco, .copertina-pizza img { opacity: 0; transition: opacity 0.8s ease; }
.deco.pronta, .copertina-pizza img.pronta { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .deco, .copertina-pizza img { transition: none; } }

/* ---------------------------------------------------------------------
   CHI SIAMO
   --------------------------------------------------------------------- */
.chi-sottotitolo { font-size: 15px; color: rgba(43, 43, 42, 0.7); margin: 0.75rem auto 0; max-width: 32rem; line-height: 1.6; }
.chi-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .chi-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.chi-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.chi-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  overflow: hidden;
  border: 3px double rgba(46, 91, 134, 0.5);
  background: var(--carta-2);
}
.chi-foto img, .chi-foto video { display: block; width: 100%; height: 100%; object-fit: cover; }
.chi-foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.8rem 0.7rem 0.6rem;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #FFF8EE;
  background: linear-gradient(to top, rgba(23, 41, 74, 0.8), transparent);
}
.chi-video { margin-top: 1.6rem; }
.chi-largo { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.chi-largo video { object-position: 50% 58%; }
.chi-testo p { font-size: 15px; line-height: 1.75; color: rgba(43, 43, 42, 0.82); }
.chi-testo p + p { margin-top: 1rem; }
.chi-testo strong { color: var(--blu); }
.chi-testo .chi-citazione {
  font-family: var(--font-mano);
  font-size: clamp(30px, 4.4vw, 38px);
  line-height: 1.1;
  color: var(--verde);
  margin: 1.4rem 0 0.2rem;
}
.chi-tappe { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.chi-tappe li {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(39, 67, 107, 0.18);
}
.chi-tappe .anno { font-family: var(--font-titoli); font-weight: 700; color: var(--blu); font-size: 15px; }
.chi-tappe .chi { display: block; font-weight: 700; font-size: 14.5px; color: var(--inchiostro); }
.chi-tappe .nota { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(43, 43, 42, 0.7); margin-top: 0.1rem; }

/* Allergeni sotto il menù */
.allergeni-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin: 0.7rem 0 0; padding: 0; }
.allergeni-lista li {
  font-size: 11.5px;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(39, 67, 107, 0.25);
  color: var(--blu);
  background: rgba(255, 252, 246, 0.7);
}