/* ==========================================================================
   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. */
  /* 18,7px o piu' in grassetto e' "testo grande": il bianco sul rosa (3,97:1) regge solo cosi' */
  font-family: var(--testo); font-weight: 900; font-size: max(1.8rem, 18.7px); 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); }
/* Secondario sul nero: solo il contorno, con l'ombra interna il bottone resta grande quanto quello pieno. */
.fr-cta--linea { background: transparent; color: var(--bianco); box-shadow: inset 0 0 0 2px var(--bianco); }

.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; }
/* In cima le due foto vere dei prodotti (cartella cambiare-duccio, 9 ott 2026): il burger a sinistra, la box
   di sushi a destra, divise da un taglio in diagonale in cui si vede il rosa del fondo. Ogni foto riempie il
   62% della larghezza e il CSS la ritaglia: object-position tiene in campo il panino e la box. */
/* Il rosa del taglio e' il fondo del contenitore; le ultime due righe di pixel sono nere, cosi' sotto le foto non resta
   un filo rosa di un pixel (arrotondamenti a 768-1023px). */
.fr-prodotto-media { position: relative; height: 34rem; background: linear-gradient(var(--nero), var(--nero)) bottom / 100% 2px no-repeat, var(--rosa); }
.fr-pm-foto { position: absolute; top: 0; display: block; width: 62%; height: 100%; object-fit: cover; }
.fr-pm-foto--burger { left: 0; object-position: 46% 52%; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.fr-pm-foto--sushi { right: 0; object-position: 58% 50%; clip-path: polygon(41.3% 0, 100% 0, 100% 100%, 19.4% 100%); }
.fr-prodotto-corona { position: absolute; z-index: 2; left: calc(52% - 2.7rem); top: 1.6rem; 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: 0; padding: 3.4rem 2.6rem 0; }
.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-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-scheda {
  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-scheda::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 sborda in basso, nella sezione che segue. */
.fr-citta { padding: 2.8rem 3rem 4.4rem; }
.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; se la Sicilia sconfinasse su un fondo chiaro diventerebbe scura (oggi sotto c'e' il nero di "Stessa hunger"). */
.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--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 */
/* A meta' pagina, in una fascia rosa: il questionario sta in una scheda crema, cosi' tutto lo stile dei campi
   (pensato per il crema) resta com'e'. Il testo piccolo e' nero: il bianco sul rosa fa 3,97:1, il nero 4,9:1. */
.fr-quiz { padding: 4.4rem 2.2rem 4.2rem; }
.fr-quiz .fr-titolo { font-size: 4rem; line-height: .95; color: var(--nero); }
.fr-quiz-tempo { margin-top: 2.2rem; font-size: 1.8rem; color: var(--nero); }
.fr-quiz-scheda { margin-top: 3rem; padding: 2.6rem 2.2rem 2.4rem; background: var(--crema); color: var(--nero); border-radius: .6rem; }
.fr-quiz-scheda .fr-passi { margin-top: 0; }
.fr-quiz-scheda .fr-step { margin-top: 3.2rem; }

.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-azioni { margin-top: 2.2rem; }
.fr-quiz-avanti { min-height: 7.5rem; }
/* Detto a chi vede il modulo fermo dopo un invio riuscito (la pagina di ringraziamento non si e' aperta). */
.fr-conferma-form { margin-top: 2rem; font-size: 1.5rem; font-weight: 600; line-height: 1.4; }
.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;
}

/* ------------------------------------------------------------ stessa fame */
/* La foto e' il sushi con le bacchette (cartella cambiare-duccio, 9 ott 2026). Il fondo e' nero come la
   sezione sopra (le citta'): il taglio in diagonale lascia vedere quel nero e non piu' il crema del
   questionario, che stava qui prima. Sul telefono il testo sta in basso, sotto il rotolo, su un velo scuro. */
.fr-divano { background: var(--nero); }
.fr-divano-foto {
  position: relative; height: 56rem; overflow: hidden;
  clip-path: polygon(0 0, 100% 5.5rem, 100% 100%, 0 100%);
  background: var(--nero);
}
.fr-divano-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Velo in basso per il testo, e in alto per spegnere il dito sfocato che la diagonale lasciava come macchia rosa. */
.fr-divano-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(13, 14, 14, .88) 0%, rgba(13, 14, 14, .56) 24%, rgba(13, 14, 14, 0) 50%),
    linear-gradient(180deg, rgba(13, 14, 14, .82) 0%, rgba(13, 14, 14, 0) 24%);
}
.fr-divano-corona { position: absolute; z-index: 2; left: 3.8rem; top: 9rem; width: 4.4rem; height: 3.8rem; color: var(--bianco); filter: url(#f-mano); }
.fr-divano-mano {
  position: absolute; z-index: 2; left: 3.2rem; bottom: 5.4rem;
  font-size: 3rem; line-height: 1.12; color: var(--bianco);
  transform: rotate(-8deg); transform-origin: 0 100%;
}
/* Il segno sta sotto il testo, come nel master: a destra galleggiava senza un soggetto. */
.fr-divano-segno { position: absolute; z-index: 2; left: 3.6rem; bottom: 2.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); }

/* ------------------------------------------------------------ foto di Torino */
/* Le 22 foto vere del locale (9 ott 2026). Ogni foto sta in un riquadro che decide le
   proporzioni: l'immagine lo riempie e object-position tiene in campo volti e prodotto. Gli
   attributi width e height sono quelli veri del file: il browser riserva lo spazio prima
   del caricamento. Raggio .6rem come la cornice del video. */
.fr-fila img, .fr-due-mondi img, .fr-griglia img, .fr-sera img, .fr-porta-foto img, .fr-quiz-foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Adesivi a mano sopra le foto: sotto c'e' un velo nero che li tiene leggibili. */
.fr-fila-grande::after, .fr-porta-foto::after, .fr-quiz-foto::after {
  content: ""; position: absolute; inset: 0; border-radius: .6rem; pointer-events: none;
  background: linear-gradient(0deg, rgba(13, 14, 14, .6), rgba(13, 14, 14, 0) 46%);
}
.fr-fila-nota, .fr-porta-foto-nota, .fr-quiz-nota { position: absolute; z-index: 2; color: var(--bianco); transform-origin: 0 100%; }

/* La fila e gli ordini: sotto i numeri, la prova. Una foto grande, poi due piu' piccole. */
.fr-fila { padding: 1.4rem var(--g) 6rem; }
.fr-fila-grande { position: relative; }
.fr-fila-grande img { aspect-ratio: 4 / 5; border-radius: .6rem; object-position: 50% 36%; background: rgba(13, 14, 14, .12); }
.fr-fila-corona { position: absolute; z-index: 2; right: 1.6rem; top: 1.5rem; width: 4.4rem; height: 3.8rem; color: var(--bianco); filter: url(#f-mano); transform: rotate(8deg); }
.fr-fila-nota { left: 1.8rem; bottom: 2rem; font-size: 3rem; line-height: 1.04; transform: rotate(-8deg); }
.fr-fila-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.fr-fila-coppia li { aspect-ratio: 4 / 5; overflow: hidden; border-radius: .6rem; background: rgba(13, 14, 14, .12); }
.fr-fila-coppia li:nth-child(1) img { object-position: 50% 30%; }
.fr-fila-coppia li:nth-child(2) { transform: translateY(2.2rem); }
.fr-fila-coppia li:nth-child(2) img { object-position: 50% 28%; }

/* Due mondi: sotto le due colonne di testo, una foto per colonna (chi mangia il burger, chi mangia il sushi). */
.fr-due-mondi { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 3rem; }
.fr-due-mondi li { aspect-ratio: 4 / 5; overflow: hidden; border-radius: .6rem; background: rgba(255, 255, 255, .08); }
.fr-due-mondi li:nth-child(1) img { object-position: 50% 40%; }
.fr-due-mondi li:nth-child(2) { margin-top: 2.6rem; }
.fr-due-mondi li:nth-child(2) img { object-position: 50% 42%; }
.fr-due-mondi + .fr-chiusa { margin-top: 5.2rem; }

/* Know how: il banco di Torino, sotto l'elenco di cosa portiamo. */
.fr-porta-foto { position: relative; margin: 3.4rem 1.8rem 0 0; }
.fr-porta-foto img { aspect-ratio: 5 / 4; border-radius: .6rem; object-position: 50% 44%; background: rgba(13, 14, 14, .12); }
.fr-porta-foto-nota { left: 1.6rem; bottom: 1.6rem; font-size: 2.2rem; line-height: 1.06; transform: rotate(-6deg); }

/* Il feed fatto di clienti: tre colonne a filo dei bordi, come la griglia di un profilo. Dieci foto e una
   casella larga due colonne (Instagram) che chiude l'ultima riga. */
.fr-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: 3.6rem -2.2rem 0; }
.fr-griglia li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(255, 255, 255, .08); }
.fr-griglia .fr-griglia-ig { grid-column: span 2; aspect-ratio: auto; overflow: visible; background: none; }
.fr-griglia-ig a {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--rosa); color: var(--nero); text-align: center; text-decoration: none;
  font-weight: 800; font-size: 1.6rem; line-height: 1.15; text-transform: uppercase;
}
.fr-griglia-ig svg { width: 4rem; height: 4rem; }
.fr-griglia-ig a:focus-visible { outline-color: var(--nero); outline-offset: -.6rem; }

/* Una sera a Torino: striscia che scorre di lato sul telefono, come i reel; in fila da 768px. */
.fr-sera { padding: 4.4rem 0 .6rem; overflow: hidden; }
.fr-sera-nota { padding: 0 var(--g); font-size: 2.2rem; line-height: 1.06; color: var(--bianco); transform: rotate(-4deg); transform-origin: 0 100%; }
.fr-sera-lista {
  display: flex; gap: 1rem; margin-top: 1.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-sera-lista::-webkit-scrollbar { display: none; }
.fr-sera-lista li { flex: 0 0 23rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .6rem; scroll-snap-align: start; background: rgba(255, 255, 255, .08); }
.fr-sera-lista li:nth-child(1) img { object-position: 50% 40%; }
.fr-sera-lista li:nth-child(2) img { object-position: 50% 45%; }
.fr-sera-lista li:nth-child(3) img { object-position: 50% 55%; }
.fr-sera-lista li:nth-child(4) img { object-position: 50% 55%; }
.fr-sera-lista li:nth-child(5) img { object-position: 50% 50%; }
.fr-sera + .fr-citta { padding-top: 3.8rem; }

/* Accanto al modulo: il gruppo, dentro il locale. */
.fr-quiz-foto { position: relative; margin-top: 2.6rem; }
.fr-quiz-foto img { aspect-ratio: 33 / 20; border-radius: .6rem; object-position: 50% 44%; background: rgba(13, 14, 14, .12); }
.fr-quiz-nota { right: 1.8rem; bottom: 1.6rem; left: auto; font-size: 2.4rem; line-height: 1.04; text-align: right; transform: rotate(-7deg); transform-origin: 100% 100%; }

/* ------------------------------------------------------------ pagina di ringraziamento */
/* franchising-grazie.php: stesso foglio di stile della landing. Nero in cima con la conferma e la foto del
   gruppo, crema con le tappe che seguono. */
.fr-testa-link {
  padding: 1rem .2rem; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--bianco); text-decoration: none; border-bottom: 2px solid var(--rosa);
}
.fr-ty { padding: 4.6rem 0 0; background: var(--nero); color: var(--bianco); overflow: hidden; }
.fr-ty-testo { padding: 0 var(--g); }
.fr-ty-mano { font-size: 2.2rem; color: var(--rosa); transform: rotate(-8deg); transform-origin: 0 100%; }
/* "CANDIDATURA" e' la parola piu' lunga della pagina: 11 lettere in Archivo Black, circa 8,6 volte il corpo. */
.fr-ty .fr-titolo { margin-top: 1.8rem; font-size: 3.7rem; line-height: .92; }
.fr-ty-lead { margin-top: 2.4rem; font-size: 1.9rem; line-height: 1.45; }
.fr-ty .fr-cta { margin-top: 2.8rem; }
.fr-ty-lead--call { margin-top: 1.2rem; }
.fr-ty-lead--call strong { font-weight: 800; }
/* Appuntamento e Instagram: uno sotto l'altro sul telefono, affiancati quando c'e' posto. Lo spazio lo da' il gap. */
.fr-ty-azioni { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2.8rem; }
/* A 320 «Prendi un appuntamento» non sta su una riga: qui il bottone puo' andare a capo invece di uscire dal bordo. */
.fr-ty .fr-ty-azioni .fr-cta { margin: 0; white-space: normal; text-align: center; line-height: 1.15; padding-block: 1.2rem; }
.fr-ty-torna { display: block; margin-top: 2rem; text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--bianco); }
/* L'H1 riceve il fuoco all'arrivo (per i lettori di schermo): niente contorno, non e' un controllo. */
.fr-ty h1:focus { outline: none; }
.fr-ty-foto { position: relative; margin: 4.4rem 0 0; }
.fr-ty-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 38%; }
.fr-ty-corona { position: absolute; z-index: 2; right: 2.6rem; top: 2.4rem; width: 5.4rem; height: 4.8rem; color: var(--bianco); filter: url(#f-mano); transform: rotate(8deg); }

.fr-ty-passi { padding: 4.8rem var(--g) 4.6rem; }
.fr-ty-passi .fr-titolo { font-size: 4.2rem; line-height: .94; }
.fr-ty-lista { position: relative; margin-top: 3.2rem; }
.fr-ty-lista li { position: relative; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 1.8rem; align-items: start; padding-bottom: 2.8rem; }
.fr-ty-lista li:last-child { padding-bottom: 0; }
.fr-ty-lista li:not(:last-child)::before { content: ""; position: absolute; left: 2.1rem; top: 4.8rem; bottom: .4rem; width: 2px; background: rgba(13, 14, 14, .3); }
.fr-ty-num {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: var(--bianco); color: var(--nero); border: 2px solid var(--nero);
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.fr-ty-num svg { width: 2.1rem; height: 2.1rem; }
.fr-ty-fatta .fr-ty-num { background: var(--rosa); border-color: var(--rosa); color: var(--bianco); }
.fr-ty-lista h3 { padding-top: .8rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; }
.fr-ty-lista p { margin-top: .7rem; font-size: 1.55rem; line-height: 1.5; }
.fr-ty-passi .fr-nota { margin-top: 3.6rem; color: rgba(13, 14, 14, .8); }

/* ------------------------------------------------------------ popup (dialog) */
/* Il questionario in una finestra, aperta dalle CTA. Sul telefono occupa tutto lo schermo: barra nera con
   logo e chiusura, sotto il corpo crema che scorre da solo. Da 768px e' una finestra centrata, da 1024px con un
   pannello rosa a sinistra. E' un elemento <dialog> aperto con showModal(): fuoco intrappolato, Esc, resto della pagina inerte. */
/* Lo spazio della barra di scorrimento resta riservato sempre, non solo a popup aperto: con le barre classiche
   (Windows, Linux) dichiararlo insieme a overflow hidden non basta, e la pagina dietro il popup si ricomponeva. */
html { scrollbar-gutter: stable; }
html.fr-blocca { overflow: hidden; }
.fr-modale {
  box-sizing: border-box; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0;
  padding: 0; border: 0; background: var(--crema); color: var(--nero); overflow: hidden;
  overscroll-behavior: contain;
}
.fr-modale[open] { display: flex; flex-direction: column; animation: fr-modale-entra .24s ease-out; }
.fr-modale::backdrop { background: rgba(13, 14, 14, .78); }
@keyframes fr-modale-entra { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fr-modale[open] { animation: none; } }

.fr-modale-barra {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  min-height: calc(6.8rem + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(2.2rem + env(safe-area-inset-right)) 0 calc(3rem + env(safe-area-inset-left));
  background: var(--nero); color: var(--bianco);
}
.fr-modale-barra picture { display: block; line-height: 0; }
.fr-modale-barra img { width: auto; height: 4.2rem; }
.fr-modale-chiudi {
  display: grid; place-items: center; width: 4.8rem; height: 4.8rem; margin-right: -.6rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--bianco); cursor: pointer;
}
.fr-modale-chiudi svg { width: 2.6rem; height: 2.6rem; }
@media (hover: hover) { .fr-modale-chiudi:hover { background: rgba(255, 255, 255, .16); } }
.fr-modale-chiudi:focus-visible { outline: 3px solid var(--bianco); outline-offset: -3px; }

.fr-modale-corpo {
  position: relative;   /* contiene gli elementi assoluti (.fr-sr, l'esca): altrimenti il blocco contenitore e' il dialog e questo scorre */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 12rem;
  padding: 3rem calc(2.6rem + env(safe-area-inset-right)) 0 calc(2.6rem + env(safe-area-inset-left));
}
/* All'ultimo passo il bottone che invia la candidatura resta sempre in vista: li' il modulo e' piu' alto della finestra
   su quasi tutti i portatili e i tablet, e il bottone stava sotto il bordo, nascosto da una barra di scorrimento che su
   macOS compare solo scorrendo. Solo al passo 7: nei passi a scelta la risposta porta avanti da sola, e una fascia fissa
   coprirebbe la terza e la quarta risposta. Il fondo crema copre quello che scorre sotto; scroll-padding-bottom (qui
   sopra e nella colonna del modulo da 1024px) tiene il campo col fuoco sopra la fascia. Il padding in fondo e' del
   modulo, non del contenitore: un padding del contenitore terrebbe la fascia sollevata dal bordo. */
.fr-modale .fr-form { padding-bottom: calc(3.2rem + env(safe-area-inset-bottom)); }
.fr-modale .fr-step[data-step="7"]:not([hidden]) ~ .fr-quiz-azioni { position: sticky; bottom: 0; z-index: 2; margin-top: 1.2rem; padding: 1.2rem 0 calc(.8rem + env(safe-area-inset-bottom)); background: var(--crema); }
.fr-modale:not([open]) { display: none; }
.fr-modale-lato { display: none; }
.fr-modale-form .fr-titolo { font-size: 3.3rem; line-height: .95; outline: none; }
.fr-modale-form .fr-quiz-tempo { margin-top: 1.4rem; font-size: 1.6rem; }
.fr-modale .fr-passi { margin-top: 2.6rem; }
.fr-modale .fr-step { margin-top: 3rem; }

/* ------------------------------------------------------------ banner consenso */
/* max-height e scorrimento: su un telefono in orizzontale (256-400px di altezza) il banner era piu' alto dello
   schermo, titolo e caselle di "Personalizza" finivano fuori e non c'era modo di raggiungerli. */
.cookie-banner {
  position: fixed; z-index: 100; inset: auto .8rem .8rem .8rem;
  max-height: calc(100vh - 1.6rem); max-height: calc(100dvh - 1.6rem); overflow-y: auto; overscroll-behavior: contain;
  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: fra 768 e 1023 la stessa coppia di foto col taglio in diagonale, piu' alta, e sotto il
     testo centrato. Da 1024 le foto passano ai due lati del testo. */
  .fr-prodotto { padding: 0 0 6rem; }
  .fr-prodotto-media { height: 52rem; }
  .fr-prodotto-corona { left: calc(52% - 3.5rem); top: 2.4rem; width: 7rem; height: 6rem; }
  .fr-prodotto-testo { max-width: 64rem; margin: 0 auto; padding: 5rem var(--g) 0; 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; align-content: start; }
  .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-scheda { 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) 5rem;
  }
  .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--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: fra 768 e 1023 una colonna centrata (titolo, foto, poi la scheda: affiancati i sette pallini
     dei passi non ci starebbero); da 1024 vedi il blocco in fondo */
  .fr-quiz {
    display: grid; grid-template-columns: minmax(0, 62rem); justify-content: center; row-gap: 4rem;
    padding: 8rem var(--lato) 8rem;
  }
  .fr-quiz .fr-titolo { font-size: clamp(3.4rem, 4vw, 6.4rem); line-height: .95; }
  .fr-quiz-tempo { font-size: 2rem; }
  .fr-quiz-scheda { margin-top: 0; padding: 4rem 4rem 3.6rem; }
  .fr-form { max-width: none; }
  .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: sul desktop il testo sta a sinistra su fondo nero e la foto occupa il 64% di destra, quasi alla
     risoluzione dell'originale (una fascia a tutta larghezza ingrandirebbe il rotolo oltre il 100%). Niente taglio in
     diagonale (fendeva le bacchette): il bordo sinistro sfuma nel nero con una rampa morbida e anche il bordo
     alto, cosi' non resta nessun taglio visibile. */
  .fr-divano-foto { height: clamp(46rem, 48vw, 72rem); clip-path: none; }
  .fr-divano-foto img {
    position: absolute; top: 0; right: 0; width: 64%; object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .03) 6%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .35) 24%, rgba(0, 0, 0, .7) 34%, #000 46%), linear-gradient(180deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .03) 6%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .35) 24%, rgba(0, 0, 0, .7) 34%, #000 46%), linear-gradient(180deg, transparent 0, #000 14%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .fr-divano-foto::after { content: none; }
  .fr-divano-corona { left: var(--lato); top: 12rem; width: 6.4rem; height: 5.6rem; }
  .fr-divano-mano { left: var(--lato); top: 20rem; bottom: auto; font-size: clamp(3.2rem, 3.4vw, 5.2rem); transform: rotate(-10deg); transform-origin: 0 0; }
  .fr-divano-segno { left: calc(var(--lato) + 3rem); right: auto; top: auto; bottom: 10%; width: 16rem; height: 3.4rem; }

  /* pagina di ringraziamento: testo a sinistra, foto del gruppo a tutta altezza a destra; sotto le tappe in due colonne */
  .fr-testa-link { font-size: 1.6rem; }
  .fr-ty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100vh - var(--testa-h)), 84rem); min-height: min(calc(100svh - var(--testa-h)), 84rem); padding: 0; }
  .fr-ty-testo { align-self: center; padding: 7rem 4rem 7rem var(--lato); }
  .fr-ty .fr-titolo { font-size: clamp(4rem, 4.3vw, 8rem); }
  .fr-ty-lead { max-width: 48rem; font-size: clamp(1.8rem, 1.4vw, 2.2rem); }
  /* Lo spazio fra il bottone e il link passa dal margine del bottone: un link che va a capo parte dal bordo, non 3rem dentro. */
  .fr-ty-torna { display: inline-block; margin-left: 0; text-align: left; }
  .fr-ty .fr-cta { margin-right: 3rem; }
  .fr-ty-azioni { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.4rem 1.6rem; }
  .fr-ty-foto { margin: 0; min-height: 56rem; }
  .fr-ty-foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 34%; }
  .fr-ty-corona { right: 4rem; top: 4rem; width: 7rem; height: 6rem; }
  .fr-ty-passi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem); padding: 9rem var(--lato) 8rem; }
  .fr-ty-passi .fr-titolo { grid-column: 1; align-self: start; font-size: clamp(3.8rem, 4.2vw, 6.6rem); }
  .fr-ty-lista { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .fr-ty-lista h3 { font-size: 2.2rem; }
  .fr-ty-lista p { font-size: 1.8rem; }
  .fr-ty-passi .fr-nota { grid-column: 1; grid-row: 2; align-self: start; max-width: 46rem; margin-top: 3.6rem; font-size: 1.7rem; }
  .fr-ty-passi .fr-segno--zigzag { grid-column: 1; grid-row: 3; margin-left: 0; }

  /* popup: finestra centrata. Fra 768 e 1023 e' una colonna sola (affiancata alla foto la colonna del modulo
     sarebbe larga 230px e i sette pallini dei passi non ci starebbero); da 1024 c'e' la foto a sinistra. Il corpo
     scorre solo nella colonna del modulo. */
  /* height: auto stira il dialog (fixed, inset 0) fino al max-height: l'altezza resta la stessa a ogni passo e la
     finestra non salta passando da una domanda all'altra. */
  .fr-modale {
    width: min(58rem, calc(100% - 6rem)); height: auto; max-height: min(80rem, calc(100vh - 6rem)); max-height: min(80rem, calc(100dvh - 6rem));
    margin: auto; border-radius: 1.2rem; box-shadow: 0 3rem 8rem rgba(13, 14, 14, .55);
  }
  .fr-modale-barra { position: absolute; z-index: 3; top: 1.4rem; right: 1.4rem; min-height: 0; padding: 0; background: none; }
  .fr-modale-barra picture { display: none; }
  .fr-modale-chiudi { width: 4.6rem; height: 4.6rem; margin: 0; background: var(--nero); }
  .fr-modale-corpo { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .fr-modale-form { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 12rem; padding: 4.6rem 4.8rem 0; }
  .fr-modale .fr-form { padding-bottom: 4rem; }
  .fr-modale-form .fr-titolo { max-width: calc(100% - 6rem); font-size: 4.2rem; }
  .fr-modale-form .fr-quiz-tempo { font-size: 1.8rem; }

  /* 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)); max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); }
}

/* I pin della mappa su schermi larghi: coordinate calcolate sulla stessa
   proiezione del tracciato (Torino 8,9% 19,3%; 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--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; }
  /* pagina di ringraziamento: stessa soluzione della hero, il bottone deve stare intero nella colonna del testo
     (colonne invariate: con un'altra proporzione il link passerebbe accanto al bottone a 1023px e sotto a 1024px) */
  .fr-ty-testo { padding-right: 2.4rem; }
  .fr-ty .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: foto del burger, testo, foto della box di sushi. Le due foto
   diventano riquadri dritti con un filo di inclinazione, uno per lato, senza il taglio in diagonale. */
@media (min-width: 1024px) {
  .fr-prodotto {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56rem) minmax(0, 1fr); align-items: center;
    min-height: clamp(56rem, 46vw, 72rem); padding: 7rem 0;
  }
  .fr-prodotto-media { display: contents; }
  .fr-pm-foto {
    position: relative; top: auto; right: auto; left: auto; grid-row: 1; align-self: center;
    width: min(calc(100% - 6rem), 36rem); height: auto; aspect-ratio: 4 / 5; clip-path: none; border-radius: .6rem;
    box-shadow: 0 1.6rem 4rem rgba(13, 14, 14, .5);
  }
  /* 3rem dal testo: la rotazione di 3 gradi ne mangia 1,2, e fra riquadro e foto delle persone devono restare 18 o piu' px. */
  .fr-pm-foto--burger { grid-column: 1; justify-self: end; margin-right: 3rem; transform: rotate(-3deg); object-position: 46% 52%; }
  .fr-pm-foto--sushi { grid-column: 3; justify-self: start; margin-left: 3rem; transform: rotate(3deg); object-position: 58% 50%; }
  /* La corona e' legata alla larghezza del titolo (4,95 volte il suo corpo dal centro): a una misura fissa a 1200px il
     titolo e' piu' largo e la corona finisce sopra il punto di "Mondi." */
  .fr-prodotto-corona { left: calc(50% + 4.95 * clamp(4.2rem, 4.2vw, 5.6rem)); right: auto; top: 5.2rem; }

  /* popup: il pannello rosa con il claim a sinistra e il modulo a destra. Niente foto: ogni foto del locale e' gia'
     in pagina e il popup si apre sopra di lei. Bianco sul rosa e' 3,97:1: ammesso per i titoli grandi, il nero per
     "tua citta'" (4,9:1). */
  .fr-modale { width: min(96rem, calc(100% - 6rem)); }
  .fr-modale-corpo { display: grid; grid-template-columns: 38rem minmax(0, 1fr); }
  .fr-modale-lato { display: flex; flex-direction: column; justify-content: flex-end; position: relative; padding: 4.4rem 3.6rem 4.6rem; background: var(--rosa); color: var(--bianco); overflow: hidden; }
  .fr-modale-corona { position: absolute; left: 3.6rem; top: 4.4rem; width: 6.4rem; height: 5.6rem; color: var(--bianco); filter: url(#f-mano); transform: rotate(-6deg); }
  .fr-modale-claim { font-size: 5.2rem; line-height: .9; }
  .fr-modale-claim span { color: var(--nero); }
  .fr-modale-segno { width: 12rem; height: 2.6rem; margin-top: 2.6rem; color: var(--bianco); }

  /* candidatura: titolo e foto a sinistra (restano fermi mentre si scorre), la scheda col questionario a destra */
  .fr-quiz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(4rem, 6vw, 10rem); justify-content: stretch; row-gap: 0; padding: 9rem var(--lato) 9rem; }
  .fr-quiz-testa { grid-column: 1; align-self: start; position: sticky; top: calc(var(--testa-h) + 4rem); }
  .fr-quiz-scheda { grid-column: 2; grid-row: 1; align-self: start; max-width: 62rem; }
  .fr-quiz-foto { max-width: 38rem; }
  .fr-quiz-foto img { aspect-ratio: 1 / 1; }
  /* margin e min-width azzerati: senza, il blocco centrale prende la larghezza del titolo (nowrap) e sborda dalla colonna */
  .fr-prodotto-testo { grid-column: 2; grid-row: 1; position: relative; z-index: 2; max-width: none; min-width: 0; margin: 0; padding: 0; }
  .fr-prodotto .fr-titolo { font-size: clamp(4.2rem, 4.2vw, 5.6rem); }
  .fr-a-capo-mobile { display: none; }
}

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

/* ==========================================================================
   Foto di Torino da 768px: le stesse composizioni del telefono, piu' larghe.
   ========================================================================== */
@media (min-width: 768px) {
  /* la fila e gli ordini: tre colonne alla stessa altezza, la prima piu' larga */
  .fr-fila {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem;
    padding: 2rem var(--lato) 9rem;
  }
  /* L'altezza della riga la decide la foto grande (4:5); le altre due la riempiono senza spingerla. */
  .fr-fila-grande { aspect-ratio: 4 / 5; }
  .fr-fila-grande img { height: 100%; aspect-ratio: auto; }
  .fr-fila-coppia { display: contents; }
  .fr-fila-coppia li { position: relative; aspect-ratio: auto; }
  .fr-fila-coppia li img { position: absolute; inset: 0; }
  .fr-fila-coppia li:nth-child(2) { transform: none; margin-top: 5rem; }
  .fr-fila-corona { right: 2.2rem; top: 2rem; width: 6rem; height: 5.2rem; }
  .fr-fila-nota { left: 2.4rem; bottom: 2.6rem; font-size: clamp(3.2rem, 3.4vw, 5.2rem); }

  /* due mondi: foto piu' grandi, quella del sushi piu' in basso */
  .fr-due-mondi { gap: 1.6rem; margin-top: 4.6rem; }
  .fr-due-mondi li:nth-child(2) { margin-top: 4rem; }
  .fr-due-mondi + .fr-chiusa { margin-top: 7rem; }

  /* know how: la foto del banco sotto l'elenco, nella colonna di destra */
  .fr-porta-foto { grid-column: 2; margin: 5rem 0 0; }
  .fr-porta-foto img { aspect-ratio: 16 / 10; }
  .fr-porta-foto-nota { left: 2.4rem; bottom: 2.2rem; font-size: clamp(2.4rem, 2.4vw, 3.6rem); }

  /* il feed: sotto testo e reel, a tutta larghezza; dieci foto in quattro colonne (4, 4, poi 2 e la casella larga) */
  .fr-griglia { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 7rem 0 0; }
  .fr-griglia li { border-radius: .6rem; }
  .fr-griglia .fr-griglia-ig { overflow: hidden; }
  .fr-griglia-ig a { font-size: 2.2rem; }

  /* una sera a Torino: cinque foto in fila, le pari un po' piu' in basso */
  .fr-sera { padding: 8rem var(--lato) 1rem; }
  .fr-sera-nota { padding: 0; font-size: clamp(2.4rem, 2.4vw, 3.6rem); }
  .fr-sera-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; margin-top: 3.6rem; padding: 0 0 4rem; overflow: visible; }
  .fr-sera-lista li { flex: none; }
  .fr-sera-lista li:nth-child(even) { transform: translateY(4rem); }
  .fr-sera + .fr-citta { padding-top: 4rem; }

  /* accanto al modulo: il gruppo, sotto il titolo che resta fermo */
  .fr-quiz-foto { margin-top: 4.4rem; }
  .fr-quiz-foto img { aspect-ratio: 16 / 10; object-position: 50% 40%; }
  .fr-quiz-nota { right: 2rem; bottom: 2rem; font-size: clamp(2.6rem, 2.4vw, 3.6rem); }
}