/* =========================================================
   Fuori Corso — clone di fuori2.framer.website
   Ogni misura è rilevata sull'originale: le coordinate y=...
   nei commenti sono quelle del sito vero a viewport 375px.
   Punti di rottura dell'originale: 810px e 1200px.
   ========================================================= */

/* ---------- token ---------- */

/* colori, font e movimento comuni stanno in stile-base.css */
:root {
  --arancio-btn: #e35b2d;
  --grigio-card: #222;
  --grigio-data: #ccc;

  --card: 'Inter', system-ui, sans-serif;

  --pad-x: 20px;
  --navbar-h: 72px;
}

/* ---------- base ---------- */

body {
  background: var(--nero);
  color: var(--grigio);
  font-family: var(--ui);
  overflow-x: clip;
}

/* il livello grigio che contiene tutto tranne il footer: è il blocco
   dentro cui la navbar resta appiccicata in alto */
.pagina {
  position: relative;
  z-index: 1;
  background: var(--grigio);
  overflow-x: clip;
}

span.solo-largo { display: none; }
span.solo-mobile { display: inline; }

/* collegamento per saltare la navigazione: invisibile finché non lo
   si raggiunge con il tasto Tab */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--arancio);
  color: var(--bianco);
  font-family: var(--ui);
  font-size: 16px;
}

.salta:focus { left: 0; }

.titolo-display {
  font-family: var(--display);
  font-size: var(--t-titolo);
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--arancio);
  text-align: center;
  text-wrap: balance;
}

/* i paragrafi delle sezioni: stessa misura e stesso respiro ovunque */
.storia-locale__paragrafo,
.quando__testo,
.eventi__paragrafo,
.feste__paragrafo {
  font-family: var(--corpo);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-testo);
  line-height: var(--interlinea);
  letter-spacing: -0.01em;
}

/* =========================================================
   1 — HERO  (originale y 0 → 759, poi la navbar fino a 831)
   ========================================================= */

.hero {
  /* l'insegna in SVG: larghezza e distanza dall'alto, il titolo si mette sotto */
  --neon-w: min(42vw, 172px);   /* sul telefono l'insegna non deve mangiarsi lo schermo */
  --neon-top: max(28px, 5svh);
  position: relative;
  /* riempie lo schermo e lascia la navbar a filo del bordo basso:
     con l'altezza fissa dell'originale restava una fascia nera vuota */
  height: max(560px, calc(100svh - var(--navbar-h)));
  background: var(--nero);
}

.hero__sfondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* la foto del cliente, inquadrata a sinistra: così l'insegna al neon
   resta dentro lo schermo anche quando i lati vengono tagliati */
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 50%;   /* sul telefono resta in vista il barista */
}

/* velo in alto: il titolo resta leggibile sopra gli scaffali */
.hero__sfondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}

/* la sala al buio: si illumina quando l'insegna è accesa (stile-base.css) */
.hero__buio {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.neon {
  position: absolute;
  top: var(--neon-top);
  left: 50%;
  z-index: 2;
  width: var(--neon-w);
  height: auto;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero__titolo {
  --parte: 2.4s;       /* prima si accende l'insegna, poi arriva il titolo */
  position: absolute;
  top: calc(var(--neon-top) + var(--neon-w) * 0.665 + 22px);   /* 0.665 = altezza/larghezza dell'SVG */
  left: 50%;
  z-index: 2;
  width: 320px;
  transform: translateX(calc(-50% + 4px));
  font-family: var(--display);
  font-size: 36px;
  line-height: 36px;
  letter-spacing: 0.72px;
  font-weight: 400;
  color: var(--bianco);
  text-align: center;
  text-transform: uppercase;
}

.hero__riga {
  display: block;
}

/* La foto sfuma nel nero prima di finire, così il passaggio verso la
   navbar e la sezione nera è continuo: niente fascia chiara di mezzo. */
.hero__velo {
  position: absolute;
  left: -55px;
  right: -55px;
  bottom: -72px;       /* copre anche la fascia della navbar */
  z-index: 1;
  height: 300px;      /* nero pieno solo dove finisce la foto */
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(0, 0, 0, 0.85) 60%,
    rgb(0, 0, 0) 76%,
    rgb(0, 0, 0) 100%
  );
  pointer-events: none;
}

/* =========================================================
   2 — NAVBAR appiccicata  (originale y 759 → 831, h 72)
   ========================================================= */

.navbar-guscio {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--navbar-h);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: calc(100% + 18px);
  margin-left: -9px;
  height: 100%;
  border-radius: 30px;
  /* pillola scura: sui fondi chiari i link grigi sparivano */
  background: rgba(0, 0, 0, 0.66);
}

.navbar__link {
  padding: 8px 10px;    /* bersaglio comodo per il dito, il testo non si sposta */
  font-family: var(--ui);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.16px;
  color: var(--grigio);
  text-align: center;
}

.navbar__link--menu {
  font-size: 18px;
  letter-spacing: -0.18px;
}

.navbar__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  height: 53px;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--arancio-btn);
  color: var(--grigio);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.16px;
  text-align: center;
}

/* =========================================================
   3 — LA VITA DA FUORI CORSO  (originale y 831 → 1686, h 855)
   ========================================================= */

.storia-locale {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px var(--pad-x) 37px;   /* titolo a y=883 */
  background: var(--nero);
}

.storia-locale__paragrafo {
  max-width: 34em;
  margin-top: 21px;
  color: var(--grigio);
  text-align: center;
}

.storia-locale__paragrafo strong { font-weight: 700; }

.storia-locale__media {
  position: relative;
  width: 100%;
  max-width: 335px;
  height: 320px;
  margin-top: 15px;    /* foto a y=1329 */
  overflow: hidden;
  /* niente bordi: la foto si scioglie nel nero su tutti e quattro i lati,
     resta solo l'ombra. Le due sfumature si intersecano (angoli morbidi) */
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 15%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

.storia-locale__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;   /* la scritta sulla vetrina e la facciata della Statale */
}

/* =========================================================
   4 — FILO ARANCIONE  (originale y 1686 → 1689, riga a 1687)
   ========================================================= */

.filo {
  padding: 1px var(--pad-x);
  background: var(--nero);
}

.filo__linea {
  display: block;
  width: 100%;
  max-width: 1078px;
  height: 1px;
  margin-inline: auto;
  background: var(--arancio);
}

/* =========================================================
   5 — DOVE E QUANDO + I NOSTRI MENU
   (originale y 1689 → 2825, h 1136)
   ========================================================= */

.offerta {
  position: relative;
  padding: 24px var(--pad-x);
  background: var(--nero);
  overflow: clip;
}

.offerta__griglia {
  position: relative;
  z-index: 1;
}

/* --- blocco "dove e quando" --- */

.quando {
  padding: 18px 0 35px;   /* titolo a y=1731 */
  text-align: center;
}

.quando__testo {
  max-width: 26em;
  margin: 26px auto 0;
  color: var(--grigio);
}

.bottone-filo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 119px;
  height: 49px;
  margin-top: 20px;
  padding: 10px 24px;
  border: 1px solid var(--arancio);
  border-radius: 100px;
  color: var(--arancio);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.16px;
}

/* --- blocco "i nostri menù" --- */

.menu {
  padding: 11px 0;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 27px;
  padding-inline: 10px;   /* le card sono larghe 315, non 335 */
}

/* Le card non si impilano: restano dove sono e scorrono con la pagina. */
.menu__card {
  position: relative;   /* contiene l'onda del tocco (effetti.js) */
  overflow: hidden;
  padding: 15px 15px 20px;
  border-radius: 20px;
  color: var(--marrone);
}

.menu__card:nth-child(1) { background: var(--grigio);      box-shadow: inset 0 0 0 1px #f7d2ad; }
.menu__card:nth-child(2) { background: var(--rosa-chiaro); box-shadow: inset 0 0 0 1px #ffebd6; }
.menu__card:nth-child(3) { background: var(--rosa);        box-shadow: inset 0 0 0 1px #f7d2ad; }

.menu__intestazione {
  display: flex;
  align-items: center;
  gap: 27px;
  height: 72px;
}

.menu__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px dashed var(--marrone);
  border-radius: 20px;
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--marrone);
}

.menu__nome {
  font-family: var(--ui);
  font-size: 21px;
  line-height: 29.4px;
  font-weight: 700;
  color: var(--arancio);
}

.menu__testo {
  font-family: var(--corpo);
  font-size: var(--t-testo);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--marrone);
  text-align: left;
}

/* Le card portano alle tre pagine del menù: da <article> sono diventate
   <a>, quindi vanno riportate a blocco (in griglia e in flex lo sarebbero
   comunque, ma così regge anche fuori da quei contesti). */
a.menu__card {
  display: block;
}

.menu__vai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.15px;
  color: var(--arancio);
}

.menu__vai::after {
  content: '\2192';
  font-size: 17px;
  line-height: 1;
  transition: transform 0.18s ease;
}

@media (hover: hover) {
  a.menu__card:hover .menu__vai::after {
    transform: translateX(4px);
  }
}

/* Dal nero all'arancione: la sfumatura arriva fino al bordo della sezione
   e finisce sull'arancione pieno, così si salda a quella degli eventi
   senza stacchi. */
.offerta__sfumatura {
  position: absolute;
  left: -36px;
  right: -36px;
  bottom: 0;
  z-index: 0;
  height: 165px;       /* da y=2660 fino a y=2825 */
  background: linear-gradient(rgb(0, 0, 0) 0%, var(--arancio) 100%);
  pointer-events: none;
}

/* =========================================================
   6 — EVENTI  (originale y 2825 → 3637, h 812)
   ========================================================= */

/* la sezione non ha sfondo: sotto la foto si vede il grigio della pagina */
.eventi {
  position: relative;
  padding-bottom: 95px;
}

.eventi__sfondo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 763px;
  border-radius: 0 0 20px 20px;
  object-fit: cover;
}

/* sfumatura arancione da sinistra: trasparente a destra */
.eventi__velo-laterale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 763px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(90deg, var(--arancio) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* sfumatura arancione dall'alto, per cucire la sezione con quella prima */
.eventi__velo-alto {
  position: absolute;
  top: 0;
  left: -29px;
  right: -54px;
  z-index: 1;
  height: 38px;
  background: linear-gradient(var(--arancio) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.eventi__griglia {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 54px var(--pad-x) 0;   /* il testo non tocca i bordi del telefono */
}

.eventi__titolo {
  max-width: 11em;
  color: var(--grigio);
}

.eventi__paragrafo {
  max-width: 24em;
  margin-top: 14px;
  color: var(--grigio);
  text-align: center;
}

/* --- slideshow in stile "storie" --- */

.storie {
  position: relative;
  width: 307px;
  height: 436px;
  margin-top: 28px;     /* card a y=3106 */
}

.storie__vetrina {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.storia {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
}

.storia.attiva {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease-out, visibility 0s;
}

.storia__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storia__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.storia__testo {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}

.storia__data {
  font-family: var(--card);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
  color: var(--grigio-data);
}

.storia__nome {
  margin-top: 8px;
  font-family: var(--card);
  font-size: 32px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.96px;
  color: var(--bianco);
}

.storia__descrizione {
  margin-top: 8px;
  font-family: var(--card);
  font-size: 15px;
  line-height: 19.5px;
  font-weight: 500;
  letter-spacing: -0.15px;
  color: var(--bianco);
}

/* a ogni cambio la didascalia sale da 30px sotto, con le righe sfalsate */
.storia__testo > * {
  opacity: 0;
  transform: translateY(30px);
}

.storia.attiva .storia__testo > * {
  opacity: 1;
  transform: none;
}

.storia.uscita .storia__testo > * {
  opacity: 0;
  transform: translateY(-30px);
}

.storia.attiva .storia__testo > *,
.storia.uscita .storia__testo > * {
  transition: opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.storia.attiva .storia__data,
.storia.uscita .storia__data { transition-delay: 0s; }

.storia.attiva .storia__nome,
.storia.uscita .storia__nome { transition-delay: 0.08s; }

.storia.attiva .storia__descrizione,
.storia.uscita .storia__descrizione { transition-delay: 0.16s; }

/* barre di avanzamento: 5 segmenti da 44x4, passo 48.
   Si fermano a 58px dal bordo destro: li' comincia il bottone di pausa, che
   sta sulla stessa riga (il suo centro cade proprio all'altezza delle barre). */
.storie__barre {
  position: absolute;
  top: 30px;
  left: 16px;
  right: 58px;
  display: flex;
  gap: 4px;
  z-index: 3;
}

.storie__barra {
  flex: 1 1 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.storie__barra span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--bianco);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.15s linear;
}

.storie__pausa {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: var(--bianco);
  font-size: 10px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.storie__freccia {
  position: absolute;
  top: 218px;   /* con la traslazione di -20px finisce a 198 */
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: var(--bianco);
  font-size: 20px;
  line-height: 1;
  opacity: 0.8;
  transform: translateY(-20px);
  transition: opacity 0.2s ease;
}

.storie__freccia--prec { left: 16px; }
.storie__freccia--succ { right: 16px; }

.storie__pausa:hover,
.storie__freccia:hover { opacity: 1; }

.storie__pausa:active { transform: scale(0.92); }
.storie__freccia:active { transform: translateY(-20px) scale(0.92); }

/* =========================================================
   7 — OSPITIAMO LA TUA FESTA  (originale y 3637 → 4445, h 808)
   ========================================================= */

.feste {
  position: relative;
  padding: 9px 0 6px;
  overflow: clip;
}

/* il pannello scorre in parallasse (sale fino a -150px) mentre
   il contenuto resta al suo posto */
.feste__pannello {
  position: absolute;
  top: 31px;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 784px;
  background: var(--grigio);
}

.feste__griglia {
  position: relative;
  z-index: 1;
}

.feste__testo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--pad-x);
  text-align: center;
}

.feste__paragrafo {
  max-width: 26em;
  margin-top: 14px;
  color: var(--nero);
}

.feste__paragrafo + .feste__paragrafo { margin-top: 14px; }

.contatti {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin-top: 15px;
  padding: 8px 0;
}

.contatto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 65px;
  padding: 20px 12px;
  border-radius: 12px;
  background: var(--bianco);
}

.contatto__etichetta {
  font-family: var(--ui);
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--arancio);
}

.contatto__numero {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: -0.15px;
  color: var(--arancio);
}

/* --- giostra di polaroid --- */

.polaroid-giostra {
  position: relative;
  width: calc(100% + 14px);
  margin-left: -7px;
  margin-top: 9px;      /* giostra a y=3999 */
  padding: 19px 32px;
  overflow: hidden;
  /* alone arancione: al centro è pieno, ma lo coprono le polaroid */
  background: radial-gradient(
    75% 50% at 50% 50%,
    rgb(227, 90, 46) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
}

.polaroid-pista {
  display: flex;
  gap: 30px;
  width: max-content;
  padding: 40px 0;
  will-change: transform;
}

.polaroid {
  position: relative;
  flex: 0 0 auto;
  width: 252px;
  min-height: 306px;   /* foto + didascalia: uguale anche dove la didascalia non c'è */
  padding: 16px 16px 36px;
  background: var(--bianco);
  box-shadow:
    0.06px 0.6px 0.48px -0.92px rgba(0, 0, 0, 0.14),
    0.2px 2.3px 1.8px -1.83px rgba(0, 0, 0, 0.13),
    0.5px 5.6px 4.5px -2.75px rgba(0, 0, 0, 0.1);
  --scala: 1;
  transform: scale(var(--scala));
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  /* dritte, ruotano piano attorno al proprio centro; un livello a testa,
     così il browser le gira senza ridisegnarle */
  will-change: transform, rotate;
  animation: polaroid-dondolo 3s ease-in-out infinite alternate;
}
.polaroid:nth-child(5n + 2) { animation-duration: 2.6s; animation-delay: -1.1s; }
.polaroid:nth-child(5n + 3) { animation-duration: 3.4s; animation-delay: -2.2s; }
.polaroid:nth-child(5n + 4) { animation-duration: 2.8s; animation-delay: -0.6s; }
.polaroid:nth-child(5n + 5) { animation-duration: 3.2s; animation-delay: -1.7s; }
@keyframes polaroid-dondolo {
  from { rotate: -1.2deg; }
  to   { rotate: 1.2deg; }
}

/* sotto il mouse la scheda si stacca dal mazzo: si alza di un gradino
   e prende un'ombra piu' lunga, come se la stessimo
   sollevando dal tavolo. Il nastro intanto rallenta (lo fa il JS). */
/* sul telefono la scheda si solleva finché la si tiene premuta */
@media (hover: none) {
  .polaroid:active {
    z-index: 2;
    --scala: 1.06;
  }
}

@media (hover: hover) {
  .polaroid:hover {
    z-index: 2;
    --scala: 1.06;
    box-shadow:
      0.4px 3px 2.4px -0.9px rgba(0, 0, 0, 0.16),
      1.4px 12px 10px -1.8px rgba(0, 0, 0, 0.15),
      3px 26px 26px -2.8px rgba(0, 0, 0, 0.13);
  }
}

.polaroid img {
  width: 220px;
  height: 220px;
  background: #f0f0f0;
  object-fit: cover;
}

/* segnaposto finché non arrivano le foto vere: una polaroid scura con
   l'insegna accesa in piccolo, così non sembra un buco */
.polaroid__segnaposto {
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  background: radial-gradient(120% 90% at 50% 40%, #2b1519 0%, #0c0a0b 72%);
}

.polaroid__segnaposto svg {
  width: 78%;
  overflow: visible;
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.polaroid__anime { stroke: rgba(255, 255, 255, 0.8); stroke-width: 3.4; }

.polaroid__titolo {
  margin-top: 12px;
  font-family: var(--card);
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  letter-spacing: -0.18px;
  color: var(--grigio-card);
  text-align: center;
}

/* =========================================================
   8 — DOVE SIAMO  (originale y 4445 → 4581, h 136)
   ========================================================= */

.indirizzo {
  position: relative;
  z-index: 1;
  padding: 34px var(--pad-x);
  border-radius: 20px 20px 0 0;
  background: var(--grigio);
  text-align: center;
}

.indirizzo__filo {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--marrone);
}

/* text-wrap: balance manda a capo dopo "Perdono," come nell'originale */
.indirizzo__via {
  margin-top: 3px;
  text-wrap: balance;
  font-family: var(--ui);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.indirizzo__via a { color: var(--arancio); }

/* =========================================================
   9 — FOOTER  (originale y 4581 → 5192, h 611)
   ========================================================= */

.footer {
  position: relative;
  padding: 37px 0 32px;
  background: var(--arancio);
  overflow-x: clip;
}

.footer__testo {
  padding-inline: var(--pad-x);
}

.footer__marchio {
  font-family: var(--display);
  font-size: 36px;
  line-height: 36px;
  letter-spacing: 0.72px;
  font-weight: 400;
  color: var(--grigio);
}

.footer__frase {
  max-width: 228px;
  font-family: var(--ui);
  font-style: italic;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: -0.36px;
  color: var(--grigio);
}

.footer__marchio + .footer__frase { margin-top: 8px; }

/* due icone tonde: nell'originale sono a x=20 e x=80, y=4730 */
.footer__social {
  display: flex;
  gap: 32px;
  margin-top: 10px;
}

.footer__social a {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--grigio);
  transition: color 0.2s ease;
}

.footer__social a:hover { color: var(--arancio); }

.footer__social svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.footer__note { margin-top: 17px; }

/* collegamenti ai documenti legali: obbligo di renderli raggiungibili
   da ogni pagina */
.footer__legale {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 4px;
  list-style: none;
}

.footer__legale a {
  font-family: var(--ui);
  font-style: italic;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: -0.36px;
  color: var(--grigio);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legale a:hover { color: var(--bianco); }

/* --- Instagram: post veri in fila --- */

.vetrina {
  position: relative;
  margin-top: 40px;
  overflow: hidden;
}

.vetrina__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-inline: var(--pad-x);
}

.vetrina__titolo {
  font-family: var(--display);
  font-size: clamp(30px, 3vw + 14px, 48px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--grigio);
}

.vetrina__profilo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--grigio);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--arancio);
  transition: scale 0.15s var(--curva), background-color 0.2s ease;
}

.vetrina__profilo svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.vetrina__profilo:active { scale: 0.95; }

@media (hover: hover) {
  .vetrina__profilo:hover { background: var(--bianco); }
}

.vetrina__pista {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: max-content;
  padding: 28px 0 36px;
  will-change: transform;
}

/* il post: carta bianca come nell'app */
.post {
  flex: 0 0 auto;
  width: 248px;
  border-radius: 18px;
  background: var(--bianco);
  box-shadow: 0 14px 30px -12px rgba(60, 18, 4, 0.45);
  overflow: hidden;
  color: #121212;
}

.post__testa {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
}

/* il cerchio colorato delle storie, con il logo dentro */
.post__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.post__avatar img {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: #111;
  object-fit: contain;
}

.post__nome {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.post__foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eee;
  touch-action: manipulation;
}

.post__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* il cuore grande del doppio tocco */
.post__scoppio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.post__scoppio svg {
  width: 38%;
  fill: #fff;
  stroke: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  opacity: 0;
  transform: scale(0.2);
}

.post--scoppio .post__scoppio svg { animation: post-cuore 0.9s var(--curva-molla) both; }

@keyframes post-cuore {
  0%   { opacity: 0; transform: scale(0.2); }
  18%  { opacity: 1; transform: scale(1.15); }
  32%  { transform: scale(0.95); }
  45%  { transform: scale(1.05); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1) translateY(-14px); }
}

.post__azioni {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 12px;
}

.post__spazio { flex: 1; }

.post__icona {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.post__mi-piace {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.post__mi-piace:active .post__icona { transform: scale(0.85); }

.post--piace .post__mi-piace .post__icona {
  fill: #ff3040;
  stroke: #ff3040;
  animation: post-batte 0.45s var(--curva-molla);
}

@keyframes post-batte {
  0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); }
}

/* =========================================================
   ≥ 810px — impaginazione a due colonne
   ========================================================= */

@media (min-width: 810px) {
  :root { --navbar-h: 80px; }

  span.solo-mobile { display: none; }
  span.solo-largo  { display: inline; }

  /* --- hero --- */

  .hero { height: 736px; }

  .hero__sfondo { height: 880px; }

  /* più bancone e più persone: la foto si guarda dalla parte bassa */
  .hero__foto { object-position: 50% 85%; }

  .hero { --neon-w: 240px; --neon-top: 30px; }

  /* sopra gli scaffali insegna e titolo vogliono un fondo più scuro */
  .hero__sfondo::after {
    background: linear-gradient(rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 32%, rgba(0, 0, 0, 0) 60%);
  }

  .hero__titolo {
    width: min(900px, 90%);
    transform: translateX(-50%);
    font-size: clamp(44px, 3.6vw, 58px);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .hero__velo {
    bottom: -102px;
    height: 102px;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 26.43%, rgb(0, 0, 0) 100%);
  }

  /* --- navbar --- */

  .navbar {
    width: min(760px, calc(100% - 48px));
    height: 60px;
    margin: 10px auto 0;
    padding-inline: 24px;
    justify-content: space-between;
  }

  .navbar__link {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.01em;
  }

  .navbar__link--menu { font-size: 18px; letter-spacing: -0.01em; }

  /* --- la vita da fuori corso: testo a sinistra, foto a destra --- */

  .storia-locale {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(48px, 6vw, 96px);
    padding: var(--sezione-y) max(var(--rientro), calc((100% - var(--contenuto)) / 2));
  }

  .storia-locale__testo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .storia-locale__titolo { text-align: left; }

  .storia-locale__paragrafo {
    margin-top: 28px;
    text-align: left;
  }

  /* testo e foto si dividono il contenitore; la foto in verticale 4:5 */
  .storia-locale__testo { flex: 1 1 0; min-width: 0; }

  .storia-locale__media {
    flex: 0 1 480px;
    width: auto;
    max-width: 480px;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  /* --- dove e quando + menù affiancati --- */

  .offerta { padding: var(--sezione-y) var(--rientro) 0; }

  .offerta__griglia {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(40px, 6vw, 96px);
    max-width: var(--contenuto);
    margin-inline: auto;
  }

  .quando {
    position: sticky;
    top: 120px;
    order: 2;
    flex: 0 1 400px;
    padding: 0 0 12px;
    text-align: left;   /* sul desktop tutte le colonne di testo partono da sinistra */
  }

  .quando__testo { margin: 28px 0 0; }

  .bottone-filo {
    margin-top: 32px;
    color: var(--grigio);
  }

  .menu {
    order: 1;
    flex: 0 1 560px;
    min-width: 0;
    padding: 0;
  }

  /* Sul desktop le card si impilano tutte nello stesso punto, subito sotto
     al titolo: la prima si attacca, la seconda le sale sopra e si ferma lì,
     poi la terza fa lo stesso. */
  .menu__card {
    position: sticky;
    top: 196px;   /* sotto al titolo fermo: 100 + la sua altezza + aria */
  }

  .menu__card:nth-child(1) { z-index: 1; }
  .menu__card:nth-child(2) { z-index: 2; }
  .menu__card:nth-child(3) { z-index: 3; }

  /* Il titolo resta fermo in alto e le card gli scorrono sotto: la fascia
     nera dietro (pseudo-elemento, non occupa spazio) le nasconde mentre
     passano, così il titolo resta sempre leggibile. */
  .menu__titolo {
    position: sticky;
    top: 100px;
    z-index: 5;
  }

  .menu__titolo::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -100px;
    bottom: -26px;
    left: -24px;
    right: -24px;
    background: var(--nero);
  }

  /* Griglia con righe tutte uguali (1fr le pareggia all'altezza della più
     alta). Serve perché uno sticky si sgancia quando il suo bordo inferiore
     tocca il fondo del contenitore: con altezze diverse la card più alta si
     sganciava per prima e scopriva quelle sotto. A parità di altezza partono
     tutte insieme, e la pila esce compatta.
     L'ultima riga è la corsa che tiene ferma la pila una volta completata. */
  .menu__lista {
    display: grid;
    grid-template-rows: repeat(3, 1fr) 240px;
    gap: 24px;
    margin-top: 48px;
    padding-inline: 0;
  }

  .menu__card { padding: 36px 40px; border-radius: var(--raggio); }

  .menu__intestazione { gap: 0; height: auto; flex-direction: column; align-items: flex-start; }

  .menu__nome { margin-top: 20px; }

  .menu__testo { margin-top: 24px; }

  /* --- eventi --- */

  .eventi {
    padding: 48px var(--rientro) var(--sezione-y);
    border-radius: 0 0 40px 40px;
    background: linear-gradient(rgb(247, 210, 173) 0%, rgba(255, 255, 255, 0) 99.55%);
  }

  .eventi__sfondo,
  .eventi__velo-laterale {
    height: 100%;
    border-radius: 0 0 40px 40px;
  }

  /* la foto è verticale: in orizzontale si tiene la parte con l'insegna */
  .eventi__sfondo { object-position: 50% 18%; }

  /* anche sul desktop la sezione parte dall'arancione pieno e sfuma verso
     la foto in 155px, così non c'è lo stacco con la sezione precedente */
  .eventi__velo-alto {
    display: block;
    left: 0;
    right: 0;
    height: 155px;
    background: linear-gradient(var(--arancio) 0%, rgba(227, 90, 46, 0) 100%);
  }

  .eventi__griglia {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 6vw, 96px);
    max-width: var(--contenuto);
    margin-inline: auto;
    padding: calc(var(--sezione-y) - 48px) 0 0;
  }

  .eventi__testo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    gap: 28px;
  }

  .eventi__titolo { max-width: 12em; text-align: left; }

  .eventi__paragrafo { max-width: 26em; margin-top: 0; text-align: left; }

  .storie {
    flex: 0 0 auto;
    width: 420px;
    height: 560px;
    margin-top: 0;
  }

  .storie__barre { left: 16px; right: 58px; }
  .storie__barra { flex: 1 1 70px; }
  .storie__freccia { top: 280px; }

  /* --- feste --- */

  .feste { padding: var(--sezione-y) 0 0; }

  .feste__pannello { top: 6px; height: 603px; }

  .feste__griglia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 4vw, 64px);
    padding-left: max(var(--rientro), calc((100% - var(--contenuto)) / 2));
  }

  .feste__testo {
    flex: 0 1 460px;
    min-width: 0;
    align-items: flex-start;
    padding: 24px 0;
    text-align: left;
  }

  .feste__titolo { text-align: left; }   /* va a capo dove lo dice il <br> */

  .feste__paragrafo { margin-top: 24px; }

  .feste__paragrafo + .feste__paragrafo { margin-top: 12px; }

  .contatti {
    justify-content: flex-start;
    gap: 16px;
    width: auto;
    margin-top: 32px;
    padding: 0;
  }

  .contatto { width: 200px; height: 76px; }

  .polaroid-giostra {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 30px 32px;
    background: radial-gradient(
      50% 50% at 50% 50%,
      rgb(227, 90, 46) 0%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* --- indirizzo e footer --- */

  .indirizzo { padding: 40px max(var(--rientro), calc((100% - var(--contenuto)) / 2)); }

  .indirizzo__via { margin-top: 10px; }

  .footer { padding: 39px 0 32px; }

  .footer__testo {
    max-width: calc(var(--contenuto) + 2 * var(--rientro));
    margin-inline: auto;
    padding-inline: var(--rientro);
  }

  .footer__marchio { font-size: 56px; line-height: 1; letter-spacing: 0.02em; }

  .footer__frase {
    max-width: none;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.4px;
  }

  .footer__marchio + .footer__frase { margin-top: 26px; }

  .footer__social { margin-top: 23px; }

  .footer__note { margin-top: 23px; }

  .footer__legale a {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.4px;
  }

  .vetrina { margin-top: 48px; }

  .vetrina__testa {
    max-width: calc(var(--contenuto) + 2 * var(--rientro));
    margin-inline: auto;
    padding-inline: var(--rientro);
  }

  .vetrina__pista { gap: 24px; padding: 36px 0 48px; }

  .post { width: 300px; }
}

/* =========================================================
   ≥ 1200px — scala tipografica piena
   ========================================================= */

@media (min-width: 1200px) {
  .menu__nome {
    font-size: 26px;
    line-height: 36.4px;
  }
}

/* =========================================================
   chi preferisce meno movimento
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .storia__testo > *,
  .storia.uscita .storia__testo > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .storia,
  .storie__barra span,
  .storie__freccia,
  .storie__pausa {
    transition: none;
  }

  /* qui il nastro non parte proprio, quindi la scheda sotto il mouse
     resta com'e': niente ingrandimento, niente rotazione in piu' */
  .polaroid {
    transition: none;
    animation: none;
  }

  .polaroid:hover {
    --scala: 1;
  }
}

/* ---------- accessibilità ---------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--arancio);
  outline-offset: 3px;
}