/* ==========================================================
   Da o pescôu – bozza parziale homepage
   ========================================================== */
:root {
  --crema: #F3EEE4;
  --carta: #F7F3EB;
  --ardesia: #2A2E32;
  --ardesia-2: #33383d;
  --legno: #A9784C;
  --glicine: #8E7CC3;
  --glicine-testo: #63519C;   /* glicine scurito: contrasto 5:1 su crema */
  --oro: #D9961A;
  --salvagente: #E0552B;
  --salvagente-btn: #C9461F;  /* bottone: testo bianco a 4.8:1 */
  --pietra: #CFC5B4;
  --testo: #26221E;
  --testo-2: #4a433b;
  --gesso: #F4F1EA;

  --f-titoli: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-testo: "Lora", Georgia, serif;
  --f-mano: "Caveat", "Segoe Print", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --strappo-h: 26px;

  /* texture SVG inline (nessuna immagine pesante) */
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --intonaco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --polvere-gesso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2560' height='1400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .044' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .13 -.01'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --strappo-basso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V14L14 15L22 11L35 14L42 19L57 13L68 17L85 9L99 11L115 10L130 14L139 9L160 20L168 13L189 10L202 15L219 11L227 20L241 11L255 12L264 17L275 12L283 19L293 19L306 11L322 13L340 16L348 11L361 9L368 13L385 16L406 12L419 14L432 18L445 13L456 11L474 10L484 17L504 20L524 18L542 16L557 8L568 12L578 13L595 17L605 19L611 12L627 13L634 20L647 18L663 14L671 18L691 11L697 10L715 16L731 18L741 18L750 8L757 8L772 18L791 10L805 9L816 14L823 12L832 12L851 10L860 8L875 9L888 9L902 13L908 17L921 17L932 19L950 16L960 12L967 19L975 9L984 12L990 15L1003 13L1018 19L1032 13L1040 19L1057 14L1077 16L1091 20L1111 13L1125 16L1143 19L1158 20L1174 18L1187 9L1200 15V0Z'/%3E%3C/svg%3E");
  --strappo-alto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22L16 25L30 19L48 23L61 20L80 27L93 21L110 24L126 18L139 22L158 26L171 21L190 19L204 24L221 20L236 27L250 22L268 18L281 21L296 25L313 20L330 23L346 18L360 24L377 27L391 21L409 19L425 23L440 26L456 20L471 22L490 18L505 25L520 21L537 27L551 22L566 19L584 23L598 20L615 26L630 21L645 18L662 24L676 27L693 22L710 19L724 23L741 26L755 20L772 21L788 25L803 18L820 22L835 27L851 21L868 19L882 24L899 20L915 26L930 22L946 18L962 23L977 27L993 20L1010 21L1025 25L1041 19L1058 23L1073 27L1090 21L1106 18L1121 24L1138 22L1153 26L1170 20L1186 23L1200 21V40Z'/%3E%3C/svg%3E");
  --mosaico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' fill='%23353a3f'/%3E%3Cpath d='M9 0H35L44 9V35L35 44H9L0 35V9Z' fill='%232d3136' stroke='%2322262a' stroke-width='1'/%3E%3Cg fill='%23efe9dc'%3E%3Cpath d='M0 0H7L0 7Z M44 0V7L37 0Z M0 44V37L7 44Z M44 44H37L44 37Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; -webkit-tap-highlight-color: rgba(142, 124, 195, .25); }
a, button { touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--f-testo);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--testo);
  background-color: var(--crema);
  background-image: var(--grana), var(--intonaco);
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titoli); font-style: italic; font-weight: 600; line-height: 1.1; margin: 0 0 .3em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem); color: var(--testo); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
/* stato iniziale delle animazioni: solo se il JS è partito (la classe viene tolta dopo 2,5 s se GSAP non arriva) */
.js [data-hero], .js [data-reveal], .js [data-spec], .js [data-gesso] { opacity: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ardesia); color: #fff; padding: 10px 16px; border-radius: 6px; }
.salta:focus { top: 12px; }
.contenitore { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- elementi comuni ---------- */
.occhiello {
  font-family: var(--f-testo); font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .28em; font-size: 1.3rem; font-weight: 500;
  color: var(--glicine-testo); margin: 0 0 .5em;
}
.occhiello--chiaro { color: #F2D9A0; }
.apertura .occhiello { font-size: 1.05rem; }
.rametto { display: block; width: 150px; height: 26px; color: #8a7f6e; margin: .2em 0 1.2em; }
.rametto--hero { color: #EAD9B5; width: 170px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .6em 1.35em;
  font-family: var(--f-testo); font-size: 1rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 24px; height: 24px; flex: none; }
.btn--chiama { background: var(--salvagente-btn); color: #fff; box-shadow: 0 6px 16px -6px rgba(140, 40, 10, .55); }
.btn--chiama:hover { background: #B23C19; transform: translateY(-1px); }
.btn--chiaro { border-color: rgba(255, 246, 228, .9); color: #FFF6E4; background: rgba(30, 24, 18, .25); }
.btn--chiaro:hover { background: rgba(255, 246, 228, .16); }

/* separatori di carta strappata (maschera: la texture della carta resta continua) */
.strappo-basso {
  -webkit-mask: var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--strappo-h) + 1px) no-repeat;
          mask: var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--strappo-h) + 1px) no-repeat;
}

/* ---------- fascia anteprima ---------- */
.anteprima {
  margin: 0; padding: 6px var(--gutter);
  background: var(--ardesia); color: #E8E1D3;
  font-size: .875rem; letter-spacing: .06em; text-align: center; line-height: 1.4;
}

/* ---------- testata ---------- */
.testata { position: relative; z-index: 20; background: var(--carta); background-image: var(--grana); box-shadow: 0 1px 0 rgba(90, 70, 50, .12); }
.testata::after { /* tralcio disegnato sotto il menu */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(142, 124, 195, .35) 20%, rgba(110, 139, 78, .35) 50%, rgba(142, 124, 195, .35) 80%, transparent);
}
.testata__in { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; height: 92px; display: flex; align-items: center; gap: 28px; }

.insegna {
  --insegna-w: 300px;
  position: relative; flex: none; align-self: flex-start;
  width: var(--insegna-w); display: block; padding-top: 15px;
  text-decoration: none; z-index: 2;
}
/* gancio di ferro fisso: l'insegna oscilla attorno al suo anello */
.insegna__gancio { position: absolute; top: 0; left: 50%; width: 21px; height: 19px; translate: -50% 0; z-index: 1; }
.insegna__gancio svg { display: block; width: 100%; height: 100%; }
.insegna__pendolo { display: block; transform-origin: 50% calc(var(--insegna-w) * 5 / 320); transform: rotate(-2deg); }
.insegna__catene { position: relative; z-index: 1; display: block; aspect-ratio: 320 / 46; margin-bottom: calc(var(--insegna-w) * -17 / 320); }
.insegna__catene svg { width: 100%; height: 100%; display: block; }
.insegna__tavola { position: relative; display: block; aspect-ratio: 320 / 108; filter: drop-shadow(0 10px 12px rgba(45, 25, 10, .42)) drop-shadow(0 2px 2px rgba(45, 25, 10, .3)); }
.insegna__legno { position: absolute; inset: 0; width: 100%; height: 100%; }
/* vernice nera un po' consumata dal tempo */
.insegna__scritta {
  position: absolute; left: 10%; top: 22%; width: 80%; height: auto; opacity: .9; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
}
.insegna:focus-visible { outline-offset: 6px; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.nav a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em; font-size: 1rem;
  text-decoration: none; color: var(--testo);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 64px; height: 12px; translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg fill='none' stroke='%238E7CC3' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 7C20 3 40 10 62 5'/%3E%3Cpath d='M16 6C15 2 18 1 21 1C20 4 19 6 16 6Z M30 7C31 11 35 12 37 11C35 8 33 7 30 7Z M44 6C43 2 46 1 49 1C48 4 47 6 44 6Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scaleX(.4); transition: opacity .25s ease, transform .3s ease;
}
.nav a:hover::after, .nav a[aria-current="true"]::after { opacity: 1; transform: none; }
.nav a[aria-current="true"] { color: var(--glicine-testo); }
.nav__chiama-mobile { display: none; }

/* ---------- lingue (in arrivo) ---------- */
.lingue { position: relative; flex: none; }
.lingue summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(90, 70, 50, .25); border-radius: 999px; background: var(--carta); cursor: pointer;
  font-size: 1rem; letter-spacing: .12em; color: var(--testo); transition: background-color .2s ease;
}
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary:hover, .lingue[open] summary { background: #EDE6D8; }
.lingue summary svg { width: 20px; height: 20px; color: var(--glicine-testo); }
.lingue__pannello {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 270px; padding: 10px 10px 14px;
  background-color: var(--carta); background-image: var(--grana); border: 1px solid rgba(120, 100, 75, .2); border-radius: 10px;
  box-shadow: 0 16px 28px -14px rgba(50, 30, 15, .45);
}
.lingue__lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 10px; }
.lingue__lista li + li { border-top: 1px dashed rgba(90, 70, 50, .2); }
.lingue__lista li[aria-disabled="true"] { color: var(--testo-2); }
.lingue__attiva { color: var(--glicine-testo); font-weight: 500; }
.lingue__presto {
  font-family: var(--f-mano); font-weight: 700; font-size: 1.1rem; line-height: 1.3; padding: 0 .5em; rotate: -2deg;
  color: #2c241c; background-color: #EBDDC2; box-shadow: 0 3px 6px -3px rgba(60, 40, 20, .45);
}
.lingue__nota { margin: 10px 10px 0; font-size: 1rem; line-height: 1.45; color: var(--testo-2); }
.menu-btn { display: none; }

/* ---------- apertura ---------- */
.apertura {
  --hero-h: clamp(620px, 92vh, 860px);
  position: relative; min-height: var(--hero-h); overflow: hidden;
  display: flex; align-items: center;
  background: #1d1a17;
}
.apertura { -webkit-mask: var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--strappo-h) + 1px) no-repeat;
                    mask: var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--strappo-h) + 1px) no-repeat; }
.apertura__media { position: absolute; inset: 0; will-change: transform; }
/* la "scena" ha le proporzioni della foto: le lucine restano agganciate ai punti giusti.
   Si taglia il 25% superiore della foto per nascondere l'insegna reale (doppione). */
/* da computer: foto nitida a destra a tutta altezza, a sinistra la stessa foto sfocata per il testo */
.apertura__sfondo {
  position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
  object-fit: cover; object-position: 30% 60%;
  filter: blur(22px) brightness(.62) saturate(1.3) sepia(.35);
}
.apertura__scena {
  position: absolute; right: 0; bottom: 0;
  width: max(55%, calc(var(--hero-h) * 1.16));
  aspect-ratio: 960 / 1105;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 22%);
          mask: linear-gradient(90deg, transparent 0, #000 22%);
}
.apertura__scena img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.04) contrast(1.06) saturate(1.06);
}
.apertura__scena::after { /* luce calda serale */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 30% 38%, rgba(255, 200, 120, .16), transparent 70%), linear-gradient(180deg, rgba(255, 170, 80, 0), rgba(120, 60, 20, .12));
  mix-blend-mode: soft-light;
}
/* ombra serale sul muro scrostato a destra: il barile in basso resta illuminato */
.apertura__ombra {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, rgba(18, 10, 4, .55) 72%, rgba(14, 8, 3, .82) 88%, rgba(10, 6, 2, .9) 100%);
  -webkit-mask: linear-gradient(180deg, #000 0, #000 62%, transparent 84%);
          mask: linear-gradient(180deg, #000 0, #000 62%, transparent 84%);
}
.apertura__luci { position: absolute; inset: 0; z-index: 1; }
.luce {
  position: absolute; width: 4.5%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle closest-side, rgba(255, 250, 225, .95) 0, rgba(255, 214, 140, .55) 18%, rgba(255, 176, 80, .18) 50%, rgba(255, 176, 80, 0) 100%);
  mix-blend-mode: screen; pointer-events: none;
}
.apertura__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 16, 10, .55) 0%, rgba(22, 16, 10, .3) 38%, rgba(22, 16, 10, 0) 58%),
    linear-gradient(180deg, rgba(20, 14, 8, .45) 0%, transparent 22%, transparent 70%, rgba(20, 14, 8, .5) 100%),
    radial-gradient(120% 90% at 55% 45%, transparent 55%, rgba(10, 6, 2, .55) 100%);
}
.apertura__testo { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; padding: 96px 0 calc(var(--strappo-h) + 64px); color: #FFF6E4; }
.apertura h1 {
  font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.2rem); font-weight: 500; color: #FFF3DC;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.apertura__sotto { max-width: 34ch; font-size: 1.125rem; color: #F6EBD6; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6em 0 1.2em; }
.apertura__chiama { display: none; } /* da computer basta quello nel menu */
.apertura__voto { display: flex; align-items: center; gap: .45em; font-size: 1rem; color: #F2E3C6; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.apertura__voto svg { width: 18px; height: 18px; color: var(--oro); }

/* ---------- sezioni ---------- */
.sezione { position: relative; padding: clamp(48px, 6vw, 84px) 0; }
.due-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.due-col__testo { max-width: 46ch; }
.due-col__testo p { color: var(--testo-2); }
.due-col--inversa .due-col__testo { justify-self: start; }


/* ---------- glicine che scende dall'alto: solo negli angoli, mai sopra i testi ---------- */
.ghirlanda { position: absolute; top: -6px; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(60, 40, 30, .18)); }
.ghirlanda svg { display: block; width: 100%; height: auto; overflow: visible; }
.ghirlanda--dx { right: 0; width: min(760px, 52vw); }
.ghirlanda--sx { left: 0; width: min(760px, 52vw); transform: scaleX(-1); }
.ghirlanda--angolo-sx { left: 0; width: min(340px, 22vw); transform: scaleX(-1); }
.ghirlanda--angolo-dx { right: 0; width: min(340px, 22vw); }
.sezione > .contenitore { position: relative; z-index: 1; }

/* ---------- archi in pietra ---------- */
.arco {
  --r: 48%;
  position: relative; padding: 11px 11px 0;
  border-radius: 50% 50% 4px 4px / var(--r) var(--r) 4px 4px;
  background: linear-gradient(160deg, #DCD3C3, #BEB29E 55%, #A99C86), var(--grana);
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 14px 24px -14px rgba(60, 40, 20, .5);
}
.arco::before { /* conci dell'arco */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 50% 52%, transparent 0 8.6deg, rgba(90, 75, 55, .28) 8.6deg 9.2deg);
  -webkit-mask: radial-gradient(ellipse at 50% 100%, transparent 0, #000 0);
}
.arco img {
  position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 50% 50% 0 0 / calc(var(--r) - 2%) calc(var(--r) - 2%) 0 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .4);
}
.arco--grande { --r: 40%; max-width: 520px; justify-self: center; width: 100%; }
.arco--grande img { aspect-ratio: 5 / 5.2; }

/* ---------- specialità ---------- */
.specialita { padding-top: 8px; }
.titolino-centrato {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--f-testo); font-style: normal; font-weight: 500; font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .3em; font-size: 1.5rem; color: var(--glicine-testo); margin-bottom: 36px; text-align: center;
}
.titolino-centrato .rametto { margin: 0; width: 110px; flex: none; }
.rametto--sx { transform: scaleX(-1); }
.spec-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 36px); }
.spec { position: relative; padding-bottom: 26px; }
.spec .arco img { aspect-ratio: 4 / 4.2; transition: transform .6s ease; }
.spec:hover .arco img { transform: scale(1.03); }
.etichetta {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; rotate: -3deg;
  width: max-content; max-width: 92%;
  margin: 0; padding: .3em 1em .25em;
  font-family: var(--f-mano); font-weight: 700; font-size: 1.45rem; line-height: 1.15; text-align: center;
  color: #2c241c; background-color: #EBDDC2; background-image: var(--grana);
  box-shadow: 0 6px 10px -4px rgba(60, 40, 20, .45), inset 0 0 0 1px rgba(120, 95, 60, .18);
  clip-path: polygon(0 4%, 6% 0, 40% 3%, 72% 0, 100% 5%, 99% 52%, 100% 96%, 60% 100%, 28% 97%, 2% 100%, 1% 50%);
}
.spec:nth-child(2) .etichetta { rotate: 2deg; }
.spec:nth-child(3) .etichetta { rotate: -1.5deg; }
.spec:nth-child(4) .etichetta { rotate: 2.5deg; }

/* ---------- lavagna ---------- */
.lavagna {
  position: relative; color: var(--gesso);
  padding: calc(var(--strappo-h) + clamp(48px, 6vw, 80px)) 0 calc(var(--strappo-h) + clamp(48px, 6vw, 80px));
  background-color: var(--ardesia);
  background-image: var(--polvere-gesso), radial-gradient(70% 90% at 20% 30%, rgba(255, 255, 255, .06), transparent 70%), radial-gradient(60% 80% at 80% 70%, rgba(255, 255, 255, .045), transparent 70%), var(--grana);
  -webkit-mask: var(--strappo-alto) top / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--strappo-h) + 2px) no-repeat, var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat;
          mask: var(--strappo-alto) top / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--strappo-h) + 2px) no-repeat, var(--strappo-basso) bottom / 100% var(--strappo-h) no-repeat;
}
.lavagna::before { /* cornice di legno sottile */
  content: ""; position: absolute; inset: calc(var(--strappo-h) + 14px) 14px; border: 1px solid rgba(244, 241, 234, .12); border-radius: 4px; pointer-events: none;
}
.lavagna .contenitore { width: min(100% - 2 * (var(--gutter) + 24px), var(--max)); }
.lavagna__in { display: grid; grid-template-columns: minmax(220px, .8fr) 2.8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lavagna h2, .lavagna__menu { font-family: var(--f-mano); font-style: normal; color: var(--gesso); }
.lavagna h2 { font-size: clamp(2.6rem, 2rem + 2.2vw, 3.8rem); font-weight: 500; line-height: 1; rotate: -4deg; text-shadow: 0 0 1px rgba(255, 255, 255, .4); }
.gesso-disegno { width: min(220px, 100%); height: auto; color: rgba(244, 241, 234, .75); margin-top: 18px; }
.lavagna__menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.lavagna__col { display: flex; flex-direction: column; gap: 14px; }
.lavagna__col + .lavagna__col { border-left: 1px solid rgba(244, 241, 234, .35); padding-left: clamp(28px, 4vw, 64px); margin-left: calc(-1 * clamp(14px, 2vw, 32px)); }
.lavagna__col li { display: flex; align-items: baseline; gap: 16px; font-size: 1.65rem; line-height: 1.2; }
.lavagna__col li span:first-child { flex: 1; min-width: 0; overflow-wrap: break-word; }
.prezzo { flex: none; font-weight: 700; color: #F6D98C; font-variant-numeric: tabular-nums; }

/* ---------- giardino ---------- */
.giardino { overflow: hidden; }
.giardino .due-col { grid-template-columns: 1.05fr 1fr; }
.petali { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.giardino .contenitore { position: relative; z-index: 1; }
.petalo { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 60% 10% 60% 10%; background: radial-gradient(circle at 30% 30%, #C9BDEB, #8E7CC3 70%); opacity: .85; }

/* ---------- in arrivo ---------- */
.arrivo { padding-top: 16px; }
.arrivo__testa { text-align: center; margin-bottom: 32px; }
.arrivo__testa .rametto { margin-inline: auto; }
.arrivo__griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.anteprima-box {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 20px 18px 92px; min-height: 360px;
  background-color: var(--carta); background-image: var(--grana);
  border: 1px solid rgba(120, 100, 75, .18); border-radius: 6px;
  box-shadow: 0 10px 22px -16px rgba(60, 40, 20, .45);
}
.anteprima-box h3 { font-size: 1.6rem; color: #5b5249; }
.anteprima-box__velato { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; filter: blur(3px) grayscale(.85); opacity: .55; user-select: none; }
.anteprima-box__velato .riga { display: block; height: 10px; width: 70%; border-radius: 6px; background: #b8ae9f; }
.riga--l { width: 88% !important; } .riga--m { width: 54% !important; } .riga--titolo { height: 18px !important; width: 50% !important; margin-bottom: 8px; }
.arco--piccolo { width: 62%; padding: 7px 7px 0; }
.arco--mini { padding: 5px 5px 0; }
.anteprima-box__velato--galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-inline: 8px; }
.anteprima-box__velato--recensioni { padding-top: 16px; }
.voto-finto { font-family: var(--f-titoli); font-size: 4rem; font-style: italic; line-height: 1; color: #6b6259; }
.stelle-finte { display: flex; gap: 4px; color: #a39a8c; }
.stelle-finte svg { width: 22px; height: 22px; }
.anteprima-box__velato--menu { padding-top: 14px; gap: 14px; }
.targhetta {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; rotate: -2deg;
  width: 88%; margin: 0; padding: .55em .8em;
  font-family: var(--f-mano); font-size: 1.25rem; font-weight: 700; line-height: 1.15; text-align: center;
  color: #2c241c; background-color: #EBDDC2; background-image: var(--grana);
  box-shadow: 0 6px 12px -5px rgba(60, 40, 20, .45);
  clip-path: polygon(0 5%, 8% 0, 50% 4%, 92% 0, 100% 6%, 99% 94%, 70% 100%, 30% 96%, 1% 100%);
}
.anteprima-box:nth-child(even) .targhetta { rotate: 1.8deg; }
.targhetta::before { content: ""; position: absolute; top: 6px; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; background: #8c7454; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
.targhetta { padding-top: 1.1em; }

/* ---------- footer ---------- */
.piede { position: relative; color: #E9E4DA; background-color: var(--ardesia); background-image: var(--polvere-gesso), var(--grana); padding-top: calc(var(--strappo-h) + 44px); }
.piede {
  -webkit-mask: var(--strappo-alto) top / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--strappo-h) + 1px) no-repeat;
          mask: var(--strappo-alto) top / 100% var(--strappo-h) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--strappo-h) + 1px) no-repeat;
}
.piede__in { display: grid; grid-template-columns: 1.1fr 1.3fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.piede__logo img { width: min(240px, 100%); }
.piede__slogan { font-family: var(--f-titoli); font-style: italic; font-size: 1.3rem; color: #CFC6B6; margin: 10px 0 0; }
.piede__titolo { font-family: var(--f-testo); font-style: normal; font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; font-size: 1rem; font-weight: 500; color: #C9BEE8; margin-bottom: 14px; }
.piede__info li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; line-height: 1.5; }
.piede__info svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: #C9BEE8; }
.piede__info a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: #fff; text-underline-offset: 4px; }
.piede__info strong { color: #F6D98C; font-weight: 500; }
.mappa { position: relative; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 6px #EFE7D6, 0 10px 24px rgba(0, 0, 0, .4); rotate: -1deg; transition: rotate .3s ease; }
.mappa:hover { rotate: 0deg; }
.mappa svg { display: block; width: 100%; height: auto; }
.mappa__cta { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 4px; background: var(--ardesia); color: #fff; font-size: 1rem; }
.piede__credito { margin-top: 32px; padding-bottom: 18px; font-size: 1rem; color: #B7AFA2; }
.mosaico { height: 66px; background: var(--mosaico) 0 11px / 44px 44px repeat; border-top: 3px solid #1f2226; }


/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 1100px) {
  .testata__in { gap: 18px; }
  .nav ul { gap: 14px; }
  .nav a:not(.btn) { letter-spacing: .12em; }
  .insegna { --insegna-w: 250px; }
  .piede__in { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   Telefono / menu a tendina
   ========================================================== */
/* testata con menu a tendina: tablet e telefono */
@media (max-width: 1100px) {
  .apertura__chiama { display: inline-flex; }
  .testata__in { height: 72px; }
  .insegna { --insegna-w: 205px; }
  .testata__chiama { display: none; }
  .lingue { margin-left: auto; }
  .lingue__pannello { right: -58px; width: min(270px, calc(100vw - 2 * var(--gutter))); }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; margin-left: 10px;
    width: 48px; height: 48px; border: 1px solid rgba(90, 70, 50, .25); border-radius: 10px; background: var(--carta); cursor: pointer;
  }
  .menu-btn__linee, .menu-btn__linee::before, .menu-btn__linee::after { display: block; width: 22px; height: 2px; background: var(--testo); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .menu-btn__linee { position: relative; }
  .menu-btn__linee::before, .menu-btn__linee::after { content: ""; position: absolute; left: 0; }
  .menu-btn__linee::before { top: -7px; } .menu-btn__linee::after { top: 7px; }
  .menu-btn[aria-expanded="true"] .menu-btn__linee { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-btn__linee::before { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__linee::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 48px var(--gutter) 24px; /* spazio per l'insegna che sporge: HOME resta tutta visibile */
    background-color: var(--carta); background-image: var(--grana);
    box-shadow: 0 16px 24px -12px rgba(50, 30, 15, .35);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
  }
  .nav.aperto { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px dashed rgba(90, 70, 50, .2); }
  .nav a:not(.btn) { width: 100%; min-height: 52px; font-size: 1.125rem; letter-spacing: .18em; }
  .nav a:not(.btn)::after { left: 0; translate: 0 0; transform-origin: left; }
  .nav__chiama-mobile { display: inline-flex; width: 100%; margin-top: 14px; }
  html:not(.js-attivo) .nav { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; padding: 0; }
  html:not(.js-attivo) .menu-btn { display: none; }
}

@media (max-width: 900px) {

  .due-col, .giardino .due-col { grid-template-columns: 1fr; }
  .due-col .arco { order: -1; }
  .apertura__chiama { display: inline-flex; }
  /* glicine centrato sopra la foto */
  .ghirlanda--dx, .ghirlanda--sx { left: 50%; right: auto; width: min(92vw, 560px); }
  .ghirlanda--dx { transform: translateX(-50%); }
  .ghirlanda--sx { transform: translateX(-50%) scaleX(-1); }
  .due-col__testo { max-width: 60ch; }
  .spec-griglia, .arrivo__griglia { grid-template-columns: repeat(2, 1fr); }
  .lavagna__in { grid-template-columns: 1fr; }
  .lavagna__menu { grid-template-columns: 1fr; }
  .lavagna__col + .lavagna__col { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid rgba(244, 241, 234, .3); padding-top: 14px; margin-top: 14px; }
  .gesso-disegno { width: 170px; }

}

@media (max-width: 600px) {
  :root { --strappo-h: 16px; }
  .testata__in { gap: 10px; }
  .lingue summary { padding: 0 10px; gap: 5px; }
  .anteprima { font-size: 1rem; letter-spacing: .02em; }
  .apertura { --hero-h: max(560px, calc(100svh - 72px - 26px)); align-items: flex-end; }
  .apertura__sfondo { display: none; }
  .apertura__scena { left: 50%; right: auto; width: calc(var(--hero-h) * 1.18); translate: -30% 0; -webkit-mask: none; mask: none; }
  .apertura__velo { background: linear-gradient(180deg, rgba(20, 14, 8, .35) 0%, transparent 20%, rgba(20, 14, 8, .35) 38%, rgba(20, 14, 8, .85) 60%, rgba(20, 14, 8, .92) 100%); }
  .apertura .occhiello { font-size: .95rem; letter-spacing: .2em; }
  .apertura__testo { padding: 120px 0 calc(var(--strappo-h) + 36px); }
  .apertura h1 { font-size: 2.85rem; }
  .apertura__sotto { font-size: 1.0625rem; }
  .apertura__azioni { margin: 1.1em 0 1em; }
  .apertura__azioni { gap: 10px; }
  .apertura__azioni .btn { flex: 1 1 auto; padding-inline: .9em; }
  .apertura .occhiello { text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
  .titolino-centrato { font-size: 1.2rem; letter-spacing: .18em; gap: 10px; }
  .titolino-centrato .rametto { width: 48px; }
  .spec-griglia { gap: 14px; }
  .etichetta { font-size: 1.2rem; padding: .25em .6em; }
  .lavagna__col li { font-size: 1.45rem; }  /* ~23px: gesso leggibile */
  .arrivo__griglia { grid-template-columns: 1fr 1fr; gap: 12px; }
  .anteprima-box { padding: 14px 10px 150px; }
  .anteprima-box h3 { font-size: 1.35rem; }
  .targhetta { font-size: 1.125rem; width: 92%; }
  .sezione { padding: 40px 0; }
  .anteprima-box { min-height: 0; }
  .piede__in { grid-template-columns: 1fr; }
  .mappa { max-width: 420px; }
}

/* ==========================================================
   Movimento ridotto: tutto fermo e visibile
   ========================================================== */
@media (max-width: 600px) {
  .ghirlanda--angolo-sx, .ghirlanda--angolo-dx { display: none; }
  .lavagna .contenitore { width: calc(100% - 2 * (var(--gutter) + 12px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .insegna__pendolo { transform: rotate(-2deg) !important; }
}