/* =========================================================================
   Vera Napoli — Ristorante Pizzeria · Chiavari
   Sistema visivo "Il filo blu": un unico tratto blu, ripreso dal logo,
   attraversa tutta la pagina e collega le sezioni.
   Colore blu istituzionale #0168F4, campionato dal logo originale.
   ========================================================================= */

:root{
  --blu:        #0168F4;   /* blu ufficiale, campionato dal logo */
  --blu-luce:   #3E8DFF;
  --blu-notte:  #00337F;
  --ink:        #07111F;
  --ink-2:      #0C1B2E;
  --ink-3:      #14263C;
  --nero:       #080808;
  --carta:      #F8F8F6;
  --grigio:     #ECEFF2;
  --grigio-2:   #D7DEE6;
  --bianco:     #FFFFFF;
  --testo:      #1B242F;
  --testo-soft: #5A6875;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mx: clamp(1.25rem, 5vw, 5.5rem);   /* margine orizzontale */
  --maxw: 1400px;
  --r: 2px;

  --e: cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* [hidden] deve battere qualsiasi display dichiarato dalle classi (es. .btn) */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--carta);
  color:var(--testo);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.012em;
  margin:0;
  color:var(--ink);
}
h1{ font-size:clamp(2.9rem,1.4rem + 6.6vw,7.2rem); }
h2{ font-size:clamp(2.3rem,1.2rem + 4.6vw,5rem); }
h3{ font-size:clamp(1.55rem,1.1rem + 1.9vw,2.6rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.serif-it{ font-family:var(--serif); font-style:italic; }

/* ---- utilità ---------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--mx); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:400;
  background:var(--blu); color:#fff; padding:.75rem 1.25rem; border-radius:var(--r);
  font-weight:600; transition:top .2s var(--e);
}
.skip:focus{ top:1rem; }

:focus-visible{
  outline:2px solid var(--blu);
  outline-offset:3px;
  border-radius:2px;
}

/* bersagli tattili: almeno 24px di altezza (WCAG 2.5.8).
   Non riguarda i link inseriti dentro una frase, che ne sono esclusi. */
.rep__l a, .rec__meta a, .footer ul a, .footer__bot a,
.footer__bot button, .cookie__link, .info-list a, .crumbs a{
  display:inline-block; padding-block:.32rem;
}
.on-dark :focus-visible, .site-footer :focus-visible, .header--solid-dark :focus-visible{
  outline-color:#8FBEFF;
}

/* etichetta sezione (occhiello) */
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blu); margin:0 0 1.4rem; display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{
  content:""; width:2.4rem; height:1px; background:currentColor; flex:none;
}
.on-dark .eyebrow{ color:var(--blu-luce); }

.lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.4rem);
  line-height:1.55; color:var(--testo); font-weight:400;
}
.on-dark{ color:#DCE5EE; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }

/* ---- bottoni ---------------------------------------------------------- */
.btn{
  --bg:var(--blu); --fg:#fff; --bd:var(--blu);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 1.9rem; min-height:52px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:100px; text-decoration:none;
  font-size:.9rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out), color .3s var(--e);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--ink); transform:translateY(101%);
  transition:transform .45s var(--e-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(1,104,244,.65); }
.btn:hover::after{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--grigio-2); }
.btn--ghost:hover{ --fg:#fff; box-shadow:none; }
.btn--ghost::after{ background:var(--ink); }
.btn--light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.42); }
.btn--light::after{ background:#fff; }
.btn--light:hover{ --fg:var(--ink); box-shadow:none; }
.btn--white{ --bg:#fff; --fg:var(--ink); --bd:#fff; }
.btn--white::after{ background:var(--blu); }
.btn--white:hover{ --fg:#fff; }
.btn .ico{ width:1.05em; height:1.05em; flex:none; }

.link-u{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--blu);
  padding-bottom:.35rem; border-bottom:1px solid currentColor;
  transition:gap .3s var(--e-out), opacity .3s var(--e);
}
.link-u:hover{ gap:.95rem; }
.on-dark .link-u{ color:var(--blu-luce); }

/* =========================================================================
   Segnaposto fotografico — sostituire con foto originali Vera Napoli
   ========================================================================= */
.slot{
  position:relative; overflow:hidden; background:var(--ink-2);
  border-radius:var(--r);
  display:grid; place-items:center; isolation:isolate;
  aspect-ratio:var(--ar,4/3);
}
.slot::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(62,141,255,.42) 0%, transparent 62%),
    radial-gradient(100% 80% at 88% 96%, rgba(1,104,244,.34) 0%, transparent 60%),
    linear-gradient(158deg,#0B1B2E 0%,#07111F 52%,#0A1930 100%);
}
.slot::after{ /* trama tecnica finissima */
  content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(85% 85% at 50% 50%, #000 30%, transparent 100%);
}
.slot__in{
  position:relative; z-index:2; text-align:center; padding:1.75rem;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  max-width:32ch;
}
.slot__mark{ width:clamp(84px,16%,150px); opacity:.5; }
.slot__txt{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.72); line-height:1.7; margin:0;
}
.slot__note{
  font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0;
  font-size:1rem; color:rgba(255,255,255,.42); display:block; margin-top:.3rem;
}
.slot--wide{ --ar:16/9; }
.slot--tall{ --ar:3/4; }
.slot--sq{ --ar:1/1; }
.slot--hero{ --ar:auto; height:100%; }

/* una foto dentro di uno .slot va SOPRA il fondo del segnaposto,
   altrimenti ::before/::after (z-index 0 e 1) la coprono */
.slot > .foto{
  position:relative; z-index:2;
  width:100%; height:100%; aspect-ratio:auto; border-radius:inherit;
}

/* Fotografie originali del ristorante — stesse proporzioni dei segnaposto */
.foto{
  display:block; width:100%; height:auto;
  aspect-ratio:var(--ar,4/3); object-fit:cover; object-position:center;
  border-radius:var(--r); background:var(--ink-2);
}
.foto--wide{ --ar:16/9; }
.foto--tall{ --ar:3/4; }
.foto--sq{ --ar:1/1; }
.foto--fill{ aspect-ratio:auto; height:100%; }
/* Solo dove il contenitore ha già un'altezza propria l'immagine può uscire dal flusso.
   Nella galleria NO: lì è l'immagine stessa a dare l'altezza alla cella. */
.banda__media .foto,
.hero__media .foto{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.g-item{ position:relative; }
.g-item .foto{ --ar:1/1; width:100%; height:100%; border-radius:0; transition:transform .8s var(--e-out); }
.g-item:hover .foto{ transform:scale(1.035); }
.ig .foto{ transition:transform .7s var(--e-out); }
.ig a:hover .foto{ transform:scale(1.05); }
/* didascalia discreta sotto le foto della sezione storia */
.foto-cap{
  display:block; margin-top:.6rem; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--testo-soft);
}
.on-dark .foto-cap{ color:#8FA6BB; }

/* =========================================================================
   Header
   ========================================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--mx);
  transition:background .45s var(--e), box-shadow .45s var(--e), padding .45s var(--e), border-color .45s var(--e);
  border-bottom:1px solid transparent;
}
.header--solid{
  background:rgba(248,248,246,.93);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--grigio-2);
  padding-block:.7rem;
}
.header__logo{ display:block; flex:none; line-height:0; }
.header__logo img{ height:clamp(40px,4.4vw,58px); width:auto; transition:height .45s var(--e); }
.header--solid .header__logo img{ height:clamp(36px,3.6vw,48px); }
.logo--w{ display:block; } .logo--b{ display:none; }
.header--solid .logo--w{ display:none; } .header--solid .logo--b{ display:block; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); margin-left:auto; }
.nav a{
  text-decoration:none; font-size:.79rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; position:relative; padding-block:.35rem;
  white-space:nowrap;
  transition:color .3s var(--e), opacity .3s var(--e);
}
.header--solid .nav a{ color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ color:var(--blu-luce); }
.header--solid .nav a[aria-current="page"]{ color:var(--blu); }

.lang{ display:flex; align-items:center; gap:.1rem; margin-left:.4rem; }
.lang button, .lang a{
  background:none; border:0; cursor:pointer; padding:.35rem .45rem;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; color:#fff; opacity:.55;
  text-decoration:none; transition:opacity .3s var(--e);
}
.header--solid .lang button, .header--solid .lang a{ color:var(--ink); }
.lang button[aria-current="true"], .lang a[aria-current="true"]{ opacity:1; }
.lang button[aria-disabled="true"]{ cursor:not-allowed; }
.lang button:not([aria-disabled="true"]):hover, .lang a:hover{ opacity:1; }
.lang__sep{ opacity:.4; font-size:.7rem; color:#fff; }
.header--solid .lang__sep{ color:var(--ink); }

.header .btn{ padding:.8rem 1.5rem; min-height:44px; font-size:.76rem; }
.header--solid .btn--light{ --fg:var(--ink); --bd:var(--grigio-2); }

.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:48px; height:48px; padding:0; position:relative; z-index:320;
}
.burger span{
  position:absolute; left:11px; width:26px; height:1.5px; background:#fff;
  transition:transform .4s var(--e-out), opacity .25s var(--e), background .3s var(--e);
}
.burger span:nth-child(1){ top:19px; } .burger span:nth-child(2){ top:27px; }
.header--solid .burger span{ background:var(--ink); }
body.menu-open .burger span{ background:#fff; }
body.menu-open .burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* menù mobile a schermo intero */
.mobile-nav{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--mx) 8rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-out);
  visibility:hidden;
  overflow-y:auto;
}
.mobile-nav[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
.mobile-nav::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 60% at 80% 10%, rgba(1,104,244,.35), transparent 65%);
  pointer-events:none;
}
.mobile-nav ol{ list-style:none; margin:0; padding:0; position:relative; }
.mobile-nav li{
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--e), transform .6s var(--e-out);
}
.mobile-nav[data-open="true"] li{ opacity:1; transform:none; }
.mobile-nav li:nth-child(1){ transition-delay:.1s } .mobile-nav li:nth-child(2){ transition-delay:.15s }
.mobile-nav li:nth-child(3){ transition-delay:.2s } .mobile-nav li:nth-child(4){ transition-delay:.25s }
.mobile-nav li:nth-child(5){ transition-delay:.3s } .mobile-nav li:nth-child(6){ transition-delay:.35s }
.mobile-nav li:nth-child(7){ transition-delay:.4s }
.mobile-nav a{
  display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; text-decoration:none;
  font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); color:#fff; line-height:1.15;
}
.mobile-nav a span{
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.2em;
  color:var(--blu-luce); flex:none;
}
.mobile-nav__foot{
  position:relative; margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.75rem;
  opacity:0; transition:opacity .5s var(--e) .45s;
}
.mobile-nav[data-open="true"] .mobile-nav__foot{ opacity:1; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:9rem 0 clamp(2.5rem,5vw,4rem); overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media .slot{ height:100%; border-radius:0; }
.hero__media .slot::before{
  background:
    radial-gradient(130% 100% at 22% 0%, rgba(62,141,255,.5) 0%, transparent 58%),
    radial-gradient(110% 90% at 92% 100%, rgba(1,104,244,.42) 0%, transparent 55%),
    linear-gradient(160deg,#0A1A2D 0%,#07111F 55%,#0B1D34 100%);
}
.hero__media .slot__in{ transform:translateY(-8vh); }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(4,10,18,.88) 0%, rgba(4,10,18,.42) 42%, rgba(4,10,18,.5) 100%);
}
/* il filo blu — tratto continuo ispirato allo swash del logo */
.filo{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%; height:100%; }
.filo path{
  fill:none; stroke:var(--blu-luce); stroke-width:1.4; stroke-linecap:round;
  opacity:.75;
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:filo 2.6s var(--e-out) .35s forwards;
}
@keyframes filo{ to{ stroke-dashoffset:0; } }

.hero__body{ position:relative; z-index:3; width:100%; }
.hero__tag{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; margin-bottom:clamp(1.2rem,2.5vw,2rem);
}
.hero__tag i{ width:5px; height:5px; border-radius:50%; background:var(--blu-luce); flex:none; }
.hero h1{ color:#fff; max-width:16ch; }
.hero h1 em{ font-style:italic; color:var(--blu-luce); }
.hero__sub{
  margin-top:clamp(1.4rem,3vw,2.2rem); max-width:52ch;
  font-size:clamp(1.05rem,.98rem + .5vw,1.35rem); line-height:1.55; color:#D5E0EC;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:clamp(1.8rem,3.5vw,2.6rem); }
.hero__foot{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center;
  font-size:.8rem; letter-spacing:.05em; color:#A9BCCE;
}
.hero__foot strong{ color:#fff; font-weight:600; }
.hero__foot a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.hero__foot a:hover{ border-bottom-color:#fff; }

.hero-anim > *{ opacity:0; transform:translateY(26px); }
html.js .hero-anim > *{ animation:heroIn .95s var(--e-out) forwards; }
html:not(.js) .hero-anim > *{ opacity:1; transform:none; }
.hero-anim > *:nth-child(1){ animation-delay:.15s } .hero-anim > *:nth-child(2){ animation-delay:.27s }
.hero-anim > *:nth-child(3){ animation-delay:.39s } .hero-anim > *:nth-child(4){ animation-delay:.51s }
.hero-anim > *:nth-child(5){ animation-delay:.63s }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* =========================================================================
   Fascia reputazione
   ========================================================================= */
.rep{ background:var(--ink); color:#fff; padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem); }
.rep__grid{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.rep__item{
  padding:1.4rem clamp(1rem,2.2vw,2.2rem);
  border-left:1px solid rgba(255,255,255,.13);
}
.rep__item:first-child{ border-left:0; padding-left:0; }
.rep__n{
  font-family:var(--serif); font-size:clamp(2.6rem,1.6rem + 2.6vw,4rem);
  line-height:1; color:#fff; display:block; letter-spacing:-.02em;
}
.rep__n small{ font-size:.42em; color:var(--blu-luce); margin-left:.15em; }
.rep__l{
  display:block; margin-top:.6rem; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#8FA6BB; line-height:1.6;
}
.rep__item a{ color:var(--blu-luce); text-decoration:none; border-bottom:1px solid transparent; }
.rep__item a:hover{ border-bottom-color:currentColor; }
.rep__note{
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.13);
  font-size:.76rem; color:#7C8FA3; display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
}

/* =========================================================================
   Sezioni generiche
   ========================================================================= */
.sec{ padding:clamp(4.5rem,9vw,9rem) 0; position:relative; }
.sec--paper{ background:var(--carta); }
.sec--white{ background:var(--bianco); }
.sec--grey{ background:var(--grigio); }
.sec--ink{ background:var(--ink); }
.sec--blu{ background:var(--blu); }

.sec__head{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec__head--wide{ max-width:none; display:grid; gap:clamp(1.5rem,3vw,4rem); grid-template-columns:1fr; }
@media (min-width:900px){
  .sec__head--wide{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; }
}

/* ---- Storia (composizione asimmetrica) -------------------------------- */
.storia{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:960px){
  .storia{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(3rem,6vw,6rem); }
}
.storia__media{ position:relative; }
.storia__media .slot--tall,
.storia__media .foto--tall{ width:100%; }
.storia__media .slot--sq,
.storia__media .foto--sq{
  position:absolute; right:-8%; bottom:-10%; width:52%;
  border:8px solid var(--carta); box-shadow:0 30px 60px -30px rgba(7,17,31,.5);
}
@media (max-width:959px){
  .storia__media .slot--sq,
  .storia__media .foto--sq{ position:static; width:100%; margin-top:1rem; border:0; box-shadow:none; }
}
.storia__txt{ padding-top:clamp(0rem,2vw,2rem); }
.storia__txt h2{ margin-bottom:1.6rem; }
.storia__quote{
  margin:2.2rem 0; padding-left:1.6rem; border-left:2px solid var(--blu);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem); line-height:1.4; color:var(--ink);
}
.storia__quote cite{ display:block; margin-top:.8rem; font:600 .74rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--testo-soft); font-style:normal; }

/* ---- Bande Mare / Terra / Forno --------------------------------------- */
.bande{ border-top:1px solid rgba(255,255,255,.14); }
.banda{
  border-bottom:1px solid rgba(255,255,255,.14);
  display:grid; gap:0; align-items:stretch;
  grid-template-columns:1fr;
  position:relative;
}
@media (min-width:900px){
  .banda{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .banda:nth-child(even) .banda__media{ order:-1; }
}
.banda__txt{
  padding:clamp(2.4rem,5vw,4.5rem) clamp(0rem,3vw,3.5rem) clamp(2.4rem,5vw,4.5rem) 0;
  display:flex; flex-direction:column; justify-content:center;
}
@media (min-width:900px){
  .banda:nth-child(even) .banda__txt{ padding-left:clamp(0rem,3vw,3.5rem); padding-right:0; }
}
.banda__n{
  font-family:var(--serif); font-size:.95rem; color:var(--blu-luce);
  letter-spacing:.1em; margin-bottom:1rem; display:block;
}
.banda__txt h3{ color:#fff; margin-bottom:1.1rem; }
.banda__txt p{ color:#B8C7D6; max-width:46ch; }
.banda__list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.15rem; }
.banda__list li{
  padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.92rem; color:#DCE5EE; display:flex; align-items:center; gap:.8rem;
  transition:color .3s var(--e), padding-left .35s var(--e-out);
}
.banda__list li::before{
  content:""; width:4px; height:4px; border-radius:50%; background:var(--blu-luce); flex:none;
  transition:transform .35s var(--e-out);
}
.banda__list li:hover{ color:#fff; padding-left:.5rem; }
.banda__list li:hover::before{ transform:scale(1.8); }
.banda__media{ position:relative; min-height:clamp(260px,42vw,520px); overflow:hidden; }
.banda__media .slot{ position:absolute; inset:0; border-radius:0; height:100%; }

/* ---- Impasti / pizza --------------------------------------------------- */
.impasti{ display:grid; gap:clamp(1.8rem,3.5vw,3.5rem); }
@media (min-width:960px){ .impasti{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; } }
.impasti__nav{ display:flex; flex-direction:column; gap:0; }
@media (max-width:959px){
  .impasti__nav{ flex-direction:row; overflow-x:auto; gap:.5rem; padding-bottom:.5rem;
    scrollbar-width:none; -ms-overflow-style:none; }
  .impasti__nav::-webkit-scrollbar{ display:none; }
}
.impasti__btn{
  background:none; border:0; border-top:1px solid var(--grigio-2);
  padding:1.15rem .5rem 1.15rem 0; text-align:left; cursor:pointer;
  font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .9vw,2rem); line-height:1.1;
  color:var(--testo-soft); display:flex; align-items:center; gap:1rem;
  transition:color .3s var(--e), padding-left .4s var(--e-out);
  white-space:nowrap;
}
.impasti__btn:last-child{ border-bottom:1px solid var(--grigio-2); }
.impasti__btn i{
  width:0; height:1px; background:var(--blu); flex:none;
  transition:width .45s var(--e-out);
}
.impasti__btn:hover{ color:var(--ink); }
.impasti__btn[aria-selected="true"]{ color:var(--blu); }
.impasti__btn[aria-selected="true"] i{ width:2rem; }
@media (max-width:959px){
  .impasti__btn{ border:1px solid var(--grigio-2); border-radius:100px;
    padding:.6rem 1.1rem; font-size:1.05rem; font-family:var(--sans); font-weight:600; }
  .impasti__btn:last-child{ border-bottom:1px solid var(--grigio-2); }
  .impasti__btn i{ display:none; }
  .impasti__btn[aria-selected="true"]{ background:var(--blu); color:#fff; border-color:var(--blu); }
}
.impasti__panel{ display:grid; gap:clamp(1.2rem,2.5vw,2.2rem); }
@media (min-width:640px){ .impasti__panel{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; } }
.impasti__panel[hidden]{ display:none; }
.impasti__panel h3{ margin-bottom:.9rem; }
.impasti__panel .slot{ --ar:4/5; }
.impasti__meta{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--grigio-2);
  font-size:.8rem; letter-spacing:.06em; color:var(--testo-soft);
}
html.js .impasti__panel:not([hidden]){ animation:fadeUp .5s var(--e-out); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---- Senza glutine ---------------------------------------------------- */
.gluten{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (min-width:900px){ .gluten{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.gluten__box{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:clamp(1.5rem,3vw,2.4rem);
}
.gluten__box h3{ font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); margin-bottom:.9rem; }
.gluten__box p{ color:#B8C7D6; font-size:.98rem; }
.gluten__box .btn{ margin-top:1.2rem; }
.gluten__tags{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.gluten__tags li{
  border:1px solid rgba(255,255,255,.22); border-radius:100px; padding:.42rem 1rem;
  font-size:.79rem; letter-spacing:.05em; color:#DCE5EE;
}

/* ---- Piatti simbolo (indice editoriale) ------------------------------- */
.piatti{ position:relative; }
.piatti__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--grigio-2); }
.piatti__row{ border-bottom:1px solid var(--grigio-2); }
.piatti__row a{
  display:grid; gap:.35rem 1.5rem; align-items:baseline; text-decoration:none;
  padding:clamp(1.2rem,2.4vw,2rem) 0;
  grid-template-columns:auto 1fr;
  transition:padding-left .5s var(--e-out), color .35s var(--e);
}
@media (min-width:820px){
  .piatti__row a{ grid-template-columns:5rem minmax(0,1.15fr) minmax(0,1fr) auto; align-items:center; }
}
.piatti__row a:hover{ padding-left:clamp(.5rem,1.5vw,1.5rem); }
.piatti__i{ font-family:var(--serif); font-size:1rem; color:var(--blu); }
.piatti__nome{
  font-family:var(--serif); font-size:clamp(1.5rem,1.15rem + 1.5vw,2.6rem);
  line-height:1.08; color:var(--ink); grid-column:2;
}
@media (min-width:820px){ .piatti__nome{ grid-column:auto; } }
.piatti__desc{ font-size:.93rem; color:var(--testo-soft); grid-column:2; }
@media (min-width:820px){ .piatti__desc{ grid-column:auto; } }
.piatti__cat{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blu); grid-column:2;
}
@media (min-width:820px){ .piatti__cat{ grid-column:auto; text-align:right; } }
/* anteprima che segue il cursore (solo desktop, non intrusiva) */
.piatti__peek{
  position:fixed; top:0; left:0; width:280px; z-index:120; pointer-events:none;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.92);
  transition:opacity .35s var(--e), transform .45s var(--e-out);
  display:none;
}
@media (min-width:1024px) and (hover:hover){ .piatti__peek{ display:block; } }
.piatti__peek[data-on="true"]{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.piatti__peek .slot{ --ar:4/5; box-shadow:0 40px 80px -40px rgba(7,17,31,.75); }

/* ---- Piatti simbolo (griglia di card) --------------------------------- */
.psimbolo{
  display:grid; gap:clamp(1.2rem,2.5vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .psimbolo{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .psimbolo{ grid-template-columns:repeat(3,1fr); } }
.pcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--bianco); border:1px solid var(--grigio-2); border-radius:var(--r);
  overflow:hidden; isolation:isolate;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .4s var(--e);
}
.pcard:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(7,17,31,.5); border-color:var(--grigio-2); }
.pcard__img{ display:block; overflow:hidden; }
.pcard__img .foto{ --ar:4/3; width:100%; border-radius:0; transition:transform .8s var(--e-out); }
.pcard:hover .pcard__img .foto{ transform:scale(1.05); }
.pcard__body{ display:block; padding:clamp(1.1rem,2vw,1.5rem); }
.pcard__cat{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blu); margin-bottom:.6rem;
}
.pcard__name{
  display:block; font-family:var(--serif); font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);
  line-height:1.1; color:var(--ink); margin-bottom:.5rem;
}
.pcard__desc{ display:block; font-size:.92rem; color:var(--testo-soft); line-height:1.5; }

/* ---- Galleria --------------------------------------------------------- */
.galleria{
  display:grid; gap:clamp(.6rem,1.2vw,1.1rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .galleria{ grid-template-columns:repeat(4,1fr); } }
.galleria .g-item{ grid-column:span 1; }
.galleria .g-item--big{ grid-column:span 2; }
@media (min-width:760px){
  .galleria .g-item--big{ grid-column:span 2; grid-row:span 2; }
}
.g-item{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-2); }
.g-item .slot{ height:100%; transition:transform .8s var(--e-out); }
.g-item--big .slot{ --ar:1/1; }
.g-item:hover .slot{ transform:scale(1.035); }

/* ---- Recensioni ------------------------------------------------------- */
.rec{ position:relative; }
.rec__track{
  display:flex; gap:clamp(1rem,2vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.5rem; margin-inline:calc(var(--mx) * -1); padding-inline:var(--mx);
  scrollbar-width:none; -ms-overflow-style:none;
}
.rec__track::-webkit-scrollbar{ display:none; }
.rec__card{
  flex:0 0 min(88vw,420px); scroll-snap-align:start;
  background:var(--bianco); border:1px solid var(--grigio-2); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem); display:flex; flex-direction:column; gap:1.1rem;
}
.sec--ink .rec__card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }
.rec__stars{ color:var(--blu); font-size:.95rem; letter-spacing:.15em; }
.sec--ink .rec__stars{ color:var(--blu-luce); }
.rec__txt{
  font-family:var(--serif); font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  line-height:1.42; color:var(--ink); margin:0; flex:1;
}
.sec--ink .rec__txt{ color:#fff; }
.rec__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem;
  padding-top:1rem; border-top:1px solid var(--grigio-2);
  font-size:.78rem; color:var(--testo-soft);
}
.sec--ink .rec__meta{ border-top-color:rgba(255,255,255,.15); color:#93A6B9; }
.rec__meta strong{ color:var(--ink); font-weight:700; }
.sec--ink .rec__meta strong{ color:#fff; }
.rec__src{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blu); border:1px solid currentColor; border-radius:100px; padding:.18rem .6rem;
}
.sec--ink .rec__src{ color:var(--blu-luce); }
.rec__meta a{ margin-left:auto; color:var(--blu); text-decoration:none; border-bottom:1px solid transparent; }
.sec--ink .rec__meta a{ color:var(--blu-luce); }
.rec__meta a:hover{ border-bottom-color:currentColor; }
.rec__ctrl{ display:flex; gap:.6rem; margin-top:1.5rem; }
.rec__ctrl button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--grigio-2);
  background:none; cursor:pointer; display:grid; place-items:center;
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.sec--ink .rec__ctrl button{ border-color:rgba(255,255,255,.25); color:#fff; }
.rec__ctrl button:hover{ background:var(--blu); border-color:var(--blu); color:#fff; }
.rec__ctrl button svg{ width:18px; height:18px; }

/* ---- Instagram -------------------------------------------------------- */
.ig{ display:grid; gap:clamp(.6rem,1.2vw,1rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .ig{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .ig{ grid-template-columns:repeat(6,1fr); } }
.ig a{ display:block; position:relative; overflow:hidden; border-radius:var(--r); text-decoration:none; }
.ig .slot{ --ar:1/1; transition:transform .7s var(--e-out); }
.ig a:hover .slot{ transform:scale(1.05); }
.ig a::after{
  content:""; position:absolute; inset:0; background:rgba(1,104,244,0);
  transition:background .4s var(--e);
}
.ig a:hover::after{ background:rgba(1,104,244,.28); }
.ig__tag{
  position:absolute; left:.7rem; bottom:.7rem; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem; border-radius:100px;
  background:rgba(7,17,31,.62); color:#fff;
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transform:translateY(6px); transition:opacity .35s var(--e), transform .35s var(--e-out);
}
.ig a:hover .ig__tag, .ig a:focus-visible .ig__tag{ opacity:1; transform:none; }
.ig__tag::before{
  content:""; width:11px; height:11px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.social-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.8rem,3vw,2.5rem); }
.social-row a{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  border:1px solid var(--grigio-2); border-radius:100px; padding:.7rem 1.3rem;
  font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink);
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.on-dark .social-row a{ border-color:rgba(255,255,255,.25); color:#fff; }
.social-row a:hover{ background:var(--blu); border-color:var(--blu); color:#fff; }
.social-row svg{ width:17px; height:17px; flex:none; }

/* ---- Contatti --------------------------------------------------------- */
.contatti{ display:grid; gap:clamp(2rem,4vw,4rem); }
@media (min-width:980px){ .contatti{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.info-list{ list-style:none; margin:0 0 2rem; padding:0; }
.info-list li{ padding:1.15rem 0; border-bottom:1px solid var(--grigio-2); display:grid; gap:.25rem; }
.on-dark .info-list li{ border-bottom-color:rgba(255,255,255,.15); }
.info-list dt,.info-list b{
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blu); display:block;
}
.on-dark .info-list b{ color:var(--blu-luce); }
.info-list span,.info-list a{ font-size:1.05rem; color:var(--ink); text-decoration:none; }
.on-dark .info-list span,.on-dark .info-list a{ color:#fff; }
.info-list a:hover{ text-decoration:underline; }
.orari{ margin:0; padding:0; list-style:none; font-size:.98rem; }
.orari li{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border:0; }
.mappa{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--grigio);
  aspect-ratio:4/3; min-height:320px;
}
.mappa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.nota{
  font-size:.82rem; color:var(--testo-soft); margin-top:1rem;
  padding:.9rem 1.1rem; background:var(--grigio); border-left:2px solid var(--blu); border-radius:2px;
}
.on-dark .nota{ background:rgba(255,255,255,.06); color:#A9BCCE; }

/* ---- Blocco CTA finale ------------------------------------------------- */
.cta-fin{ text-align:center; }
.cta-fin h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-fin p{ color:rgba(255,255,255,.85); max-width:52ch; margin:1.4rem auto 2.2rem; }
.cta-fin .hero__cta{ justify-content:center; }

/* =========================================================================
   Menù
   ========================================================================= */
.menu-hero{
  background:var(--ink); color:#fff; padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,5rem);
  position:relative; overflow:hidden;
}
.menu-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 85% 0%, rgba(1,104,244,.38), transparent 62%);
  pointer-events:none;
}
.menu-hero__in{ position:relative; z-index:1; }
.menu-hero h1{ color:#fff; max-width:14ch; }
.menu-hero p{ color:#B8C7D6; max-width:56ch; margin-top:1.4rem; }
.avviso{
  margin-top:2rem; padding:1.2rem 1.4rem; border-radius:var(--r);
  background:rgba(1,104,244,.16); border:1px solid rgba(62,141,255,.4);
  color:#DCE5EE; font-size:.95rem; max-width:60ch;
}
.avviso strong{ color:#fff; }

/* si ferma sotto l'header fisso, non dietro */
.menu-nav{
  position:sticky; top:72px; z-index:150; background:rgba(248,248,246,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--grigio-2);
}
.menu-nav__in{
  display:flex; gap:.4rem; overflow-x:auto; padding:.7rem var(--mx);
  scrollbar-width:none; -ms-overflow-style:none;
}
.menu-nav__in::-webkit-scrollbar{ display:none; }
.menu-nav a{
  flex:none; text-decoration:none; padding:.55rem 1.05rem; border-radius:100px;
  font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--testo-soft);
  white-space:nowrap; transition:background .3s var(--e), color .3s var(--e);
}
.menu-nav a:hover{ background:var(--grigio); color:var(--ink); }
.menu-nav a.is-cur{ background:var(--blu); color:#fff; }

.menu-sec{ padding:clamp(3rem,6vw,5rem) 0 0; scroll-margin-top:8.5rem; }
.menu-sec__head{
  display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
  padding-bottom:1.2rem; border-bottom:2px solid var(--ink); margin-bottom:.5rem;
}
.menu-sec__head h2{ font-size:clamp(1.9rem,1.3rem + 2.2vw,3.2rem); }
.menu-sec__head p{ font-size:.9rem; color:var(--testo-soft); margin:0; max-width:44ch; }
.menu-list{ list-style:none; margin:0; padding:0; }
/* sezioni lunghe (pizze, pinse, birre) su due colonne da tablet in su */
@media (min-width:900px){
  .menu-list--2col{ column-count:2; column-gap:clamp(2rem,4vw,4rem); }
  .menu-list--2col .piatto{ break-inside:avoid; }
}
.piatto__n sup{ font-size:.55em; color:var(--blu); cursor:help; }
.nota-ast{ font-size:.78rem; color:var(--testo-soft); max-width:80ch; margin:0 0 1rem; }
.piatto{
  display:grid; gap:.15rem .8rem; padding:1.15rem 0;
  border-bottom:1px solid var(--grigio-2);
  grid-template-columns:1fr auto;
}
.piatto__n{
  font-family:var(--serif); font-size:clamp(1.25rem,1.1rem + .6vw,1.7rem);
  line-height:1.15; color:var(--ink); grid-column:1;
}
.piatto__p{
  font-family:var(--serif); font-size:clamp(1.1rem,1rem + .45vw,1.45rem);
  color:var(--blu); grid-column:2; grid-row:1; white-space:nowrap; align-self:baseline;
}
.piatto__p[data-vuoto]{ color:var(--grigio-2); }
.piatto__d{ grid-column:1/-1; font-size:.92rem; color:var(--testo-soft); max-width:62ch; }
.piatto__t{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:100px; padding:.2rem .62rem; border:1px solid currentColor;
}
.tag--sg{ color:#0A7B54; }
.tag--veg{ color:#4A7A15; }
.tag--pic{ color:#B3401A; }
.tag--pesce{ color:var(--blu); }
.legenda{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:2rem; padding:1.2rem 0;
  border-top:1px solid var(--grigio-2); font-size:.82rem; color:var(--testo-soft);
  align-items:center;
}
.menu-foot{
  margin-top:clamp(3rem,6vw,5rem); padding:clamp(1.8rem,4vw,3rem);
  background:var(--grigio); border-radius:var(--r);
}
.menu-foot h3{ margin-bottom:.8rem; }
.menu-foot p{ color:var(--testo-soft); max-width:60ch; }
.menu-agg{ font-size:.8rem; color:var(--testo-soft); margin-top:1.2rem; }

/* =========================================================================
   Pagine interne
   ========================================================================= */
.page-hero{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  padding:clamp(8rem,14vw,12rem) 0 clamp(3.5rem,7vw,6rem);
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 70% at 88% 5%, rgba(1,104,244,.36), transparent 60%);
}
.page-hero__in{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; max-width:15ch; }
.page-hero p{ color:#B8C7D6; max-width:58ch; margin-top:1.5rem; font-size:1.1rem; }
.crumbs{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#7C8FA3;
  margin-bottom:1.6rem;
}
.crumbs a{ color:#B8C7D6; text-decoration:none; }
.crumbs a:hover{ color:#fff; }

.prosa{ max-width:74ch; }
.prosa h2{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); margin:2.8rem 0 1rem; }
.prosa h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem); margin:2rem 0 .7rem; }
.prosa ul,.prosa ol{ padding-left:1.3rem; margin:0 0 1.2rem; }
.prosa li{ margin-bottom:.5rem; }
.prosa a{ color:var(--blu); }
.prosa table{ width:100%; border-collapse:collapse; margin:1.2rem 0 2rem; font-size:.92rem; }
.prosa th,.prosa td{ text-align:left; padding:.8rem .6rem; border-bottom:1px solid var(--grigio-2); vertical-align:top; }
.prosa th{ font-weight:700; color:var(--ink); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background:var(--ink); color:#A9BCCE; padding:clamp(3.5rem,7vw,6rem) 0 2rem; }
.footer__top{
  display:grid; gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(255,255,255,.13);
}
@media (min-width:820px){ .footer__top{ grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); } }
.footer__logo img{ width:clamp(180px,20vw,240px); margin-bottom:1.4rem; }
.footer__brand p{ font-size:.92rem; line-height:1.7; max-width:38ch; }
.footer h2{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; margin:0 0 1.1rem; line-height:1.6;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer a{ color:#A9BCCE; text-decoration:none; font-size:.92rem; transition:color .3s var(--e); }
.footer a:hover{ color:#fff; }
.footer__bot{
  padding-top:1.8rem; display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  align-items:center; font-size:.79rem; color:#6E8299;
}
.footer__bot a{ font-size:.79rem; color:#6E8299; }
.footer__bot .sep{ margin-left:auto; }
.footer__bot button{
  background:none; border:0; color:#6E8299; cursor:pointer; font-size:.79rem;
  text-decoration:underline; padding:.32rem 0;
}
.footer__bot button:hover{ color:#fff; }

/* =========================================================================
   Barra mobile
   ========================================================================= */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:180;
  display:none; background:rgba(7,17,31,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .5s var(--e-out);
}
.mbar[data-on="true"]{ transform:none; }
@media (max-width:900px){ .mbar{ display:block; } body{ padding-bottom:0; } }
body.has-mbar{ }
.mbar__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.mbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem;
  padding:.7rem .3rem .8rem; text-decoration:none; color:#B8C7D6;
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.1);
}
.mbar a:first-child{ border-left:0; }
.mbar a svg{ width:19px; height:19px; }
.mbar a.is-main{ background:var(--blu); color:#fff; }
@media (max-width:900px){
  .site-footer{ padding-bottom:calc(4.8rem + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Cookie
   ========================================================================= */
.cookie{
  position:fixed; left:1rem; right:1rem; z-index:260;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  max-width:520px; background:#fff; color:var(--testo);
  border:1px solid var(--grigio-2); border-radius:6px;
  box-shadow:0 30px 70px -25px rgba(7,17,31,.5);
  padding:clamp(1.2rem,3vw,1.7rem);
  transform:translateY(140%); transition:transform .6s var(--e-out);
}
.cookie[data-on="true"]{ transform:none; }
@media (max-width:900px){ .cookie{ bottom:calc(4.6rem + env(safe-area-inset-bottom)); } }
.cookie h2{ font-size:1.25rem; margin-bottom:.6rem; }
.cookie p{ font-size:.88rem; line-height:1.6; color:var(--testo-soft); }
.cookie p a{ color:var(--blu); }
.cookie__btns{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.cookie__btns .btn{ padding:.8rem 1.3rem; min-height:46px; font-size:.75rem; flex:1 1 auto; }
.cookie__opts{ margin-top:1.1rem; display:grid; gap:.75rem; }
.cookie__opts[hidden]{ display:none; }
.cookie__opt{
  display:flex; gap:.8rem; align-items:flex-start; padding:.85rem;
  border:1px solid var(--grigio-2); border-radius:4px; font-size:.85rem;
}
.cookie__opt input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--blu); flex:none; }
.cookie__opt b{ display:block; font-size:.88rem; color:var(--ink); }
.cookie__opt span{ color:var(--testo-soft); font-size:.8rem; line-height:1.5; }
.cookie__link{
  background:none; border:0; padding:.35rem 0; margin-top:.7rem; cursor:pointer;
  font-size:.8rem; color:var(--testo-soft); text-decoration:underline;
}

/* =========================================================================
   Mappa con caricamento su richiesta (nessun cookie prima del consenso)
   ========================================================================= */
.mappa__ask{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:.8rem;
  padding:clamp(1.4rem,3vw,2.4rem); background:var(--ink); color:#B8C7D6;
}
.mappa__ask::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 70% at 15% 10%, rgba(62,141,255,.3), transparent 62%),
    linear-gradient(160deg,#0B1B2E,#07111F);
}
.mappa__ask > *{ position:relative; z-index:1; }
.mappa__ask strong{ color:#fff; font-family:var(--serif); font-size:1.5rem; font-weight:400; }
.mappa__ask p{ font-size:.9rem; max-width:38ch; margin:0; }
.mappa__ask .link-u{ color:var(--blu-luce); }

/* =========================================================================
   Lightbox galleria
   ========================================================================= */
.lb{
  position:fixed; inset:0; z-index:400; background:rgba(4,10,18,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; padding:clamp(1.5rem,5vw,4rem);
}
.lb[hidden]{ display:none; }
.lb__stage{ width:min(92vw,900px); max-height:76vh; display:flex; justify-content:center; }
.lb__stage .slot{ width:100%; --ar:4/3; }
.lb__stage .foto{
  width:auto; max-width:100%; height:auto; max-height:76vh;
  aspect-ratio:auto; object-fit:contain; border-radius:var(--r);
}
.lb__cap{
  color:#B8C7D6; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  margin:0; text-align:center;
}
.lb__x{
  position:absolute; top:1rem; right:1rem; width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .3s var(--e);
}
.lb__x:hover{ background:var(--blu); border-color:var(--blu); }

/* =========================================================================
   Reveal
   ========================================================================= */
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--e-out), transform .95s var(--e-out);
}
html.js .reveal-d1.is-in{ transition-delay:.09s }
html.js .reveal-d2.is-in{ transition-delay:.18s }
html.js .reveal-d3.is-in{ transition-delay:.27s }

@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; }
  html.js .reveal.is-in{ transition:none; }
  html.js .hero-anim > *{ animation:none; opacity:1; transform:none; }
  .filo path{ animation:none; stroke-dashoffset:0; }
  html.js .impasti__panel:not([hidden]){ animation:none; }
  .btn:hover{ transform:none; }
  *{ scroll-behavior:auto !important; }
}

/* =========================================================================
   Responsive header
   ========================================================================= */
@media (max-width:1100px){
  .nav{ display:none; }
  .burger{ display:block; }
  .header .btn{ display:none; }
  .lang{ display:none; }
}
@media (max-width:520px){
  .rep__item{ border-left:0; border-top:1px solid rgba(255,255,255,.13); padding-inline:0; }
  .rep__item:first-child{ border-top:0; }
}
@media print{
  .header,.mbar,.cookie,.mobile-nav,.piatti__peek{ display:none !important; }
  body{ background:#fff; }
}

/* =========================================================================
   Correzioni bottoni
   ========================================================================= */
/* un .btn tiene sempre il proprio colore: dentro .prosa (e in ogni altro
   contenitore che colora i link) la regola sui link vinceva sul bianco */
a.btn{ color:var(--fg); }
/* l'icona dentro al bottone non aveva misura: senza questa regola l'SVG
   si espandeva e copriva la scritta */
.btn svg{ width:18px; height:18px; flex:none; }