/* ==========================================================================
   DUCCIO SMASH MEAT SUSHI — foglio di stile del sito
   Ricalca ducciostreetfood.com. Colori, corpi e interlinee vengono dal kit
   Elementor del sito (post-11.css) e dal computed style delle pagine live,
   inclusi i tre scaglioni: desktop, tablet <=1024px, mobile <=767px.
   Usato da index.php e dalle tre pagine legali.
   ========================================================================== */

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-400.woff2?v=3") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  /* File variabile: l'asse wght copre 400-900, quindi anche gli 800/900 del brand. */
  src: url("../fonts/golos-text-variable.woff2?v=3") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- colori del kit ---- */
  --nero:          #070707;   /* primary: titoli */
  --testo:         #151515;
  --ink:           #0F0404;   /* accent: bordi spessi */
  --rosso:         #D14949;
  --rosa:          #BB636B;
  --crema:         #F5E7DF;
  --crema-scura:   #EDD5C7;
  --giallo:        #FFCE79;
  --giallo-chiaro: #FFDCA0;
  --grigio:        #C5C5C5;

  --display: "Archivo Black", "Arial Black", sans-serif;
  --body: "Golos Text", "Helvetica Neue", Arial, sans-serif;

  /* ---- scala tipografica (desktop) ---- */
  --t-mega: 200px;   --lh-mega: .84em;
  --t-h1:    80px;   --lh-h1:   .9em;
  --t-h2:    50px;   --lh-h2:   .98em;
  --t-h3:    40px;   --lh-h3:   .98em;
  --t-h4:    28px;   --lh-h4:   .98em;
  --t-h5:    22px;   --lh-h5:   1em;
  --t-num:   70px;
  --t-lead:  20px;
  --t-accent: 20px;
  --t-eyebrow: 16px; --ls-eyebrow: 0;

  --wrap: 1328px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--testo);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--nero); color: var(--crema); padding: .75rem 1rem; font-weight: 800;
}
.skip-link:focus { left: 0; }
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nero); outline-offset: 3px;
}

/* Contenitore centrato: e' l'equivalente del "boxed" di Elementor. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }

/* ---------- elementi ricorrenti ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-eyebrow); line-height: 1.3em; font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--testo);
}
.eyebrow svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.eyebrow span { padding-left: 8px; }

.titolo-sez {
  font-size: var(--t-h1); line-height: var(--lh-h1);
  font-weight: 900; text-transform: uppercase; color: var(--nero);
}
.titolo-sez--display { font-family: var(--display); font-weight: 400; letter-spacing: -.8px; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--body);
  font-size: var(--t-accent); line-height: 1em; font-weight: 800;
  text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: .3s;
}
.btn--pill   { border: 2px solid var(--nero); border-radius: 30px; background: var(--crema); color: var(--nero); }
.btn--rosso  { border: 2px solid var(--nero); border-radius: 30px; background: var(--rosso); color: var(--crema); }
.btn--blocco { border: 4px solid var(--ink); background: var(--rosso); color: var(--crema); }
.btn--chiaro { border: 4px solid var(--ink); background: var(--crema); color: var(--nero); }
.btn--pill:hover, .btn--rosso:hover { background: var(--ink); color: var(--crema); }
.btn--blocco:hover { background: var(--ink); }
.btn--chiaro:hover { background: var(--giallo); }
/* Dentro le pagine informative ".doc a" (0,2,0) batte i modificatori del bottone
   (0,1,0) e ne colorerebbe il testo di rosso: su fondo rosso sparisce. */
.doc a.btn--blocco { color: var(--crema); }
.doc a.btn--chiaro { color: var(--nero); }

/* ============================================================ HEADER */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 9;
  padding: 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.site-header img { width: 200px; height: auto; }
/* Icona hamburger: sull'originale non apre nulla, e' un segno grafico. */
.header-burger { width: 60px; height: 60px; padding: 15px; }
.header-burger svg { width: 30px; height: 30px; fill: #000; }
.site-header--fisso { position: relative; background: var(--rosa); }

/* ============================================================ HERO */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; padding: 0 0 48px;
  background: var(--rosa);
  display: flex; flex-direction: column;
}
/* La texture viene resa nera piena e tenuta al 10%: sull'originale e' un
   motivo di sfondo, non una fotografia riconoscibile. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/hero-pattern.png?v=3") no-repeat center center / cover;
  background-attachment: fixed;
  filter: brightness(0); opacity: .1; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1; flex: 1 1 auto;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 24px;
}
.hero-col {
  width: 100%; margin-top: 150px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.hero h1 {
  font-family: var(--display); font-size: var(--t-mega); line-height: var(--lh-mega);
  font-weight: 400; text-transform: uppercase; text-align: center; color: #000;
}
.hero-claim {
  width: 700px; max-width: 100%; margin-top: 20px;
  font-size: 30px; line-height: 1em; letter-spacing: -.8px; font-weight: 600; text-align: center;
}
.hero .btn:first-of-type { margin-top: 30px; }

/* ============================================================ CHI SIAMO */
.chisiamo { display: grid; grid-template-columns: 1fr 1fr; }
.chisiamo-sx {
  position: relative; overflow: hidden;
  padding: 112px 40px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* Coriandoli a mezza opacita': su fondo bianco diventano grigi. */
.chisiamo-sx::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/pattern-confetti.png?v=3") repeat center center;
  opacity: .5;
}
.chisiamo-dx { padding: 112px 40px; background: var(--giallo); display: flex; align-items: center; }
.chisiamo-testo {
  width: 100%; max-width: 856px; margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.chisiamo-testo .eyebrow { align-self: center; }
.chisiamo-testo h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.8px; }
.chisiamo-testo p { max-width: 680px; font-size: var(--t-lead); line-height: 1.3em; font-weight: 500; }
.chisiamo-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* Carosello: rotato di -3deg come sull'originale. */
.carosello { position: relative; z-index: 1; width: 100%; max-width: 761px; transform: rotate(-3deg); }
.carosello-pista { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.carosello-pista img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s;
}
.carosello-pista img.attiva { opacity: 1; }
.carosello button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .85); color: var(--nero);
  border: 2px solid var(--nero); cursor: pointer;
}
.carosello button:hover { background: #fff; }
.carosello .prec { left: 8px; }
.carosello .succ { right: 8px; }
.carosello button svg { width: 16px; height: 16px; fill: currentColor; }

/* ============================================================ RECENSIONI */
.recensioni { padding: 112px 0; background: var(--crema); }
.recensioni-top {
  padding: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px;
}
/* L'occhiello prende tutta la riga: titolo e bottone restano affiancati sotto. */
.recensioni-top .eyebrow { flex: 0 0 100%; }
.recensioni-top h2 { flex: 0 1 900px; }
.recensioni-corpo { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 0 24px; }

.video-blocco {
  position: relative; overflow: hidden;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  background: url("../img/video-poster.jpg?v=3") no-repeat center center / cover;
}
.video-blocco::before { content: ""; position: absolute; inset: 0; background: var(--nero); opacity: .5; }
.video-blocco > * { position: relative; z-index: 1; }
.video-play {
  width: 70px; height: 70px; padding: 0 0 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rosso); color: var(--crema);
  border: 4px solid var(--ink); border-radius: 50%; cursor: pointer;
}
.video-play:hover { background: var(--ink); }
.video-play svg { width: 28px; height: 28px; fill: currentColor; }
.video-blocco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.video-avviso {
  max-width: 320px; padding: 16px; text-align: center;
  font-size: 15px; line-height: 1.4; color: var(--crema); background: rgba(7, 7, 7, .55);
}
.video-avviso .btn { margin-top: 12px; }

.recensioni-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.recensione { display: flex; flex-direction: column; }
.recensione img { width: 100%; aspect-ratio: 366 / 300; object-fit: cover; }
.recensione-testo { flex: 1; padding: 24px; background: var(--giallo); }
.recensione-testo h3 {
  margin-bottom: 12px;
  font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.recensione-testo p { font-size: 16px; line-height: 1.4em; }

/* ============================================================ PERCHÉ */
.perche { position: relative; padding: 112px 0; background: var(--giallo); }
/* Il motivo a pois sta al 10%, come l'overlay di Elementor. */
.perche::before, .team::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/pattern-pois.png?v=3") repeat center / 100px;
  opacity: .1;
}
.perche > *, .team > * { position: relative; }
.perche-head { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.perche-head h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.8px; }
.perche-griglia {
  padding: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center;
}
.perche-colonna { display: flex; flex-direction: column; gap: 16px; }
.perche-card {
  padding: 32px; background: var(--crema);
  display: flex; flex-direction: column; gap: 64px;
}
.perche-card img { width: 56px; height: 56px; }
.perche-card h3 {
  margin: 16px 0 12px;
  font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.perche-card p { font-size: 16px; line-height: 1.4em; }
.perche-card .perche-num {
  font-size: var(--t-num); line-height: 1em; font-weight: 900; color: var(--nero);
}
.perche-card .perche-lab { margin-top: 4px; font-size: var(--t-lead); line-height: 1.5em; font-weight: 600; }
.perche-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================================ DELIVERY */
.delivery { display: grid; grid-template-columns: 1fr 1fr; background: url("../img/pattern-confetti.png?v=3") repeat center / 100px; }
.delivery-sx { padding: 112px 40px; background: var(--rosa); display: flex; align-items: center; }
.delivery-testo {
  width: 100%; max-width: 856px; margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.delivery-testo .eyebrow { color: var(--crema); }
.delivery-testo h2 { max-width: 750px; color: var(--crema); }
.delivery-testo p { font-size: var(--t-lead); line-height: 1.3em; font-weight: 500; }
.delivery-testo p + p { margin-top: 1.5em; }
.delivery-dx { padding: 112px 40px; display: flex; align-items: center; }
.delivery-griglia {
  width: 100%; max-width: 856px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.delivery-griglia img { width: 100%; aspect-ratio: 819 / 1024; object-fit: cover; }

/* ============================================================ TEAM */
.team { position: relative; padding: 112px 0; background: var(--giallo); }
.team-head { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.team-head h2 { max-width: 900px; font-family: var(--display); font-weight: 400; }
.team-riga { padding: 24px; display: flex; gap: 16px; }
.team-card { flex: 1; display: flex; flex-direction: column; gap: 16px; }
/* Sull'originale la scheda centrale e' spinta piu' in basso. */
.team-card:nth-child(2) { margin-top: 32px; }
.team-card img { width: 100%; aspect-ratio: 308 / 450; object-fit: cover; }
.team-nome-box { padding: 24px; background: var(--crema); }
.team-nome-box h3 {
  margin-bottom: 8px;
  font-size: var(--t-h5); line-height: var(--lh-h5); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.team-nome-box p { font-size: 16px; line-height: 1.4em; }

/* ============================================================ FULLBLEED */
.fullbleed {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 581px;
  background: url("../img/burger-fullbleed.jpg?v=3") no-repeat center left / cover;
}
.fullbleed h2 {
  align-self: center; margin: 55px;
  color: #fff; text-shadow: 0 0 50px rgba(0, 0, 0, .3);
}

/* ============================================================ SEDI */
.sedi { position: relative; overflow: hidden; padding: 112px 0; background: var(--crema); }
.sedi-head { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sedi-head h2 { font-family: var(--display); font-weight: 400; }
.sedi-griglia { position: relative; z-index: 1; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Dal 16 ott 2026 la sede e' una sola (Firenze ha chiuso): scheda centrata invece di mezza griglia. */
.sedi-griglia--una { grid-template-columns: minmax(0, 760px); justify-content: center; }
.sede {
  padding: 32px; background: var(--rosa);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.sede-testa { flex: 1 1 280px; }
.sede-testa h3 {
  margin-bottom: 12px;
  font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 900;
  text-transform: uppercase; color: var(--crema);
}
.sede-testa p { font-size: 16px; line-height: 1.4em; }
.sede-dati { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.sede-dati li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.4em; color: var(--nero); }
/* In cima alla riga: l'orario va a capo su telefono e l'icona resta accanto alla prima riga. */
.sede-dati svg { width: 16px; height: 16px; margin-top: 3px; flex: none; fill: currentColor; }
.sede-dati a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.sede-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.sede img { width: 100%; aspect-ratio: 568 / 300; object-fit: cover; }
/* Blocchi di pois decorativi, come sull'originale. */
.sedi-pois { position: absolute; width: 400px; max-width: 40vw; opacity: 1; }
.sedi-pois--sx { top: 300px; left: -80px; }
.sedi-pois--dx { bottom: 40px; right: -80px; }

/* ============================================================ FAQ */
.faq { padding: 112px 0; background: var(--crema); }
.faq-head {
  padding: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px;
}
.faq-head .eyebrow { flex: 0 0 100%; }
.faq-head h2 { flex: 0 1 750px; font-family: var(--display); font-weight: 400; }
.faq-intro { flex: 0 1 400px; font-size: var(--t-lead); line-height: 1.3em; }
.faq-lista { padding: 24px; }
.faq-lista details { margin-bottom: 16px; border: 4px solid var(--ink); background: var(--crema); }
.faq-lista summary {
  padding: 24px; list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 24px; line-height: 1em; font-weight: 900; text-transform: uppercase; color: var(--nero);
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; font-size: 28px; line-height: 1; }
.faq-lista details[open] summary::after { content: "–"; }
.faq-risposta { padding: 0 88px 24px 24px; font-size: 16px; line-height: 1.4em; }

/* ============================================================ FORM OMAGGIO */
.sez-omaggio { background: var(--giallo); padding: 112px 24px 0; }
.omaggio-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 0; }
.omaggio-box { display: flex; justify-content: space-between; gap: 24px; padding: 40px; background: var(--rosso); }
.omaggio-testo { flex: 1 1 auto; max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.omaggio-testo h2 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 900; text-transform: uppercase; color: var(--crema); }
.omaggio-testo p { font-size: 24px; line-height: 1.3em; font-weight: 600; color: var(--testo); }
/* ================================================== HERO DELLA PAGINA /promo
   Stessa lingua visiva del riquadro omaggio, ma in cima alla pagina e con il
   form accanto al testo invece che sotto. */
.promo-hero {
  position: relative;
  /* L'intestazione e' in posizione assoluta sopra la pagina: va lasciato posto. */
  padding: 160px 24px 88px;
  background: var(--rosso);
}
/* Il motivo a pois sta al 10%, come sulle fasce gialle. */
.promo-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/pattern-pois.png?v=3") repeat center / 100px;
  opacity: .1;
}
.promo-hero-inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 48px;
}
.promo-hero-testo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 24px; }
.promo-hero-testo .eyebrow { color: var(--crema); }
.promo-hero-testo h1 {
  font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 900;
  text-transform: uppercase; color: var(--crema);
}
.promo-hero-claim { font-size: 24px; line-height: 1.3em; font-weight: 600; color: var(--ink); }
.promo-hero-img {
  align-self: flex-start;
  max-width: 100%; width: auto; max-height: 300px; height: auto;
  border: 4px solid var(--ink);
}
.promo-hero-form {
  flex: 0 0 420px; padding: 32px; min-height: 460px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: rgba(7, 7, 7, .36);
}

/* Immagine della promozione, caricata dal CRM. Le proporzioni sono quelle del
   file: si limita solo l'altezza, cosi' una foto verticale non sfonda il riquadro. */
.omaggio-img {
  align-self: flex-start;
  max-width: 100%; width: auto;
  max-height: 300px; height: auto;
  border: 4px solid var(--ink);
}
.omaggio-form-col {
  flex: 0 0 420px;
  /* Sull'originale la colonna del form esce dal riquadro rosso su tre lati. */
  margin: -40px -40px -40px 0;
  padding: 24px; min-height: 400px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* Due veli neri al 20% sopra il rosso, come li sovrappone Elementor. */
  background: rgba(7, 7, 7, .36);
}
.omaggio-form { width: 100%; max-width: 372px; display: flex; flex-direction: column; }
.omaggio-form label.campo { display: block; margin-bottom: 20px; }
.omaggio-form input[type="text"],
.omaggio-form input[type="email"],
.omaggio-form input[type="tel"] {
  width: 100%; height: 50px; padding: 0 16px;
  font: inherit; font-size: 15px; font-weight: 700; color: #000;
  background: #fff; border: 1px solid var(--grigio); border-radius: 8px;
}
.omaggio-form input::placeholder { color: #000; opacity: 1; font-weight: 700; }
.omaggio-form .invia {
  width: 100%; padding: 14px 8px;
  font-family: var(--body); font-size: 20px; line-height: 20px; font-weight: 900;
  text-transform: uppercase; color: #000; background: #fff;
  border: 4px solid #000; border-radius: 30px; cursor: pointer;
}
.omaggio-form .invia:hover { background: var(--giallo); }
.omaggio-form .invia[disabled] { opacity: .6; cursor: progress; }
/* Fino al 16 ott 2026 qui c'era .cookie-banner, che dentro il form non esiste: casella e testo
   restavano senza layout, attaccati al bottone. */
.omaggio-form .consenso {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 20px;
  font-size: 15px; line-height: 1.35; font-weight: 700; color: #000; cursor: pointer;
}
.omaggio-form .consenso input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rosso); }
.omaggio-form .consenso a { color: #000; }
.hp-field { position: absolute; left: -9999px; }
.form-feedback { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--crema); min-height: 1.2em; }

.voucher-ok { width: 100%; max-width: 372px; text-align: center; color: var(--crema); }
.voucher-ok h2 { font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900; text-transform: uppercase; }
.voucher-ok .nota-premio { margin-top: 8px; font-size: 15px; font-weight: 600; }
.voucher-ok img { width: 220px; height: 220px; margin: 20px auto; background: #fff; padding: 10px; border-radius: 8px; }
.voucher-ok .codice {
  display: block; font-size: 24px; font-weight: 900; letter-spacing: 1px;
  color: #000; background: #fff; padding: 10px; border-radius: 8px;
}
.voucher-ok .messaggio { margin-top: 12px; font-size: 15px; font-weight: 600; }
.voucher-ok .apri {
  display: block; margin-top: 16px; padding: 12px 8px;
  font-size: 18px; font-weight: 900; text-transform: uppercase; text-decoration: none;
  color: #000; background: #fff; border: 4px solid #000; border-radius: 30px;
}
.voucher-ok .micro { margin-top: 12px; font-size: 13px; font-weight: 600; }

/* ============================================================ MENÙ */
.sez-menu { padding: 112px; background: #fff; position: relative; }
.sez-menu::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/pattern-confetti.png?v=3") repeat 50% 50% / 100px;
}
.sez-menu > * { position: relative; }
.menu-box { margin: 24px 0; padding: 0 48px; background: var(--rosa); border: 8px solid var(--ink); }
.menu-inner { max-width: var(--wrap); margin: 0 auto; padding: 48px 0; display: flex; flex-direction: column; align-items: center; }
.menu-head { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.menu-head h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.8px; color: #000; }
.menu-head p { max-width: 700px; font-size: var(--t-lead); line-height: 26px; font-weight: 600; }
.menu-grid { width: 100%; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.piatto { padding: 32px; background: var(--crema); display: flex; flex-direction: column; gap: 40px; }
/* Sull'originale il blocco testo ha un margine negativo che stringe lo stacco. */
.piatto-testo { margin-bottom: -10px; }
.piatto-testo h3 {
  margin-bottom: 8px; font-size: var(--t-h4); line-height: var(--lh-h4);
  font-weight: 900; text-transform: uppercase; color: var(--nero);
}
.piatto-testo p { font-size: 16px; line-height: 22.4px; font-weight: 600; }
.piatto img { width: 100%; aspect-ratio: 1080 / 1350; object-fit: cover; }
.piatto-prezzi { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.piatto-prezzi > div { display: flex; flex-direction: column; gap: 18px; }
.piatto-prezzi h4 { font-size: var(--t-h5); line-height: var(--lh-h5); font-weight: 900; text-transform: uppercase; color: var(--nero); }
.prezzo { display: flex; align-items: center; font-size: 16px; line-height: 22.4px; font-weight: 600; color: var(--rosso); }
.prezzo svg { width: 14px; height: 14px; margin-right: 3.5px; fill: currentColor; flex: none; }
.prezzo span { padding-left: 8px; }
.smash-best { font-size: var(--t-mega); line-height: .9em; font-weight: 900; text-transform: uppercase; text-align: center; color: var(--nero); }

/* ============================================================ FOOTER */
.site-footer { background: var(--giallo); display: flex; flex-direction: column; align-items: center; gap: 24px; overflow: hidden; }
.footer-top { width: 100%; padding: 24px; display: flex; justify-content: center; }
.footer-top-inner { width: 100%; max-width: 1280px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
/* Larghezze dell'originale: la colonna social e' fissa, i link occupano il resto. */
.footer-social { flex: 0 0 256px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-social h2 { font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900; text-transform: uppercase; color: var(--nero); }
.social-lista { display: flex; gap: 8px; }
.social-lista a, .social-lista span {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rosso); border: 4px solid var(--ink);
}
.social-lista svg { width: 18px; height: 18px; fill: var(--nero); }
.footer-nav { flex: 0 1 896px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-nav a { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 900; text-transform: uppercase; color: var(--nero); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-su { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--rosso); }
.footer-su svg { width: 20px; height: 20px; fill: none; stroke: var(--crema); stroke-width: 2; }
.footer-marquee { width: 100%; margin-bottom: 24px; display: flex; gap: 40px; overflow: hidden; }
.footer-marquee span {
  font-size: var(--t-mega); line-height: .84em; font-weight: 900;
  text-transform: uppercase; color: var(--giallo-chiaro); white-space: nowrap;
}
.footer-legale { padding: 0 24px; text-align: center; }
.footer-legale a { font-size: 17px; line-height: .98em; font-weight: 900; text-transform: uppercase; color: var(--nero); text-decoration: none; }
.footer-legale a:hover { text-decoration: underline; }
.footer-piva { width: 100%; padding: 24px; background: var(--crema); text-align: center; }
.footer-piva p { max-width: 1280px; margin: 0 auto; font-size: 16px; line-height: 1.4em; }
.footer-credit { width: 100%; padding-bottom: 8px; font-size: 11px; line-height: 1.4em; text-align: center; }
/* Il colore lo eredita dal footer: giallo in home, crema nelle pagine legali. */
.footer-credit a { color: inherit; text-decoration: underline; }
.footer-cookie {
  padding: 0; font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase;
  color: var(--nero); background: none; border: 0; border-bottom: 2px solid var(--nero); cursor: pointer;
}

/* ============================================================ PAGINE LEGALI */
.doc { padding: 56px 24px 80px; background: var(--crema); }
.doc-wrap { max-width: 840px; margin: 0 auto; }
.doc h1 {
  margin-bottom: 8px;
  font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.doc .aggiornato { margin-bottom: 40px; font-size: 15px; font-weight: 600; color: #5D5D5D; }
.doc h2 {
  margin: 40px 0 12px;
  font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.doc h3 { margin: 24px 0 8px; font-size: var(--t-h5); line-height: var(--lh-h5); font-weight: 900; text-transform: uppercase; color: var(--nero); }
.doc p, .doc li { font-size: 17px; line-height: 1.6; font-weight: 500; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--rosso); font-weight: 700; }
.doc table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { padding: 10px 12px; border: 2px solid var(--ink); text-align: left; vertical-align: top; }
.doc th { background: var(--giallo); font-weight: 900; text-transform: uppercase; font-size: 14px; }
.doc-nota { margin: 24px 0; padding: 20px; background: var(--giallo); border: 4px solid var(--ink); }
.doc-nota p { font-weight: 600; }
.doc-torna { display: inline-block; margin-bottom: 32px; font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--nero); }

/* ============================================================ BANNER CONSENSO */
.cookie-banner {
  position: fixed; z-index: 100; inset: auto 16px 16px auto;
  width: min(420px, calc(100vw - 32px));
  padding: 24px; background: var(--crema); border: 4px solid var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner h2 { margin-bottom: 8px; font-size: var(--t-h5); line-height: var(--lh-h5); font-weight: 900; text-transform: uppercase; color: var(--nero); }
.cookie-banner p { font-size: 15px; line-height: 1.45; font-weight: 600; }
.cookie-banner p a { color: var(--rosso); font-weight: 800; }
.cookie-banner-azioni { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner-azioni .btn { flex: 1 1 auto; padding: 10px 14px; font-size: 15px; }
.cookie-banner-dettagli { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.cookie-banner-voce { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; }
.cookie-banner-voce input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--rosso); }
.cookie-banner-voce strong { display: block; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.cookie-banner-voce span { color: #424242; }
.cookie-banner-link { margin-top: 12px; font-size: 13px; font-weight: 700; }

/* ============================================================ TABLET <= 1024px */
@media (max-width: 1024px) {
  :root {
    --t-mega: 115px; --t-h1: 60px; --t-h2: 40px; --t-h3: 28px; --t-h4: 26px;
  }
  .hero::before { background-attachment: scroll; }
  .hero-inner { justify-content: center; }
  .hero-claim { font-size: 20px; line-height: 1.4em; }

  .chisiamo { grid-template-columns: 1fr; }
  .chisiamo-sx, .chisiamo-dx { padding: 56px 0; }
  .chisiamo-testo p { font-size: 20px; line-height: 1.4em; }

  .recensioni { padding: 56px 0; }
  .recensioni-corpo { grid-template-columns: 1fr; }
  .video-blocco { min-height: 380px; }
  .recensioni-lista { grid-template-columns: repeat(2, 1fr); }

  .perche { padding: 56px 0; }
  .perche-griglia { grid-template-columns: 1fr 1fr; }
  .perche-foto { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  .delivery { grid-template-columns: 1fr; }
  .delivery-sx { padding: 56px 0; order: -1; }
  .delivery-dx { padding: 56px 0; }
  .delivery-testo p { font-size: 20px; line-height: 1.4em; }

  .team { padding: 56px 0; }
  .team-riga { flex-wrap: wrap; }
  .team-card { flex: 1 1 260px; }
  .team-card:nth-child(2) { margin-top: 0; }

  .sedi { padding: 56px 0; }
  .sedi-griglia { grid-template-columns: 1fr; }

  .faq { padding: 56px 0; }
  .faq-lista summary { font-size: 20px; }
  .faq-risposta { padding: 0 24px 24px; }

  .sez-menu { padding: 56px 24px; }
  .menu-box { padding: 0 8px; }
  .menu-inner { max-width: 1024px; padding: 8px 0 32px; }
  .menu-head p { line-height: 28px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .piatto { gap: 32px; }

  /* Impilati: la base flex del form diventerebbe un'altezza, quindi va azzerata. */
  .promo-hero { padding: 120px 24px 56px; }
  .promo-hero-inner { flex-wrap: wrap; gap: 40px; }
  .promo-hero-testo { flex: 1 1 100%; }
  .promo-hero-form { flex: 1 1 100%; min-height: 0; }
  .promo-hero-claim { font-size: 20px; line-height: 1.4em; }

  .sez-omaggio { padding: 56px 24px 0; }
  .omaggio-box { flex-wrap: wrap; padding: 32px; gap: 40px; }
  .omaggio-testo { flex: 1 1 100%; max-width: none; }
  .omaggio-testo p { font-size: 20px; line-height: 1.4em; }
  .omaggio-form-col { flex: 1 1 100%; margin: 0; }

  /* Impilati: le basi flex del desktop diventerebbero altezze, quindi vanno azzerate. */
  .footer-top-inner { flex-direction: column-reverse; align-items: center; gap: 56px; }
  .footer-social { flex: 0 0 auto; align-items: center; width: 100%; }
  .footer-nav { flex: 0 0 auto; width: 100%; }

  .doc { padding: 40px 24px 64px; }
}

/* ============================================================ MOBILE <= 767px */
@media (max-width: 767px) {
  :root {
    /* Fluidi sotto i 430px: a 50px fissi "IRRESISTIBILI" e "PERSONAGGI" uscivano dallo schermo
       e sui telefoni da 360-375px la pagina si allargava a 386px (scorrimento di lato). */
    --t-mega: clamp(56px, 19.2vw, 75px); --t-h1: clamp(36px, 11.6vw, 50px); --t-h2: 34px; --t-h3: 26px; --t-h4: 24px; --t-h5: 20px;
    --t-num: 48px; --t-lead: 17px; --t-accent: 16px; --t-eyebrow: 13px; --ls-eyebrow: 1px;
  }
  .site-header { padding: 20px 16px; }
  .site-header img { width: 190px; }

  /* Su mobile l'originale carica una seconda versione della texture. */
  .hero::before { background-image: url("../img/hero-pattern-mobile.png?v=3"); }
  .hero-col { margin-top: 75px; }
  .hero h1 { margin-top: 50px; }
  .hero-claim { margin-top: 0; font-size: 20px; line-height: 1.2em; }

  .chisiamo-sx, .chisiamo-dx { padding: 48px 0; }
  .chisiamo-testo, .delivery-testo { padding: 24px; }
  .chisiamo-testo p, .delivery-testo p { font-size: 18px; }

  .recensioni { padding: 48px 0; }
  .recensioni-lista { grid-template-columns: 1fr; }
  .titolo-sez { overflow-wrap: break-word; }
  .recensioni-top, .recensioni-corpo, .faq-head, .faq-lista,
  .perche-head, .perche-griglia, .team-head, .team-riga, .sedi-head, .sedi-griglia { padding: 24px 15px; }

  .perche { padding: 48px 0; }
  .perche-griglia { grid-template-columns: 1fr; }
  .perche-foto { grid-column: auto; grid-template-columns: 1fr 1fr; }

  .delivery-sx, .delivery-dx { padding: 48px 0; }
  .delivery-griglia { gap: 5px; padding: 10px; }

  .team { padding: 48px 0; }
  .team-riga { gap: 24px; }
  .team-card { flex: 1 1 100%; }

  /* Prima la foto era larga 181px nell'angolo e il titolo bianco finiva sul fondo crema, illeggibile. */
  .fullbleed {
    grid-template-columns: 1fr; min-height: 480px;
    background:
      linear-gradient(to top, rgba(7, 7, 7, .6), rgba(7, 7, 7, 0) 65%),
      url("../img/burger-fullbleed.jpg?v=3") no-repeat center 30% / cover;
  }
  .fullbleed h2 { align-self: end; margin: 32px 24px; }

  .sedi { padding: 48px 0; }
  .sedi-pois { display: none; }
  .sede { padding: 24px; }

  .faq { padding: 48px 0; }
  .faq-lista summary { padding: 16px; font-size: 18px; }
  .faq-risposta { padding: 0 16px 16px; }

  .sez-menu { padding: 40px 15px; }
  .menu-box { padding: 0; }
  .menu-inner { max-width: 767px; padding: 0; }
  .menu-head { padding: 24px; }
  .menu-head p { line-height: 1.4em; }
  .menu-grid { grid-template-columns: 1fr; }
  .piatto { padding: 20px; }

  .promo-hero { padding: 104px 20px 48px; }
  .promo-hero-form { padding: 24px; }
  .promo-hero-img { width: 100%; max-height: 220px; object-fit: cover; }

  .sez-omaggio { padding: 48px 24px 0; }
  .omaggio-wrap { max-width: 767px; }
  .omaggio-box { padding: 24px; }
  .omaggio-form-col { padding: 24px; min-height: 300px; }
  /* Su telefono la colonna e' gia' stretta: l'immagine la riempie tutta. */
  .omaggio-img { width: 100%; max-height: 220px; object-fit: cover; }

  .footer-nav { flex-direction: column; gap: 24px; }
  .footer-nav a { font-size: 26px; }
  .footer-marquee span + span { display: none; }
  .footer-legale a { font-size: 26px; }

  .cookie-banner { inset: auto 8px 8px 8px; width: auto; padding: 20px; }
  .doc { padding: 32px 20px 56px; }
}

/* ============================================ PAGINA /promo-scontrino
   La landing del voucher sconto riusa quasi tutto: la hero e' .promo-hero, il
   modulo .omaggio-form, il riquadro del locale .sede. Qui restano solo le tre
   fasce sotto la hero, che sulla home non esistono.
   Chi guarda questa pagina lo fa quasi sempre in piedi, col telefono in mano e
   lo scontrino nell'altra: le fasce sono corte e i blocchi si impilano presto. */
.scontrino-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}

.scontrino-passi { position: relative; overflow: hidden; padding: 88px 0; background: var(--giallo); }
/* Il motivo a pois sta al 10%, come sulle altre fasce gialle. */
.scontrino-passi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/pattern-pois.png?v=3") repeat center / 100px;
  opacity: .1;
}
.scontrino-passi > * { position: relative; }
/* La lista e' un <ol>: il reset globale copre solo <ul>. */
.scontrino-passi-lista {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.scontrino-passo { padding: 32px; background: var(--crema); border: 4px solid var(--ink); }
.scontrino-passo-num {
  display: block;
  font-family: var(--display); font-size: var(--t-num); line-height: 1em; font-weight: 400;
  color: var(--rosso);
}
.scontrino-passo h3 {
  margin: 12px 0 8px;
  font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: 900;
  text-transform: uppercase; color: var(--nero);
}
.scontrino-passo p { font-size: 17px; line-height: 1.45; font-weight: 600; }

.scontrino-regole { padding: 88px 0; background: var(--crema); }
.scontrino-regole-intro { font-size: var(--t-lead); line-height: 1.35em; font-weight: 600; }
.scontrino-regole-box { margin-top: 8px; padding: 32px; background: var(--giallo); border: 4px solid var(--ink); }
.scontrino-regole-lista { display: flex; flex-direction: column; gap: 12px; }
.scontrino-regole-lista li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.45; font-weight: 600; }
/* Quadratino invece del pallino: sul sito non c'e' un solo elenco puntato tondo. */
.scontrino-regole-lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px; background: var(--rosso);
}

.scontrino-sede { padding: 88px 0; background: var(--crema); }

@media (max-width: 1024px) {
  .scontrino-passi, .scontrino-regole, .scontrino-sede { padding: 56px 0; }
}

@media (max-width: 767px) {
  .scontrino-inner { padding: 24px 15px; }
  .scontrino-passi, .scontrino-regole, .scontrino-sede { padding: 48px 0; }
  /* In colonna: tre schede affiancate su telefono sarebbero tre francobolli. */
  .scontrino-passi-lista { grid-template-columns: 1fr; }
  .scontrino-passo, .scontrino-regole-box { padding: 24px; }
}