/* ==========================================================================
   Landing /franchising di Duccio.

   Ricostruisce il master verticale a 390px: la composizione di riferimento e'
   quella mobile. Sotto i 768px tutto e' scritto in rem e il rem segue la
   larghezza (10px a 390, 11px a 430), cosi' a 430 si vede la stessa pagina e
   non una pagina diversa. Da 768px in su il rem torna fisso e le sezioni si
   aprono in griglia, con headline sempre fuori scala.

   Palette chiusa, niente altri colori: nero, crema, rosa antico, bianco.
   Font: gli stessi due del sito (assets/sito.css), Archivo Black per i titoli e
   Golos Text per tutto il resto. Nient'altro, per scelta del titolare (27 set 2026):
   anche le note "a mano" del master sono in Golos, ruotate come adesivi.
   ========================================================================== */

/* Stessi file e stessi indirizzi di assets/sito.css: chi arriva dalla home li ha in cache. */
@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";
  src: url("../fonts/golos-text-variable.woff2?v=3") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
/* Ripieghi con le metriche dei font veri: quando arrivano i woff2 non si sposta
   niente (CLS). Archivo Black ha le stesse larghezze di Arial Black carattere per
   carattere (misurate sui titoli della pagina: rapporto 1,000), quindi basta
   allineare ascent e descent a quelli di Archivo (hhea 878 e 210 su 1000). */
@font-face {
  font-family: "Titoli ripiego";
  src: local("Arial Black"), local("ArialMT-Black"), local("Arial-Black");
  font-weight: 400;
  ascent-override: 87.8%; descent-override: 21%; line-gap-override: 0%;
}
@font-face {
  font-family: "Testo ripiego";
  src: local("Helvetica Neue"), local("Arial"), local("Roboto");
  ascent-override: 98%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  --nero: #0D0E0E;
  --crema: #F4EDE1;
  --rosa: #B8696F;
  --bianco: #FFFFFF;

  --display: "Archivo Black", "Titoli ripiego", "Arial Black", sans-serif;
  --testo: "Golos Text", "Testo ripiego", "Helvetica Neue", Arial, sans-serif;

  --testa-h: 6.8rem;
  --g: 2.8rem;                 /* margine laterale del master */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* 10px a 390, fino a 11,2px sui telefoni grandi. */
  font-size: clamp(9.2px, 2.5641vw, 11.2px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--testa-h);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--nero);
  color: var(--nero);
  font-family: var(--testo);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
svg { display: block; }

.fr-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fr-salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 1.2rem 1.6rem; background: var(--bianco); color: var(--nero); font-weight: 700;
}
.fr-salta:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
/* Sul rosa il contorno rosa sparirebbe. */
.fr-rosa-sez :focus-visible { outline-color: var(--nero); }

/* ------------------------------------------------------------ elementi comuni */
/* Archivo Black ha un solo peso: con font-synthesis spento il browser non lo
   ingrassa per finta se qualche regola chiede un peso diverso. */
.fr-titolo {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.015em;
  font-kerning: normal;
  text-wrap: balance;
}
.fr-rosa { color: var(--rosa); }
.fr-bianco { color: var(--bianco); }

/* Le note "a mano" del master, in Golos Text: maiuscolo pieno, ruotato come un adesivo. */
.fr-mano {
  font-family: var(--testo);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: -.005em;
  white-space: nowrap;   /* gli a capo li decide il markup */
}

.fr-testo { font-size: 1.7rem; line-height: 1.55; }

.fr-cta {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  width: 100%; min-height: 7.2rem; padding: 0 2.4rem;
  border: 0; border-radius: 99rem;
  background: var(--rosa); color: var(--bianco);
  /* Come i bottoni del sito: Golos Text 900 in maiuscolo. */
  font-family: var(--testo); font-weight: 900; font-size: 1.8rem; line-height: 1;
  text-transform: uppercase; text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease;
}
.fr-cta svg { width: 2.4rem; height: 1.8rem; flex: none; }
@media (hover: hover) { .fr-cta:hover { transform: translateY(-2px); } }
.fr-cta:active { transform: translateY(0); }
.fr-cta--bianca { background: var(--bianco); color: var(--nero); }

.fr-segno { display: block; }
.fr-segno--zigzag { width: 14.4rem; height: 2rem; margin: 1.6rem auto 0; color: var(--rosa); }
.fr-segno--doppia { width: 10rem; height: 2.2rem; }

.fr-nota { font-size: 1.5rem; line-height: 1.65; }

.fr-sez { position: relative; }
.fr-crema { background: var(--crema); color: var(--nero); }
.fr-nero { background: var(--nero); color: var(--bianco); }
.fr-rosa-sez { background: var(--rosa); color: var(--bianco); }

.fr-icona { width: 7.6rem; height: 6.8rem; color: var(--nero); filter: url(#f-mano); }

/* ------------------------------------------------------------ intestazione */
.fr-testa {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  height: var(--testa-h);
  padding: 0 2.6rem 0 3rem;
  background: var(--nero); color: var(--bianco);
}
/* Il logo originale del sito, 728x264: l'altezza decide, la larghezza segue. */
.fr-logo { display: block; flex: none; line-height: 0; }
.fr-logo-img img { width: auto; height: 4.6rem; }
.fr-testa-cta { display: none; }

.fr-hamburger {
  position: relative; width: 4.4rem; height: 4.4rem; margin-right: -.8rem;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.fr-hamburger-linee,
.fr-hamburger-linee::before,
.fr-hamburger-linee::after {
  position: absolute; left: .8rem; width: 2.8rem; height: .3rem; border-radius: 2px;
  background: var(--bianco); transition: transform .2s ease, opacity .2s ease;
}
.fr-hamburger-linee { top: 50%; margin-top: -.15rem; }
.fr-hamburger-linee::before, .fr-hamburger-linee::after { content: ""; left: 0; }
.fr-hamburger-linee::before { top: -.85rem; }
.fr-hamburger-linee::after { top: .85rem; }
.fr-hamburger[aria-expanded="true"] .fr-hamburger-linee { background: transparent; }
.fr-hamburger[aria-expanded="true"] .fr-hamburger-linee::before { transform: translateY(.85rem) rotate(45deg); }
.fr-hamburger[aria-expanded="true"] .fr-hamburger-linee::after { transform: translateY(-.85rem) rotate(-45deg); }

.fr-menu {
  position: fixed; inset: var(--testa-h) 0 0 0; z-index: 59;
  padding: 2rem var(--g) 4rem;
  background: var(--nero); color: var(--bianco);
  overflow-y: auto;
}
.fr-menu li a {
  display: block; padding: 1.3rem 0;
  font-family: var(--display); font-weight: 400; font-size: 2.8rem; line-height: 1;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.fr-menu .fr-cta { margin-top: 3rem; }
.fr-menu-sito {
  display: block; margin-top: 2.2rem; text-align: center;
  font-size: 1.5rem; font-weight: 600; color: var(--bianco);
}
body.fr-menu-aperto { overflow: hidden; }

/* ------------------------------------------------------------ hero */
.fr-hero { position: relative; background: var(--nero); color: var(--bianco); overflow: hidden; }

/* La foto della hero e' intera e tocca i bordi: 3:4, come l'originale. */
.fr-hero-media {
  position: relative; height: 52rem; overflow: hidden;
  background: var(--rosa);
}
.fr-hero-foto, .fr-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fr-hero-foto img { object-fit: cover; object-position: 50% 30%; }
.fr-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 14, 14, 0) 50%,
    rgba(13, 14, 14, .6) 66%,
    rgba(13, 14, 14, .92) 84%,
    #0D0E0E 100%);
}
/* La nota sta accanto alle prime righe del titolo, dove resta spazio. */
.fr-hero-next {
  position: absolute; right: var(--g); top: 1.2rem; z-index: 3;
  font-size: 1.7rem; color: var(--crema); text-align: right;
  transform: rotate(-8deg); transform-origin: 100% 0;
}

.fr-hero-testo {
  position: relative; z-index: 2;
  margin-top: -19.4rem;
  padding: 0 var(--g) 2.2rem;
}
.fr-hero h1 {
  position: relative;
  font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: 5.2rem; line-height: .9;
  text-transform: uppercase; letter-spacing: -.015em; white-space: nowrap;
}
.fr-hero-corona { position: absolute; left: 3.82em; top: 1.9em; width: .72em; height: .62em; color: var(--bianco); filter: url(#f-mano); }
.fr-hero-lead { margin-top: 1.8rem; font-size: 1.9rem; line-height: 1.45; }
.fr-hero .fr-cta { margin-top: 1.5rem; }
.fr-hero-micro { margin-top: 1.6rem; text-align: center; font-size: 1.44rem; letter-spacing: -.005em; white-space: nowrap; }

/* ------------------------------------------------------------ nastro */
.fr-nastro {
  position: relative; height: 4.4rem; overflow: hidden;
  display: flex; align-items: center;
  background: var(--bianco); color: var(--nero);
}
.fr-nastro-pista {
  display: flex; align-items: center; gap: 1.7rem; flex: none;
  margin-left: -1.4rem; padding-right: 1.7rem;
  font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  animation: fr-scorri 40s linear infinite;
}
.fr-nastro-pista svg { width: 1.1rem; height: 1.1rem; flex: none; }
@keyframes fr-scorri { to { transform: translateX(-50%); } }
.fr-nastro:hover .fr-nastro-pista, .fr-nastro.is-fermo .fr-nastro-pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fr-nastro-pista { animation: none; } }

/* ------------------------------------------------------------ locale + prova */
.fr-locale img { width: 100%; aspect-ratio: 390 / 314; object-fit: cover; object-position: 50% 72%; }

.fr-prova { padding: 1.6rem 3.2rem 1.4rem; }
.fr-prova .fr-titolo { font-size: 3.7rem; line-height: .94; }
.fr-prova .fr-testo { margin-top: 1rem; font-size: 1.66rem; line-height: 1.63; }

.fr-numeri {
  display: grid; grid-template-columns: 1fr 1fr; row-gap: 3rem;
  margin-top: 2.8rem; text-align: center;
}
.fr-numeri > div { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 .6rem; }
.fr-numeri > div:nth-child(even)::before {
  content: ""; position: absolute; left: 0; top: .2rem; bottom: 0; width: 1px;
  background: rgba(13, 14, 14, .32);
}
.fr-numeri dt {
  order: 2; margin-top: 1.4rem;
  font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.1;
  text-transform: uppercase;
}
.fr-numeri-num {
  order: 1;
  font-family: var(--display); font-weight: 400; font-size: 3.7rem; line-height: .9;
  color: var(--rosa); letter-spacing: -.02em;
}
.fr-numeri-nota { order: 3; margin-top: .8rem; font-size: 1.25rem; color: rgba(13, 14, 14, .72); }

/* ------------------------------------------------------------ prodotto */
.fr-prodotto { padding-bottom: 2.6rem; overflow: hidden; }
.fr-prodotto-media { position: relative; height: 23.4rem; }
.fr-prodotto-burger { position: absolute; left: -4.6rem; top: 2rem; width: 31rem; }
.fr-prodotto-sushi { position: absolute; right: -3.6rem; top: 7.4rem; width: 22rem; }
.fr-prodotto-burger img, .fr-prodotto-sushi img { width: 100%; }
.fr-prodotto-corona { position: absolute; right: 7.6rem; top: 1.4rem; width: 5.4rem; height: 4.8rem; color: var(--bianco); filter: url(#f-mano); transform: rotate(8deg); }

.fr-prodotto-testo { position: relative; z-index: 2; margin-top: -1rem; padding: 0 2.6rem; }
.fr-prodotto .fr-titolo { font-size: 4.6rem; line-height: .92; white-space: nowrap; }
.fr-storto { transform: rotate(-4deg); transform-origin: 0 50%; }

.fr-colonne { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3.2rem; text-align: center; }
.fr-colonne > div { padding: 0 .8rem .6rem; }
.fr-colonne > div + div { border-left: 1px solid rgba(255, 255, 255, .38); }
.fr-colonne h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; }
.fr-colonne p { max-width: 13.6rem; margin: 1.4rem auto 0; font-size: 1.46rem; line-height: 1.36; }
.fr-chiusa { margin-top: 2.4rem; text-align: center; font-size: 1.47rem; line-height: 1.63; }

/* ------------------------------------------------------------ video */
.fr-video { padding: 3rem 3rem 0; overflow: hidden; }
.fr-video .fr-titolo { font-size: 4.2rem; line-height: .94; color: var(--nero); }
.fr-video-cornice {
  position: relative; margin-top: 2rem;
  aspect-ratio: 326 / 295; border-radius: .6rem; overflow: hidden;
  background: var(--crema);
}
.fr-video-poster, .fr-video-poster img { width: 100%; height: 100%; }
.fr-video-poster img { object-fit: cover; object-position: 50% 45%; }
.fr-video-cornice video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--nero); }
.fr-video-play {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: var(--bianco); color: var(--nero);
  border: .45rem solid var(--nero);
  transform: translate(-50%, -50%);
  transition: transform .18s ease;
}
.fr-video-play svg { width: 2.6rem; height: 2.6rem; margin-left: .3rem; }
@media (hover: hover) { .fr-video-play:hover { transform: translate(-50%, -50%) scale(1.06); } }
.fr-video-corona { position: absolute; right: 2.4rem; top: 1.4rem; width: 3.6rem; height: 3.3rem; color: var(--bianco); filter: url(#f-mano); }
.fr-video-mano {
  position: absolute; left: 62%; top: 26%; z-index: 2;
  font-size: 1.55rem; line-height: 1.06; color: var(--bianco);
  transform: rotate(-9deg); transform-origin: 0 0;
}
.fr-video-quote { margin-top: 1.7rem; }
.fr-video-quote p { font-size: 1.68rem; line-height: 1.55; }
.fr-video .fr-cta--bianca { width: 31.2rem; max-width: 100%; min-height: 6.6rem; margin: 2.6rem auto 0; padding: 0 2rem; font-size: 1.8rem; }

/* Scontorni sempre a filo del bordo della pagina: il ritaglio della foto (qui il
   fondo) combacia con il margine, cosi' il soggetto non galleggia a mezz'aria. */
.fr-video-piede { position: relative; height: 15.4rem; margin: 1.6rem -3rem 0; }
.fr-video-fame {
  position: absolute; left: 2.8rem; top: 3.6rem;
  font-size: 1.95rem; color: var(--bianco);
  transform: rotate(-10deg); transform-origin: 0 0;
}
.fr-video-fame-segno { position: absolute; left: 4.2rem; top: 11.2rem; width: 10.6rem; height: 2.4rem; color: var(--bianco); }
.fr-video-duccio { position: absolute; right: 0; bottom: 0; width: 22.5rem; }
.fr-video-duccio img { width: 100%; }

/* ------------------------------------------------------------ cosa portiamo */
.fr-porta { padding: 1.4rem .8rem 3.4rem 2.6rem; }
.fr-porta .fr-titolo { max-width: 34rem; font-size: 4rem; line-height: .95; }
.fr-porta-lista { margin-top: 3rem; }
.fr-porta-lista li { display: grid; grid-template-columns: 7.6rem 1fr; column-gap: 2.6rem; align-items: start; }
.fr-porta-lista li + li { margin-top: 2.8rem; }
.fr-porta-lista h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; text-transform: uppercase; }
.fr-porta-lista p { max-width: 24.6rem; margin-top: .7rem; font-size: 1.575rem; line-height: 1.59; color: rgba(13, 14, 14, .9); }
.fr-porta .fr-nota { margin-top: 3.6rem; font-size: 1.48rem; line-height: 1.69; color: rgba(13, 14, 14, .76); }

/* ------------------------------------------------------------ marketing */
.fr-feed { padding: 3.8rem 2.2rem 3rem; }
.fr-feed-testa { position: relative; }
.fr-feed .fr-titolo { max-width: 26rem; font-size: 3.4rem; line-height: .95; text-wrap: wrap; }
.fr-feed-mano { position: absolute; right: .4rem; top: 7rem; width: 9.4rem; }
.fr-feed-corona { width: 3rem; height: 2.6rem; margin-left: .2rem; color: var(--rosa); filter: url(#f-mano); }
.fr-feed-mano .fr-mano { margin-top: .6rem; font-size: 1.55rem; line-height: 1.1; transform: rotate(-10deg); transform-origin: 0 0; }
.fr-feed-mano .fr-segno--doppia { width: 6.4rem; height: 1.6rem; margin: .4rem 0 0 1.8rem; color: var(--rosa); }
.fr-feed .fr-testo { margin-top: 2.2rem; font-size: 1.73rem; line-height: 1.5; }

.fr-reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 2.6rem -1.4rem 0; }
.fr-reel a {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 117 / 328; border-radius: 1.6rem;
  border: .25rem solid rgba(255, 255, 255, .18); background: var(--nero);
  color: var(--bianco); text-decoration: none;
}
.fr-reel-foto, .fr-reel-foto img { width: 100%; height: 100%; }
.fr-reel-foto img { object-fit: cover; }
.fr-reel a::after {
  content: ""; position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(180deg, rgba(13, 14, 14, 0), rgba(13, 14, 14, .85));
}
.fr-reel-notch { position: absolute; top: .7rem; left: 50%; z-index: 2; width: 3.6rem; height: .9rem; border-radius: 1rem; background: var(--nero); transform: translateX(-50%); }
.fr-reel-views { position: absolute; left: 1.2rem; bottom: 1.8rem; z-index: 2; font-size: 2rem; font-weight: 600; line-height: 1; }
.fr-reel-views strong { display: block; margin-bottom: .6rem; font-family: var(--display); font-weight: 400; font-size: 2.2rem; }
.fr-reel-fonte { margin-top: .9rem; font-size: 1.1rem; color: rgba(255, 255, 255, .6); text-align: center; }

/* ------------------------------------------------------------ reel riproducibili */
/* Sul telefono i tre reel scorrono di lato, uno sotto il pollice e il successivo che
   si affaccia; da 768px stanno in fila. Formato 9:16, come su Instagram. */
.fr-guarda { padding: 4.2rem 0 3.6rem; overflow: hidden; }
.fr-guarda-testa { position: relative; padding: 0 var(--g); }
.fr-guarda .fr-titolo { max-width: 25rem; font-size: 4.2rem; line-height: .94; color: var(--nero); }
.fr-guarda-mano {
  position: absolute; right: var(--g); top: .6rem;
  font-size: 1.55rem; color: var(--nero); text-align: right;
  transform: rotate(-9deg); transform-origin: 100% 0;
}
.fr-guarda-lista {
  display: flex; gap: 1.4rem; margin-top: 2.8rem; padding: 0 var(--g) .6rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--g);
  scrollbar-width: none;
}
.fr-guarda-lista::-webkit-scrollbar { display: none; }
.fr-clip { flex: 0 0 25.6rem; scroll-snap-align: start; }
.fr-clip-schermo {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: .3rem solid var(--nero); border-radius: 1.8rem; background: var(--nero);
}
.fr-clip-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--nero); }
.fr-clip-play {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: var(--nero); color: var(--nero); cursor: pointer;
}
.fr-clip-copertina, .fr-clip-copertina img { width: 100%; height: 100%; }
.fr-clip-copertina img { object-fit: cover; }
.fr-clip-tasto {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--bianco); border: .45rem solid var(--nero);
  transform: translate(-50%, -50%); transition: transform .18s ease;
}
.fr-clip-tasto svg { width: 2.8rem; height: 2.8rem; margin-left: .3rem; }
@media (hover: hover) { .fr-clip-play:hover .fr-clip-tasto { transform: translate(-50%, -50%) scale(1.06); } }
.fr-clip-play:focus-visible { outline-offset: -.6rem; }
.fr-clip-durata {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  padding: .5rem .9rem; border-radius: 99rem; background: var(--nero); color: var(--bianco);
  font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.fr-clip-titolo { margin-top: 1.4rem; font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.05; text-transform: uppercase; color: var(--nero); }
/* Testi piccoli in nero: il bianco sul rosa si ferma a 3,97:1, il nero arriva a 4,9:1. */
.fr-clip-testo { margin-top: .6rem; font-size: 1.45rem; line-height: 1.45; color: var(--nero); }
.fr-guarda-fonte { margin-top: 2rem; padding: 0 var(--g); font-size: 1.3rem; color: var(--nero); }
.fr-guarda-fonte a { font-weight: 700; }

/* ------------------------------------------------------------ chi cerchiamo */
.fr-cerchiamo { padding: 2.4rem 2.4rem 0; overflow: hidden; }
.fr-cerchiamo .fr-titolo { font-size: 4.4rem; line-height: .94; }
/* La seconda frase va a capo sempre: altrimenti il bilanciamento lascia "MA" in coda alla prima. */
.fr-cerchiamo .fr-titolo .fr-rosa, .fr-porta .fr-titolo .fr-rosa { display: block; }
.fr-cerchiamo .fr-testo { margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.58; }

.fr-requisiti { display: grid; grid-template-columns: 1fr 1fr; row-gap: 3.4rem; margin-top: 3.2rem; }
.fr-requisiti li { position: relative; padding: .2rem 0 0 2.8rem; }
.fr-requisiti li:nth-child(even) { padding-left: 4rem; }
.fr-requisiti li:nth-child(even)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(13, 14, 14, .3); }
.fr-requisiti .fr-icona { width: 5.2rem; height: 4.8rem; }
.fr-requisiti h3 { margin-top: 1.5rem; font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; }
.fr-requisiti p { margin-top: 1rem; font-size: 1.32rem; line-height: 1.58; color: rgba(13, 14, 14, .85); }

.fr-cerchiamo-piede { position: relative; height: 27rem; margin: 2.6rem -2.4rem 0; }
/* Gianni e' tagliato a sinistra e in basso: sta a filo di quei due bordi. */
.fr-cerchiamo-foto { position: absolute; left: 0; bottom: 0; width: 21rem; }
.fr-cerchiamo-foto img { width: 100%; }
.fr-cerchiamo-mano {
  position: absolute; right: 2rem; top: 4.2rem;
  font-size: 1.6rem; line-height: 1.1; color: var(--nero);
  transform: rotate(-11deg); transform-origin: 100% 0;
  text-align: left;
}
.fr-cerchiamo-segno { position: absolute; right: 4.2rem; top: 17.6rem; width: 7.4rem; height: 1.8rem; color: var(--rosa); }

/* ------------------------------------------------------------ percorso */
.fr-percorso { padding: 2.6rem 2.5rem 4.8rem; }
.fr-percorso .fr-titolo { font-size: 3.8rem; line-height: .95; }
.fr-tappe { position: relative; margin-top: 2.6rem; padding-left: 4.2rem; }
.fr-tappe::before {
  content: ""; position: absolute; left: calc(4.2rem + 1.95rem - 1px); top: 2.5rem; bottom: 2.5rem;
  width: 2px; background: rgba(255, 255, 255, .7);
}
.fr-tappa {
  position: relative; display: flex; align-items: center; height: 5rem;
  font-size: 1.57rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: .01em;
}
.fr-tappa-num {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center;
  width: 3.9rem; height: 3.9rem; margin-right: 4.1rem; border-radius: 50%;
  background: var(--bianco); color: var(--nero);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0;
}
.fr-tappa-num::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 2.8rem; height: 1.5px; margin-left: .6rem;
  background: rgba(255, 255, 255, .55);
}
.fr-tappa--prima .fr-tappa-num { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, .28); }
.fr-tappa--fine .fr-tappa-num { background: var(--nero); color: var(--bianco); }
.fr-tappa--fine .fr-tappa-num svg { width: 2.2rem; height: 1.9rem; }
.fr-percorso .fr-nota { margin-top: 2.4rem; font-size: 1.51rem; line-height: 1.72; }

/* ------------------------------------------------------------ citta' e recensioni */
/* Niente overflow qui: la mappa esce sotto, nella sezione del questionario. */
.fr-citta { padding: 2.8rem 3rem 0; }
.fr-citta .fr-titolo { font-size: 4.2rem; line-height: .95; }
.fr-recensioni { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
.fr-recensioni li {
  padding: 2rem 2.2rem 1.8rem;
  border: 1.5px solid rgba(255, 255, 255, .3); border-radius: .6rem;
  background: var(--nero);
}
.fr-rec-titolo { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.05; text-transform: uppercase; }
.fr-recensioni blockquote { margin-top: 1.1rem; }
.fr-recensioni blockquote p { font-size: 1.79rem; line-height: 1.51; }
.fr-rec-fonte { margin-top: .4rem; font-size: 1.3rem; color: rgba(255, 255, 255, .72); }

.fr-mappa { position: relative; height: 36.4rem; margin: 0 -3rem; }
/* "difference": bianca sul nero, scura quando la Sicilia sconfina sulla crema. */
.fr-mappa-italia {
  position: absolute; left: 1rem; top: 2rem; z-index: 3;
  width: 32rem; height: auto; aspect-ratio: 1000 / 1180;
  fill: none; stroke: var(--bianco); stroke-width: 2px; stroke-linejoin: round;
  mix-blend-mode: difference; pointer-events: none;
  filter: url(#f-mano);
}
.fr-mappa-italia path { vector-effect: non-scaling-stroke; }
.fr-mappa-pin { position: absolute; inset: 0; z-index: 4; }
.fr-pin {
  position: absolute; display: flex; align-items: flex-start; gap: .8rem;
  font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1;
  text-transform: uppercase; color: var(--bianco);
}
.fr-pin svg { width: 2.8rem; height: 4.3rem; color: var(--rosa); flex: none; }
.fr-pin { padding-top: 0; }
.fr-pin svg + * { margin-top: .9rem; }
.fr-pin--torino { left: 2.45rem; top: 5rem; }
.fr-pin--firenze { left: 12.1rem; top: 9.7rem; }
.fr-pin--next { left: 27.2rem; top: 19.4rem; }
.fr-pin { padding-top: .1rem; }
/* alone nero: l'etichetta resta leggibile anche dove passa il confine */
.fr-pin { text-shadow: 0 0 .4rem var(--nero), 0 0 .2rem var(--nero), 0 0 .1rem var(--nero); }
.fr-pin::after { content: none; }
.fr-mappa-mano {
  position: absolute; right: 3.2rem; top: 2.4rem;
  font-size: 2.1rem; line-height: 1.1; color: var(--bianco);
  transform: rotate(-10deg); transform-origin: 100% 0;
}
.fr-mappa-segno { position: absolute; right: 6.4rem; top: 12.2rem; width: 8rem; height: 2rem; color: var(--rosa); }

/* ------------------------------------------------------------ candidatura */
.fr-quiz { padding: 4.4rem 3rem 3rem; }
.fr-quiz .fr-titolo { font-size: 4rem; line-height: .95; }
.fr-quiz-tempo { margin-top: 2.2rem; font-size: 1.8rem; }

.fr-passi { display: flex; justify-content: space-between; margin-top: 3.4rem; }
.fr-passo {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(13, 14, 14, .13); background: transparent;
  font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--nero);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fr-passo:disabled { cursor: default; }
.fr-passo.is-fatto { border-color: var(--rosa); border-width: 2px; color: var(--nero); }
.fr-passo.is-attivo { background: var(--nero); border-color: var(--nero); color: var(--bianco); }

.fr-step { margin-top: 4.4rem; border: 0; min-width: 0; }
.fr-step legend { display: block; width: 100%; }
.fr-step-num { display: block; font-size: 2.1rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.fr-step-dom { display: block; max-width: 25rem; margin-top: 1rem; font-size: 2.2rem; font-weight: 600; line-height: 1.5; }
.fr-step-aiuto { margin-top: 1.4rem; font-size: 1.45rem; line-height: 1.5; color: rgba(13, 14, 14, .76); }

.fr-campo {
  display: block; width: 100%; height: 7.3rem; margin-top: 3.6rem; padding: 0 2rem;
  border: 1px solid rgba(13, 14, 14, .15); border-radius: .6rem;
  background: var(--bianco); color: var(--nero);
  font-size: 1.7rem; font-weight: 500;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fr-campo::placeholder { color: rgba(13, 14, 14, .62); opacity: 1; }
.fr-campo:focus { outline: none; border-color: var(--nero); box-shadow: 0 0 0 3px rgba(184, 105, 111, .35); }
.fr-campo[aria-invalid="true"] { border-color: var(--rosa); box-shadow: 0 0 0 2px var(--rosa); }
textarea.fr-campo { height: auto; min-height: 10rem; padding: 1.4rem 2rem; resize: vertical; line-height: 1.45; }

.fr-scelte { display: grid; gap: 1rem; margin-top: 2.8rem; }
.fr-scelte label { position: relative; display: block; }
.fr-scelte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fr-scelte span {
  display: flex; align-items: center; min-height: 6.4rem; padding: 1.2rem 2rem;
  border: 1px solid rgba(13, 14, 14, .16); border-radius: .6rem;
  background: var(--bianco);
  font-size: 1.7rem; font-weight: 600; line-height: 1.3;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fr-scelte input:checked + span { background: var(--nero); border-color: var(--nero); color: var(--bianco); }
.fr-scelte input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 2px; }
@media (hover: hover) { .fr-scelte span:hover { border-color: var(--nero); } }

.fr-griglia-campi { display: grid; gap: 1.6rem; margin-top: 2.6rem; }
.fr-etichetta { display: block; font-size: 1.5rem; font-weight: 600; }
.fr-etichetta span { font-weight: 500; color: rgba(13, 14, 14, .72); }
.fr-griglia-campi .fr-campo { height: 6rem; margin-top: .6rem; }
.fr-griglia-campi textarea.fr-campo { height: auto; }

.fr-consenso { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 2.2rem; font-size: 1.45rem; line-height: 1.45; cursor: pointer; }
.fr-consenso input { width: 2.2rem; height: 2.2rem; margin: .1rem 0 0; flex: none; accent-color: var(--nero); }
.fr-consenso a { font-weight: 600; }

.fr-errore {
  display: flex; gap: .8rem; align-items: baseline; margin-top: .9rem;
  font-size: 1.45rem; font-weight: 600; line-height: 1.4; color: var(--nero);
}
.fr-errore::before {
  content: ""; flex: none; width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--rosa); transform: translateY(-.1rem);
}
.fr-errore--form { margin-top: 2rem; }
.fr-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fr-quiz-avanti { margin-top: 2.2rem; min-height: 7.5rem; }
.fr-quiz-avanti[disabled] { opacity: .65; cursor: progress; transform: none; }
.fr-quiz-indietro {
  display: block; margin: 1.6rem auto 0; padding: .6rem 1rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 600; text-decoration: underline; text-underline-offset: .3rem;
}

.fr-grazie { margin-top: 3.4rem; outline: none; }
.fr-grazie-mano { font-size: 2rem; color: var(--rosa); transform: rotate(-8deg); transform-origin: 0 0; }
.fr-grazie .fr-titolo { margin-top: 1.6rem; font-size: 3.8rem; line-height: .95; }
.fr-grazie .fr-testo { margin-top: 2rem; }

/* ------------------------------------------------------------ stessa fame */
.fr-divano { background: var(--crema); }
.fr-divano-foto {
  position: relative; height: 54rem; overflow: hidden;
  clip-path: polygon(0 0, 100% 5.5rem, 100% 100%, 0 100%);
  background: var(--nero);
}
.fr-divano-foto picture, .fr-divano-foto img { width: 100%; height: 100%; }
.fr-divano-foto img { object-fit: cover; object-position: 50% 50%; }
.fr-divano-corona { position: absolute; left: 3.8rem; top: 6rem; width: 4.4rem; height: 3.8rem; color: var(--bianco); filter: url(#f-mano); }
.fr-divano-mano {
  position: absolute; left: 3.2rem; top: 11.4rem;
  font-size: 3rem; line-height: 1.12; color: var(--bianco);
  transform: rotate(-10deg); transform-origin: 0 0;
}
.fr-divano-segno { position: absolute; left: 5.4rem; top: 34.6rem; width: 9.6rem; height: 2.2rem; color: var(--bianco); }

/* ------------------------------------------------------------ piede */
.fr-piede { padding: 6.2rem 2.2rem 4.4rem; background: var(--nero); color: var(--bianco); text-align: center; }
/* Niente logo nel piede (richiesta del titolare, 27 set 2026): resta la nota, al centro. */
.fr-piede-marchio { display: flex; justify-content: center; }
.fr-piede-mano { margin: 0; }
.fr-piede-mano .fr-mano { font-size: 1.7rem; line-height: 1.12; transform: rotate(-10deg); transform-origin: 100% 0; }
.fr-piede-mano .fr-segno--doppia { width: 8.8rem; height: 1.8rem; margin: 1.4rem 0 0 2rem; color: var(--rosa); }
.fr-piede-invito { max-width: 30rem; margin: 5.6rem auto 0; font-size: 2.1rem; line-height: 1.62; }
.fr-piede .fr-cta { margin-top: 3.8rem; min-height: 7.5rem; }
.fr-piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem 4.2rem; max-width: 30rem; margin: 6.6rem auto 0; }
.fr-piede-link a, .fr-piede-link button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 1.47rem; font-weight: 600; line-height: 1; color: var(--bianco); text-decoration: none;
}
.fr-social { display: flex; justify-content: center; gap: 4rem; margin-top: 4.6rem; }
.fr-social a, .fr-social span { display: block; color: var(--bianco); }
.fr-social svg { width: 3.8rem; height: 3.8rem; }
.fr-piede-copy { margin-top: 6rem; font-size: 1.5rem; line-height: 1.87; }
.fr-piede-piva { max-width: 34rem; margin: .8rem auto 0; font-size: 1.2rem; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.fr-piede-cookie {
  margin-top: 1.2rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 1.2rem; font-weight: 600; color: rgba(255, 255, 255, .75); text-decoration: underline; text-underline-offset: .25rem;
}
.fr-piede-credit { margin-top: 2.4rem; font-size: 1.2rem; color: rgba(255, 255, 255, .6); }
.fr-piede-credit a { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------ banner consenso */
.cookie-banner {
  position: fixed; z-index: 100; inset: auto .8rem .8rem .8rem;
  padding: 2rem; background: var(--crema); color: var(--nero);
  border: 3px solid var(--nero); border-radius: .6rem;
  font-size: 1.45rem; line-height: 1.45;
}
.cookie-banner h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; text-transform: uppercase; }
.cookie-banner p { margin-top: .8rem; }
.cookie-banner p a { font-weight: 700; }
.cookie-banner-azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.cookie-banner-azioni .btn {
  flex: 1 1 auto; min-height: 4.8rem; padding: 0 1.6rem; border-radius: 99rem; cursor: pointer;
  font-family: var(--testo); font-weight: 900; font-size: 1.5rem; text-transform: uppercase;
}
.cookie-banner .btn--blocco { border: 0; background: var(--rosa); color: var(--bianco); }
.cookie-banner .btn--chiaro { border: 2px solid var(--nero); background: transparent; color: var(--nero); }
.cookie-banner-dettagli { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; }
.cookie-banner-voce { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.4rem; }
.cookie-banner-voce input { width: 1.8rem; height: 1.8rem; margin: .2rem 0 0; flex: none; accent-color: var(--nero); }
.cookie-banner-voce strong { display: block; font-weight: 700; }
.cookie-banner-link { margin-top: 1.2rem; }
.cookie-banner .footer-cookie { padding: 0; border: 0; background: none; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--nero); }

/* ==========================================================================
   Da 768px: il rem torna fisso e la pagina si apre in griglia.
   La composizione resta quella del master: foto dominanti, fasce nette,
   headline fuori scala, segni a mano. Solo piu' larga, non piu' ariosa.
   ========================================================================== */
@media (min-width: 768px) {
  html { font-size: 10px; }
  :root {
    --testa-h: 7.4rem;
    --g: clamp(4rem, 5.5vw, 9rem);
    --lato: max(var(--g), calc((100% - 128rem) / 2));   /* margine che centra a 128rem */
  }

  .fr-testa { padding: 0 var(--lato); }
  .fr-testa-cta {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 4.4rem; padding: 0 2.2rem; border-radius: 99rem;
    background: var(--rosa); color: var(--bianco); text-decoration: none;
    font-family: var(--testo); font-weight: 900; font-size: 1.5rem; text-transform: uppercase;
    transition: transform .18s ease;
  }
  @media (hover: hover) { .fr-testa-cta:hover { transform: translateY(-2px); } }
  .fr-menu { left: auto; width: min(46rem, 100%); padding: 3rem 4rem 5rem; border-left: 1px solid rgba(255, 255, 255, .12); }

  .fr-cta { width: auto; display: inline-flex; min-height: 6.8rem; padding: 0 3.6rem; font-size: 2rem; }
  .fr-logo-img img { height: 5rem; }

  /* hero: testo a sinistra, rosa a destra */
  .fr-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(calc(100svh - var(--testa-h)), 92rem);
  }
  .fr-hero-media { grid-column: 2; grid-row: 1; height: auto; min-height: 60rem; }
  /* La foto riempie la meta' destra fino ai bordi: in alto la testata, a destra il
     margine della finestra, in basso il nastro. */
  .fr-hero-media::after { background: linear-gradient(180deg, rgba(13, 14, 14, 0) 72%, rgba(13, 14, 14, .45) 100%); }
  .fr-hero-foto img { object-position: 50% 32%; }
  .fr-hero-testo {
    grid-column: 1; grid-row: 1; align-self: center;
    margin: 0; padding: 6rem 4rem 6rem var(--lato);
  }
  .fr-hero-next { right: 4rem; top: 6.6rem; font-size: clamp(1.6rem, 1.5vw, 2.2rem); }
  .fr-hero h1 { font-size: clamp(4.4rem, 5.9vw, 10.4rem); line-height: .9; }
  .fr-hero-lead { max-width: 48rem; margin-top: 3rem; font-size: clamp(1.8rem, 1.4vw, 2.2rem); }
  .fr-hero .fr-cta { margin-top: 3rem; }
  .fr-hero-micro { text-align: left; margin-top: 1.8rem; font-size: 1.5rem; }

  .fr-nastro { height: 5.6rem; }
  .fr-nastro-pista { font-size: 2rem; gap: 2.4rem; padding-right: 2.4rem; }
  .fr-nastro-pista svg { width: 1.4rem; height: 1.4rem; }

  /* locale + prova affiancati */
  .fr-duo--locale { display: grid; grid-template-columns: 1fr 1fr; background: var(--crema); }
  .fr-locale, .fr-locale img { height: 100%; }
  .fr-locale img { aspect-ratio: auto; min-height: 56rem; }
  .fr-prova { padding: 7rem var(--lato) 7rem clamp(4rem, 5vw, 8rem); align-self: center; }
  .fr-prova .fr-titolo { font-size: clamp(3.2rem, 4.1vw, 6.4rem); }
  .fr-prova .fr-testo { max-width: 48rem; font-size: 1.9rem; }
  .fr-numeri { margin-top: 4.4rem; max-width: 56rem; }
  .fr-numeri-num { font-size: clamp(3.6rem, 3.4vw, 5.6rem); }
  .fr-numeri dt { font-size: clamp(1.35rem, 1.1vw, 1.6rem); }
  .fr-numeri-nota { font-size: 1.4rem; }

  /* prodotto: il burger sul margine sinistro, la box di sushi sul destro, il testo
     in mezzo. Due mondi, uno per lato. Fra 768 e 1023 il testo sta sotto. */
  .fr-prodotto { padding: 2rem 0 6rem; }
  .fr-prodotto-media { height: 40rem; }
  .fr-prodotto-burger { width: 54%; left: -6%; top: 4%; }
  .fr-prodotto-sushi { width: 46%; right: -5%; top: 38%; }
  .fr-prodotto-corona { right: 44%; top: 6%; width: 7rem; height: 6rem; }
  .fr-prodotto-testo { max-width: 64rem; margin: 0 auto; padding: 0 var(--g); text-align: center; }
  .fr-prodotto .fr-titolo { display: inline-block; font-size: clamp(4.4rem, 5.6vw, 6.2rem); transform-origin: 50% 50%; }
  .fr-colonne { margin: 4.6rem auto 0; max-width: 56rem; }
  .fr-colonne h3 { font-size: 2rem; }
  .fr-colonne p { max-width: none; font-size: 1.8rem; }
  .fr-chiusa { max-width: 56rem; margin-left: auto; margin-right: auto; font-size: 1.9rem; }

  /* video */
  .fr-video {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(4rem, 5vw, 8rem);
    grid-template-rows: auto auto 1fr auto;
    padding: 8rem var(--lato) 0;
  }
  .fr-video-testa { grid-column: 1; grid-row: 1; }
  .fr-video .fr-titolo { font-size: clamp(3.4rem, 4.4vw, 7rem); }
  .fr-video-cornice { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: center; }
  .fr-video-quote { grid-column: 1; grid-row: 2; margin-top: 3rem; }
  .fr-video-quote p { font-size: clamp(1.8rem, 1.45vw, 2.2rem); }
  .fr-video .fr-cta--bianca { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; width: auto; margin: 3.4rem 0 0; }
  /* Il piede sta sotto il testo, nella colonna sinistra: niente fascia vuota a tutta larghezza. */
  .fr-video-piede { grid-column: 1; grid-row: 4; height: clamp(22rem, 21vw, 30rem); margin: 3rem 0 0 calc(-1 * var(--lato)); }
  /* Duccio in bianco e nero a filo del margine sinistro della finestra, la nota accanto. */
  .fr-video-duccio { left: 0; right: auto; width: clamp(17rem, 22vw, 34rem); }
  .fr-video-fame { left: calc(clamp(17rem, 22vw, 34rem) + 2.4rem); top: 3rem; font-size: clamp(1.7rem, 1.9vw, 2.8rem); }
  .fr-video-fame-segno { left: calc(clamp(17rem, 22vw, 34rem) + 4rem); top: auto; bottom: 3rem; width: 15rem; height: 3.2rem; }

  /* cosa portiamo */
  .fr-porta {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(4rem, 6vw, 10rem);
    padding: 8rem var(--lato) 7rem;
  }
  .fr-porta .fr-titolo { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--testa-h) + 4rem); max-width: none; font-size: clamp(3.4rem, 3.7vw, 5.6rem); line-height: .95; }
  .fr-porta-lista { grid-column: 2; margin-top: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem 4rem; }
  .fr-porta-lista li + li { margin-top: 0; }
  .fr-porta-lista li { grid-template-columns: 1fr; row-gap: 2rem; }
  .fr-porta-lista h3 { font-size: 2.2rem; }
  .fr-porta-lista p { font-size: 1.75rem; }
  .fr-porta .fr-nota { grid-column: 2; margin-top: 5rem; font-size: 1.7rem; }
  .fr-porta .fr-segno--zigzag { grid-column: 2; margin-left: 0; }

  /* marketing */
  .fr-feed {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem);
    grid-template-rows: auto 1fr; align-items: start;
    padding: 8rem var(--lato);
  }
  .fr-feed-testa { grid-column: 1; grid-row: 1; }
  .fr-feed .fr-titolo { max-width: none; font-size: clamp(3.6rem, 3.8vw, 6rem); }
  .fr-feed-mano { position: relative; right: auto; top: auto; margin: 2.4rem 0 0 auto; width: 16rem; }
  .fr-feed-mano .fr-mano { font-size: 2rem; }
  .fr-feed .fr-testo { grid-column: 1; grid-row: 2; margin-top: 4rem; font-size: 1.9rem; max-width: 52rem; }
  .fr-feed-media { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .fr-reel { margin: 0; gap: 1.6rem; }
  .fr-reel a { aspect-ratio: 9 / 19.5; border-radius: 2.4rem; border-width: .3rem; }
  .fr-reel-views { left: 1.8rem; bottom: 2.4rem; font-size: 2.2rem; }
  .fr-reel-views strong { font-size: 2.8rem; }
  .fr-reel-fonte { margin-top: 1.4rem; font-size: 1.3rem; }

  /* reel riproducibili */
  .fr-guarda { padding: 8rem var(--lato); }
  .fr-guarda-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; padding: 0; }
  .fr-guarda .fr-titolo { max-width: none; font-size: clamp(3.8rem, 4.4vw, 7rem); }
  .fr-guarda-mano { position: relative; right: auto; top: auto; flex: none; margin-bottom: 1.2rem; font-size: clamp(1.7rem, 1.6vw, 2.4rem); }
  /* Tre colonne larghe al massimo 36rem, distribuite su tutta la riga. */
  .fr-guarda-lista {
    display: grid; grid-template-columns: repeat(3, minmax(0, 36rem)); justify-content: space-between;
    gap: clamp(2rem, 2.6vw, 4rem); margin-top: 4.8rem; padding: 0; overflow: visible;
  }
  .fr-clip-schermo { border-radius: 2.4rem; }
  .fr-clip-tasto { width: 7.6rem; height: 7.6rem; }
  .fr-clip-tasto svg { width: 3.2rem; height: 3.2rem; }
  .fr-clip-durata { font-size: 1.4rem; }
  .fr-clip-titolo { margin-top: 1.8rem; font-size: clamp(1.8rem, 1.6vw, 2.4rem); }
  .fr-clip-testo { font-size: 1.6rem; }
  .fr-guarda-fonte { margin-top: 3.6rem; padding: 0; font-size: 1.5rem; }

  /* chi cerchiamo */
  .fr-cerchiamo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem);
    padding: 8rem var(--lato) 0;
  }
  .fr-cerchiamo .fr-titolo { grid-column: 1; font-size: clamp(3.8rem, 3.7vw, 6rem); }
  .fr-cerchiamo .fr-testo { grid-column: 1; font-size: 1.9rem; max-width: 52rem; }
  .fr-requisiti { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: start; }
  .fr-requisiti p { font-size: 1.7rem; }
  .fr-requisiti h3 { font-size: clamp(1.6rem, 1.4vw, 2rem); }
  .fr-requisiti .fr-icona { width: 6.4rem; height: 5.8rem; }
  /* Gianni e la nota a mano sotto il testo; i requisiti occupano la colonna destra per intero. */
  .fr-requisiti { grid-row: 1 / span 3; align-self: center; }
  .fr-cerchiamo-piede { grid-column: 1; grid-row: 3; height: clamp(28rem, 26vw, 38rem); margin: 3rem 0 0 calc(-1 * var(--lato)); }
  /* Gianni a filo del margine sinistro della finestra, come sul telefono. */
  .fr-cerchiamo-foto { left: 0; width: clamp(21rem, 21vw, 31rem); }
  .fr-cerchiamo-mano { right: auto; left: calc(clamp(21rem, 21vw, 31rem) + 2.4rem); top: 20%; font-size: clamp(1.7rem, 1.8vw, 2.8rem); transform-origin: 0 0; }
  .fr-cerchiamo-segno { right: auto; left: calc(clamp(21rem, 21vw, 31rem) + 5rem); top: auto; bottom: 16%; width: 12rem; height: 2.8rem; }
  .fr-cerchiamo .fr-titolo, .fr-cerchiamo .fr-testo { grid-row: auto; }

  /* percorso */
  .fr-percorso {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem);
    padding: 8rem var(--lato);
  }
  .fr-percorso .fr-titolo { grid-column: 1; font-size: clamp(3.4rem, 4vw, 6.4rem); line-height: .95; }
  .fr-percorso .fr-nota { grid-column: 1; align-self: end; max-width: 46rem; font-size: 1.8rem; }
  .fr-tappe { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .fr-tappa { height: 6.2rem; font-size: 1.9rem; }
  .fr-tappa-num { width: 4.6rem; height: 4.6rem; font-size: 1.7rem; }
  .fr-tappe::before { left: calc(4.2rem + 2.3rem - 1px); top: 3.1rem; bottom: 3.1rem; }

  /* citta' */
  .fr-citta {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(4rem, 5vw, 8rem);
    padding: 8rem var(--lato) 0;
  }
  .fr-citta .fr-titolo { grid-column: 1; font-size: clamp(3.6rem, 4.2vw, 6.6rem); line-height: .95; }
  .fr-recensioni { grid-column: 1; margin-top: 3.6rem; padding-bottom: 8rem; }
  .fr-recensioni blockquote p { font-size: 1.9rem; }
  .fr-mappa { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 64rem; margin: 0; }
  .fr-mappa-italia { width: calc(100% - 9rem); max-width: 52rem; left: 0; top: 6rem; }
  /* i pin seguono la mappa: stesse proporzioni della versione mobile */
  .fr-mappa-pin { width: calc(100% - 9rem); max-width: 52rem; height: 0; padding-bottom: min(118% - 10.6rem, 61.36rem); inset: 6rem auto auto 0; }
  .fr-pin { font-size: 2rem; white-space: nowrap; }
  .fr-pin svg { width: 3.4rem; height: 5.2rem; }
  .fr-pin--torino { left: calc(8.9% - 1.7rem); top: calc(19.3% - 5.2rem + 6rem); }
  .fr-pin--torino, .fr-pin--firenze, .fr-pin--next { position: absolute; }
  .fr-mappa-mano { right: 0; top: 2rem; font-size: clamp(2.2rem, 2.1vw, 3.2rem); }
  .fr-mappa-segno { right: 3rem; top: 16rem; width: 12rem; height: 2.8rem; }

  /* candidatura */
  .fr-quiz {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem);
    padding: 12rem var(--lato) 9rem;
  }
  .fr-quiz-testa { grid-column: 1; align-self: start; position: sticky; top: calc(var(--testa-h) + 4rem); }
  .fr-quiz .fr-titolo { font-size: clamp(3.4rem, 4vw, 6.4rem); line-height: .95; }
  .fr-quiz-tempo { font-size: 2rem; }
  .fr-form, .fr-grazie { grid-column: 2; grid-row: 1; max-width: 58rem; }
  .fr-grazie { margin-top: 0; }
  .fr-passi { margin-top: 0; }
  .fr-passo { width: 4.4rem; height: 4.4rem; font-size: 1.7rem; }
  .fr-griglia-campi { grid-template-columns: 1fr 1fr; }
  .fr-campo-largo { grid-column: 1 / -1; }
  .fr-quiz-avanti { width: 100%; }

  /* stessa fame */
  .fr-divano-foto { height: clamp(46rem, 48vw, 72rem); clip-path: polygon(0 0, 100% 9rem, 100% 100%, 0 100%); }
  .fr-divano-foto img { object-position: 50% 42%; }
  .fr-divano-corona { left: var(--lato); top: 10rem; width: 6.4rem; height: 5.6rem; }
  .fr-divano-mano { left: var(--lato); top: 17rem; font-size: clamp(3.2rem, 3.4vw, 5.2rem); }
  .fr-divano-segno { left: calc(var(--lato) + 3rem); top: auto; bottom: 10%; width: 16rem; height: 3.4rem; }

  /* piede */
  .fr-piede { padding: 9rem var(--lato) 6rem; }
  .fr-piede-mano .fr-mano { font-size: 2.4rem; }
  .fr-piede-piva { max-width: 64rem; }
  .fr-piede-invito { max-width: 52rem; font-size: 2.4rem; }
  .fr-piede-link { max-width: none; }
  .cookie-banner { inset: auto 2rem 2rem auto; width: min(44rem, calc(100vw - 4rem)); }
}

/* I pin della mappa su schermi larghi: coordinate calcolate sulla stessa
   proiezione del tracciato (Torino 8,9% 19,3%; Firenze 39% 31,9%; Bari 86,4% 57,4%). */
@media (min-width: 768px) {
  .fr-pin--torino  { left: calc(8.9% - 1.7rem);  top: calc(19.3% - 5.2rem); }
  .fr-pin--firenze { left: calc(39% - 1.7rem);   top: calc(31.9% - 5.2rem); }
  .fr-pin--next    { left: calc(86.4% - 1.7rem); top: calc(57.4% - 5.2rem); }
}

/* Tablet: due colonne sono troppo strette per il blocco social, che torna in colonna. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* hero: la colonna del testo un po' piu' larga, il bottone ci deve stare intero */
  .fr-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .fr-hero-testo { padding-right: 2.4rem; }
  .fr-hero .fr-cta { padding: 0 2.4rem; font-size: 1.7rem; }
  .fr-feed { display: block; }
  .fr-feed-mano { position: absolute; right: 0; top: 0; margin: 0; }
  .fr-feed .fr-titolo { max-width: 44rem; }
  .fr-feed .fr-testo { max-width: 58rem; margin-top: 3rem; }
  .fr-feed-media { margin-top: 4rem; }
  .fr-reel { gap: 2rem; }
  /* Anche la mappa ha bisogno di tutta la larghezza per le etichette dei pin. */
  .fr-citta { display: block; }
  .fr-recensioni { grid-template-columns: repeat(3, 1fr); padding-bottom: 2rem; }
  .fr-mappa { min-height: 0; height: 66rem; }
  .fr-mappa-italia, .fr-mappa-pin { left: 6rem; max-width: 46rem; }
  .fr-mappa-pin { padding-bottom: min(118% - 10.6rem, 54.28rem); }
  .fr-mappa-mano { right: 4rem; top: 6rem; }
  .fr-mappa-segno { right: 7rem; top: 20rem; }
}

/* Da 1024px il prodotto si apre a tre colonne: burger, testo, sushi. */
@media (min-width: 1024px) {
  .fr-prodotto {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60rem) minmax(0, 1fr); align-items: center;
    min-height: clamp(56rem, 46vw, 72rem); padding: 7rem 0;
  }
  .fr-prodotto-media { position: absolute; inset: 0; height: auto; pointer-events: none; }
  .fr-prodotto-burger { width: clamp(30rem, 31vw, 50rem); left: -5%; top: 7%; }
  .fr-prodotto-sushi { width: clamp(26rem, 27vw, 44rem); left: auto; right: -5%; top: auto; bottom: 9%; }
  .fr-prodotto-corona { left: auto; right: 16%; top: 9%; }
  .fr-prodotto-testo { grid-column: 2; position: relative; z-index: 2; max-width: none; padding: 0; }
  .fr-prodotto .fr-titolo { font-size: clamp(4.2rem, 4.2vw, 6.2rem); }
  .fr-a-capo-mobile { display: none; }
}

@media (min-width: 1200px) {
  .fr-reel { gap: 2rem; }
}