/* =========================================================
   Caffè Roma 2000 — styles.css
   Design system: Palette A "Blu Adriatico"
   Mobile-first · breakpoints 768px / 1024px
   ========================================================= */

:root {
  /* Colore — Palette A "Blu Adriatico" */
  --blu-primario: #16477C;
  --blu-chiaro:   #A8C8E4;
  --crema:        #F7F3EC;
  --oro:          #C9973F;
  --oro-scuro:    #A87B2E;
  --testo:        #1E2A38;
  --testo-soft:   #55606E;
  --bianco:       #FFFFFF;
  --linea:        #E3DACB;

  /* Tipografia */
  --font-titolo: 'Cormorant Garamond', Georgia, serif;
  --font-testo:  'Inter', system-ui, sans-serif;
  --fs-hero:  clamp(2.4rem, 6vw, 4rem);
  --fs-h1:    clamp(2rem, 4.5vw, 3rem);
  --fs-h2:    clamp(1.6rem, 3.5vw, 2.2rem);
  --fs-h3:    1.35rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --lh-titolo: 1.15;
  --lh-body:   1.65;
  --ls-label:  0.12em;

  /* Spaziatura (scala 4px) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --sezione-y: clamp(3rem, 8vw, 6rem);
  --gutter:    clamp(1rem, 4vw, 2rem);
  --max-w:     1200px;

  /* Forma */
  --raggio-s:8px; --raggio-m:14px; --raggio-l:22px;
  --ombra: 0 4px 24px rgba(30,42,56,.08);
  --transizione:.25s ease;

  --header-h: 80px;
}

/* ============================ Reset / base ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--testo);
  background: var(--crema);          /* MAI bianco puro */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blu-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-titolo);
  font-weight: 600;
  line-height: var(--lh-titolo);
  color: var(--testo);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--sp-4); color: var(--testo-soft); }

/* Focus visibile per accessibilità da tastiera */
:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blu-primario); color: var(--bianco);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--raggio-s) 0;
}
.skip-link:focus { left: 0; }

/* ============================ Utility ============================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sezione { padding-block: var(--sezione-y); }
.sezione--bianco  { background: var(--bianco); }
.sezione--crema   { background: var(--crema); }
.sezione--azzurro { background: color-mix(in srgb, var(--blu-chiaro) 22%, var(--crema)); }
.sezione--blu     { background: var(--blu-primario); color: var(--bianco); }
.sezione--blu h2, .sezione--blu h3 { color: var(--bianco); }
.sezione--blu p { color: var(--blu-chiaro); }

.occhiello {
  display: block;
  font-family: var(--font-testo);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--oro-scuro);
  margin-bottom: var(--sp-3);
}
.sezione--blu .occhiello { color: var(--oro); }

.sezione__intro { max-width: 640px; margin-bottom: var(--sp-12); }
.sezione__intro--center { margin-inline: auto; text-align: center; }

.hairline { height: 1px; background: var(--oro); opacity: .5; border: 0; }

.prezzo { color: var(--oro-scuro); font-weight: 600; white-space: nowrap; }
.sezione--blu .prezzo { color: var(--oro); }

/* Placeholder immagini: aspetti fissi -> il layout non salta */
.ph {
  background: var(--linea);
  background-image: linear-gradient(135deg,
      rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
  display: block; width: 100%;
  border-radius: var(--raggio-m);
  object-fit: cover;
}
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* ============================ Bottoni ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-testo);
  font-size: var(--fs-body); font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--raggio-s);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transizione), background var(--transizione), color var(--transizione);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primario { background: var(--blu-primario); color: var(--bianco); }
.btn-primario:hover { background: #123c69; color: var(--bianco); }

.btn-secondario { background: transparent; color: var(--testo); border-color: var(--oro); }
.btn-secondario:hover { background: var(--oro); color: var(--bianco); }
.sezione--blu .btn-secondario { color: var(--bianco); }
.sezione--blu .btn-secondario:hover { background: var(--oro); color: var(--bianco); }

.ti { display: inline-flex; line-height: 1; font-size: 1.25rem; }
.btn .ti { font-size: 1.2rem; }

/* ============================ Header ============================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--blu-primario);
  color: var(--bianco);
  min-height: var(--header-h);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}
.logo {
  font-family: var(--font-titolo); font-weight: 700;
  font-size: 1.4rem; color: var(--bianco); letter-spacing: .01em;
  margin-right: auto; white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--oro); }

/* Logo insegna ufficiale ritagliato via CSS dal PNG (924×540).
   Mostra SOLO la parte alta: DAL 1996 · Caffè · ROMA · 2000 (crop y 97→350),
   escludendo "BAR · GELATERIA · PASTICCERIA" e "MONOPOLI" in basso.
   Il fondo blu del PNG coincide con l'header, quindi i margini residui sono invisibili.
   --- Per REGOLARE a mano cosa si vede ---
   background-size  = zoom del PNG (più grande = logo più ingrandito)
   background-position = spostamento; più negativo su Y = scende, mostra più in basso.
   Rapporti attuali: box 103×64, size 234×137, pos -65 -25.
   Se cambi il file o vuoi includere di nuovo le scritte in basso, rialza il numero Y del box
   e sposta background-position. */
.logo {
  width: 103px; height: 64px;
  background-image: url(assets/Caffe-Roma-2000_1b-insegna_blu.png);
  background-repeat: no-repeat;
  background-size: 234px 137px;
  background-position: -65px -25px;
  font-size: 0;               /* nasconde eventuale testo di fallback */
}

.nav { display: none; }                 /* mobile: nascosta, apre via JS */
.nav a {
  color: var(--bianco); font-size: var(--fs-small); font-weight: 500;
  padding: var(--sp-2) var(--sp-1);
}
.nav a:hover { color: var(--blu-chiaro); text-decoration: none; }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Selettore lingua */
.lang {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--fs-small); font-weight: 600;
}
.lang a { color: var(--blu-chiaro); padding: 2px 4px; border-radius: 4px; }
.lang a[aria-current="true"] { color: var(--bianco); text-decoration: underline; }
.lang span { opacity: .5; }

.btn-prenota {
  display: none; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small);
}

/* Hamburger */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 0; color: var(--bianco); cursor: pointer;
}
.hamburger .ti { font-size: 1.7rem; }
.hamburger .ti-x { display: none; }
.hamburger[aria-expanded="true"] .ti-menu { display: none; }
.hamburger[aria-expanded="true"] .ti-x { display: block; }

/* Menu mobile a tendina */
.nav-mobile {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
  background: var(--blu-primario);
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  gap: var(--sp-2);
  transform: translateY(-120%);
  transition: transform var(--transizione);
  box-shadow: var(--ombra);
}
.nav-mobile.open { transform: translateY(0); }
.nav-mobile a {
  color: var(--bianco); font-size: 1.1rem; padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav-mobile a:hover { color: var(--blu-chiaro); text-decoration: none; }
.nav-mobile .btn { margin-top: var(--sp-4); }

/* ============================ Header: comportamento home (scroll) ============================ */
/* Aggiungi transizione alla barra */
.header {
  transition: transform var(--transizione), background var(--transizione), box-shadow var(--transizione);
}

/* Sulla HOME (body.home): in cima nessuna barra, solo il logo grande centrato.
   Scorrendo (body.scrolled) la barra scende e il logo grande sparisce. */
body.home .header {
  position: fixed; top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  box-shadow: none;
}
body.home.scrolled .header {
  transform: translateY(0);
  box-shadow: var(--ombra);
}

/* Logo grande centrato dentro l'hero (home) */
.hero__logo {
  display: block;
  width: min(440px, 82vw);
  aspect-ratio: 426 / 323;
  margin: 0 auto var(--sp-6);
  background: url(assets/logo-insegna-trasp.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.4));
}
/* Home: contenuto hero centrato attorno al logo */
body.home .hero__inner { text-align: center; }
body.home .hero h1 { margin-inline: auto; }
body.home .hero p { margin-inline: auto; }
body.home .hero__cta { justify-content: center; }

/* ============================ Hero ============================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  color: var(--bianco);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
      rgba(22,71,124,.45) 0%, rgba(22,71,124,.30) 40%, rgba(22,71,124,.65) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: var(--sp-16); }
.hero .occhiello { color: var(--oro); }
.hero h1 {
  font-size: var(--fs-hero); color: var(--bianco);
  max-width: 14ch; margin-bottom: var(--sp-4);
}
.hero p { color: rgba(255,255,255,.92); max-width: 46ch; font-size: 1.15rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ============================ Chi siamo ============================ */
.chi { display: grid; gap: var(--sp-8); align-items: center; }
.chi__foto img { box-shadow: var(--ombra); }

/* ============================ Momenti (card grid) ============================ */
.momenti-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  background: var(--bianco);
  border-radius: var(--raggio-m);
  box-shadow: var(--ombra);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__foto { border-radius: 0; }
.card__body { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.card__icona {
  display: inline-flex; color: var(--oro); margin-bottom: var(--sp-2);
}
.card__icona .ti { font-size: 1.9rem; }
.card h3 { margin-bottom: var(--sp-1); }
.card p { margin: 0; font-size: var(--fs-small); }

/* ============================ Menu in evidenza ============================ */
.menu-cols {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
}
.menu-col h3 {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--sp-4);
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.menu-list .voce { color: var(--testo); }
.menu-list .dots {
  flex: 1; border-bottom: 1px dotted var(--linea); transform: translateY(-4px);
}
.menu-evidenza__cta { text-align: center; margin-top: var(--sp-12); }

/* ============================ Gelato / Vaschette ============================ */
.vaschette-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 900px; margin-inline: auto;
}
.vaschetta {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(168,200,228,.35);
  border-radius: var(--raggio-m);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.vaschetta__formato {
  font-family: var(--font-titolo); font-size: 2rem; color: var(--bianco);
  margin-bottom: var(--sp-2);
}
.vaschetta__prezzo {
  font-size: 1.6rem; font-weight: 600; color: var(--oro);
  display: block; margin-bottom: var(--sp-2);
}
.vaschetta p { color: var(--blu-chiaro); font-size: var(--fs-small); margin: 0; }

/* ============================ Gallery ============================ */
.gallery-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}
.gallery-item {
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: none; border-radius: var(--raggio-s); overflow: hidden;
}
.gallery-item img { transition: transform var(--transizione); }
.gallery-item:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(22,42,56,.92);
  display: none; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--raggio-s); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(0,0,0,.35); color: var(--bianco);
  border: 0; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--sp-4); }
.lightbox__nav--next { right: var(--sp-4); }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(0,0,0,.6); }

/* ============================ Recensioni ============================ */
.recensioni-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
.recensione {
  background: var(--bianco); border-radius: var(--raggio-m);
  padding: var(--sp-8); box-shadow: var(--ombra);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.stelle { color: var(--oro); display: flex; gap: 2px; }
.stelle .ti { font-size: 1.2rem; }
.recensione blockquote { margin: 0; color: var(--testo); font-size: 1.05rem; }
.recensione__autore { font-weight: 600; color: var(--testo); font-size: var(--fs-small); }
.recensione__fonte { color: var(--testo-soft); font-size: var(--fs-small); }

/* ============================ Instagram ============================ */
.ig-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.ig-grid {
  display: grid; gap: var(--sp-2); margin-top: var(--sp-8);
  grid-template-columns: repeat(3, 1fr);
}
.ig-item { border-radius: var(--raggio-s); overflow: hidden; display: block; }
.ig-item img { transition: transform var(--transizione); }
.ig-item:hover img { transform: scale(1.05); }

/* ============================ Footer ============================ */
.footer { background: var(--blu-primario); color: var(--bianco); }
.footer a { color: var(--blu-chiaro); }
.footer a:hover { color: var(--bianco); }
.footer__grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-block: var(--sezione-y);
}
.footer h3 { color: var(--bianco); font-size: var(--fs-h3); }
.footer__col p, .footer__col li { color: var(--blu-chiaro); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { display: flex; gap: var(--sp-2); padding: var(--sp-1) 0; }
.footer__list .ti { font-size: 1.1rem; color: var(--oro); flex: none; margin-top: 3px; }
.footer__map iframe { width: 100%; height: 220px; border: 0; border-radius: var(--raggio-m); }

/* Mappa caricata solo su clic: nessuna richiesta a Google prima del consenso */
.mappa { width: 100%; height: 220px; border-radius: var(--raggio-m); overflow: hidden; }
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa__attiva {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-4); text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(168,200,228,.55);
  border-radius: var(--raggio-m);
  color: var(--bianco); cursor: pointer;
  font-family: var(--font-testo); font-size: var(--fs-body);
  transition: background var(--transizione), border-color var(--transizione);
}
.mappa__attiva:hover { background: rgba(255,255,255,.13); border-color: var(--oro); }
.mappa__attiva .ti { font-size: 1.8rem; color: var(--oro); }
.mappa__nota { font-size: var(--fs-small); color: var(--blu-chiaro); max-width: 34ch; }
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
}
.footer__social a:hover { background: var(--oro); }
.footer__social .ti { font-size: 1.35rem; color: var(--bianco); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-small); color: var(--blu-chiaro);
}

/* ============================ Menu.html (tabella) ============================ */
.menu-page__intro { text-align: center; max-width: 640px; margin: 0 auto var(--sp-16); }
/* Menu a tendina (accordion nativo details/summary) */
.menu-categoria {
  border: 1px solid var(--linea);
  border-radius: var(--raggio-m);
  background: var(--bianco);
  box-shadow: var(--ombra);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.menu-categoria > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  transition: background var(--transizione);
}
.menu-categoria > summary::-webkit-details-marker { display: none; }
.menu-categoria > summary::marker { content: ""; }
.menu-categoria > summary:hover { background: color-mix(in srgb, var(--oro) 7%, transparent); }
.menu-categoria__title { display: flex; align-items: center; gap: var(--sp-3); }
.menu-categoria__title h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-h3); }
.menu-categoria__title .ti { color: var(--oro); font-size: 1.5rem; }
.menu-categoria__chevron { color: var(--oro-scuro); font-size: 1.4rem; transition: transform var(--transizione); }
.menu-categoria[open] > summary .menu-categoria__chevron { transform: rotate(180deg); }
.menu-categoria[open] > summary { border-bottom: 1px solid var(--linea); }
.menu-categoria__body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.menu-categoria__body .menu-nota { margin-top: 0; }
.menu-categoria[open] > .menu-categoria__body { animation: menuReveal .25s ease; }
@keyframes menuReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-tabella { width: 100%; border-collapse: collapse; }
.menu-tabella tr { border-bottom: 1px solid var(--linea); }
.menu-tabella td { padding: var(--sp-3) 0; vertical-align: top; }
.menu-tabella .voce-nome { color: var(--testo); font-weight: 500; }
.menu-tabella .voce-desc { display: block; color: var(--testo-soft); font-size: var(--fs-small); font-weight: 400; }
.menu-tabella .voce-prezzo { text-align: right; white-space: nowrap; padding-left: var(--sp-4); }
.menu-tabella .voce-prezzo small { display: block; font-weight: 400; color: var(--testo-soft); font-size: var(--fs-small); }
.menu-nota { font-size: var(--fs-small); color: var(--testo-soft); font-style: italic; margin: 0 0 var(--sp-6); }
.menu-supplementi {
  font-size: var(--fs-small); color: var(--testo-soft);
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--oro); background: color-mix(in srgb, var(--oro) 6%, transparent);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
}
.menu-supplementi strong { color: var(--oro-scuro); font-weight: 600; }

/* ============================ Hover / micro-interazioni UX ============================ */

/* Card "momenti della giornata": sollevamento + zoom foto + icona viva.
   Specificità .momenti-grid .card per vincere sulla transition di .fade, opacity inclusa. */
.momenti-grid .card { transition: opacity .6s ease, transform var(--transizione), box-shadow var(--transizione); }
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(30,42,56,.16); }
.card__foto { transition: transform .5s ease; }
.card:hover .card__foto { transform: scale(1.06); }
.card__icona .ti { transition: transform var(--transizione), color var(--transizione); }
.card:hover .card__icona .ti { transform: translateY(-2px) scale(1.12); color: var(--oro-scuro); }

/* Vaschette gelato: sollevamento + bordo oro */
.vaschette-grid .vaschetta { transition: opacity .6s ease, transform var(--transizione), border-color var(--transizione), background var(--transizione); }
.vaschetta:hover { transform: translateY(-6px); border-color: var(--oro); background: rgba(255,255,255,.10); }

/* Recensioni: sollevamento */
.recensioni-grid .recensione { transition: opacity .6s ease, transform var(--transizione), box-shadow var(--transizione); }
.recensione:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(30,42,56,.16); }

/* Nav desktop: sottolineatura oro animata */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--oro); transform: scaleX(0); transform-origin: center;
  transition: transform var(--transizione);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* Bottoni: ombra colorata in hover (oltre al sollevamento già presente) */
.btn-primario:hover { box-shadow: 0 10px 22px rgba(22,71,124,.30); }
.btn-secondario:hover { box-shadow: 0 10px 22px rgba(201,151,63,.24); }

/* Gallery: overlay blu + cornice oro al passaggio */
.gallery-item { position: relative; }
.gallery-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(22,71,124,0); box-shadow: inset 0 0 0 0 var(--oro);
  transition: background var(--transizione), box-shadow var(--transizione);
  pointer-events: none;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after {
  background: rgba(22,71,124,.18); box-shadow: inset 0 0 0 3px var(--oro);
}

/* Instagram: overlay blu al passaggio */
.ig-item { position: relative; }
.ig-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(22,71,124,0); transition: background var(--transizione);
  pointer-events: none;
}
.ig-item:hover::after, .ig-item:focus-visible::after { background: rgba(22,71,124,.28); }

/* Menu in evidenza: voce e prezzo si accendono */
.menu-list li .voce, .menu-list li .prezzo { transition: color var(--transizione); }
.menu-list li:hover .voce { color: var(--blu-primario); }
.menu-list li:hover .prezzo { color: var(--oro); }

/* Menu.html: riga tabella evidenziata */
.menu-tabella tbody tr { transition: background var(--transizione); }
.menu-tabella tbody tr:hover { background: rgba(201,151,63,.07); }

/* Footer: icone social che salgono */
.footer__social a { transition: background var(--transizione), transform var(--transizione); }
.footer__social a:hover { transform: translateY(-3px); }

/* Logo grande hero + logo barra */
.hero__logo { transition: transform var(--transizione), filter var(--transizione); }
.hero__logo:hover { transform: scale(1.03); filter: drop-shadow(0 6px 22px rgba(0,0,0,.5)); }
.logo { transition: opacity var(--transizione); }
.logo:hover { opacity: .85; }

/* ============================ Pagine legali (privacy) ============================ */
.legale { max-width: 780px; margin-inline: auto; }
.legale h2 { margin-top: var(--sp-12); font-size: var(--fs-h2); }
.legale h3 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
.legale ul { padding-left: var(--sp-6); color: var(--testo-soft); }
.legale li { margin-bottom: var(--sp-2); }
.legale a { text-decoration: underline; }
.legale__meta { font-size: var(--fs-small); color: var(--testo-soft); font-style: italic; }
.legale table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-small); }
.legale th, .legale td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--linea); vertical-align: top; }
.legale th { color: var(--testo); font-weight: 600; }
.legale td { color: var(--testo-soft); }
.legale__box {
  background: var(--bianco); border: 1px solid var(--linea);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  padding: var(--sp-6); margin: var(--sp-6) 0;
}
.legale__box p:last-child { margin-bottom: 0; }

/* ============================ Animazioni scroll ============================ */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade.visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  .btn:hover,
  .card:hover, .card:hover .card__foto, .card:hover .card__icona .ti,
  .vaschetta:hover, .recensione:hover, .footer__social a:hover,
  .gallery-item:hover img, .ig-item:hover img,
  .gallery-item:hover::before, .hero__logo:hover { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================ Breakpoint 768px ============================ */
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .recensioni-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-grid { grid-template-columns: repeat(6, 1fr); }
  .chi { grid-template-columns: 1fr 1fr; }
  .menu-cols { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .btn-prenota { display: inline-flex; }
}

/* ============================ Breakpoint 1024px ============================ */
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--sp-4); }
  .hamburger { display: none; }
  .nav-mobile { display: none; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .chi { gap: var(--sp-16); }
}