/* =================================================================
   DAL VECCHIO FORNO — "Trattoria Serale" (dark, warm, editoriale)
   Pizzeria storica dal 1987 · Isolabona
   Espresso scuro dominante · brace · oro · crema solo come testo
   ================================================================= */

/* -----------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------- */
:root {
  /* Superfici scure (warm) */
  --bg:        #1A130D;   /* espresso profondo — canvas */
  --bg-2:      #211911;   /* alternanza */
  --surface:   #271D14;   /* card */
  --surface-2: #33271B;   /* card elevata / hover */
  --ink:       #120C07;   /* il più scuro — footer / momenti */

  /* Testo (crema, solo come testo/accenti chiari) */
  --cream:     #F0E7D7;
  --text:      #E7DCC9;
  --muted:     #AD9B85;
  --muted-2:   #8C7A66;

  /* Accenti */
  --accent:    #DA7A2E;   /* brace/ambra — pop su scuro, sicuro come testo */
  --accent-cta:#C4571B;   /* brace pieno per i bottoni */
  --accent-2:  #E68A3C;   /* hover */
  --gold:      #C2A35A;   /* filetti / dettagli */

  /* Linee su scuro */
  --line:   rgba(240,231,215,.10);
  --line-2: rgba(240,231,215,.18);

  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", system-ui, -apple-system, sans-serif;
  --brand: "euclid-flex-bold", "Playfair Display", serif;

  --fs-hero: clamp(2.9rem, 7vw, 6rem);
  --fs-h2:   clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3:   clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;

  /* Raggi & ombre (su scuro: ombre profonde) */
  --r:    14px;
  --r-lg: 20px;
  --shadow-1: 0 2px 6px rgba(0,0,0,.30), 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-2: 0 10px 24px -8px rgba(0,0,0,.45), 0 30px 60px -24px rgba(0,0,0,.7);

  /* Ritmo */
  --section: clamp(4.5rem, 11vw, 9rem);
  --maxw: 1200px;

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .35s;
}

/* -----------------------------------------------------------------
   2. BASE
   ----------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Protezione scroll orizzontale: 'clip' (non crea scroll-container, quindi
   non rompe position:sticky); 'hidden' resta come fallback per browser datati. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent); color: #1A130D; }
section { scroll-margin-top: 80px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }

/* -----------------------------------------------------------------
   3. FONT BRAND
   ----------------------------------------------------------------- */
@font-face {
  font-family: 'euclid-flex-bold';
  src: url('../FONTS/EuclidFlexBold/EuclidFlex-Bold.woff2') format('woff2'),
       url('../FONTS/EuclidFlexBold/EuclidFlex-Bold.woff') format('woff'),
       url('../FONTS/EuclidFlexBold/EuclidFlexBold.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* -----------------------------------------------------------------
   4. TIPOGRAFIA
   ----------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--cream); line-height: 1.12; margin: 0; letter-spacing: -.01em; }

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.kicker--center { justify-content: center; }

.section-title { font-size: var(--fs-h2); margin-top: 1rem; }
.section-title .accent { color: var(--accent); }
.section-title em { font-style: italic; }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.55; max-width: 58ch; }

.rule { width: 56px; height: 2px; border: 0; margin: 1.4rem 0 0; background: var(--gold); opacity: .85; }
.rule--center { margin-inline: auto; }

/* -----------------------------------------------------------------
   5. BOTTONI
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.7rem; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; line-height: 1; text-decoration: none;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:active { transform: translateY(0) scale(.98); }

.btn-accent { background: var(--accent-cta); color: #fff; }
.btn-accent:hover { background: var(--accent-2); color: #1A130D; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(218,122,46,.55); }

.btn-ghost-light { border-color: var(--line-2); color: var(--cream); background: transparent; }
.btn-ghost-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-2px); }

.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }

/* -----------------------------------------------------------------
   6. ICONE / SOCIAL (SVG, currentColor)
   ----------------------------------------------------------------- */
.icon { width: 1.25rem; height: 1.25rem; display: inline-block; fill: currentColor; vertical-align: middle; }
.social {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--cream); border: 1px solid var(--line-2);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.social .icon { width: 1.1rem; height: 1.1rem; }
.social:hover { transform: translateY(-3px); background: var(--accent); border-color: var(--accent); color: #1A130D; }

/* -----------------------------------------------------------------
   7. NAVBAR
   ----------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
  transition: background var(--t) var(--ease), padding var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.nav.solid {
  background: rgba(18,12,7,.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding-block: .75rem;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.6);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: .7rem; color: var(--cream); text-decoration: none; }
.nav__brand img { height: 38px; }
.nav__brand span { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }

.nav__menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; font-family: var(--sans); font-weight: 500; font-size: .95rem; color: var(--cream); text-decoration: none; padding-block: .3rem; transition: color var(--t) var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav__link:hover { color: #fff; }
.nav__link.active { color: #fff; }
.nav__link.active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.nav__actions .social { width: 38px; height: 38px; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; color: var(--cream); }
.nav__toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 5px 0; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }

@media (max-width: 991px) {
  .nav__toggle { display: block; z-index: 1100; }
  /* FIX menu mobile: niente backdrop-filter sulla navbar su mobile.
     backdrop-filter crea un "containing block" → il pannello fixed (inset:0)
     si ancorerebbe alla navbar invece che al viewport quando si è scrollati
     (nav .solid), rompendo il menu. Sfondo opaco al suo posto. */
  .nav.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18,12,7,.96); }
  .nav__panel { position: fixed; inset: 0; z-index: 1050; background: rgba(18,12,7,.98); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
  .nav__panel.open { opacity: 1; pointer-events: auto; }
  .nav__menu { flex-direction: column; gap: 1.6rem; }
  .nav__link { font-size: 1.6rem; font-family: var(--serif); }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 992px) { .nav__panel { display: contents; } }

/* -----------------------------------------------------------------
   8. HERO
   ----------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  background: url('../IMG/forno.webp') center/cover no-repeat;
  color: var(--cream);
  padding: 7rem 1.5rem 4rem;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(218,122,46,.18), transparent 55%),
    linear-gradient(180deg, rgba(12,8,5,.66) 0%, rgba(12,8,5,.5) 38%, rgba(12,8,5,.9) 100%);
}
/* Video di sfondo (fiamme in loop) — la foto resta come fallback/poster */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  animation: heroZoom 26s var(--ease) infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero__inner { position: relative; z-index: 2; max-width: 880px; }
.hero__kicker { font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .35em; text-transform: uppercase; color: #f0c190; margin-bottom: 1.6rem; }
.hero__logo { width: 88px; margin: 0 auto 1.4rem; filter: brightness(0) invert(1); opacity: .96; }
.hero__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-hero); color: #fff; line-height: 1.05; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.hero__tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: #efe2cf; margin-top: 1rem; }
.hero__cta { margin-top: 2.4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.scroll-cue { position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); z-index: 2; width: 24px; height: 40px; border: 2px solid rgba(240,231,215,.6); border-radius: 100px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; border-radius: 2px; background: var(--cream); transform: translateX(-50%); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%,0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%,13px); } 100% { opacity: 0; } }

/* -----------------------------------------------------------------
   9. SEZIONI
   ----------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
/* leggero bagliore di brace in cima ad alcune sezioni (rompe la monotonia) */
.section--glow::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; max-width: 700px; height: 240px; background: radial-gradient(60% 100% at 50% 0%, rgba(218,122,46,.10), transparent 70%); pointer-events: none; }
.section__head { max-width: 720px; }
.section__head--center { margin-inline: auto; text-align: center; }

/* Sezione su tono leggermente diverso */
.section--alt { background: var(--bg-2); }

/* -----------------------------------------------------------------
   10. STORIA — scroll-telling: anno sticky che cambia con lo scroll
   ----------------------------------------------------------------- */
.story-scroll {
  display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.story-scroll__aside { position: sticky; top: clamp(110px, 22vh, 200px); }
.story-scroll__year {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(4.5rem, 9vw, 8rem); line-height: 1; color: var(--accent);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.story-scroll__year.swap { opacity: 0; transform: translateY(14px); }
.story-scroll__hint { display: block; margin-top: 1rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }

.chapter { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.chapter:last-child { margin-bottom: 0; }
.chapter__year { display: none; }
.chapter__media { margin: 0 0 1.4rem; aspect-ratio: 4 / 3; }
.chapter h3 { font-size: var(--fs-h3); margin-bottom: .7rem; }
.chapter p { color: var(--muted); margin: 0; }
.chapter__caption { margin-top: .8rem; font-size: .9rem; color: var(--muted-2); font-style: italic; }

@media (max-width: 860px) {
  .story-scroll { grid-template-columns: 1fr; }
  .story-scroll__aside { display: none; } /* su mobile: anno dentro ogni tappa */
  .chapter__year { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: var(--accent); margin-bottom: .6rem; line-height: 1; }
}

/* -----------------------------------------------------------------
   11. MENU
   ----------------------------------------------------------------- */
/* CTA tovagliette — pannello distinto con filetto oro */
.menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(2rem,5vw,3.5rem); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--surface), var(--bg)); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.langs { display: grid; gap: 1rem; }
.lang { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--cream); text-decoration: none; background: rgba(240,231,215,.03); transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.lang:hover { background: rgba(240,231,215,.07); transform: translateX(6px); border-color: var(--accent); }
.lang__flag { font-size: 1.7rem; line-height: 1; }
.lang__txt { flex: 1; }
.lang__txt strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--cream); }
.lang__txt span { font-size: .82rem; color: var(--muted); }
.lang__arrow { color: var(--accent); transition: transform var(--t) var(--ease); }
.lang:hover .lang__arrow { transform: translateX(4px); }
@media (max-width: 768px) { .menu-cta { grid-template-columns: 1fr; } }

/* Tabs underline */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--line-2); margin: clamp(2rem,5vw,3.5rem) 0 clamp(2rem,4vw,3rem); }
.tab { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--muted); padding: .9rem 1.4rem; position: relative; transition: color var(--t) var(--ease); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.tab:hover { color: var(--cream); }
.tab.active { color: var(--cream); }
.tab.active::after { transform: scaleX(1); }

.tabpanel { display: none; }
.tabpanel.active { display: block; animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Griglia piatti · FOTO STANDARDIZZATE 1:1 cover */
.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.dish { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.dish:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.dish__media { aspect-ratio: 1 / 1; overflow: hidden; }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.05); }
/* Variante per immagini scontornate (es. pizze): contain su fondale radiale */
.dish__media--cutout {
  display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 25%, var(--surface-2), var(--bg-2));
}
.dish__media--cutout img {
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
}
.dish__body { padding: 1.2rem 1.4rem 1.5rem; }
.dish__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--cream); margin: 0 0 .3rem; }
.dish__desc { color: var(--muted); font-size: .95rem; margin: 0; }

/* Blocco "lasciati ispirare" · FOTO STANDARDIZZATA 3:2 cover */
.feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-2); border: 1px solid var(--line); }
@media (max-width: 768px) { .feature { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------
   12. SHOP · prodotti (ritagli) 1:1 contain
   ----------------------------------------------------------------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); max-width: 880px; margin-inline: auto; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.product__media { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(120% 120% at 50% 20%, var(--surface-2), var(--bg)); }
.product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.8rem; opacity: 0; transition: opacity var(--t) var(--ease); }
.product__media img.show { opacity: 1; }
.product__dots { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; }
.product__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--line-2); cursor: pointer; padding: 0; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
.product__dots button.active { background: var(--accent); transform: scale(1.3); }
.product__body { padding: 1.4rem 1.5rem 1.6rem; }
.product__body h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .4rem; }
.product__body p { color: var(--muted); font-size: .95rem; }
.product__opts { display: flex; gap: .8rem; margin: 1rem 0 1.2rem; }
.field { flex: 1; }
.field label { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; }
.field select { width: 100%; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); font-family: var(--sans); }
.field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -----------------------------------------------------------------
   13. ART GALLERY · GRIGLIA UNIFORME 4:5 cover (niente più masonry)
   ----------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); }
.gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__cap { position: absolute; inset: auto 0 0 0; padding: 1.8rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(12,8,5,.9)); color: var(--cream); opacity: 0; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.gallery__item:hover .gallery__cap { opacity: 1; transform: none; }
.gallery__cap strong { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; display: block; }
.gallery__cap span { font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } .gallery__cap { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------
   14. FOOTER
   ----------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--text); padding-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.footer h5 { font-family: var(--serif); color: var(--cream); font-size: 1.15rem; font-weight: 600; margin: 0 0 1.1rem; }
.footer__brand p { color: var(--muted); font-size: .92rem; max-width: 32ch; }
.footer__brand .brandmark { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); margin-bottom: .6rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .7rem; font-size: .92rem; line-height: 1.4; color: var(--text); }
.footer li span.lbl { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .1rem; }
.footer a { color: var(--text); transition: color var(--t) var(--ease); }
.footer a:hover { color: var(--cream); }
.footer__social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer__bottom { border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--muted-2); }
@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* -----------------------------------------------------------------
   15. PRELOADER · BACK TO TOP · REVEAL
   ----------------------------------------------------------------- */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: grid; place-items: center; transition: opacity .6s var(--ease); }
.preloader img { width: 96px; filter: brightness(0) invert(1); animation: pulse 1.5s var(--ease) infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.preloader.hide { opacity: 0; pointer-events: none; }

.back-to-top { position: fixed; bottom: 26px; right: 26px; z-index: 900; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--accent-cta); color: #fff; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: all var(--t) var(--ease); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--accent-2); color: #1A130D; transform: translateY(-3px); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* -----------------------------------------------------------------
   17b. PAGINE LEGALI (privacy / cookie)
   ----------------------------------------------------------------- */
.legal-bar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 5vw, 3rem); border-bottom: 1px solid var(--line); background: var(--ink); position: sticky; top: 0; z-index: 100; }
.legal-bar a.legal-home { display: flex; align-items: center; gap: .7rem; color: var(--cream); text-decoration: none; font-family: var(--serif); font-size: 1.1rem; }
.legal-bar a.legal-home img { height: 34px; }
.legal-bar a.legal-back { color: var(--muted); text-decoration: none; font-size: .9rem; }
.legal-bar a.legal-back:hover { color: var(--cream); }

.legal { max-width: 820px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 2rem) clamp(4rem, 8vw, 6rem); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .6rem; }
.legal .updated { color: var(--muted-2); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.5rem; margin: 2.5rem 0 .8rem; color: var(--cream); }
.legal h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; color: var(--cream); margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--text); font-size: 1rem; line-height: 1.7; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal .todo { background: rgba(218,122,46,.12); border-left: 3px solid var(--accent); padding: .5rem .9rem; border-radius: 0 8px 8px 0; color: var(--cream); font-size: .9rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); color: var(--text); }
.legal th { color: var(--cream); font-family: var(--sans); font-weight: 600; }

/* -----------------------------------------------------------------
   18. FOOTER — link legali / preferenze cookie
   ----------------------------------------------------------------- */
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem; font-size: .85rem;
}
.footer__legal a, .footer__prefs {
  color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; transition: color var(--t) var(--ease);
}
.footer__legal a:hover, .footer__prefs:hover { color: var(--cream); }
.footer__legal + .footer__bottom { border-top: 0; margin-top: 0; padding-top: .4rem; }

/* -----------------------------------------------------------------
   19. BANNER COOKIE (consenso GDPR)
   ----------------------------------------------------------------- */
#cookie-banner {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 140%);
  z-index: 2000; width: min(960px, calc(100% - 2rem));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
#cookie-banner.show { transform: translate(-50%, 0); opacity: 1; }
.cookie-banner__inner { display: flex; align-items: center; gap: 1.5rem; padding: 1.3rem 1.6rem; flex-wrap: wrap; }
.cookie-banner__text { flex: 1 1 340px; }
.cookie-banner__text strong { font-family: var(--serif); font-size: 1.1rem; color: var(--cream); display: block; margin-bottom: .3rem; }
.cookie-banner__text p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.cookie-banner__text a { color: var(--accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .8rem; flex: 0 0 auto; }
.cookie-banner__actions .btn { padding: .7rem 1.6rem; }
@media (max-width: 560px) {
  #cookie-banner { bottom: 0; width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* -----------------------------------------------------------------
   20. MICRO-INTERAZIONI PREMIUM
   ----------------------------------------------------------------- */
/* Parallax leggero: il contenitore maschera, l'immagine scala e trasla via JS */
.parallax { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.parallax img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.12); will-change: transform;
  border: 0; border-radius: 0; box-shadow: none;
}
.feature__media.parallax { aspect-ratio: 3 / 2; }
.feature__media.parallax img { aspect-ratio: auto; }

/* Titoli di sezione: reveal "a sipario" quando entrano in viewport */
.reveal .section-title { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease) .12s; }
.reveal.in .section-title { clip-path: inset(0); }

/* Glow brace che segue il cursore sulle card (solo dispositivi con mouse) */
@media (hover: hover) {
  .dish, .product { position: relative; }
  .dish::after, .product::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(218,122,46,.14), transparent 65%);
    opacity: 0; transition: opacity .35s var(--ease);
  }
  .dish:hover::after, .product:hover::after { opacity: 1; }
}

/* Lightbox della gallery */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(10,7,4,.94);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; text-align: center; max-width: min(92vw, 1100px); }
.lightbox img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--r); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.lightbox figcaption { margin-top: 1rem; color: var(--cream); font-size: .95rem; }
.lightbox figcaption strong { font-family: var(--serif); font-size: 1.15rem; display: block; }
.lightbox__close {
  position: absolute; top: 1.1rem; right: 1.3rem;
  width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; color: var(--cream); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.lightbox__close:hover { background: var(--accent); color: #1A130D; border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .reveal .section-title { clip-path: none; }
  .parallax img { transform: none; }
  .hero__video { display: none; } /* resta la foto di sfondo */
  #cookie-banner { transition: none; }
}