/* ==========================================================================
   ALKEMIA — STYLE.CSS (REFactor)
   - Ordine gerarchico
   - Niente duplicati
   - RGBA validi
   - Menu: head centrato + tabs editoriali + search centrata
   - Ricerca: tabs disabled ultra-mute + sticky group head + sync tab--stuck
   ========================================================================== */
/* =====================================================================
   ALKEMIA — TUNING PANEL (JS) — modifiche autonome senza patch
   Obiettivo: regolare “quando” succedono le cose (offset/trigger/linee).
   Il JS qui mette classi e custom properties; il CSS decide “quanto”.

   REGOLE:
   - JS = QUANDO (soglie/linee/offset)
   - CSS = QUANTO (opacità, blur, trasformazioni, tempi)
   ===================================================================== */

/* -------------------------------------------------
   1) ANCHOR SCROLL (#eventi, #prenota, ecc.)
   -------------------------------------------------
   Cerca blocco: (function anchorScroll(){ ... })
   MANOPOLE:
   - ANCHOR_EXTRA_DESKTOP: atterraggio desktop (più grande = più giù)
   - ANCHOR_EXTRA_TABLET: atterraggio tablet/phone (più grande = più giù)
   - EXTRA_BY_ID: offset per singolo anchor
     esempi:
       eventi: -6   // più su (meno vuoto)
       eventi: +8   // più giù (più “in evidenza”)
   NOTE:
   - Se vedi “vuoto sopra” = extra troppo alto, abbassa ANCHOR_EXTRA_TABLET
------------------------------------------------- */

/* -------------------------------------------------
   2) RHYTHM — SCRITTE (position-based, perfette)
   -------------------------------------------------
   Cerca nel director RHYTHM:
   - RHY_ENTER_FROM_BOTTOM: linea di “accensione” dal basso (px dal bottom)
     più piccolo = si accende prima (es. 10 = quasi a ridosso del footer)
   - RHY_TOP_PAD / RHY_GONE_PAD / RHY_UNDERLINE_PAD:
     controllano DIM/GONE/underline vicino alla nav per le scritte
   NOTE:
   - HYST (isteresi) evita flicker; se tremola aumenta RHY_HYST (14->18)
------------------------------------------------- */

/* -------------------------------------------------
   3) RHYTHM — IMMAGINI (miscelazione/materia/ritmo)
   -------------------------------------------------
   Cerca parametri:
   - RHY_MEDIA_ENTER_FROM_BOTTOM: quando entra dal basso (top-based)
   - RHY_MEDIA_DIM_TOP: quando inizia DIM vicino nav (bottom-based)
   - RHY_MEDIA_GONE_TOP: quando sparisce (bottom-based)
   REGOLA D’ORO:
   - DIM_TOP dovrebbe essere > GONE_TOP
     (così hai spazio visibile tra “opaco” e “sparito”)
   ESEMPIO:
   - DIM_TOP = 340, GONE_TOP = 150 (il tuo set attuale “cinema”)
------------------------------------------------- */

/* -------------------------------------------------
   4) GALLERY — director loop-friendly (scene--gallery)
   -------------------------------------------------
   Cerca nel gallery director:
   - GAL_ENTER_FROM_BOTTOM: quando la card accende dal basso
   - GAL_DIM_TOP / GAL_GONE_TOP: linee vicino nav (bottom-based)
   - --gP (0..1): progress locale usato dal CSS per drift/tilt/lift
   Se vuoi che gallery sia “come RHYTHM”:
   - allinea GAL_* con RHY_MEDIA_* (stesse filosofie di linee)
------------------------------------------------- */

/* -------------------------------------------------
   5) “Conflitti” tipici (importante)
   -------------------------------------------------
   - GSAP reveal (.reveal) può sovrascrivere opacity/transform inline.
     Se un elemento è governato da Director (classi), escludilo dal reveal.
     Esempio già fatto: .rhythmMedia escluso dal reveal.
   - Se un effetto “non si vede”, controlla:
     (a) la classe viene aggiunta? (isGShown/isMediaShown ecc.)
     (b) il CSS usa quella classe?
------------------------------------------------- */

/* -------------------------------------------------
   6) Riduzione movimento (accessibilità)
   -------------------------------------------------
   prefers-reduced-motion:
   - anchor scroll: auto invece di smooth
   - animazioni: tienile leggere o disattivabili
   Se vuoi puoi centralizzare un flag:
   const prefersReduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
------------------------------------------------- */

/* ===== Theme tokens ===== */
:root{
  --bg: #0a0908;                 /* quasi nero, più caldo */
  --surface: #14110f;            /* antracite caldo */
  --text: #e9e3d8;               /* avorio */
  --muted: rgba(233,227,216,.70);
  --line: rgba(233,227,216,.14);
  --gold: #b68a1c;               /* Pantone 7556 C */

  /* CLS guardrail: una sola verità per altezza nav fixed */
  --navH: 58px;
  --corten: #5c3427;             /* Pantone 4695 C */

  /* ===== TUNE — Single Event Shot (CLS safe) =====
     Regola: NON usare min-height fisso aggressivo.
     Queste manopole controllano l'altezza della shot nel single evento. */
  --seShotHMin: 260px; /* minimo assoluto (phone) */
  --seShotHVw:  46vw;  /* risposta al viewport (tablet) */
  --seShotHMax: 420px; /* massimo (desktop) */


  /* (optional future) */
  --serif: ui-serif, Georgia, "Times New Roman", serif;

  /* ===== WP-friendly image tokens (HOME) =====
     Regola: ZERO fallback hardcoded.
     Se WP non imposta nulla => immagine = none (restano solo gradient/texture). */

  /* HERO */
  --img-home-hero: none;

  /* EVENTI */
  --img-home-event-1: none;
  --img-home-event-2: none;

  /* GALLERY */
  --img-home-gallery-1: none;
  --img-home-gallery-2: none;
  --img-home-gallery-3: none;

  /* RHYTHM (A/B/C) */
  --img-home-rhythm-1: none;
  --img-home-rhythm-2: none;
  --img-home-rhythm-3: none;

  /* MANIFESTO / MAP */
  --img-home-manifesto: none;
  --img-home-map: none;

  /* ===== WP-friendly image tokens (NON-HOME) ===== */
  --img-hub-bg: none;
  --img-menu-head: none;
  --img-eventi-head: none;

  /* shots (manifesto/rhythm/map) */
  --img-shot-manifesto: var(--img-home-manifesto);
  --img-shot-a: var(--img-home-rhythm-1);
  --img-shot-b: var(--img-home-rhythm-2);
  --img-shot-c: var(--img-home-rhythm-3);
  --img-shot-map: var(--img-home-map);
}

/* ===== Reset / base ===== */
*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

a,button,input,textarea,select{
  -webkit-tap-highlight-color: transparent;
}

html,body{ height:100%; }
html{
  -webkit-text-size-adjust: 100%;
  /* CLS guardrail (desktop): evita shift quando compare/scompare la scrollbar */
  scrollbar-gutter: stable;
}


body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(92,52,39,.16), transparent 60%),
    radial-gradient(900px 420px at 82% 12%, rgba(182,138,28,.05), transparent 62%),
    linear-gradient(180deg, rgba(10,9,8,1), rgba(8,7,6,1)),
    var(--bg);
  color:var(--text);

  /* NAV fixed: spazio globale semplice e stabile */
  padding-top: var(--navH);

  /* Sticky footer: se la pagina è “corta”, il footer va comunque giù */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Scrollbar (site-wide) — sottile, quasi trasparente, colore-su-colore ===== */
@media (min-width: 700px){
  html{
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(233,227,216,.16) transparent;
  }

  /* Chromium/Safari */
  body::-webkit-scrollbar{ width: 10px; }
  body::-webkit-scrollbar-track{ background: transparent; }
  body::-webkit-scrollbar-thumb{
    background: rgba(233,227,216,.12);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  body::-webkit-scrollbar-thumb:hover{
    background: rgba(233,227,216,.18);
    border: 3px solid transparent;
    background-clip: content-box;
  }
}


a{ color:inherit; text-decoration:none; }
.container{ width:min(1080px, 92vw); margin:0 auto; }

/* ======================================================================
   404 — minimal premium (centered)
   ====================================================================== */
.wp404Wrap{
  padding: 24px 0;
  min-height: calc(100svh - var(--navH) - 80px);
  display: grid;
  place-items: center;
}

.wp404Card{
  width: min(760px, 100%);
  text-align: center;
}

.wp404Top{
  max-width: 56ch;
  margin: 0 auto;
}

.wp404Eyebrow{
  color: rgba(233,227,216,.58);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 0 10px;
}

.wp404Title{
  /* usa la tua tipografia, ma con un filo più “poster” */
  letter-spacing: .06em;
}

.wp404Sub{
  margin: 12px auto 0;
  color: rgba(233,227,216,.72);
  line-height: 1.55;
  max-width: 54ch;
}

.wp404Actions{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ======================================================================
   WP FALLBACK PAGES (Privacy / Cookie / pagine semplici)
   ====================================================================== */
.wpFallback{
  margin: 26px 0 70px;
  padding: 22px 22px 26px;
  border-radius: 22px;
  border: 1px solid rgba(233,227,216,.14);
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(92,52,39,.14), transparent 58%),
    linear-gradient(180deg, rgba(17,19,24,.92), rgba(12,12,14,.92));
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.wpFallback__head{
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(233,227,216,.10);
}

.wpFallback__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: .02em;
  line-height: 1.08;
}

.wpFallback__content{
  color: rgba(233,227,216,.88);
  font-size: 15.5px;
  line-height: 1.62;
}

.wpFallback__content p{
  margin: 0 0 14px;
}

.wpFallback__content h2,
.wpFallback__content h3{
  margin: 18px 0 10px;
}

.wpFallback__content h2{
  font-size: 18px;
  letter-spacing: .02em;
}

.wpFallback__content h3{
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(233,227,216,.92);
}

.wpFallback__content ul,
.wpFallback__content ol{
  margin: 0 0 14px;
  padding-left: 18px;
}

.wpFallback__content li{
  margin: 6px 0;
}

.wpFallback__content a{
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(233,227,216,.40);
}

.wpFallback__content a:hover{
  text-decoration-color: rgba(233,227,216,.70);
}

.wpFallback__content strong{
  color: rgba(233,227,216,.95);
}

@media (max-width: 720px){
  .wpFallback{
    padding: 18px 16px 20px;
    border-radius: 18px;
    margin: 20px 0 54px;
  }
}

.muted{ color: var(--muted); }
h2{ margin:0 0 10px; font-size: 28px; letter-spacing:.02em; }
h3{ margin:0 0 8px; font-size: 16px; letter-spacing:.02em; }

/* ===== NAV (fixed, sempre visibile) ===== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;

  /* CLS guardrail: altezza fissa e prevedibile */
  height: var(--navH);

  backdrop-filter: blur(10px);
  background: rgba(11,12,15,.75);
  border-bottom:1px solid var(--line);
  z-index: 60;
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  /* CLS guardrail: niente padding che cambia con font swap */
  height: var(--navH);
  padding: 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;

  letter-spacing:.22em;
  font-weight:700;
  font-size:14px;
}

.brand__text{
  display:inline-block;
}

.brand__text--wordmark{
  line-height: 0;
}

.brandWordmarkImg{
  display:block;
  width: clamp(108px, 13vw, 150px);
  height: auto;
  filter:
    brightness(0) invert(92%) sepia(10%) saturate(310%) hue-rotate(356deg) brightness(102%) contrast(92%)
    drop-shadow(0 1px 0 rgba(0,0,0,.24))
    drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

@media (max-width: 640px){
  .brandWordmarkImg{
    width: clamp(96px, 24vw, 124px);
  }
}

.brand__mark{
  width:26px;
  height:26px;
  display:inline-grid;
  place-items:center;

  /* morph nav = Pantone 7556 C */
  color: var(--gold);
}

.brand__mark svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

/* Un SOLO path che fa morph (JS): stile corten, zero rotazioni */
.brand__mark path{
  fill:none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

  /* anti-rotazione / stabilità */
  transform-box: fill-box;
  transform-origin: center;

  /* glow coerente col gold Pantone */
  filter:
    drop-shadow(0 0 8px rgba(182,138,28,.22))
    drop-shadow(0 0 14px rgba(182,138,28,.10));
}


.nav__links{
  display:flex;
  gap:18px;
  align-items:center;
  color:var(--muted);

}

/* =========================================================
   Social icons (Header + Footer) — ultra luxury (near-invisible)
   ========================================================= */
.navSocial{
  display:flex;
  align-items:center;
  gap: 10px;
}

.footerSocial{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transform: translateY(1px);
}

.socialIconLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 34px;
  height: 34px;
  border-radius: 16px;

  /* hairline ultra fine */
  border: 1px solid rgba(233,227,216,.08);

  /* vetro quasi neutro + riflesso corten */
  background:
    radial-gradient(130% 120% at 18% 8%, rgba(92,52,39,.10), transparent 56%),
    linear-gradient(180deg, rgba(17,19,24,.42), rgba(10,10,10,.12));

  /* icona più “whisper” */
  color: rgba(233,227,216,.56);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 10px 28px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.035) inset;

  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.socialIcon{
  display:block;
}

@media (hover:hover) and (pointer:fine){
  .socialIconLink:hover{
    transform: translateY(-1px);

    border-color: rgba(92,52,39,.30);

    background:
      radial-gradient(130% 120% at 18% 8%, rgba(92,52,39,.14), transparent 56%),
      linear-gradient(180deg, rgba(22,20,16,.48), rgba(10,10,10,.10));

    color: rgba(233,227,216,.92);

    box-shadow:
      0 14px 40px rgba(0,0,0,.34),
      0 0 0 1px rgba(182,138,28,.08) inset,
      0 10px 32px rgba(182,138,28,.05);

    filter: saturate(1.03);
  }
}

.socialIconLink:focus-visible{
  outline: 2px solid rgba(182,138,28,.50);
  outline-offset: 4px;
}

/* Nav: ancora più “micro” */
.socialIconLink--nav{
  width: 32px;
  height: 32px;
  border-radius: 15px;

  border-color: rgba(233,227,216,.07);

  background:
    radial-gradient(130% 120% at 18% 8%, rgba(92,52,39,.08), transparent 58%),
    linear-gradient(180deg, rgba(17,19,24,.36), rgba(10,10,10,.10));

  color: rgba(233,227,216,.52);

  box-shadow:
    0 9px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.03) inset;
}

/* =========================================================
   NAV link visibilità per breakpoint
   - Default: visibili
   - Hiding: via data-show-* (vedi regole sotto)
   ========================================================= */
.navLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 12px;
  border-radius: 999px;

  /* base: vetro scuro, leggibile subito */
  border: 1px solid rgba(233,227,216,.16);
  background: rgba(0,0,0,.28);

  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;

  /* testo: chiaro pieno (non “latte sbiadito”) */
  color: rgba(233,227,216,.92);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

@media (hover:hover) and (pointer:fine){
  .navLink:hover{
    transform: translateY(-1px);

    /* hover: più corten, con accento gold */
    border-color: rgba(92,52,39,.58);
    background: rgba(92,52,39,.18);
    color: rgba(255,255,255,.96);

    box-shadow:
      0 8px 20px rgba(0,0,0,.28),
      0 0 0 1px rgba(182,138,28,.08) inset;
  }
}

.navLink:focus-visible{
  outline: none;
  border-color: rgba(182,138,28,.70);
  box-shadow: 0 0 0 3px rgba(182,138,28,.18);
}

/* togliamo l'hover globale che rischia di “sporcare” i bottoni */
.nav__links a:hover{ color: inherit; }

/* ===== Nav per-device visibility (WP options) ===== */
/* Mobile < 700px */
@media (max-width: 699px){
  .nav__links .navLink[data-show-mobile="0"]{ display:none; }
}
/* Tablet 700–959px */
@media (min-width: 700px) and (max-width: 959px){
  .nav__links .navLink[data-show-tablet="0"]{ display:none; }
}
/* Desktop >= 960px */
@media (min-width: 960px){
  .nav__links .navLink[data-show-desktop="0"]{ display:none; }
}
/* ===== First-visit gate: blocca Menu/Eventi/Prenota finché non scorri metà pagina ===== */
body.navLocked .nav__links{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
body.navUnlocked .nav__links{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* micro hint “torna nav” quando sblocchi (molto sobrio) */
body.navUnlocked .nav{
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: box-shadow .28s ease;
}

/* ===== Buttons (home/hub) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid rgba(92,52,39,.46);
  background: rgba(92,52,39,.16);
  color: var(--text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform: translateY(-1px);
    border-color: rgba(182,138,28,.52);
    background: rgba(92,52,39,.22);
  }
}

.btn--ghost{
  border:1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.btn--ghost:hover{ color: var(--text); background: rgba(233,227,216,.06); }
.btn--gold{
  border-color: rgba(182,138,28,.54);
  background: rgba(182,138,28,.16);
}
.btn--big{ width: min(420px, 86vw); padding: 14px 18px; border-radius: 18px; }

/* ===== Home (index) — SUPER WOW ===== */

/* mood vars (JS) */
:root{
  --moodWarm: 0;
  --moodBlur: 0px;
  --moodDim: .0;
  --storyY: 0px;

  /* motion engine (from site.js) */
  --sceneP: 0; /* progress scena attiva 0..1 */
  --sceneV: 0; /* velocità scroll 0..1 */
}


/* HERO scena */
.hero{ padding:72px 0 56px; }

.hero--story{
  padding: 92px 0 64px;
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--navH));
  display: grid;
  align-items: center;
}

/* depth layers (DEVONO stare dietro la heroMedia) */
.storyLayers{ position:absolute; inset:0; pointer-events:none; z-index:-2; }
.layer{ position:absolute; inset:0; }


.layer--bg{
  background:
    radial-gradient(1100px 520px at 18% 8%, rgba(92,52,39,.16), transparent 60%),
    radial-gradient(900px 420px at 82% 22%, rgba(182,138,28,.06), transparent 62%),
    linear-gradient(180deg, rgba(8,9,12,.55), rgba(8,9,12,.95));
  transform: translateY(calc(var(--storyY) * .22));
  will-change: transform;
}
.layer--glow{
  background:
    radial-gradient(520px 260px at 28% 26%, rgba(92,52,39, calc(.14 + var(--moodWarm) * .10)), transparent 62%),
    radial-gradient(520px 260px at 72% 38%, rgba(182,138,28, calc(.08 + var(--moodWarm) * .08)), transparent 65%);
  filter: blur(18px);
  opacity: .85;
  transform: translateY(calc(var(--storyY) * .10));
  will-change: transform;
}
.layer--noise{
  opacity: .065;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.layer--vignette{
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.08), rgba(0,0,0,.72) 70%),
    radial-gradient(900px 520px at 20% 18%, rgba(92,52,39,.08), transparent 60%);
  backdrop-filter: blur(calc(var(--moodBlur) * 1));

  /* default */
  opacity: calc(1 - var(--moodDim));
}

/* HERO: vignette si “apre” nei primi 40% (più luce, meno chiusura) */
body[data-active-scene="hero"] .layer--vignette{
  --openP: min(1, calc(var(--sceneP) / 0.40));
  opacity: calc(0.92 - (var(--openP) * 0.28));
}

/* ===== HERO ENTRY (2-tempi) =====
   1) velo entra
   2) titolo entra con micro-stagger (chars)
*/
body.heroEnter .layer--vignette{
  transition: backdrop-filter .35s ease, background .35s ease, opacity .35s ease;
  opacity: 0;
}
body.heroEnter.isVeilIn .layer--vignette{ opacity: 1; }

/* ===== HERO TITLE WOW (chars) — SUPER ULTRA =====
   - tracking che “si assesta”
   - micro 3D (sobrio)
   - peso + nitidezza controllati
*/
.hero__title{
  position: relative;
  display: inline-block; /* serve per la shine */
  transform-style: preserve-3d;
  perspective: 900px;

  /* tracking “poster”: parte più largo e si assesta */
  letter-spacing: .14em;
  filter: drop-shadow(0 14px 44px rgba(0,0,0,.46));
  will-change: transform, letter-spacing, filter;
}

/* assestamento del titolo (container) */
body.heroEnter.isTextIn .hero__title{
  animation: heroTitleSettle .95s cubic-bezier(.16, .95, .18, 1) both;
}
@keyframes heroTitleSettle{
  0%{
    transform: translateY(2px) rotateX(8deg);
    letter-spacing: .14em;
    filter: drop-shadow(0 22px 70px rgba(0,0,0,.55));
  }
  60%{
    transform: translateY(0) rotateX(0deg);
    letter-spacing: .08em;
    filter: drop-shadow(0 16px 54px rgba(0,0,0,.48));
  }
  100%{
    transform: translateY(0) rotateX(0deg);
    letter-spacing: .08em;
    filter: drop-shadow(0 14px 44px rgba(0,0,0,.46));
  }
}

/* chars */
.hero__title .tchar{
  display:inline-block;
  opacity: 0;

  /* “camera”: entra da sotto con micro twist e profondità */
  transform:
    translateY(22px)
    rotateX(14deg)
    rotateZ(-0.9deg)
    translateZ(-10px)
    scale(.985);

  filter: blur(10px);
  will-change: transform, opacity, filter;
}

.hero__title--wordmark{
  line-height: 1;
}

.heroWordmarkWrap{
  display:inline-block;
  line-height: 0;
}

.heroWordmarkWrap--inline{
  width: min(720px, 84vw);
  max-width: 100%;
}

.heroWordmarkSvg{
  display:block;
  width: 100%;
  height: auto;
  overflow: visible;

  color: rgba(233,227,216,.98);

  transform:
    translateY(6px)
    scale(.998);

  filter:
    drop-shadow(0 18px 54px rgba(0,0,0,.42));

  will-change: transform, filter;
}

.heroWordmarkSvg path{
  fill: currentColor !important;
}

/* stato base dei singoli blocchi/lettere */
.heroWordmarkSvg--hero #layer10 > *,
.heroWordmarkSvg--hero #layer2 > *,
.heroWordmarkSvg--hero #layer5 > *,
.heroWordmarkSvg--hero #layer6 > *,
.heroWordmarkSvg--hero #layer7 > *,
.heroWordmarkSvg--hero #layer8 > *,
.heroWordmarkSvg--hero #layer9 > *{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  transform:
    translateY(18px)
    scale(.985);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}

/* ingresso sequenziale — più lento e più “lettera per lettera” */
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer10 > *{ animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) .00s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer2 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) .22s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer5 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) .44s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer6 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) .66s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer7 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) .88s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer8 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) 1.10s both; }
body.heroEnter.isTextIn .heroWordmarkSvg--hero #layer9 > * { animation: heroLetterReveal .94s cubic-bezier(.18,.84,.22,1) 1.32s both; }

/* piccolo assestamento dell’insieme */
body.heroEnter.isTextIn .heroWordmarkSvg--hero{
  animation: heroWordmarkSettle 2.45s cubic-bezier(.18,.84,.22,1) both;
}

@keyframes heroLetterReveal{
  0%{
    opacity: 0;
    transform:
      translateY(18px)
      scale(.985);
    filter: blur(8px);
  }
  62%{
    opacity: 1;
    transform:
      translateY(-1px)
      scale(1.012);
    filter: blur(.6px);
  }
  100%{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
    filter: blur(0px);
  }
}

@keyframes heroWordmarkSettle{
  0%{
    transform:
      translateY(6px)
      scale(.998);
    filter:
      drop-shadow(0 18px 54px rgba(0,0,0,.42));
  }
  100%{
    transform:
      translateY(0)
      scale(1);
    filter:
      drop-shadow(0 14px 44px rgba(0,0,0,.38));
  }
}

@media (max-width: 640px){
  .heroWordmarkWrap--inline{
    width: min(500px, 86vw);
  }

  .heroWordmarkSvg--hero #layer10 > *,
  .heroWordmarkSvg--hero #layer2 > *,
  .heroWordmarkSvg--hero #layer5 > *,
  .heroWordmarkSvg--hero #layer6 > *,
  .heroWordmarkSvg--hero #layer7 > *,
  .heroWordmarkSvg--hero #layer8 > *,
  .heroWordmarkSvg--hero #layer9 > *{
    transform:
      translateY(14px)
      scale(.988);
    filter: blur(6px);
  }
}

/* step 2: chars entrano con overshoot più percepibile */
body.heroEnter.isTextIn .hero__title .tchar{
  animation: heroCharIn .86s cubic-bezier(.16, .95, .18, 1) both;
  animation-delay: calc(58ms * var(--d));
}

@keyframes heroCharIn{
  0%{
    opacity: 0;
    transform:
      translateY(22px)
      rotateX(14deg)
      rotateZ(-0.9deg)
      translateZ(-10px)
      scale(.985);
    filter: blur(10px);
  }
  62%{
    opacity: 1;
    transform:
      translateY(-2px)
      rotateX(0deg)
      rotateZ(0deg)
      translateZ(0px)
      scale(1.018);
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform:
      translateY(0)
      rotateX(0deg)
      rotateZ(0deg)
      translateZ(0px)
      scale(1);
    filter: blur(0px);
  }
}

/* “accento” extra SOLO al primo ingresso (pilotato da JS: .heroWowed per ~1.4s) */
body.heroWowed .hero__title{
  filter:
    drop-shadow(0 18px 54px rgba(0,0,0,.52))
    drop-shadow(0 0 18px rgba(182,138,28,.12));
}



/* whisper entra leggermente dopo */
body.heroEnter.isTextIn .hero__whisper{
  transition: opacity .55s ease .28s, transform .55s ease .28s;
  opacity: 1;
  transform: translateY(0);
}

/* hint “scorri” sparisce appena tocchi lo scroll */
body.hasScrolled .scrollHint{
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}

/* contenuto sopra */
.hero--story > .container,
.hero--story > .scrollHint{ position: relative; z-index: 1; }

.eyebrow{
  color: var(--muted);
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size: 12px;
  margin:0 0 10px;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

/* hero: copy centrata, “poster” */
.hero--story .hero__copy{
  max-width: 62ch;
}


.hero__title{
  margin:0;
  font-size: clamp(46px, 9vw, 92px);
  letter-spacing:.08em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.hero__whisper{
  margin: 12px 0 0;
  color: rgba(233,227,216,.86);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;

  opacity: 0;
  transform: translateY(8px);
}
.hero__subtitle{
  margin:14px 0 0;
  color:var(--muted);
  max-width: 54ch;
  line-height: 1.55;

  /* hero regia: entra dopo whisper */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

/* entra con timing controllato (dopo whisper) */
body.heroEnter.isTextIn .hero__subtitle{
  transition: opacity .62s ease .42s, transform .62s ease .42s, filter .62s ease .42s;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

.hero__cta{
  display:flex;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}
.hero__meta{
  margin-top: 14px;
  color: rgba(233,227,216,.58);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ===== HERO MEDIA (una sola foto, full-bleed) ===== */
.heroMedia{
  position:absolute;
  inset: 0;
  z-index: -1;             /* sopra storyLayers (-2), sotto contenuto */
  pointer-events:none;


  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78)),
    radial-gradient(900px 520px at 22% 18%, rgba(92,52,39,.20), transparent 60%),
    var(--img-home-hero);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* “cinema”: focus pull + respiro con lo scroll (non template) */
  transform:
    translateY(calc(var(--storyY) * .30))
    scale(calc(1.04 - var(--sceneP) * 0.02));
  /* apertura aggressiva solo all'inizio (0..40% della hero) */
  --openP: min(1, calc(var(--sceneP) / 0.40));

  filter:
    saturate(calc(0.96 + var(--moodWarm) * 0.10 + var(--openP) * 0.06))
    contrast(calc(1.10 + var(--moodWarm) * 0.06 + var(--openP) * 0.10))
    brightness(calc(0.84 + var(--moodWarm) * 0.14 + var(--openP) * 0.18))
    blur(calc((1 - var(--openP)) * 1.15px));

  transition: filter .22s ease;
  will-change: transform, filter;
}

/* cornice impercettibile (poster) */
.heroMedia::after{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.10);
  background: radial-gradient(900px 420px at 50% 0%, rgba(233,227,216,.06), transparent 55%);
  opacity: .55;
}

/* ===== HERO TITLE SHINE (1 passaggio, super sobrio) ===== */
.hero__title::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  pointer-events:none;

  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.22) 18%,
      rgba(233,227,216,.10) 28%,
      rgba(182,138,28,.18) 38%,
      rgba(182,138,28,0) 60%
    );

  transform: translateX(-70%);
  opacity: 0;

  mix-blend-mode: screen;
  filter: blur(1px);
}

.hero__title--wordmark::after{
  inset: -14px -18px;
}

body.titleShine .hero__title::after{
  opacity: .95;
  animation: heroTitleShine .90s ease 1 both;
}

@keyframes heroTitleShine{
  from{ transform: translateX(-70%); opacity: 0; }
  12%{ opacity: .90; }
  to{ transform: translateX(70%); opacity: 0; }
}

/* HERO SHINE (1 passaggio, sobrio) */
.heroMedia::before{

  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.18) 18%,
      rgba(233,227,216,.08) 28%,
      rgba(182,138,28,.14) 38%,
      rgba(182,138,28,0) 60%
    );
  transform: translateX(-60%);
  opacity: 0;
}
body.heroShine .heroMedia::before{
  opacity: .9;
  animation: heroShine .95s ease 1 both;
}
@keyframes heroShine{
  from{ transform: translateX(-60%); opacity: 0; }
  12%{ opacity: .85; }
  to{ transform: translateX(60%); opacity: 0; }
}


/* HERO: focus/luce SOLO nei primi 40% (non parallax) */
body[data-active-scene="hero"] .heroMedia{
  --openP: min(1, calc(var(--sceneP) / 0.40));

  /* micro shift: sembra “camera focus”, non movimento geometrico */
  background-position: 50% calc(50% + (1 - var(--openP)) * 2.2%);

  /* curva più aggressiva (apertura rapida) */
  filter:
    saturate(calc(0.98 + var(--openP) * 0.10))
    contrast(calc(1.08 + var(--openP) * 0.18))
    brightness(calc(0.82 + var(--openP) * 0.22))
    blur(calc((1 - var(--openP)) * 1.15px));
}

/* HERO DESKTOP / NOTEBOOK — meno crop, mobile invariato */
@media (min-width: 901px){
  .heroMedia{
    background-position: center 44%;
    transform:
      translateY(calc(var(--storyY) * .20))
      scale(calc(1.018 - var(--sceneP) * 0.006));
  }

  body[data-active-scene="hero"] .heroMedia{
    background-position: 50% calc(44% + (1 - var(--openP)) * 1.2%);
  }
}


/* scroll hint */
.scrollHint{
  position:absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  opacity: .55;
  pointer-events:none;
}
.scrollHint__line{
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(233,227,216,0), rgba(233,227,216,.55), rgba(233,227,216,0));
}
.scrollHint__txt{
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(233,227,216,.65);
}

/* ===== SCENES ===== */
.scene{ position: relative; padding: 86px 0; }
@media (max-width: 900px){ .scene{ padding: 72px 0; } }
@media (max-width: 380px){ .scene{ padding: 62px 0; } }

/* Anchor offset (NAV fixed): evita che #eventi / #prenota finiscano “tagliati” sotto la barra
   - desktop: più respiro
   - tablet/phone: atterra più “basso”, quasi sul titolo */
#eventi,
#prenota{
  scroll-margin-top: calc(var(--navH) + var(--abH, 0px) + 18px); /* desktop default */
}

@media (max-width: 900px){
  #eventi,
  #prenota{
    scroll-margin-top: calc(var(--navH) + var(--abH, 0px) + 6px); /* più giù (meno respiro) */
  }
}


/* anti-monotonia: scene hanno micro “cornici” diverse */
.scene--manifesto{ padding-top: 98px; }
.scene--events{ padding-top: 98px; }
.scene--gallery{ padding-top: 78px; }

.scene::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(233,227,216,0), rgba(233,227,216,.10), rgba(233,227,216,0));
  opacity: .65;
}
.scene--rhythm::before{ opacity: .35; }

/* ===== Depth Layers: firma scena (anti-monotonia vera) =====
   Non serve cambiare immagini: cambia “rig di luce” per sezione.
   Effetto: ogni scena “suona” diversa anche con asset simili. */
.scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity .35s ease;
}

/* la firma si sente di più quando la scena è attiva */
.scene.is-active::after{ opacity: .55; }

/* MANIFESTO — caldo e concentrato a sinistra */
.scene--manifesto::after{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(92,52,39,.18), transparent 62%),
    radial-gradient(900px 420px at 78% 30%, rgba(233,227,216,.05), transparent 68%);
}

/* RHYTHM — più freddo, più “editoriale” */
.scene--rhythm::after{
  background:
    radial-gradient(900px 480px at 22% 26%, rgba(233,227,216,.06), transparent 70%),
    radial-gradient(760px 360px at 84% 18%, rgba(92,52,39,.10), transparent 64%);
}

/* EVENTI — glow centrale, più “invito” */
.scene--events::after{
  background:
    radial-gradient(1100px 520px at 50% 8%, rgba(92,52,39,.20), transparent 60%);
}

/* GALLERY — più quieta (stacco, respiro) */
.scene--gallery::after{
  background:
    radial-gradient(900px 460px at 60% 22%, rgba(233,227,216,.05), transparent 70%);
}

/* INFO — calda ma leggibile, come chiusura */
.scene--info::after{
  background:
    radial-gradient(900px 480px at 26% 16%, rgba(92,52,39,.16), transparent 68%);
}


.scene__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 900px){
  .scene__grid{ grid-template-columns: 1fr; gap: 18px; }
}

.scene__title{
  margin: 0;
  font-size: clamp(28px, 4.6vw, 48px);
  letter-spacing: .06em;
  line-height: 1.08;
}

.manifesto p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.78);
  line-height: 1.55;
  max-width: 54ch;
}

/* shots */
.shot{
  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);

  /* anti-seam iOS/Safari: evita “linea” 1px sotto i background cover */
  overflow: hidden;
  background-color: rgba(10,10,10,.75);
  background-clip: padding-box;

  /* CLS: teniamo solo una riserva “soft” che non rompe layout */
  min-height: 320px;

  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.68)),
    radial-gradient(700px 260px at 22% 18%, rgba(92,52,39,.10), transparent 60%),
    var(--img-shot-manifesto);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

/* manifesto: leggermente più “caldo” */
.shot--manifesto{
  min-height: 420px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.62)),
    radial-gradient(900px 420px at 20% 10%, rgba(92,52,39,.14), transparent 55%),
    var(--img-shot-manifesto);
  background-position: 52% center;
}

/* rhythm A/B/C: stessi token, crop diversi */
.shot--a{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.76)),
    radial-gradient(700px 320px at 20% 10%, rgba(92,52,39,.10), transparent 62%),
    var(--img-shot-a);
  background-position: 50% 35%;
  filter: contrast(1.12) saturate(1.08);
}

.shot--b{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.80)),
    radial-gradient(700px 320px at 80% 14%, rgba(233,227,216,.06), transparent 70%),
    var(--img-shot-b);
  background-position: 62% 45%;
  filter: contrast(1.06) saturate(0.94);
}

.shot--c{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.82)),
    radial-gradient(700px 320px at 50% 12%, rgba(92,52,39,.08), transparent 66%),
    var(--img-shot-c);
  background-position: 40% 55%;
  filter: contrast(1.16) saturate(1.00);
}


/* map: più “neutra” e leggibile */
.shot--map{
  min-height: 420px;
  opacity: .92;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72)),
    var(--img-shot-map);
  background-position: 50% 50%;
}


/* rhythm */
.rhythm{
  display:flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 16px;

  /* CLS/micro-jank: isola ricalcoli del blocco */
  contain: layout paint;
}
.rhythmRow{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items: center; }
.rhythmRow--flip{ grid-template-columns: 1.05fr .95fr; }
.rhythmRow--flip .rhythmMedia{ order: 2; }
@media (max-width: 900px){
  .rhythmRow, .rhythmRow--flip{ grid-template-columns: 1fr; }
  .rhythmRow--flip .rhythmMedia{ order: 0; }
}
.rhythmTitle{ margin: 0; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: .08em; }
.rhythmText{ margin: 10px 0 0; color: rgba(233,227,216,.70); line-height: 1.55; max-width: 60ch; }

/* ===== RHYTHM IMMAGINI — regia indipendente (NON tocca le scritte) ===== */
.scene--rhythm .rhythmMedia{
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(10px) scale(0.992);
  filter: blur(1.6px) saturate(0.95);
  transition:
    opacity .55s ease,
    transform .70s ease,
    filter .70s ease;
  will-change: opacity, transform, filter;
}


/* default: visibili (safety se JS non gira) */
.scene--rhythm .rhythmRow .rhythmMedia{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* entry dal basso (position-based) */
.scene--rhythm .rhythmRow:not(.isMediaShown) .rhythmMedia{
  opacity: 0;
  transform: translateY(16px) scale(.992);
  filter: blur(10px);
}

/* vicino alla nav: prima opacizza (FADE SOFT) */
.scene--rhythm .rhythmRow.isMediaShown.isMediaDim .rhythmMedia{
  opacity: .90; /* ↑ più alto = fade più impercettibile */
  transform: translateY(-1px) scale(.998);
  filter: blur(0.25px) saturate(0.98);
}

/* ancora più su: sparisce (pulito, senza “sparare” blur) */
.scene--rhythm .rhythmRow.isMediaShown.isMediaGone .rhythmMedia{
  opacity: 0;
  transform: translateY(-8px) scale(.992);
  filter: blur(1.4px) saturate(0.92);
  pointer-events: none;
}


.scene__links{ margin-top: 18px; display:flex; gap: 10px; flex-wrap: wrap; }
.linkPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(233,227,216,.04);
  color: rgba(233,227,216,.82);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}

/* events */
.sceneHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 700px){
  .sceneHead{ align-items:flex-start; flex-direction: column; }
}

.eventPosts{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .eventPosts{ grid-template-columns: 1fr; } }

.eventPost{
  display:block;
  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(10,10,10,.30);
  overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  transform: translateY(0);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  position: relative;
}
@media (hover:hover){
  .eventPost:hover{
    transform: translateY(-2px);
    border-color: rgba(92,52,39,.34);
    background: rgba(10,10,10,.38);
  }
}
.eventPost__media{
  /* ratio più stabile (più “poster”), senza dipendere da JS */
  height: 260px;

  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.65)),
    var(--img-home-event-1);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Se il card ha thumbnail vera, la regia la fa l'inline style (con overlay) */
.eventPost--hasThumb .eventPost__media{
  background-position: 50% 45%;
  filter: contrast(1.10) saturate(1.04);
}

/* Se NON c’è thumbnail: fallback “materico” (non vuoto brutto) */
.eventPost--noThumb .eventPost__media{
  background-image:
    radial-gradient(900px 420px at 22% 18%, rgba(92,52,39,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78));
}

/* Empty state eventi (Home) — coerente, corten, non invadente */
.eventEmpty{
  grid-column: 1 / -1;
  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(10,10,10,.30);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 16px;
}
.eventEmpty__inner{ max-width: 72ch; }
.eventEmpty__meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(233,227,216,.62);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}
.eventEmpty__title{
  margin-top: 10px;
  color: rgba(233,227,216,.88);
  font-size: 15px;
  line-height: 1.45;
}
.eventEmpty__actions{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; }

.eventPost__media--alt{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.70)),
    var(--img-home-event-2);

  background-size: cover;
  background-position: 60% center;
  background-repeat: no-repeat;
}


.eventPost__meta{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px 0;
  color: rgba(233,227,216,.62);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}
.eventPost__title{
  padding: 10px 14px 16px;
  color: rgba(233,227,216,.88);
  font-size: 15px;
  line-height: 1.45;
}

/* shine — premium “glass sweep” (più WOW + più visibile)
   Nota: la classe .isShined viene aggiunta via JS ad ogni rientro in viewport. */
.eventPost::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  pointer-events:none;

  /* sheen più “luxury”: doppio strato (linear + radial) e blend “screen” */
  background:
    radial-gradient(120px 80px at 30% 40%,
      rgba(233,227,216,.16) 0%,
      rgba(182,138,28,.14) 35%,
      rgba(182,138,28,0) 70%
    ),
    linear-gradient(115deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,0) 12%,
      rgba(233,227,216,.12) 22%,
      rgba(182,138,28,.34) 30%,
      rgba(233,227,216,.18) 36%,
      rgba(182,138,28,.22) 44%,
      rgba(182,138,28,0) 62%,
      rgba(182,138,28,0) 100%
    );

  mix-blend-mode: screen;

  transform: translateX(-95%);
  opacity: 0;
  filter: blur(.7px);
}

.eventPost.isShined::after{
  opacity: 1;
  animation: eventShine 1.15s cubic-bezier(.16,.92,.2,1) 1 both;
}

@keyframes eventShine{
  from{ transform: translateX(-95%); opacity: 0; }
  12%{ opacity: 1; }
  42%{ opacity: .72; }
  to{ transform: translateX(95%); opacity: 0; }
}

/* accessibilità: niente sweep se riduzione movimento */
@media (prefers-reduced-motion: reduce){
  .eventPost.isShined::after{ animation: none; opacity: 0; }
}
/* ===== Motion: Eventi (Home) — STABILE (no jitter) =====
   Scelta: niente micro-tilt/offset scroll-based sulle card.
   Restano:
   - hover lift (desktop)
   - shine one-shot
   Risultato: look “premium pulito”, zero traballio.
*/
body[data-active-scene="events"] .eventPost{
  transform: translateY(0);
}
body[data-active-scene="events"] .eventPost:nth-child(1),
body[data-active-scene="events"] .eventPost:nth-child(2){
  transform: translateY(0);
}


/* gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;

  /* CLS/micro-jank: isola ricalcoli della griglia */
  contain: layout paint;
}
@media (max-width: 900px){
  .gallery{ grid-template-columns: 1fr; }
}

.galleryShot{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;

  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);

  /* CLS guardrail: spazio stabile per la griglia */
  aspect-ratio: 16 / 9;
  min-height: 260px;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.galleryShot--tall{
  /* gallery home: tutti gli slot devono restare uguali */
  aspect-ratio: 16 / 9;
  min-height: 260px;
}

/* Slot mapping (NON dipende dal numero di figli: ora i box sono condizionali) */
.galleryShot--g1{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.60)),
    var(--img-home-gallery-1);
}
.galleryShot--g2{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.65)),
    var(--img-home-gallery-2);
}
.galleryShot--g3{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.66)),
    var(--img-home-gallery-3);
}
.galleryShot--g4{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.65)),
    var(--img-home-gallery-4);
}
.galleryShot--g5{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.60)),
    var(--img-home-gallery-5);
}
.galleryShot--g6{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.66)),
    var(--img-home-gallery-6);
}

/* ===== Gallery Director (WOW, bidirezionale, loop-friendly) =====
   Classi dal JS:
   - isGShown / isGDim / isGGone
   Vars per shot:
   - --gP: progress 0..1 (JS)
   - --gx, --gr: drift “magazine” (JS, ripete ogni 3)
*/

/* base */
.scene--gallery .galleryShot{
  position: relative;
  overflow: hidden;

  /* stato “spento” (entry dal basso) */
  opacity: 0;
  transform: translateY(16px) scale(.990);
  filter: blur(10px) saturate(.92);

  will-change: transform, opacity, filter;
  transition:
    opacity .55s ease,
    transform .72s cubic-bezier(.2,.9,.2,1),
    filter .72s cubic-bezier(.2,.9,.2,1);
}

/* safety: se JS non gira, non deve sparire nulla */
.scene--gallery .galleryShot{
  --gP: 1;
}

/* shown */
.scene--gallery .galleryShot.isGShown{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px) saturate(1);
}

/* dim vicino nav */
.scene--gallery .galleryShot.isGShown.isGDim{
  opacity: .72;
  filter: blur(1.2px) saturate(.92);
}

/* gone */
.scene--gallery .galleryShot.isGShown.isGGone{
  opacity: 0;
  transform: translateY(-12px) scale(.988);
  filter: blur(14px) saturate(.86);
  pointer-events: none;
}

/* specular sweep (ogni volta che entra: percepibile ma chic) */
.scene--gallery .galleryShot::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  pointer-events:none;

  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.16) 18%,
      rgba(233,227,216,.08) 28%,
      rgba(182,138,28,.12) 38%,
      rgba(182,138,28,0) 60%
    );

  transform: translateX(-60%);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
}

@keyframes galleryShine{
  from{ transform: translateX(-60%); opacity: 0; }
  12%{ opacity: .80; }
  to{ transform: translateX(60%); opacity: 0; }
}

.scene--gallery .galleryShot.isGShown::after{
  opacity: .9;
  animation: galleryShine .9s ease 1 both;
}

/* ===== Desktop (3 orizzontali): drift + tilt (più “magazine”) ===== */
@media (min-width: 901px){
  body[data-active-scene="gallery"] .scene--gallery .galleryShot.isGShown{
    /* --gP: 0..1, --gx/-gr: -1/0/1 */
    transform:
      translateY(calc((1 - var(--gP)) * 10px))
      translateX(calc(var(--gx, 0) * (10px + (1 - var(--gP)) * 10px)))
      rotate(calc(var(--gr, 0) * (0.35deg + (1 - var(--gP)) * 0.55deg)))
      scale(calc(1 + var(--gP) * 0.014));
  }

  body[data-active-scene="gallery"] .scene--gallery .galleryShot.isGShown.isGDim{
    transform:
      translateY(-4px)
      translateX(calc(var(--gx, 0) * 6px))
      rotate(calc(var(--gr, 0) * 0.20deg))
      scale(1.006);
  }
}

/* ===== Tablet/Phone (verticali): lift + edge-line (più “poster”) ===== */
@media (max-width: 900px){
  .scene--gallery .galleryShot{
    transform: translateY(18px) scale(.992);
  }

  body[data-active-scene="gallery"] .scene--gallery .galleryShot.isGShown{
    transform:
      translateY(calc((1 - var(--gP)) * 14px))
      scale(calc(1 + var(--gP) * 0.010));
  }

  /* edge-line: si accende quando è nitida */
  .scene--gallery .galleryShot::before{
    content:"";
    position:absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 2px;
    border-radius: 999px;
    pointer-events:none;

    background: linear-gradient(90deg, rgba(182,138,28,0), rgba(182,138,28,.92), rgba(182,138,28,0));
    opacity: 0;
    transform: scaleX(.18);
    transform-origin: left;
    transition: opacity .22s ease, transform .32s cubic-bezier(.2,.9,.2,1);
  }

  .scene--gallery .galleryShot.isGShown:not(.isGDim):not(.isGGone)::before{
    opacity: .95;
    transform: scaleX(1);
  }
}

/* ===== Motion: Manifesto ===== */
body[data-active-scene="manifesto"] .manifesto p{
  transform: translateX(calc((1 - var(--sceneP)) * -10px));
  transition: transform .22s ease;
}

/* ===== HOME — SEO HUB section ===== */
.scene--homeFoodSeo{
  padding-top: 88px;
  padding-bottom: 88px;
}

.homeFoodSeo{
  border-radius: 30px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(92,52,39,.16), transparent 60%),
    linear-gradient(180deg, rgba(17,19,24,.68), rgba(10,10,10,.34));
  box-shadow: 0 26px 90px rgba(0,0,0,.48);
  padding: clamp(18px, 3vw, 28px);
}

.homeFoodSeo--hub{
  background:
    radial-gradient(920px 420px at 18% 0%, rgba(92,52,39,.20), transparent 62%),
    radial-gradient(760px 360px at 82% 16%, rgba(182,138,28,.08), transparent 66%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.38));
}

.homeFoodSeo__grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: .90fr 1.10fr;
  gap: 18px;
  align-items: stretch;
}

.homeFoodSeo__copy{
  color: rgba(233,227,216,.78);
  line-height: 1.62;
  max-width: 64ch;
}

.homeFoodSeo__copy p{
  margin: 0;
}

.homeFoodSeo__copy p + p{
  margin-top: 12px;
}

.homeFoodSeo__actions{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.homeFoodSeo__cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.homeFoodSeo__card{
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(420px 160px at 18% 0%, rgba(92,52,39,.10), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.72), rgba(10,10,10,.42));
  padding: 16px;
  min-height: 178px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.homeFoodSeo__card span{
  display: inline-flex;
  margin-bottom: 18px;
  color: rgba(182,138,28,.88);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
}

.homeFoodSeo__card h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.28;
}

.homeFoodSeo__card p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.48;
  font-size: 13.5px;
}

.homeFoodSeo__card--primary{
  border-color: rgba(182,138,28,.28);
  background:
    radial-gradient(540px 190px at 22% 0%, rgba(182,138,28,.11), transparent 62%),
    radial-gradient(420px 160px at 18% 0%, rgba(92,52,39,.14), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.44));
}

.homeFoodSeo__card[href*="bombette-galatina"]{
  border-color: rgba(182,138,28,.36);
  background:
    radial-gradient(640px 220px at 22% 0%, rgba(182,138,28,.15), transparent 62%),
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.18), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.82), rgba(10,10,10,.48));
  box-shadow:
    0 24px 72px rgba(0,0,0,.42),
    0 0 0 1px rgba(182,138,28,.10) inset;
}

.homeFoodSeo__card[href*="hamburger-galatina"]{
  border-color: rgba(146,82,47,.38);
  background:
    radial-gradient(640px 220px at 22% 0%, rgba(146,82,47,.17), transparent 62%),
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.20), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.82), rgba(10,10,10,.48));
  box-shadow:
    0 24px 72px rgba(0,0,0,.42),
    0 0 0 1px rgba(146,82,47,.12) inset;
}

.homeFoodSeo__card[href*="pinse-galatina"]{
  border-color: rgba(185,128,72,.38);
  background:
    radial-gradient(640px 220px at 22% 0%, rgba(185,128,72,.16), transparent 62%),
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.18), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.82), rgba(10,10,10,.48));
  box-shadow:
    0 24px 72px rgba(0,0,0,.42),
    0 0 0 1px rgba(185,128,72,.12) inset;
}

.homeFoodSeo__card[href*="bombette-galatina"]::before,
.homeFoodSeo__card[href*="hamburger-galatina"]::before,
.homeFoodSeo__card[href*="pinse-galatina"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.58;
  transform: translateX(-58%);
}

.homeFoodSeo__card[href*="bombette-galatina"]::before{
  opacity:.64;
  background:
    linear-gradient(120deg, rgba(182,138,28,0), rgba(182,138,28,.15), rgba(233,227,216,.055), rgba(182,138,28,0));
}

.homeFoodSeo__card[href*="hamburger-galatina"]::before{
  background:
    linear-gradient(120deg, rgba(146,82,47,0), rgba(146,82,47,.16), rgba(233,227,216,.045), rgba(146,82,47,0));
}

.homeFoodSeo__card[href*="pinse-galatina"]::before{
  background:
    linear-gradient(120deg, rgba(185,128,72,0), rgba(185,128,72,.15), rgba(233,227,216,.05), rgba(185,128,72,0));
}

.homeFoodSeo__card[href*="bombette-galatina"] span{
  color: rgba(233,221,185,.96);
}

.homeFoodSeo__card[href*="hamburger-galatina"] span{
  color: rgba(224,177,132,.96);
}

.homeFoodSeo__card[href*="pinse-galatina"] span{
  color: rgba(230,190,148,.96);
}

@media (hover:hover) and (pointer:fine){
  .homeFoodSeo__card:hover{
    transform: translateY(-2px);
    border-color: rgba(182,138,28,.38);
    background:
      radial-gradient(420px 160px at 18% 0%, rgba(92,52,39,.16), transparent 62%),
      linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.46));
    box-shadow:
      0 20px 54px rgba(0,0,0,.38),
      0 0 0 1px rgba(182,138,28,.08) inset;
  }

  .homeFoodSeo__card[href*="bombette-galatina"]:hover{
    transform: translateY(-3px);
    border-color: rgba(182,138,28,.50);
    background:
      radial-gradient(640px 220px at 22% 0%, rgba(182,138,28,.18), transparent 62%),
      radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.22), transparent 62%),
      linear-gradient(180deg, rgba(17,19,24,.86), rgba(10,10,10,.52));
    box-shadow:
      0 28px 86px rgba(0,0,0,.48),
      0 0 0 1px rgba(182,138,28,.15) inset,
      0 0 34px rgba(182,138,28,.06);
  }

  .homeFoodSeo__card[href*="hamburger-galatina"]:hover{
    transform: translateY(-3px);
    border-color: rgba(146,82,47,.56);
    background:
      radial-gradient(640px 220px at 22% 0%, rgba(146,82,47,.22), transparent 62%),
      radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.24), transparent 62%),
      linear-gradient(180deg, rgba(17,19,24,.86), rgba(10,10,10,.52));
    box-shadow:
      0 28px 86px rgba(0,0,0,.48),
      0 0 0 1px rgba(146,82,47,.16) inset,
      0 0 34px rgba(146,82,47,.06);
  }

  .homeFoodSeo__card[href*="pinse-galatina"]:hover{
    transform: translateY(-3px);
    border-color: rgba(185,128,72,.56);
    background:
      radial-gradient(640px 220px at 22% 0%, rgba(185,128,72,.21), transparent 62%),
      radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.22), transparent 62%),
      linear-gradient(180deg, rgba(17,19,24,.86), rgba(10,10,10,.52));
    box-shadow:
      0 28px 86px rgba(0,0,0,.48),
      0 0 0 1px rgba(185,128,72,.16) inset,
      0 0 34px rgba(185,128,72,.06);
  }

  .homeFoodSeo__card[href*="bombette-galatina"]:hover::before,
  .homeFoodSeo__card[href*="hamburger-galatina"]:hover::before,
  .homeFoodSeo__card[href*="pinse-galatina"]:hover::before{
    opacity:.94;
    transform: translateX(58%);
    transition: opacity .22s ease, transform .60s cubic-bezier(.2,.9,.2,1);
  }
}

@media (max-width: 900px){
  .homeFoodSeo__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .scene--homeFoodSeo{
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .homeFoodSeo__cards{
    grid-template-columns: 1fr;
  }

  .homeFoodSeo__card{
    min-height: auto;
  }
}

/* info */
.infoCard{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  border-radius: 28px;
  border: 1px solid rgba(92,52,39,.40);
  background: rgba(10,10,10,.26);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  padding: 18px;
}
@media (max-width: 900px){ .infoCard{ grid-template-columns: 1fr; } }

.infoTitle{ margin: 6px 0 0; font-size: clamp(22px, 4.2vw, 38px); letter-spacing: .06em; line-height: 1.10; }
.infoRows{ margin-top: 14px; }
.infoRow{ display:flex; justify-content:space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(233,227,216,.10); }
.infoRow:last-child{ border-bottom: 0; }

.infoLink{
  color: rgba(233,227,216,.90);
  text-decoration: none;
  border-bottom: 1px solid rgba(92,52,39,.50);
  padding-bottom: 1px;
}
.infoLink:hover{
  border-bottom-color: rgba(182,138,28,.70);
}

.infoActions{ margin-top: 16px; display:flex; gap: 12px; flex-wrap: wrap; }

.infoNote{ margin: 14px 0 0; color: rgba(233,227,216,.60); line-height: 1.55; max-width: 60ch; }

.microNav{
  margin-top: 16px;
  color: rgba(233,227,216,.62);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.microNav a{ color: rgba(233,227,216,.78); }

/* ===== STATE UNLOCK (editorial) ===== */
[data-unlock]{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1.4px);
  transition: opacity .42s ease, transform .42s ease, filter .42s ease;
}
[data-scene].is-active [data-unlock]{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* IMPORTANT: la Gallery è governata dal Gallery Director (JS),
   quindi NON deve essere “sbloccata” dallo State Unlock della scena. */
.scene--gallery .galleryShot{
  opacity: 0;
  transform: translateY(16px) scale(.990);
  filter: blur(10px) saturate(.92);
}


/* Manifesto: entra leggermente da sinistra (più “testo”) */
.scene--manifesto [data-unlock]{
  transform: translateY(8px) translateX(-6px);
}
.scene--manifesto.is-active [data-unlock]{
  transform: translateY(0) translateX(0);
}

/* ===== RHYTHM 110% — per RIGA (observer) + bidirezionale top-regia ===== */

/* tuning locale (così puoi ritoccare senza nuove patch) */
.scene--rhythm{
  --rhyInY: 18px;     /* quanto “sale” in entrata */
  --rhyInBlur: 10px;  /* blur entrata */
  --rhyDimOp: .34;    /* opacità vicino nav */
  --rhyGoneY: -14px;  /* drift uscita */
}

/* isPunch: per 1 sola volta (gestito da JS) accentua l’entry della rhythm */
body.isPunch .scene--rhythm{
  --rhyInY: 26px;
  --rhyInBlur: 14px;
}


/* base: SAFETY (se JS non gira, non sparisce nulla) */
.scene--rhythm .rhythmTitle,
.scene--rhythm .rhythmText{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);

  transition:
    opacity .62s cubic-bezier(.2,.9,.2,1),
    transform .72s cubic-bezier(.2,.9,.2,1),
    filter .72s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}

/* quando la COPY non è ancora entrata (perché aspetta la media): resta nascosta */
.scene--rhythm .rhythmRow:not(.isShown) .rhythmTitle,
.scene--rhythm .rhythmRow:not(.isShown) .rhythmText{
  opacity: 0;
  transform: translateY(var(--rhyInY));
  filter: blur(var(--rhyInBlur));
}



.scene--rhythm .rhythmText{
  position: relative;
  padding-bottom: 8px;
  color: rgba(233,227,216,.70);
}

/* quando entra la COPY (DOPO la media): torna nitido */
.scene--rhythm .rhythmRow.isShown .rhythmTitle,
.scene--rhythm .rhythmRow.isShown .rhythmText{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}


/* STAGGER (più percepibile) */
.scene--rhythm .rhythmRow.isShown .rhythmTitle[data-rhythm="1"]{ transition-delay: .08s; }
.scene--rhythm .rhythmRow.isShown .rhythmText[data-rhythm="1"]{ transition-delay: .22s; }

.scene--rhythm .rhythmRow.isShown .rhythmTitle[data-rhythm="2"]{ transition-delay: .10s; }
.scene--rhythm .rhythmRow.isShown .rhythmText[data-rhythm="2"]{ transition-delay: .24s; }

.scene--rhythm .rhythmRow.isShown .rhythmTitle[data-rhythm="3"]{ transition-delay: .12s; }
.scene--rhythm .rhythmRow.isShown .rhythmText[data-rhythm="3"]{ transition-delay: .26s; }

/* ===== top-regia (bidirezionale) ===== */

/* vicino alla nav: prima opaco, micro blur, micro lift */
.scene--rhythm .rhythmRow.isInView.isDim .rhythmTitle,
.scene--rhythm .rhythmRow.isInView.isDim .rhythmText{
  opacity: var(--rhyDimOp);
  transform: translateY(-6px);
  filter: blur(1.2px);
}

/* ancora più su: sparisce (più “cinema”) */
.scene--rhythm .rhythmRow.isInView.isGone .rhythmTitle,
.scene--rhythm .rhythmRow.isInView.isGone .rhythmText{
  opacity: 0;
  transform: translateY(var(--rhyGoneY));
  filter: blur(12px);
}

/* underline: più presente + glow sobrio */
.scene--rhythm .rhythmText::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:100%;

  background: linear-gradient(
    90deg,
    rgba(92,52,39,0),
    rgba(92,52,39,.92),
    rgba(92,52,39,0)
  );

  box-shadow: 0 0 18px rgba(92,52,39,.18);

  transform: scaleX(.18);
  transform-origin: left;
  opacity: 0;

  transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
  will-change: transform, opacity;
}

/* underline ON */
.scene--rhythm .rhythmRow.isInView.isUnderline .rhythmText::after{
  transform: scaleX(1);
  opacity: .98;
}

/* se dim o gone: underline OFF */
.scene--rhythm .rhythmRow.isDim .rhythmText::after,
.scene--rhythm .rhythmRow.isGone .rhythmText::after{
  transform: scaleX(.18);
  opacity: 0;
}




/* uscita più morbida quando la scena non è attiva:
   riduce il “click” visivo se scrolli veloce tra scene */
.scene--rhythm [data-unlock]{
  will-change: opacity, transform, filter;
}

/* ===== RHYTHM — IMMAGINI (SOLO media) =====
   Usa le classi che il JS già mette:
   - isMediaIn: l’immagine è entrata in viewport (entra)
   - isMediaShown: “abilita” la regia top
   - isMediaDim: vicino alla nav diventa opaca
   - isMediaGone: ancora più su sparisce
*/
.scene--rhythm .rhythmMedia{
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  filter: blur(1.6px) saturate(0.95);
  transition:
    opacity .55s ease,
    transform .70s ease,
    filter .70s ease;
  will-change: opacity, transform, filter;
}

/* ENTRATA (DOPO che la media “entra” davvero) */
.scene--rhythm .rhythmRow.isMediaIn .rhythmMedia{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px) saturate(1);
}

/* WOW: micro “specular sweep” quando entra (una riga alla volta, bidirezionale) */
.scene--rhythm .rhythmMedia::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px; /* match della .shot */
  pointer-events:none;
  opacity: 0;
  transform: translateX(-60%);
  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.18) 18%,
      rgba(233,227,216,.08) 28%,
      rgba(182,138,28,.14) 38%,
      rgba(182,138,28,0) 60%
    );
  mix-blend-mode: screen;
  filter: blur(1px);
}

@keyframes rhythmMediaShine{
  from{ transform: translateX(-60%); opacity: 0; }
  12%{ opacity: .85; }
  to{ transform: translateX(60%); opacity: 0; }
}

.scene--rhythm .rhythmRow.isMediaIn .rhythmMedia::after{
  opacity: .9;
  animation: rhythmMediaShine .9s ease 1 both;
}


/* DIM vicino alla nav (solo se isMediaShown è attivo) — FADE SOFT */
.scene--rhythm .rhythmRow.isMediaShown.isMediaDim .rhythmMedia{
  opacity: .90; /* ↑ più alto = fade più impercettibile */
  transform: translateY(-1px) scale(.998);
  filter: blur(0.25px) saturate(0.98);
}

/* GONE vicino alla nav (solo se isMediaShown è attivo) — pulito */
.scene--rhythm .rhythmRow.isMediaShown.isMediaGone .rhythmMedia{
  opacity: 0;
  transform: translateY(-8px) scale(.992);
  filter: blur(1.4px) saturate(0.92);
  pointer-events: none;
}



/* Gallery: soft zoom + respiro */
.scene--gallery .galleryShot[data-unlock]{
  transform: scale(0.985);
  transition: opacity .42s ease, transform .55s ease, filter .55s ease;
}
.scene--gallery.is-active .galleryShot[data-unlock]{
  transform: scale(1);
}

/* Eventi: meno blur, più “pulito” */
.scene--events [data-unlock]{
  filter: blur(0.6px);
}
.scene--events.is-active [data-unlock]{
  filter: blur(0px);
}


/* iPhone mini respiro */
@media (max-width: 380px){
  .hero--story{ padding: 84px 0 56px; }
  .hero__title{ letter-spacing: .06em; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .layer--bg, .layer--glow, .photoCard{ transform: none !important; }
  [data-unlock]{ transition:none; opacity:1; transform:none; }
}

/* back-to-top */
.toTop{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 80;

  width: 44px;
  height: 44px;
  border-radius: 16px;

  border: 1px solid rgba(92,52,39,.46);
  background: rgba(17,19,24,.72);
  color: rgba(233,227,216,.82);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
body.hasToTop .toTop{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover:hover) and (pointer:fine){
  .toTop:hover{
    border-color: rgba(182,138,28,.56);
    background: rgba(17,19,24,.82);
  }
}

.footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  margin-top: auto;   /* chiave: spinge il footer in fondo */
  color: var(--muted);
  flex-shrink: 0;
}

/* footer “in linea” (wrap solo quando serve) */
.footer__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.dot{ opacity:.4; }

/* brand footer + morph (stesso sistema della nav) */
.siteFooter__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.siteFooter__name{
  letter-spacing: .10em;
  font-weight: 650;
  color: rgba(233,227,216,.86);
}

.siteFooter__mark{
  width: 18px;
  height: 18px;
  display:inline-block;
  opacity: .95;
  transform: translateY(1px);
}

.siteFooter__mark svg{
  width: 100%;
  height: 100%;
  display:block;
}

.siteFooter__mark path{
  fill: var(--corten);
  filter: drop-shadow(0 0 10px rgba(92,52,39,.18));
}

.siteFooter__legal{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(233,227,216,.64);
}
.hub__bottom{
  margin-top: 22px;
  padding-top: 8px;
}

.siteFooter__legal a{
  color: rgba(233,227,216,.74);
}
@media (hover:hover) and (pointer:fine){
  .siteFooter__legal a:hover{
    color: rgba(233,227,216,.92);
  }
}


/* ===== Hub (QR landing) ===== */
.hub{
  min-height: calc(100svh - var(--navH) - 72px);
  display:grid;
  place-items:start center;
  align-content:start;
  position: relative;
  overflow:hidden;
  padding: 10px 0 12px;
}

/* Hub BG opzionale (da WP via --img-hub-bg) */
.hub::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;

  background-image:
    radial-gradient(900px 520px at 22% 18%, rgba(92,52,39,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.88)),
    var(--img-hub-bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .88;
}
.hub > *{ position: relative; z-index: 1; }
.hub__frame{
  width: min(640px, 92vw);
  border: 1px solid var(--line);
  background: rgba(17,19,24,.78);
  border-radius: 26px;
  padding: 18px 22px 20px;
  text-align:center;
  margin-top: 2px;
}
.hub__buttons{ display:flex; flex-direction:column; gap: 12px; margin-top: 16px; align-items:center; }
.hub__title{ margin: 4px 0 0; font-size: 44px; letter-spacing:.06em; }
.hub__glow{
  position:absolute; inset:-120px -120px auto -120px; height: 520px;
  background: radial-gradient(circle at 50% 24%, rgba(92,52,39,.22), transparent 60%);
  filter: blur(20px);
  pointer-events:none;
}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */

/* ===== Menu wrapper ===== */
.menuPage{
  /* dopo le tue prove: spazio sopra minimo (nav già compensata nel body) */
  padding: 0 0 40px;
}

/* CLS guardrail (SAFE): la lista non deve “comparire” spostando tutto dopo il fetch/render */
.menuPage .menuList{
  min-height: 70vh;
}

/* ===== Menu — introduzione editoriale categoria (backend-driven) ===== */
.categoryIntro{
  max-width: 780px;
  margin: 4px auto 28px;
  text-align: center;
}

.categoryIntro__subtitle{
  margin: 0 auto;
  max-width: 64ch;
  color: rgba(233,227,216,.70);
  font-size: 14px;
  line-height: 1.62;
  letter-spacing: .015em;
}

.categoryIntro__guide{
  margin: 18px auto 0;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(182,138,28,.22);
  background:
    radial-gradient(540px 190px at 50% 0%, rgba(182,138,28,.10), transparent 64%),
    rgba(10,10,10,.24);
}

.categoryIntro__title{
  margin: 0 0 8px;
  color: rgba(233,227,216,.94);
  font-family: var(--serif);
  font-size: clamp(20px, 3.2vw, 25px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.categoryIntro__text{
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(233,227,216,.76);
  font-size: 14px;
  line-height: 1.66;
}

@media (max-width: 640px){
  .categoryIntro{
    margin-bottom: 22px;
  }

  .categoryIntro__guide{
    margin-top: 14px;
    padding: 16px 14px;
    border-radius: 18px;
  }
}

/* ===== Menu head (sfondo + testo centrato) ===== */
.menuHead{
  /* blocco hero più alto visivamente dentro l’immagine */
  padding: calc(var(--navH, 56px) + 8px) 0 20px;

  position: relative;
  overflow: hidden;
  text-align: center;
}

/* micro rifiniture tipografiche SOLO nel menu head */
.menuHead .muted{
  margin: 10px auto 0;
  max-width: 62ch;
  line-height: 1.55;
  color: rgba(233,227,216,.62);
}



/* sfondo SOLO menu head */
.menuHead::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img-menu-head);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .80; /* elegante, non invadente */
  filter: saturate(.9) contrast(1.05);
  pointer-events:none;
}
.menuHead::before{
  /* già esistente */
  mask-image: linear-gradient(
    180deg,
    transparent 0px,
    black 48px
  );
}

/* Eventi: testata con immagine dedicata */
.menuHead.menuHead--eventi::before{
  background-image: var(--img-eventi-head);
}

/* velo noir sopra immagine */
.menuHead::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 320px at 20% 0%, rgba(92,52,39,.14), transparent 60%),
    linear-gradient(180deg, rgba(11,12,15,.78), rgba(11,12,15,.92));
  pointer-events:none;
}

.menuHead > *{ position: relative; z-index: 1; }

.menuTitle{
  margin: 0;
  font-size: clamp(34px, 5.8vw, 56px);
  letter-spacing:.06em;

  /* micro “editoriale” */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}



.menuTitle--menu{
  position: relative;
  display: inline-block;
  margin: 0 0 26px;
  line-height: 1;
  text-transform: uppercase;
}

/* accessibilità vera: testo per screen reader, non visibile */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* il titolo adesso è un file immagine esterno (svg/png) */
.menuTitle--menu > span[aria-hidden="true"]{
  display: inline-block;
  line-height: 0;
}

.menuWordmarkImg{
  display: block;
  width: min(430px, 68vw);
  max-width: 100%;
  height: auto;
  transform: translateY(-16px);
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.40))
    drop-shadow(0 10px 28px rgba(0,0,0,.22))
    drop-shadow(0 0 16px rgba(182,138,28,.05));
}

@media (max-width: 640px){
  .menuTitle--menu{
    margin-bottom: 20px;
  }

  .menuWordmarkImg{
    width: min(292px, 66vw);
    transform: translateY(-10px);
  }
}


.menuServiceBar{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.serviceChip{
  position: relative;
  appearance: none;
  border: 1px solid rgba(233,227,216,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    rgba(17,19,24,.62);
  color: rgba(233,227,216,.62);
  border-radius: 999px;
  padding: 8px 13px;
  min-height: 38px;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .30s ease,
    transform .22s ease,
    opacity .22s ease,
    filter .24s ease;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.serviceChip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(182,138,28,.12), transparent 54%);
  opacity: 0;
  transition: opacity .24s ease;
  z-index: -2;
}

.serviceChip::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(182,138,28,0) 0%,
      rgba(233,227,216,0) 18%,
      rgba(233,227,216,.12) 28%,
      rgba(182,138,28,.22) 36%,
      rgba(233,227,216,.08) 44%,
      rgba(182,138,28,0) 62%,
      rgba(182,138,28,0) 100%
    );
  transform: translateX(-110%);
  opacity: 0;
  filter: blur(.6px);
  z-index: -1;
}

.serviceChip.isActive{
  color: rgba(255,248,236,.96);
  border-color: rgba(182,138,28,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    rgba(23,25,30,.78);
  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    0 0 0 1px rgba(182,138,28,.06) inset,
    0 0 14px rgba(182,138,28,.05);
  filter: saturate(1.02);
}

.serviceChip.isActive::before{
  opacity: 1;
}

.serviceChip.isAuto{
  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(182,138,28,.08) inset,
    0 0 18px rgba(182,138,28,.08);
}

.serviceChip.isPulse::after{
  opacity: 1;
  animation: serviceChipSweep 1.02s cubic-bezier(.16,.92,.2,1) 1 both;
}

@keyframes serviceChipSweep{
  from{ transform: translateX(-110%); opacity: 0; }
  12%{ opacity: .92; }
  42%{ opacity: .58; }
  to{ transform: translateX(110%); opacity: 0; }
}

@media (hover:hover) and (pointer:fine){
  .serviceChip:hover{
    color: rgba(233,227,216,.90);
    border-color: rgba(182,138,28,.18);
    transform: translateY(-1px);
    box-shadow:
      0 8px 18px rgba(0,0,0,.18),
      0 0 0 1px rgba(182,138,28,.04) inset;
  }
}

.menuServiceMeta{
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,227,216,.78);
  min-height: 20px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

.menuServiceMeta.isChanging{
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(3px);
}

.menuServiceMeta.isVisible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.menuServiceMeta__dot{
  display: inline-block;
  margin: 0 .45rem;
  color: rgba(182,138,28,.78);
}

.menuServiceMeta__time{
  color: rgba(233,227,216,.92);
}

.menuControls{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: center;

  /* piccolo “blocchetto” centrato come header di carta menu */
  padding-top: 4px;
}

.menuHelpLine{
  margin-top: 10px;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.menuCoverNotice{
  width: min(760px, 100%);
  margin: 14px auto 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(182,138,28,.28);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.18), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.70), rgba(10,10,10,.42));
  box-shadow:
    0 18px 46px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.035) inset;
  text-align: left;
}

.menuCoverNotice__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menuCoverNotice__label{
  color: rgba(233,227,216,.94);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.menuCoverNotice__price{
  flex: 0 0 auto;
  color: rgba(182,138,28,.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.menuCoverNotice__text{
  margin: 7px 0 0;
  color: rgba(233,227,216,.70);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 640px){
  .menuCoverNotice{
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .menuCoverNotice__top{
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .menuCoverNotice__label{
    font-size: 10px;
    letter-spacing: .16em;
  }

  .menuCoverNotice__price{
    font-size: 11px;
    letter-spacing: .08em;
  }

  .menuCoverNotice__text{
    font-size: 12.5px;
    line-height: 1.42;
  }
}

/* ==========================================================================
   WOW #1 — Search-as-Mode (smart)
   - focus = modalità
   - query vuota = hint UI (non risultati)
   ========================================================================== */
body.isSearchMode .searchWrap{
  border-color: rgba(92,52,39,.44);
  box-shadow:
    0 18px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(182,138,28,.12) inset;
}

body.isSearchMode .stickyTabs{
  background: rgba(11,12,15,.86);
}

/* quando sei in Search Mode ma senza query: il menu “respira” e lascia spazio all’intento */
.itemsGrid.isSearchHint{
  opacity: .28;
  filter: saturate(.9);
  pointer-events: none;
}

/* hint text più “editoriale” */
body.isSearchMode .resultMeta{
  color: rgba(233,227,216,.62);
  letter-spacing: .06em;
}

/* ===== Menu SEO (testuale, indicizzabile) ===== */
.menuSeo{
  margin-top: 18px;
}

.menuSeo__box{
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(11,12,15,.55);
  border-radius: 18px;
  padding: 10px 12px;
}

.menuSeo__summary{
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,227,216,.86);
  padding: 10px 6px;
}

.menuSeo__inner{
  padding: 10px 6px 6px;
}

.menuSeo__h{
  margin: 18px 0 10px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,227,216,.82);
}

.menuSeo__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.menuSeo__item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 10px 10px;
  border: 1px solid rgba(233,227,216,.10);
  background: rgba(17,19,24,.38);
  border-radius: 14px;
}

.menuSeo__name{
  font-size: 14px;
}

.menuSeo__price{
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(92,52,39,.92);
}

.menuSeo__short{
  grid-column: 1 / -1;
  font-size: 13px;
  opacity: .78;
  line-height: 1.45;
}



.searchWrap{
  width: min(640px, 100%);
  display:flex;
  align-items:center;

  border:1px solid var(--line);
  background: rgba(17,19,24,.72);
  border-radius: 18px;
  padding: 10px 10px 10px 12px;

  margin: 0 auto;
}

.searchInput{
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);

  /* iOS Safari: evita lo zoom automatico al focus */
  font-size: 16px;
}

/* Se vuoi “visivamente” più piccolo senza triggerare lo zoom:
   lavora su letter-spacing / opacity / line-height / padding, NON sul font-size */

.searchInput::placeholder{ color: rgba(233,227,216,.45); }

.iconBtn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  opacity: .35;
}
@media (hover:hover) and (pointer:fine){
  .iconBtn:hover{ color: var(--text); background: rgba(233,227,216,.06); }
}

/* ===== Sticky tabs wrapper ===== */
.stickyTabs{
  position: sticky;
  top: calc(var(--navH, 56px) + var(--abH, 0px));
  z-index: 40;

  background: rgba(11,12,15,.78);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  overflow: visible;
}

/* maschera micro-gap */
.stickyTabs::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-8px;
  height:8px;
  background: linear-gradient(180deg, rgba(11,12,15,.55), rgba(11,12,15,0));
  pointer-events:none;
}

body.modal-open .stickyTabs{ z-index: 1; }

/* ==========================================================================
   TABS — Editorial underline
   ========================================================================== */

/* container */
.tabs{
  display:flex;
  gap: 18px;
  justify-content: center;
  overflow: visible;
  padding: 3px 0 14px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display:none; }

@media (max-width: 900px){
  .tabs{
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

/* button */
.tab{
  position: relative;
  flex: 0 0 auto;

  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;

  color: rgba(233,227,216,.72);
  cursor:pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;

  letter-spacing: .11em;
  text-transform: uppercase;

  transition: transform .14s ease, color .18s ease, opacity .18s ease;
}

/* underline premium (glow + line) */
.tab::before{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 10px;
  border-radius: 999px;

  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;

  background: radial-gradient(60% 60% at 50% 70%, rgba(92,52,39,.26), transparent 70%);
  pointer-events:none;
}
.tab::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;

  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease, background .22s ease;

  background: linear-gradient(90deg, rgba(182,138,28,0), rgba(182,138,28,.82), rgba(182,138,28,0));
  pointer-events:none;
}

/* hover (solo device con hover reale) */
@media (hover:hover) and (pointer:fine){
  .tab:hover{ color: var(--text); transform: translateY(-1px); }
  .tab:hover::before{ opacity: .55; transform: translateY(0); }
  .tab:hover::after{ opacity: .70; transform: scaleX(1); }
}


/* active */
.tab--active{ color: var(--text); transform: translateY(-1px); }
.tab--active::before{ opacity: .85; transform: translateY(0); }
.tab--active::after{
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(182,138,28,0), rgba(182,138,28,.95), rgba(182,138,28,0));
}

/* stuck (sync con sticky groupHead in ricerca) — NO pannello, solo glow */
.tab--stuck{
  color: rgba(233,221,185,.98);
  text-shadow: 0 0 18px rgba(182,138,28,.16);
}
.tab--stuck::before{
  opacity: 1;
  transform: translateY(0);
  background: radial-gradient(60% 60% at 50% 70%, rgba(92,52,39,.34), transparent 70%);
}
.tab--stuck::after{
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(182,138,28,0), rgba(182,138,28,1), rgba(182,138,28,0));
}

/* disabled (nessun risultato) — ultra mute */
.tab--disabled{
  opacity: .18;
  cursor: default;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  color: rgba(233,227,216,.22);
  text-shadow: none;
}
.tab--disabled::before{ opacity: 0 !important; }
.tab--disabled::after{ opacity: 0 !important; transform: scaleX(.2); }

/* focus (editoriale + accessibile)
   - niente outline "default blu"
   - ring coerente su tab/cards/icone/modal
   - searchWrap si illumina quando l’input è attivo (focus-within)
*/
:where(.tab, .itemCard, .btn, .iconBtn, .modalClose):focus-visible{
  outline: 2px solid rgba(182,138,28,.58);
  outline-offset: 4px;
}

/* tab: segue la sua geometria */
.tab:focus-visible{
  border-radius: 10px;
}

/* cards: un pelo più “premium” quando arrivi via tastiera */
.itemCard:focus-visible{
  box-shadow:
    0 0 0 1px rgba(182,138,28,.16) inset,
    0 22px 44px rgba(0,0,0,.38);
}

/* search: ring sul contenitore quando l’input è attivo */
.searchWrap:focus-within{
  border-color: rgba(92,52,39,.46);
  box-shadow:
    0 0 0 1px rgba(182,138,28,.12) inset,
    0 0 0 4px rgba(182,138,28,.12);
}


/* ==========================================================================
   RESULTS GRID / CARDS
   ========================================================================== */

.resultMeta{ padding: 14px 0 8px; }

.itemsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  transition:
    opacity .34s cubic-bezier(.22,.86,.24,1),
    transform .34s cubic-bezier(.22,.86,.24,1),
    filter .34s cubic-bezier(.22,.86,.24,1);
  will-change: opacity, transform, filter;
}

/* uscita vecchio contenuto: più morbida, meno “sparizione” */
.itemsGrid.isSwitching{
  opacity: .70;
  transform: translateY(3px) scale(.9985);
  filter: blur(.35px);
}

/* entrata nuovo contenuto: micro assestamento premium */
.itemsGrid.isSettling{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ===== WOW #5A — Perceived perf: skeleton chic ===== */
.itemsGrid.isLoading{
  pointer-events: none;
}

/* skeleton card: niente shimmer, solo pulse “respirato” */
@keyframes skeletonPulse{
  0%{ opacity: .55; }
  50%{ opacity: .80; }
  100%{ opacity: .55; }
}

.skeletonCard{
  border: 1px solid rgba(233,227,216,.10);
  background: rgba(17,19,24,.72);
  border-radius: 18px;
  padding: 16px 16px 14px;
  min-height: 98px;
  position: relative;
  overflow: hidden;
  animation: skeletonPulse 1.05s ease-in-out infinite;
}

.skeletonCard .skLine{
  height: 10px;
  border-radius: 999px;
  background: rgba(233,227,216,.10);
}

.skeletonCard .skLine + .skLine{ margin-top: 10px; }
.skeletonCard .skTitle{ width: 62%; height: 12px; }
.skeletonCard .skSub{ width: 78%; }
.skeletonCard .skTiny{ width: 38%; height: 9px; margin-top: 14px; opacity: .9; }

/* ===== Empty state (Search / sezioni vuote) ===== */
.emptyState{
  border: 1px solid rgba(233,227,216,.10);
  background: rgba(17,19,24,.55);
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
  max-width: 560px;
  margin: 14px auto;
}

.emptyState__title{
  font-size: 15px;
  letter-spacing: .2px;
}

.emptyState__sub{
  margin-top: 8px;
  font-size: 13px;
  opacity: .82;
  line-height: 1.45;
}

.emptyBtn{
  margin-top: 14px;

  border: 1px solid rgba(92,52,39,.62);
  background: linear-gradient(180deg, rgba(92,52,39,.40), rgba(92,52,39,.24));
  color: rgba(233,227,216,.96);

  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;

  box-shadow:
    0 14px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(182,138,28,.10) inset;

  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

@media (hover:hover) and (pointer:fine){
  .emptyBtn:hover{
    border-color: rgba(182,138,28,.55);
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

.emptyBtn:active{
  transform: translateY(0) scale(.992);
  filter: brightness(1.05);
}

.emptyBtn:focus-visible{
  outline: 2px solid rgba(92,52,39,.58);
  outline-offset: 3px;
}


/* ===== Cards: micro ingresso (stagger leggero) ===== */
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.itemsGrid.cards--in .itemCard{
  animation: cardIn .32s ease both;
}

/* WOW #5B — lazy reveal per liste lunghe (IO)
   Nota: viene attivato via JS solo quando serve (molte card).
*/
.itemCard.cardLazy{
  opacity: 0;
  transform: translateY(10px);
}
.itemCard.cardLazy.isSeen{
  animation: cardIn .28s ease both;
}

@media (prefers-reduced-motion: reduce){
  .itemCard.cardLazy{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* stagger (fino a 12 card visibili) */
.itemsGrid.cards--in .itemCard:nth-child(1){ animation-delay: 0ms; }
.itemsGrid.cards--in .itemCard:nth-child(2){ animation-delay: 18ms; }
.itemsGrid.cards--in .itemCard:nth-child(3){ animation-delay: 36ms; }
.itemsGrid.cards--in .itemCard:nth-child(4){ animation-delay: 54ms; }
.itemsGrid.cards--in .itemCard:nth-child(5){ animation-delay: 72ms; }
.itemsGrid.cards--in .itemCard:nth-child(6){ animation-delay: 90ms; }
.itemsGrid.cards--in .itemCard:nth-child(7){ animation-delay: 108ms; }
.itemsGrid.cards--in .itemCard:nth-child(8){ animation-delay: 126ms; }
.itemsGrid.cards--in .itemCard:nth-child(9){ animation-delay: 144ms; }
.itemsGrid.cards--in .itemCard:nth-child(10){ animation-delay: 162ms; }
.itemsGrid.cards--in .itemCard:nth-child(11){ animation-delay: 180ms; }
.itemsGrid.cards--in .itemCard:nth-child(12){ animation-delay: 198ms; }

@keyframes accCardIn{
  from{ transform: translateY(8px); }
  to{ transform: translateY(0); }
}

/* WOW safe: solo transform (zero opacity/zero filter) */
.groupBody.body--in .itemCard{
  opacity: 1 !important; /* safety: niente blink anche se altre regole toccano opacity */
  animation: accCardIn .20s cubic-bezier(.2,.9,.2,1) both;
  will-change: transform;
  backface-visibility: hidden;
}



/* stagger più leggero (max 10) */
.groupBody.body--in .itemCard:nth-child(1){ animation-delay: 0ms; }
.groupBody.body--in .itemCard:nth-child(2){ animation-delay: 16ms; }
.groupBody.body--in .itemCard:nth-child(3){ animation-delay: 32ms; }
.groupBody.body--in .itemCard:nth-child(4){ animation-delay: 48ms; }
.groupBody.body--in .itemCard:nth-child(5){ animation-delay: 64ms; }
.groupBody.body--in .itemCard:nth-child(6){ animation-delay: 80ms; }
.groupBody.body--in .itemCard:nth-child(7){ animation-delay: 96ms; }
.groupBody.body--in .itemCard:nth-child(8){ animation-delay: 112ms; }
.groupBody.body--in .itemCard:nth-child(9){ animation-delay: 128ms; }
.groupBody.body--in .itemCard:nth-child(10){ animation-delay: 144ms; }


/* accessibilità: riduci motion (completo)
   - niente animazioni “wow”
   - niente transizioni inutili
   - niente smooth scroll (se presente in futuro)
*/
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* fallback specifici già presenti */
  .itemsGrid,
  .itemsGrid.isSwitching{
    transition: none !important;
    transform: none !important;
  }
  .itemsGrid.cards--in .itemCard{
    animation: none !important;
  }
}



/* cards */
.itemCard{
  text-align:left;
  position: relative;

  border: 1px solid rgba(233,227,216,.14);
  background:
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(12,13,16,.78));
  border-radius: 22px;
  padding: 14px;

  cursor:pointer;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* micro “sheen” (luxury) */
.itemCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  opacity: 0;

  background:
    radial-gradient(600px 180px at 20% 0%, rgba(92,52,39,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);

  transition: opacity .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .itemCard:hover{
    transform: translateY(-2px);
    border-color: rgba(92,52,39,.42);
    box-shadow:
      0 22px 44px rgba(0,0,0,.42),
      0 0 0 1px rgba(182,138,28,.12) inset;
  }
  .itemCard:hover::before{ opacity: 1; }
}


/* press state (OS-like) */
:where(.tab, .btn, .iconBtn, .modalClose, .itemCard):active{
  transform: translateY(0px) scale(.992);
}

/* la card può permettersi un filo più di “press” */
.itemCard:active{
  transform: translateY(0px) scale(.988);
  filter: brightness(1.06);
}

/* se riduci motion: niente press “animato” */
@media (prefers-reduced-motion: reduce){
  :where(.tab, .btn, .iconBtn, .modalClose, .itemCard):active{
    transform: none !important;
    filter: none !important;
  }
}


/* ==========================================================================
   WOW #2 — Cards editoriali (STEP 2.1)
   - tipographic grid + gerarchie
   - prezzo come “aside” pulito
   - meta line coerenti
   ========================================================================== */

/* nuovo layout (render.js usa .itemGrid / .itemMain / .itemAside) */
.itemGrid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:start;
}

/* se non c'è prezzo: la card diventa davvero 1 colonna */
.itemGrid--noAside{
  grid-template-columns: 1fr;
}


/* compat: se esistono ancora vecchie card con .itemTop, restano ok */
.itemTop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }

.itemMain{ min-width: 0; }
.itemAside{ display:flex; align-items:flex-start; justify-content:flex-end; }

/* title */
.itemName{
  font-size: 16.5px;
  letter-spacing:.02em;
  color: var(--text);
  font-weight: 700;
  line-height: 1.18;
}

/* short + ingredienti: due livelli diversi */
.itemShort{
  margin-top: 6px;
  color: rgba(233,227,216,.70);
  line-height: 1.45;
  font-size: 13px;
}
/* ==========================================================================
   WOW #2 — STEP 2.3
   Progressive disclosure ingredienti
   - silenziosi di default
   - più leggibili in search-mode e su focus/hover
   ========================================================================== */

.itemIngs{
  margin-top: 6px;
  color: rgba(233,227,216,.45);
  line-height: 1.35;
  font-size: 12.3px;

  max-height: none;
  overflow: visible;

  transition:
    color .18s ease;
}

/* quando ha senso leggerli davvero */
body.isSearchMode .itemIngs,
.itemCard:hover .itemIngs,
.itemCard:focus-visible .itemIngs{
  color: rgba(233,227,216,.62);
  max-height: 6.5em;          /* lascia respirare */
}


/* meta (per vini/spirits) */
.itemMeta{
  margin-top: 6px;
  color: rgba(233,227,216,.58);
  line-height: 1.35;
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* badge row: più “quiet” e integrata */
.itemFlags{
  margin-top: 8px;
}

/* prezzo: più tipografico, meno “pill urlata” */
.itemPrice{
  color: rgba(233,221,185,.98);
  font-size: 12.5px;
  letter-spacing: .08em;

  border: 1px solid rgba(92,52,39,.42);
  background: rgba(92,52,39,.14);
  padding: 6px 10px;
  border-radius: 999px;

  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    0 0 0 1px rgba(182,138,28,.08) inset;
  white-space: nowrap;
}

/* prezzo multi: più editoriale (righe), sempre allineato a destra */
.itemPrice--multi{
  padding: 8px 10px;
  border-radius: 16px;
  white-space: normal;
}

.priceSeg{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}

.priceSeg + .priceSeg{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(233,227,216,.10);
}

.priceLbl{
  color: rgba(233,227,216,.58);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.priceLbl--ghost{
  opacity: 0;
}

.priceVal{
  color: rgba(233,221,185,.98);
  font-size: 12.5px;
  letter-spacing: .08em;
}

.tagRow{ display:flex; gap:6px; flex-wrap:wrap; margin-top: 10px; }
.tag{
  font-size: 12px;
  color: var(--muted);
  border:1px solid var(--line);
  padding: 6px 8px;
  border-radius: 999px;
}

.badgeIconRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-top:12px;
}

.badgeIcon{
  --badge-bg: #efe6d7;
  --badge-bd: rgba(255,255,255,.10);

  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:.5px solid var(--badge-bd);
  border-radius:999px;
  color:rgba(255,248,236,.98);
  background:
    radial-gradient(110% 110% at 30% 22%, rgba(255,255,255,.14), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)),
    var(--badge-bg);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.18);
  line-height:1;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.badgeIcon::after{
  content:"";
  position:absolute;
  inset:.5px;
  border-radius:inherit;
  background: radial-gradient(90% 90% at 35% 28%, rgba(255,255,255,.07), transparent 66%);
  pointer-events:none;
}

.badgeIcon__glyph{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
}

.badgeIcon__glyph svg{
  width:30px;
  height:30px;
  display:block;
  overflow:visible;
}

.badgeIcon__glyph svg path,
.badgeIcon__glyph svg circle,
.badgeIcon__glyph svg ellipse{
  vector-effect: non-scaling-stroke;
}

.badgeIcon:hover{
  transform:translateY(-1px) scale(1.03);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 24px rgba(0,0,0,.24);
  filter:saturate(1.04) brightness(1.02);
}

/* palette badge più editoriale / illustrata */
.badgeIcon--vegan{
  --badge-bg:#8fb86c;
}
.badgeIcon--vegetarian{
  --badge-bg:#c9b55a;
}
.badgeIcon--frozen{
  --badge-bg:#66bce9;
}
.badgeIcon--may_contain{
  --badge-bg:#c89a6d;
}
.badgeIcon--gluten{
  --badge-bg:#d7a63b;
}
.badgeIcon--crustaceans{
  --badge-bg:#de8468;
}
.badgeIcon--eggs{
  --badge-bg:#b69772;
}
.badgeIcon--fish{
  --badge-bg:#63aeca;
}
.badgeIcon--peanuts{
  --badge-bg:#9f7748;
}
.badgeIcon--milk{
  --badge-bg:#74c3ea;
}
.badgeIcon--nuts{
  --badge-bg:#b19163;
}
.badgeIcon--celery{
  --badge-bg:#74ad61;
}
.badgeIcon--mustard{
  --badge-bg:#c49c3f;
}
.badgeIcon--sesame{
  --badge-bg:#b9a27d;
}
.badgeIcon--sulphites{
  --badge-bg:#79b6cf;
}
.badgeIcon--soy{
  --badge-bg:#6ea35f;
}
.badgeIcon--lupin{
  --badge-bg:#d2ae3f;
}
.badgeIcon--molluscs{
  --badge-bg:#66b7a8;
}

.badgeHint{
  flex: 0 0 100%;
  display: block;
  overflow: hidden;

  max-height: 0;
  margin-top: 0;
  padding: 0 10px;

  border-radius: 12px;
  border: 1px solid rgba(233,227,216,0);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(92,52,39,.08), transparent 60%),
    rgba(17,19,24,.72);

  color: rgba(233,227,216,.86);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;

  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.03) inset;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  transition:
    max-height .18s ease,
    margin-top .18s ease,
    padding-top .18s ease,
    padding-bottom .18s ease,
    border-color .18s ease,
    opacity .16s ease,
    transform .16s ease;
}

.badgeHint.isOpen{
  max-height: 48px;
  margin-top: 4px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-color: rgba(233,227,216,.10);
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 700px){
  .badgeHint{
    font-size: 10.5px;
    letter-spacing: .05em;
    padding-left: 9px;
    padding-right: 9px;
  }

  .badgeHint.isOpen{
    max-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ==========================================================================
   SEARCH GROUPS (ricerca full-text)
   - gruppi full-width
   - risultati 1 colonna
   - header sticky sotto tabs
   ========================================================================== */

.itemsGrid.isGrouped{
  grid-template-columns: 1fr;

  /* coda di scroll: permette all’ULTIMA categoria di raggiungere la sticky line */
  padding-bottom: calc(55vh + var(--stickyOffset, 76px));
}


/* gruppo wrapper */
.itemsGrid.isGrouped .group{
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 14px;
}

/* body SEMPRE 1 colonna in ricerca */
.itemsGrid.isGrouped .groupBody{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* groupHead in ricerca: NON sticky di default (evita “ghost A” sopra navbar/tabs) */
.itemsGrid.isGrouped .groupHead{
  position: relative;
  top: auto;
  z-index: 1;

  background: rgba(11,12,15,.86);
  border: 1px solid rgba(233,227,216,.14);
  border-radius: 16px;
  padding: 12px 12px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.06) inset;

  backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease;
}

/* SOLO la categoria “A” scelta dal JS diventa sticky (una sola alla volta) */
.itemsGrid.isGrouped .groupHead.isStuck{
  position: sticky;
  top: calc(var(--stickyOffset, 76px) + var(--abH, 0px));
  z-index: 45;
}


/* title style (ricerca) */
.itemsGrid.isGrouped .groupTitle{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(233,227,216,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  transition: color .18s ease;
}

/* stuck glow */
.itemsGrid.isGrouped .groupHead.isStuck{
  background: linear-gradient(180deg, rgba(30,26,18,.98), rgba(14,12,9,.98));
  border-color: rgba(182,138,28,.62);
  box-shadow:
    0 14px 34px rgba(0,0,0,.50),
    0 0 0 1px rgba(182,138,28,.28) inset,
    0 6px 22px rgba(182,138,28,.22);
  transform: translateY(-1px);
}
.itemsGrid.isGrouped .groupHead.isStuck .groupTitle{
  color: rgb(233,221,185);
}

/* pre-active (B che “si accende” prima di diventare stuck) */
.itemsGrid.isGrouped .groupHead.isPre{
  /* progress via --pre: 0→1 (set inline in JS) */
  border-color: rgba(182,138,28,.35);
  box-shadow:
    0 12px 28px rgba(0,0,0,.46),
    0 0 0 1px rgba(182,138,28, calc(.10 + var(--pre, 0) * .22)) inset,
    0 6px 18px rgba(182,138,28, calc(.06 + var(--pre, 0) * .18));
}
.itemsGrid.isGrouped .groupHead.isPre .groupTitle{
  color: rgba(233,221,185, calc(.55 + var(--pre, 0) * .40));
}

/* tab pre-active (facoltativo, ma completa la sensazione “B sta arrivando”) */
.tab--pre{
  color: rgba(233,221,185, calc(.55 + var(--pre, 0) * .35));
  text-shadow: 0 0 14px rgba(182,138,28, calc(.08 + var(--pre, 0) * .12));
}
.tab--pre::before{
  opacity: calc(.25 + var(--pre, 0) * .55);
  transform: translateY(0);
}

/* ==========================================================================
   SECTIONED (Vini / Spirits accordion)
   ========================================================================== */

.itemsGrid.isSectioned{
  grid-template-columns: 1fr;

  /* coda di scroll: permette all’ULTIMA tendina (anche con 1 item)
     di portare il suo titolo sotto le tabs sticky */
  padding-bottom: calc(55vh + var(--stickyOffset, 76px));
}

/* gruppo sectioned */
.itemsGrid.isSectioned .group{
  background: transparent;
  border-radius: 22px;

  /* respiro tra tendine (più “menu editoriale”) */
  padding: 2px 0;

  transition: transform .22s ease;
}

/* header sectioned */
.itemsGrid.isSectioned .groupHead{
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 16px;

  /* CHIUSO = vivo (invito), non morto */
  border: 1px solid rgba(233,227,216,.14);
  background:
    radial-gradient(520px 180px at 16% 0%, rgba(92,52,39,.10), transparent 60%),
    linear-gradient(180deg, rgba(17,19,24,.62), rgba(11,12,15,.46));
  color: rgba(233,227,216,.88);

  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05) inset;

  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* micro “sheen” invisibile: fa premium senza urlare */
.itemsGrid.isSectioned .groupHead::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity: 0;
  transform: translateX(-60%);
  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.14) 18%,
      rgba(233,227,216,.06) 28%,
      rgba(182,138,28,.10) 38%,
      rgba(182,138,28,0) 60%
    );
  filter: blur(1px);
  transition: opacity .18s ease, transform .32s ease;
}

/* MOBILE: feedback touch (press) */
.itemsGrid.isSectioned .groupHead:active{
  transform: translateY(0px) scale(.992);
  border-color: rgba(182,138,28,.42);
  box-shadow:
    0 10px 26px rgba(0,0,0,.36),
    0 0 0 1px rgba(182,138,28,.10) inset;
}

/* MOBILE: sheen “one-shot” quando si apre (sostituisce l’hover) */
@keyframes alkSheenOnce{
  0%   { opacity: 0; transform: translateX(-70%); }
  18%  { opacity: .95; }
  55%  { opacity: .85; }
  100% { opacity: 0; transform: translateX(70%); }
}
.itemsGrid.isSectioned .group.isOpen .groupHead::before{
  animation: alkSheenOnce .55s ease-out 1;
}

@media (hover:hover) and (pointer:fine){
  .itemsGrid.isSectioned .groupHead:hover{
    transform: translateY(-1px);
    border-color: rgba(92,52,39,.36);
    box-shadow:
      0 14px 34px rgba(0,0,0,.38),
      0 0 0 1px rgba(92,52,39,.10) inset;
  }
  .itemsGrid.isSectioned .groupHead:hover::before{
    opacity: .9;
    transform: translateX(60%);
  }
}

.itemsGrid.isSectioned .groupTitle{
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;

  /* CHIUSO = presente ma “poster” */
  opacity: .90;
  color: rgba(233,227,216,.90);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);

  position: relative;
  padding-bottom: 8px;

  transition: opacity .18s ease, color .18s ease, text-shadow .18s ease, transform .18s ease;
}

/* underline “ink” (quiet quando chiuso) */
.itemsGrid.isSectioned .groupTitle::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, rgba(92,52,39,0), rgba(92,52,39,.62), rgba(92,52,39,0));
  opacity: .22;
  transform: scaleX(.35);
  transform-origin: center;

  transition: transform .22s ease, opacity .18s ease, filter .18s ease, background .22s ease;
}

/* APERTO = si accende SOLO il titolo (ink + glow + micro lift) */
.itemsGrid.isSectioned .group.isOpen .groupTitle{
  opacity: 1;
  color: rgba(233,227,216,.98);
  text-shadow:
    0 0 18px rgba(182,138,28,.16),
    0 1px 0 rgba(0,0,0,.35);
  transform: translateY(-1px);
}

.itemsGrid.isSectioned .group.isOpen .groupTitle::after{
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(182,138,28,0), rgba(182,138,28,.98), rgba(182,138,28,0));
  filter: drop-shadow(0 0 14px rgba(182,138,28,.16));
}

/* caret accordion */
.itemsGrid.isSectioned .groupHead{ transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.itemsGrid.isSectioned .group[data-collapsible='1'] .groupHead{ position: relative; }
.itemsGrid.isSectioned .group[data-collapsible='1'] .groupHead::after{
  content: "▾";
  opacity: .55;
  transform: translateY(-1px);
  transition: transform .18s ease, opacity .18s ease;
}

.itemsGrid.isSectioned .group.isOpen .groupHead::after{
  opacity: .95;
}
.itemsGrid.isSectioned .group.isOpen .groupHead::after{
  transform: rotate(180deg);
  opacity: 1;
}

/* body accordion */
.itemsGrid.isSectioned .groupBody{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: hidden;
  transition: max-height .22s ease, opacity .22s ease;
}

/* panel open — NO box “pieno”: si accende SOLO il titolo */
.itemsGrid.isSectioned .group.isOpen{
  background: transparent;
  box-shadow: none;
}

.itemsGrid.isSectioned .group.isOpen .groupHead{
  /* aperto: header resta elegante e pulito, accent “corten” laterale */
  border-color: rgba(182,138,28,.42);
  background:
    radial-gradient(520px 180px at 16% 0%, rgba(92,52,39,.12), transparent 60%),
    linear-gradient(180deg, rgba(17,19,24,.68), rgba(11,12,15,.48));

  box-shadow:
    0 16px 40px rgba(0,0,0,.42),
    0 0 0 1px rgba(182,138,28,.10) inset;

  transform: translateY(-1px);
}

/* taglio corten: “firma” aperto (molto Alkemia) */
.itemsGrid.isSectioned .group.isOpen .groupHead{
  position: relative;
}

/* rail corten “entra” (wow mobile, pulito) */
.itemsGrid.isSectioned .group.isOpen .groupHead::after{
  /* manteniamo anche la caret (già esiste), quindi usiamo un inset line via box-shadow */
  box-shadow: inset 3px 0 0 rgba(92,52,39,.70);
  animation: alkRailIn .22s ease-out 1;
}

@keyframes alkRailIn{
  from{ box-shadow: inset 0px 0 0 rgba(92,52,39,0); }
  to  { box-shadow: inset 3px 0 0 rgba(92,52,39,.70); }
}

/* ==========================================================================
   Search highlight + badges
   ========================================================================== */

/* highlight editoriale: ink underline (no evidenziatore) */
.hl{
  /* <mark> di default ha background: lo annulliamo */
  background: transparent;
  color: rgba(233,221,185,.98);
  padding: 0;
  border: 0;
  border-radius: 0;

  text-decoration-line: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
  text-decoration-color: rgba(92,52,39,.55);

  /* micro “ink bleed” */
  text-shadow: 0 0 14px rgba(92,52,39,.10);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 11px;
  color: rgba(233,227,216,.78);
  border: 1px solid rgba(233,227,216,.18);
  background: rgba(233,227,216,.04);
  padding: 6px 8px;
  border-radius: 999px;
}
.badge--gold{
  border-color: rgba(92,52,39,.35);
  background: rgba(92,52,39,.10);
}

/* ==========================================================================
   WOW #3 — STEP 3.1 (modal "page/sheet")
   - X fissa in alto a dx (non scrolla via)
   - header sotto la X (spazio dedicato)
   - scroll SOLO nel body del modal (premium, app-like)
   - scrollbar desktop: thin + luxury
   ========================================================================== */

.modalOverlay{
  position: fixed;
  inset:0;
  z-index: 9999;
  background: rgba(0,0,0,.68);
    /* background “respirato” cross-device */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display:flex;
  align-items:flex-end;      /* sheet sempre */
  justify-content:center;
  padding: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.modalOverlay.isOpen{
  opacity: 1;
  pointer-events: auto;
}

/* sheet container: NON scrolla (scroll nel body) */
.modal{
  width: min(900px, 100%);
  max-height: min(92vh, 980px);
  overflow: hidden;           /* chiave: niente scroll qui */

  border: 1px solid rgba(233,227,216,.10);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(92,52,39,.14), transparent 60%),
    rgba(14,16,20,.96);

  border-radius: 30px 30px 0 0;
  padding: 18px;
  position: relative;

  transform: translateY(26px);
  opacity: 0;
  transition: transform .26s ease, opacity .22s ease;

  box-shadow:
    0 42px 130px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.06) inset;

  will-change: transform;
}

/* drag gesture: niente transition durante il trascinamento */
.modal.isDragging{
  transition: none !important;
}


.modalOverlay.isOpen .modal{
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 701px){
  .modal{ margin-bottom: 14px; }
}

/* X: sempre visibile, sopra tutto, NON scrolla via */
.modalClose{
  position:absolute;
  top: 12px; right: 12px;

  width: 40px; height: 40px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(17,19,24,.35);
  color: var(--muted);
  cursor:pointer;

  z-index: 10;
  backdrop-filter: blur(8px);

  /* gesture-friendly */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* fascia drag invisibile sopra la testata:
   - prende swipe down anche al centro in alto
   - sta sotto la X (z-index 9 vs 10)
*/
.modalTopDrag{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;          /* copre la fascia “vuota” sopra la modalHead */
  z-index: 9;

  background: transparent;
  touch-action: none;
}


@media (hover:hover) and (pointer:fine){
  .modalClose:hover{ color: var(--text); background: rgba(233,227,216,.06); }
}

/* header: scende sotto la X (niente compressione, niente overlay) */
.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;

  margin-top: 52px;           /* spazio dedicato alla X */
  padding-right: 0;

  border-bottom: 1px solid rgba(233,227,216,.12);
  padding-bottom: 14px;

  box-shadow: 0 1px 0 rgba(0,0,0,.35);

  /* gesture area: evita che iOS trasformi lo swipe in scroll */
  touch-action: none;

  /* nessun "punto morto" */
  user-select: none;
  -webkit-user-select: none;

  /* desktop hint */
  cursor: grab;
}

.modal.isDragging .modalHead{
  cursor: grabbing;
}



/* body: qui avviene lo scroll */
.modalBody{
  padding-top: 16px;
  padding-bottom: 28px; /* ✅ respiro finale: niente “a filo schermo” */
  overflow: auto;
  max-height: calc(92vh - 18px - 52px - 78px); /* viewport - padding - spazio X - approx header */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* lascia lo scroll verticale nativo, ma evita che il browser “mangi” lo swipe orizzontale */
  touch-action: pan-y;
}


/* scrollbar premium (desktop) */
@media (min-width: 701px){
  .modalBody{
    scrollbar-width: thin;
    scrollbar-color: rgba(92,52,39,.35) transparent;
  }
  .modalBody::-webkit-scrollbar{ width: 10px; }
  .modalBody::-webkit-scrollbar-track{ background: transparent; }
  .modalBody::-webkit-scrollbar-thumb{
    background: rgba(92,52,39,.22);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .modalBody::-webkit-scrollbar-thumb:hover{
    background: rgba(92,52,39,.30);
    border: 3px solid transparent;
    background-clip: content-box;
  }
}



.modalTitle{
  margin: 0;
  font-size: 26px;
  letter-spacing:.01em;
  line-height: 1.15;
}
.modalSubtitle{
  margin: 8px 0 0;
  font-size: 12.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .85;
}
.priceTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(92,52,39,.58);
  background: rgba(92,52,39,.18);
  box-shadow:
    0 12px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(182,138,28,.16) inset;
}

/* Gin: prezzo in 2 righe (Liscio / Gin Tonic) + centratura verticale nel header */
.modal.isGin .priceTag{
  align-self: center; /* centra il riquadro prezzi sull’asse Y della testata */
}

.priceTag.isStack{
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  white-space: normal;
}

.priceTag.isStack .priceLine{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.priceTag.isStack .priceLineLbl{
  color: rgba(233,227,216,.58);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.priceTag.isStack .priceLineVal{
  color: rgba(233,221,185,.98);
  font-size: 12.5px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.modalBody{
  padding-top: 16px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.modalSection{
  padding: 14px 0;
  border-bottom:1px solid var(--line);
}
.modalSection:last-child{
  border-bottom: 0;
  padding-bottom: 22px; /* ✅ respiro extra sull’ultima sezione */
}
.modalSection h3,
.modalBody > h3,
.modalSectionTitle{
  margin: 16px 0 12px;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;

  color: rgba(233,227,216,.92);
  opacity: 1;

  position: relative;
  padding-bottom: 10px;

  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* underline editoriale (glow + linea) */
.modalSection h3::after,
.modalBody > h3::after,
.modalSectionTitle::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 2px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(182,138,28,0),
    rgba(182,138,28,.92),
    rgba(182,138,28,0)
  );

  opacity: .72;
  filter: drop-shadow(0 0 14px rgba(182,138,28,.14));
}

/* più aria sopra “Dettagli” (titolo H3 del KV) */
#modalDetailsTitle{
  margin-top: 24px !important;
}
#modalDescription{
  line-height: 1.55;
  font-size: 14.5px;
  opacity: .92;
}
.ingredientsList{ margin:0; padding-left: 18px; color: var(--muted); }

/* Liste puntate “premium” (riusabile) */
.modalBullets{ margin: 0; padding-left: 20px; color: var(--muted); }
.modalBullets li{ margin: 6px 0; line-height: 1.45; }
.modalBullets li::marker{ font-size: 1.25em; }

/* Premi: lista puntata (1 per riga) — bullet più presente */
.modalAwardsList{ margin: 0; padding-left: 20px; color: var(--muted); }
.modalAwardsList li{ margin: 7px 0; line-height: 1.45; }
.modalAwardsList li::marker{ font-size: 1.35em; }

/* =========================================================
   MODAL — grammatica “BOX” per sezioni testo
   (Descrizione / Note / Perfetto con / Premi)
   - non richiede markup: styling diretto dei blocchi
   ========================================================= */

/* Box testo: stessa grammatica di .modalBox */
#modalDescription,
#modalNotes,
#modalPairing{
  border:1px solid var(--line);
  background: rgba(233,227,216,.03);
  border-radius: 16px;
  padding: 12px;
}

/* tipografia testo nei box */
#modalDescription,
#modalNotes,
#modalPairing{
  line-height: 1.55;
  font-size: 14.5px;
  opacity: .92;
}

/* se dentro ci sono <p> multipli: spazio pulito */
#modalDescription p,
#modalNotes p,
#modalPairing p{
  margin: 0;
}
#modalDescription p + p,
#modalNotes p + p,
#modalPairing p + p{
  margin-top: 10px;
}

/* Premi: lo rendiamo “box” coerente e più premium */
#modalAwards{
  border:1px solid var(--line);
  background: rgba(233,227,216,.03);
  border-radius: 16px;
  padding: 12px;
}

/* Liste puntate “premium” (riusabili: es. Botaniche) */
.modalBullets{
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
}
.modalBullets li{
  margin: 8px 0;
  line-height: 1.50;
}
.modalBullets li::marker{
  font-size: 1.25em;
}

/* Premi: lista puntata (1 premio per riga) — bullet più importante + spacing */
.modalAwardsList{
  margin: 0;
  padding-left: 22px;        /* un filo più “aria” */
  color: var(--muted);
}
.modalAwardsList li{
  margin: 10px 0;            /* più respiro */
  line-height: 1.50;
}
.modalAwardsList li::marker{
  font-size: 1.35em;         /* bullet più presente */
}

/* micro hairline tra bullet (chic, non invasivo) */
.modalAwardsList li + li{
  position: relative;
  padding-top: 10px;
}
.modalAwardsList li + li::before{
  content:"";
  position:absolute;
  left: -22px;               /* allinea al padding-left */
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(233,227,216,.09);
}
.twoUp{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 700px){ .twoUp{ grid-template-columns: 1fr; } }

.kv{
  border:1px solid var(--line);
  background: rgba(233,227,216,.03);
  border-radius: 16px;
  padding: 12px;

  /* ultra chic: “Label: Valore” con indent automatico su wrap */
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
}

/* micro-tocco editoriale */
.kv .k{
  color: rgba(233,227,216,.58);
  opacity: .95;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.25;
}

/* valore: quando va a capo resta “appeso” dopo la label (2ª colonna) */
.kv .v{
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* hairline divider interno (tra righe consecutive dentro una stessa sezione) */
.modalSection .kv + .kv{
  position: relative;
  margin-top: 10px;
}
.modalSection .kv + .kv::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: -6px;
  height: 1px;
  background: rgba(233,227,216,.09);
}

/* =========================================================
   MODAL — BOX coerente con “Dettagli”
   (per Vinificazione / Affinamento / Caratteristiche)
   ========================================================= */
.modalBox{
  border:1px solid var(--line);
  background: rgba(233,227,216,.03);
  border-radius: 16px;
  padding: 12px;
}
.modalBox p{ margin:0; }

/* Caratteristiche (Label: Valore) — indent automatico su wrap */
.modalInlineKV .ikv{
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
}
.modalInlineKV .ik{
  color: rgba(233,227,216,.58);
  opacity: .95;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.25;
}
.modalInlineKV .iv{
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* hairline divider interno tra righe di Caratteristiche */
.modalInlineKV .ikv + .ikv{
  position: relative;
  margin-top: 10px;
  padding-top: 10px;
}
.modalInlineKV .ikv + .ikv::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(233,227,216,.09);
}

/* Caratteristiche (cocktail) — inline: “Dolce 3/5 • Acido 2/5 …” */
.modalInlineLine{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}
.modalInlineLine .mil{
  display:inline-flex;
  gap: 8px;
  align-items: baseline;
}
.modalInlineLine .mik{
  color: rgba(233,227,216,.58);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.25;
}
.modalInlineLine .miv{
  color: rgba(233,227,216,.92);
  letter-spacing: .06em;
  font-size: 12px;
}
.modalInlineLine .midot{
  color: rgba(233,227,216,.34);
}

.bars{ display:flex; flex-direction:column; gap: 10px; }
.barRow{ display:grid; grid-template-columns: 80px 1fr; gap: 10px; align-items:center; color: var(--muted); }
.bar{
  height: 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(233,227,216,.03);
  overflow:hidden;
}
.barFill{
  height: 100%;
  width: 0%;
  background: rgba(92,52,39,.35);
}

/* ===== ONE-TIME ONBOARDING (center overlay) ===== */

/* velo (step 1) */
.onboardOverlay{
  position: fixed;
  inset: 0;
  z-index: 1300;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;

  /* velo leggero + blur soft */
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* open step 1: entra il velo */
.onboardOverlay.isOpen{
  opacity: 1;
  pointer-events: auto;
}

/* card (step 2: entra DOPO il velo) */
.onboardCard{
  width: min(620px, 92vw);
  border-radius: 26px;

  background: rgba(10,10,10,.34);
  box-shadow: 0 26px 80px rgba(0,0,0,.62);

  /* bordo oro + micro “glass” */
  border: 1px solid rgba(92,52,39,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 18px 18px 14px;
  text-align: center;

  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease;

  position: relative;
  overflow: hidden;
}

/* open step 2: entra la card (con delay) */
.onboardOverlay.isCardIn .onboardCard{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* “shine” (un solo passaggio, molto sobrio) */
.onboardCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  pointer-events:none;

  background:
    linear-gradient(120deg,
      rgba(182,138,28,0) 0%,
      rgba(182,138,28,.22) 18%,
      rgba(233,227,216,.10) 28%,
      rgba(182,138,28,.18) 38%,
      rgba(182,138,28,0) 60%
    );
  transform: translateX(-55%);
  opacity: 0;
}

/* solo quando la card entra: 1 passaggio */
.onboardOverlay.isCardIn .onboardCard::before{
  opacity: .9;
  animation: onboardShine .9s ease 1 both;
}

@keyframes onboardShine{
  from{ transform: translateX(-55%); opacity: 0; }
  12%{ opacity: .85; }
  to{ transform: translateX(55%); opacity: 0; }
}

.onboardText{
  margin: 0;
  color: rgba(233,227,216,.94);
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.34;

  letter-spacing: .07em;
  text-transform: uppercase;

  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.onboardHint{
  margin-top: 10px;
  color: rgba(233,227,216,.55);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* riduzione motion */
@media (prefers-reduced-motion: reduce){
  .onboardOverlay{ transition: none; }
  .onboardCard{ transition: none; transform: none; opacity: 1; }
  .onboardCard::before{ animation: none !important; opacity: 0 !important; }
}

/* ==========================================================================
   APERITIVO E CENA — pagina SEO editoriale WOW
   ========================================================================== */

.apericenaPage{
  padding: 0 0 44px;
}

.apericenaHero{
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 11vw, 146px) 0 clamp(62px, 8vw, 104px);
  border-bottom: 1px solid rgba(233,227,216,.10);
  background:
    radial-gradient(1000px 520px at 20% 0%, rgba(92,52,39,.22), transparent 62%),
    radial-gradient(820px 420px at 82% 18%, rgba(182,138,28,.08), transparent 66%),
    linear-gradient(180deg, rgba(10,9,8,.92), rgba(8,7,6,.98));
  background-size: cover;
  background-position: center;
}

.apericenaHero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.apericenaHero > .container{
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.apericenaHero__title{
  margin: 0;
  max-width: 11ch;
  font-size: clamp(44px, 8vw, 88px);
  line-height: .96;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.apericenaHero__sub{
  margin: 18px 0 0;
  max-width: 66ch;
  color: rgba(233,227,216,.80);
  line-height: 1.62;
  font-size: clamp(15px, 2vw, 18px);
}

.apericenaHero__actions{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.apericenaSection{
  padding: clamp(64px, 8vw, 96px) 0;
  position: relative;
}

.apericenaSection::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(233,227,216,0), rgba(233,227,216,.10), rgba(233,227,216,0));
}

.apericenaGrid,
.apericenaSplit{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.apericenaSplit{
  align-items: center;
}

.apericenaText{
  color: rgba(233,227,216,.78);
  line-height: 1.66;
  font-size: 15.5px;
}

.apericenaText p{
  margin: 0;
}

.apericenaText p + p{
  margin-top: 14px;
}

.apericenaText--wide{
  max-width: 760px;
  margin-top: 16px;
}

.apericenaPhotoStack{
  position: relative;
  min-height: 420px;
}

.apericenaPhoto{
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(900px 420px at 22% 18%, rgba(92,52,39,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72));
  background-size: cover;
  background-position: center;
  box-shadow: 0 28px 90px rgba(0,0,0,.54);
}

.apericenaPhoto--big{
  min-height: 390px;
}

.apericenaPhoto--small{
  position: absolute;
  right: -10px;
  bottom: -18px;
  width: 42%;
  min-height: 170px;
  border-radius: 22px;
}

.apericenaSection--cards{
  background:
    radial-gradient(980px 460px at 20% 0%, rgba(92,52,39,.13), transparent 62%),
    rgba(10,10,10,.16);
}

.apericenaGallery{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: stretch;
}

.apericenaGallery__item{
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(10,10,10,.38);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  min-height: 260px;
  isolation: isolate;
}

.apericenaGallery__item--1,
.apericenaGallery__item--2{
  grid-column: span 6;
  min-height: 380px;
}

.apericenaGallery__item--3,
.apericenaGallery__item--4,
.apericenaGallery__item--5,
.apericenaGallery__item--6{
  grid-column: span 3;
  min-height: 250px;
}

.apericenaGallery__item img{
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.02);
  transform: scale(1.01);
}

.apericenaGallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58)),
    radial-gradient(600px 220px at 18% 0%, rgba(92,52,39,.18), transparent 62%);
  z-index: 1;
}

.apericenaGallery__item figcaption{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.16);
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(233,227,216,.88);
  padding: 8px 11px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.apericenaCards{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.apericenaCard,
.apericenaFaq__item{
  border-radius: 24px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.10), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.72), rgba(10,10,10,.42));
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  padding: 18px;
}

a.apericenaCard{
  display: block;
  position: relative;
  overflow: hidden;
  transition:
    transform .20s cubic-bezier(.2,.9,.2,1),
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease;
}

a.apericenaCard[href*="bombette-galatina"],
a.apericenaCard[href*="pinse-galatina"]{
  border-color: rgba(182,138,28,.28);
  background:
    radial-gradient(620px 210px at 18% 0%, rgba(182,138,28,.12), transparent 62%),
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.16), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.80), rgba(10,10,10,.46));
  box-shadow:
    0 26px 86px rgba(0,0,0,.42),
    0 0 0 1px rgba(182,138,28,.08) inset;
}

a.apericenaCard[href*="bombette-galatina"]::before,
a.apericenaCard[href*="pinse-galatina"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.68;
  background:
    linear-gradient(120deg, rgba(182,138,28,0), rgba(182,138,28,.14), rgba(233,227,216,.05), rgba(182,138,28,0));
  transform: translateX(-58%);
}

.apericenaCard h3,
.apericenaFaq__item h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.28;
}

.apericenaCard p,
.apericenaFaq__item p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.52;
  font-size: 14px;
}

.apericenaCard__link{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 14px;
  color: rgba(182,138,28,.96);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10.5px;
  line-height: 1.2;
  border-bottom: 1px solid rgba(182,138,28,.42);
  padding-bottom: 4px;
}

@media (hover:hover) and (pointer:fine){
  a.apericenaCard[href*="bombette-galatina"]:hover,
  a.apericenaCard[href*="pinse-galatina"]:hover{
    transform: translateY(-3px);
    border-color: rgba(182,138,28,.48);
    background:
      radial-gradient(620px 210px at 18% 0%, rgba(182,138,28,.16), transparent 62%),
      radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.20), transparent 62%),
      linear-gradient(180deg, rgba(17,19,24,.84), rgba(10,10,10,.50));
    box-shadow:
      0 30px 96px rgba(0,0,0,.48),
      0 0 0 1px rgba(182,138,28,.14) inset,
      0 0 32px rgba(182,138,28,.055);
  }

  a.apericenaCard[href*="bombette-galatina"]:hover::before,
  a.apericenaCard[href*="pinse-galatina"]:hover::before{
    opacity: .95;
    transform: translateX(58%);
    transition: opacity .22s ease, transform .60s cubic-bezier(.2,.9,.2,1);
  }

  a.apericenaCard[href*="bombette-galatina"]:hover .apericenaCard__link,
  a.apericenaCard[href*="pinse-galatina"]:hover .apericenaCard__link{
    color: rgba(233,227,216,.94);
    border-bottom-color: rgba(233,227,216,.58);
  }
}

.apericenaNight{
  background:
    radial-gradient(900px 420px at 78% 0%, rgba(182,138,28,.05), transparent 64%);
}

.apericenaWhy{
  background:
    radial-gradient(900px 420px at 22% 0%, rgba(92,52,39,.14), transparent 62%),
    radial-gradient(820px 360px at 82% 12%, rgba(182,138,28,.06), transparent 66%);
}

.apericenaWhy__head{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.apericenaWhy__head p:not(.eyebrow){
  margin: 16px auto 0;
  max-width: 62ch;
  color: rgba(233,227,216,.72);
  line-height: 1.58;
}

.apericenaWhy__grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.apericenaWhyCard{
  position: relative;
  overflow: hidden;
  min-height: 230px;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.13), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.44));
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  padding: 20px;
}

.apericenaWhyCard__icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(182,138,28,.20);
  background: rgba(182,138,28,.08);
  font-size: 22px;
  margin-bottom: 18px;
}

.apericenaWhyCard h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.28;
}

.apericenaWhyCard p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.52;
  font-size: 14px;
}

@media (max-width: 980px){
  .apericenaWhy__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .apericenaWhy__grid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .apericenaWhyCard{
    flex: 0 0 82%;
    min-height: 260px;
    scroll-snap-align: center;
  }
}

.apericenaTimeline{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(182,138,28,.06), transparent 64%),
    radial-gradient(820px 360px at 18% 18%, rgba(92,52,39,.13), transparent 62%);
}

.apericenaTimeline__head,
.apericenaGuideHero{
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.apericenaTimeline__head p:not(.eyebrow),
.apericenaGuideHero p:not(.eyebrow){
  margin: 16px auto 0;
  max-width: 68ch;
  color: rgba(233,227,216,.72);
  line-height: 1.62;
}

.apericenaTimeline__rail{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}

.apericenaTimeCard{
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.13), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.44));
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  padding: 22px;
  min-height: 250px;
}

.apericenaTimeCard__time{
  display: inline-flex;
  margin-bottom: 18px;
  color: rgba(182,138,28,.96);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
}

.apericenaTimeCard h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.28;
}

.apericenaTimeCard p{
  margin: 12px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.56;
  font-size: 14.5px;
}

.apericenaGalatinaGuide{
  background:
    radial-gradient(980px 460px at 22% 0%, rgba(92,52,39,.16), transparent 62%),
    radial-gradient(900px 420px at 78% 18%, rgba(182,138,28,.06), transparent 66%);
}

.apericenaGuideGrid{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.apericenaGuideCard{
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.12), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.76), rgba(10,10,10,.44));
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  padding: 20px;
  min-height: 250px;
}

.apericenaGuideCard--wide{
  grid-column: span 2;
}

.apericenaGuideCard__kicker{
  display: block;
  margin-bottom: 12px;
  color: rgba(182,138,28,.88);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
}

.apericenaGuideCard h3,
.apericenaSalento h3,
.apericenaDayPlan h3{
  margin: 0;
  color: rgba(233,227,216,.95);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.25;
}

.apericenaGuideCard p,
.apericenaSalento p,
.apericenaDayPlan p{
  margin: 12px 0 0;
  color: rgba(233,227,216,.70);
  line-height: 1.62;
  font-size: 14.5px;
}

.apericenaDayPlan{
  margin-top: 18px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  align-items: stretch;
  border-radius: 32px;
  border: 1px solid rgba(182,138,28,.18);
  background:
    radial-gradient(760px 280px at 50% 0%, rgba(182,138,28,.08), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.46));
  box-shadow: 0 30px 100px rgba(0,0,0,.44);
  padding: clamp(20px, 3vw, 28px);
}

.apericenaDayPlan__steps{
  display: grid;
  gap: 10px;
}

.apericenaDayPlan__steps div{
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(233,227,216,.10);
  background: rgba(233,227,216,.035);
  padding: 12px;
}

.apericenaDayPlan__steps strong{
  color: rgba(182,138,28,.96);
  letter-spacing: .12em;
  font-size: 12px;
}

.apericenaDayPlan__steps span{
  color: rgba(233,227,216,.78);
  line-height: 1.35;
  font-size: 14px;
}

.apericenaSalento{
  margin-top: 18px;
  border-radius: 30px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(92,52,39,.14), transparent 62%),
    rgba(10,10,10,.26);
  padding: clamp(20px, 3vw, 28px);
}

@media (max-width: 980px){
  .apericenaTimeline__rail,
  .apericenaGuideGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apericenaGuideCard--wide{
    grid-column: span 2;
  }

  .apericenaDayPlan{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .apericenaTimeline__rail,
  .apericenaGuideGrid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .apericenaTimeCard,
  .apericenaGuideCard,
  .apericenaGuideCard--wide{
    flex: 0 0 84%;
    min-height: 300px;
    scroll-snap-align: center;
  }

  .apericenaDayPlan__steps div{
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.apericenaGoogleReviews{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(182,138,28,.07), transparent 66%),
    radial-gradient(820px 360px at 18% 18%, rgba(92,52,39,.14), transparent 62%);
}

.apericenaReviewsHead{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.apericenaReviewsHead p:not(.eyebrow){
  margin: 16px auto 0;
  max-width: 62ch;
  color: rgba(233,227,216,.72);
  line-height: 1.58;
}

.apericenaReviewsBadge{
  margin: 18px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(182,138,28,.26);
  background:
    radial-gradient(240px 90px at 50% 0%, rgba(182,138,28,.13), transparent 64%),
    rgba(17,19,24,.62);
  box-shadow:
    0 18px 54px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.04) inset;
  padding: 10px 14px;
  color: rgba(233,227,216,.78);
  font-size: 13px;
}

.apericenaReviewsBadge strong{
  color: rgba(233,227,216,.96);
}

.apericenaReviewsBadge__stars{
  color: rgba(182,138,28,.96);
  letter-spacing: .08em;
}

.apericenaReviewsGrid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.apericenaReviewCard{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.12), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.46));
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  padding: 20px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.apericenaReviewCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(120deg, rgba(182,138,28,0), rgba(182,138,28,.10), rgba(233,227,216,.04), rgba(182,138,28,0));
  transform: translateX(-55%);
}

.apericenaReviewCard__stars{
  color: rgba(182,138,28,.94);
  letter-spacing: .14em;
  font-size: 12px;
}

.apericenaReviewCard blockquote{
  margin: 16px 0;
  color: rgba(233,227,216,.86);
  line-height: 1.56;
  font-size: 15px;
}

.apericenaReviewCard footer{
  color: rgba(233,227,216,.58);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
}

.apericenaReviewsCta{
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 560px){
  .apericenaReviewsCta{
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 900px){
  .apericenaReviewsGrid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .apericenaReviewCard{
    flex: 0 0 82%;
    min-height: 260px;
    scroll-snap-align: center;
  }
}

.apericenaCtaBox{
  border-radius: 32px;
  border: 1px solid rgba(182,138,28,.20);
  background:
    radial-gradient(760px 280px at 50% 0%, rgba(182,138,28,.10), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.78), rgba(10,10,10,.46));
  box-shadow:
    0 30px 100px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.04) inset;
  padding: clamp(22px, 4vw, 36px);
  text-align: center;
}

.apericenaCtaBox h2{
  margin: 0;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.apericenaCtaBox p:not(.eyebrow){
  margin: 14px auto 0;
  max-width: 60ch;
  color: rgba(233,227,216,.74);
  line-height: 1.58;
}

.apericenaMap{
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  overflow: hidden;
  min-height: 420px;
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  background: rgba(10,10,10,.36);
}

.apericenaMap iframe{
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: saturate(.82) contrast(1.05);
}

.apericenaFaqIntro{
  max-width: 780px;
  margin: 18px auto 0;
  text-align: center;
  color: rgba(233,227,216,.72);
  line-height: 1.62;
}

.apericenaFaqIntro p{
  margin: 0;
}

.apericenaFaq__list{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.apericenaFaq__list--mega{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.apericenaSeoLinks{
  margin-top: 26px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid rgba(182,138,28,.16);
  background:
    radial-gradient(760px 280px at 50% 0%, rgba(182,138,28,.08), transparent 62%),
    rgba(10,10,10,.24);
  padding: clamp(18px, 3vw, 26px);
}

.apericenaSeoLinks .apericenaLinks{
  justify-content: center;
}

.apericenaFinalCta{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.apericenaFinalCta--left{
  justify-content: flex-start;
}

.apericenaLinks{
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.apericenaLinks a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(233,227,216,.04);
  color: rgba(233,227,216,.78);
  padding: 10px 13px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

@media (hover:hover) and (pointer:fine){
  .apericenaGallery__item:hover img{
    transform: scale(1.045);
    transition: transform .55s cubic-bezier(.2,.9,.2,1);
  }

  .apericenaLinks a:hover{
    color: rgba(233,227,216,.95);
    border-color: rgba(182,138,28,.38);
    background: rgba(92,52,39,.14);
  }
}

@media (max-width: 980px){
  .apericenaCards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apericenaFaq__list{
    grid-template-columns: 1fr;
  }

  .apericenaGallery__item--1,
  .apericenaGallery__item--2,
  .apericenaGallery__item--3,
  .apericenaGallery__item--4,
  .apericenaGallery__item--5,
  .apericenaGallery__item--6{
    grid-column: span 6;
    min-height: 280px;
  }
}

@media (max-width: 760px){
  .apericenaGrid,
  .apericenaSplit{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .apericenaHero__title{
    max-width: 12ch;
  }

  .apericenaPhotoStack{
    min-height: auto;
  }

  .apericenaPhoto--big{
    min-height: 300px;
  }

  .apericenaPhoto--small{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 190px;
    margin-top: 12px;
  }

  .apericenaGallery{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .apericenaGallery__item{
    flex: 0 0 82%;
    min-height: 360px;
    scroll-snap-align: center;
  }
}

@media (max-width: 560px){
  .apericenaCards{
    grid-template-columns: 1fr;
  }

  .apericenaHero__actions,
  .apericenaFinalCta{
    flex-direction: column;
    align-items: stretch;
  }

  .apericenaMap,
  .apericenaMap iframe{
    min-height: 360px;
    height: 360px;
  }
}

/* ==========================================================================
   HAMBURGER GALATINA — pagina SEO verticale
   ========================================================================== */

.hamburgerPage{
  padding: 0 0 44px;
}

.hamburgerHero{
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 12vw, 158px) 0 clamp(66px, 8vw, 112px);
  border-bottom: 1px solid rgba(233,227,216,.10);
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(92,52,39,.24), transparent 62%),
    radial-gradient(820px 420px at 82% 18%, rgba(182,138,28,.09), transparent 66%),
    linear-gradient(180deg, rgba(10,9,8,.92), rgba(8,7,6,.98));
  background-size: cover;
  background-position: center;
}

.hamburgerHero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.hamburgerHero > .container{
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.hamburgerHero__title{
  margin: 0;
  max-width: 11ch;
  font-size: clamp(44px, 8vw, 88px);
  line-height: .96;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hamburgerHero__sub{
  margin: 18px 0 0;
  max-width: 68ch;
  color: rgba(233,227,216,.80);
  line-height: 1.62;
  font-size: clamp(15px, 2vw, 18px);
}

.hamburgerHero__actions{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hamburgerSection{
  padding: clamp(64px, 8vw, 96px) 0;
  position: relative;
}

.hamburgerSection::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(233,227,216,0), rgba(233,227,216,.10), rgba(233,227,216,0));
}

.hamburgerSplit{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.hamburgerText{
  color: rgba(233,227,216,.78);
  line-height: 1.66;
  font-size: 15.5px;
}

.hamburgerText p{
  margin: 0;
}

.hamburgerText p + p{
  margin-top: 14px;
}

.hamburgerText--wide{
  max-width: 760px;
  margin-top: 16px;
}

.hamburgerSection--gallery{
  background:
    radial-gradient(980px 460px at 20% 0%, rgba(92,52,39,.13), transparent 62%),
    rgba(10,10,10,.16);
}

.hamburgerGallery{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: stretch;
}

.hamburgerGallery__item{
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(10,10,10,.38);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  min-height: 260px;
  isolation: isolate;
}

.hamburgerGallery__item--1{
  grid-column: span 6;
  min-height: 380px;
}

.hamburgerGallery__item--2,
.hamburgerGallery__item--3{
  grid-column: span 3;
  min-height: 380px;
}

.hamburgerGallery__item img{
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.02);
  transform: scale(1.01);
}

.hamburgerGallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.60)),
    radial-gradient(600px 220px at 18% 0%, rgba(92,52,39,.20), transparent 62%);
  z-index: 1;
}

.hamburgerGallery__item figcaption{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.16);
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(233,227,216,.88);
  padding: 8px 11px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hamburgerSection--cards{
  background:
    radial-gradient(900px 420px at 78% 0%, rgba(182,138,28,.055), transparent 64%);
}

.hamburgerCards,
.hamburgerFaq__list{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hamburgerCard,
.hamburgerFaq__item{
  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.12), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.76), rgba(10,10,10,.44));
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  padding: 20px;
}

.hamburgerCard h3,
.hamburgerFaq__item h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.28;
}

.hamburgerCard p,
.hamburgerFaq__item p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.54;
  font-size: 14px;
}

.hamburgerInlineCta{
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hamburgerFaq{
  background:
    radial-gradient(980px 460px at 22% 0%, rgba(92,52,39,.15), transparent 62%),
    radial-gradient(900px 420px at 78% 18%, rgba(182,138,28,.06), transparent 66%);
}

.hamburgerSeoLinks{
  margin-top: 28px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid rgba(182,138,28,.16);
  background:
    radial-gradient(760px 280px at 50% 0%, rgba(182,138,28,.08), transparent 62%),
    rgba(10,10,10,.24);
  padding: clamp(18px, 3vw, 26px);
}

.hamburgerSeoLinks .apericenaLinks{
  justify-content: center;
}

@media (hover:hover) and (pointer:fine){
  .hamburgerGallery__item:hover img{
    transform: scale(1.045);
    transition: transform .55s cubic-bezier(.2,.9,.2,1);
  }
}

@media (max-width: 980px){
  .hamburgerCards,
  .hamburgerFaq__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hamburgerGallery__item--1,
  .hamburgerGallery__item--2,
  .hamburgerGallery__item--3{
    grid-column: span 4;
    min-height: 280px;
  }
}

@media (max-width: 760px){
  .hamburgerSplit{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hamburgerHero__title{
    max-width: 12ch;
  }

  .hamburgerGallery{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .hamburgerGallery__item{
    flex: 0 0 82%;
    min-height: 360px;
    scroll-snap-align: center;
  }
}

@media (max-width: 560px){
  .hamburgerCards,
  .hamburgerFaq__list{
    grid-template-columns: 1fr;
  }

  .hamburgerHero__actions,
  .hamburgerInlineCta{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   BOMBETTE GALATINA — pagina SEO verticale
   ========================================================================== */

.bombettePage{
  padding: 0 0 44px;
}

.bombetteHero{
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 12vw, 158px) 0 clamp(66px, 8vw, 112px);
  border-bottom: 1px solid rgba(233,227,216,.10);
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(92,52,39,.24), transparent 62%),
    radial-gradient(820px 420px at 82% 18%, rgba(182,138,28,.09), transparent 66%),
    linear-gradient(180deg, rgba(10,9,8,.92), rgba(8,7,6,.98));
  background-size: cover;
  background-position: center;
}

.bombetteHero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.bombetteHero > .container{
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.bombetteHero__title{
  margin: 0;
  max-width: 11ch;
  font-size: clamp(44px, 8vw, 88px);
  line-height: .96;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bombetteHero__sub{
  margin: 18px 0 0;
  max-width: 68ch;
  color: rgba(233,227,216,.80);
  line-height: 1.62;
  font-size: clamp(15px, 2vw, 18px);
}

.bombetteHero__actions{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bombetteSection{
  padding: clamp(64px, 8vw, 96px) 0;
  position: relative;
}

.bombetteSection::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(233,227,216,0), rgba(233,227,216,.10), rgba(233,227,216,0));
}

.bombetteSplit{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.bombetteText{
  color: rgba(233,227,216,.78);
  line-height: 1.66;
  font-size: 15.5px;
}

.bombetteText p{
  margin: 0;
}

.bombetteText p + p{
  margin-top: 14px;
}

.bombetteSection--gallery{
  background:
    radial-gradient(980px 460px at 20% 0%, rgba(92,52,39,.13), transparent 62%),
    rgba(10,10,10,.16);
}

.bombetteGallery{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: stretch;
}

.bombetteGallery__item{
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(233,227,216,.12);
  background: rgba(10,10,10,.38);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  min-height: 260px;
  isolation: isolate;
}

.bombetteGallery__item--1,
.bombetteGallery__item--2{
  grid-column: span 6;
  min-height: 380px;
}

.bombetteGallery__item--3,
.bombetteGallery__item--4{
  grid-column: span 6;
  min-height: 290px;
}

.bombetteGallery__item img{
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.02);
  transform: scale(1.01);
}

.bombetteGallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.60)),
    radial-gradient(600px 220px at 18% 0%, rgba(92,52,39,.20), transparent 62%);
  z-index: 1;
}

.bombetteGallery__item figcaption{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.16);
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(233,227,216,.88);
  padding: 8px 11px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bombetteSection--cards{
  background:
    radial-gradient(900px 420px at 78% 0%, rgba(182,138,28,.055), transparent 64%);
}

.bombetteCards,
.bombetteFaq__list{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.bombetteCard,
.bombetteFaq__item{
  border-radius: 26px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.12), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.76), rgba(10,10,10,.44));
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  padding: 20px;
}

.bombetteCard h3,
.bombetteFaq__item h3{
  margin: 0;
  color: rgba(233,227,216,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.28;
}

.bombetteCard p,
.bombetteFaq__item p{
  margin: 10px 0 0;
  color: rgba(233,227,216,.68);
  line-height: 1.54;
  font-size: 14px;
}

.bombetteInlineCta{
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bombetteFaq{
  background:
    radial-gradient(980px 460px at 22% 0%, rgba(92,52,39,.15), transparent 62%),
    radial-gradient(900px 420px at 78% 18%, rgba(182,138,28,.06), transparent 66%);
}

.bombetteSeoLinks{
  margin-top: 28px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid rgba(182,138,28,.16);
  background:
    radial-gradient(760px 280px at 50% 0%, rgba(182,138,28,.08), transparent 62%),
    rgba(10,10,10,.24);
  padding: clamp(18px, 3vw, 26px);
}

.bombetteSeoLinks .apericenaLinks{
  justify-content: center;
}

@media (hover:hover) and (pointer:fine){
  .bombetteGallery__item:hover img{
    transform: scale(1.045);
    transition: transform .55s cubic-bezier(.2,.9,.2,1);
  }
}

@media (max-width: 980px){
  .bombetteCards,
  .bombetteFaq__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bombetteGallery__item--1,
  .bombetteGallery__item--2,
  .bombetteGallery__item--3,
  .bombetteGallery__item--4{
    grid-column: span 6;
    min-height: 280px;
  }
}

@media (max-width: 760px){
  .bombetteSplit{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bombetteHero__title{
    max-width: 12ch;
  }

  .bombetteGallery{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4vw 18px;
    margin-left: -4vw;
    margin-right: -4vw;
  }

  .bombetteGallery__item{
    flex: 0 0 82%;
    min-height: 360px;
    scroll-snap-align: center;
  }
}

@media (max-width: 560px){
  .bombetteCards,
  .bombetteFaq__list{
    grid-template-columns: 1fr;
  }

  .bombetteHero__actions,
  .bombetteInlineCta{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   EVENTI (eventi.html) — WP-friendly (hook: data-wp-hook="events")
   ========================================================================== */
.eventsPage{ padding-top: 10px; }

/* Single evento (template single-alkemia_event.php) */
.singleEventPage .scene--eventSingle{ padding-top: 68px; }
.singleEventPage .shot--eventSingle{
  /* CLS guardrail SOLO qui (non globale): spazio stabile ma NON gigante
     MANOPOLE: --seShotHMin / --seShotHVw / --seShotHMax (in :root) */
  aspect-ratio: auto;
  height: clamp(var(--seShotHMin), var(--seShotHVw), var(--seShotHMax));
  min-height: 0;

  background-position: center;
  filter: contrast(1.10) saturate(1.02);

  /* extra anti-seam (ma senza compositing che sfoca i testi) */
  overflow: hidden;
  background-clip: padding-box;
}

.scene--events{
  padding: clamp(18px, 4vw, 36px) 0 64px;
}

.eventsGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.eventCard{
  grid-column: span 6;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(900px 520px at 40% 0%,
      rgba(92,52,39,.10) 0%,
      rgba(0,0,0,0) 62%),
    rgba(10,10,10,.55);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

/* Event cards: se c'è thumbnail vera, il bg arriva via inline style (page-eventi.php) */
.eventCard--hasThumb{
  position: relative;
  overflow: hidden;

  /* evita artefatti “righe” su alcuni device */
  isolation: isolate;
  transform: translateZ(0);

  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;

  filter: contrast(1.05) saturate(1.02);

  /* FIX: niente bordo su foto (era la hairline sotto) */
  border: 0 !important;
}

/* Hairline interno super soft (non crea linea netta sotto) */
.eventCard--hasThumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(233,227,216,.08) inset;
  z-index: 1; /* sopra il velo, sotto al testo */
}

/* Velo sopra immagine (leggibilità) — segue il border radius */
.eventCard--hasThumb::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  border-radius: inherit;          /* CHIAVE: elimina edge-line sopra/sotto */

  background:
    radial-gradient(900px 420px at 22% 18%, rgba(92,52,39,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.88));
}

/* Porta testo e bottoni sopra il velo */
.eventCard--hasThumb .eventCard__top,
.eventCard--hasThumb .eventCard__title,
.eventCard--hasThumb .eventCard__meta,
.eventCard--hasThumb .eventCard__desc,
.eventCard--hasThumb .eventCard__actions{
  position: relative;
  z-index: 1;
}

/* Leggibilità testo quando c'è immagine */
.eventCard--hasThumb .eventCard__title,
.eventCard--hasThumb .eventCard__meta,
.eventCard--hasThumb .eventCard__desc,
.eventCard--hasThumb .date{
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

/* Fallback materico se manca thumbnail */
.eventCard--noThumb{
  background-image:
    radial-gradient(900px 420px at 22% 18%, rgba(92,52,39,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78));
}

.eventCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.eventCard .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(233,227,216,.78);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(92,52,39,.35);
  background: rgba(92,52,39,.10);
}

.eventCard .date{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,227,216,.62);
}

.eventCard__title{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.8vw, 22px);
  letter-spacing: .04em;
}

.eventCard__meta{
  margin: 0 0 10px;
  color: rgba(233,227,216,.70);
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.eventCard__desc{
  margin: 0 0 14px;
  color: rgba(233,227,216,.78);
  line-height: 1.45;
}

.eventCard__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .eventCard{ grid-column: span 12; }
}

.microNav{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(233,227,216,.58);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
}
.microNav a{ color: rgba(233,227,216,.72); }
.microNav a:hover{ color: rgba(233,227,216,.92); }
.microNav .dot{ opacity: .45; }



/* ==========================================================================
   HOME — INTRO OVERLAY (logo 3 forme + label)
   WordPress-friendly: markup semplice, SVG inline via fetch in site.js
   ========================================================================== */

.introOverlay{
  position: fixed;
  inset: 0;
  z-index: 1400;

  display: grid;
  place-items: center;
  padding: 22px;

  /* nero caldo + oro/corten in alto */
  background:
    radial-gradient(1100px 620px at 50% 0%,
      rgba(92,52,39,.18) 0%,
      rgba(92,52,39,.08) 28%,
      rgba(0,0,0,0) 62%),
    linear-gradient(to bottom,
      rgba(8,8,8,.96),
      rgba(4,4,4,.98));

  /* IMPORTANT: visibile subito => niente flash hero sotto */
  opacity: 1;
  pointer-events: auto;

  transition: opacity .45s ease;
}

.introOverlay.isOpen{
  opacity: 1;
  pointer-events: auto;
}

.introOverlay.isOut{
  opacity: 0;
  pointer-events: none;
}

/* IMPORTANT: evita 1-frame di HERO prima dell’overlay (SOLO HOME) */
body.isHome:not(.introDone) main{
  visibility: hidden;
}


.introOverlay__inner{
  display: grid;
  justify-items: center;
  gap: 18px;
}

/* container logo (row) */
.introLogo{
  width: min(520px, 92vw);
}

/* wrapper creato dal JS: 3 mini-svg in riga */
.introLogoRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 22px);
}

/* ogni forma */
.introLogoPart{
  width: clamp(54px, 16vw, 86px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.introLogoPart svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* base “spento” — FORZA visibilità anche se lo SVG ha fill/stroke inline */
.introLogoPart svg{
  overflow: visible;
}

/* STILE LOGO: HOLLOW (stroke-only)
   - niente fill (sempre vuoto al centro)
   - stroke più presente e “da logo”
*/
.introLogoPart svg *{
  fill: none !important;
  stroke: rgba(233,227,216,.34) !important;
  stroke-width: 6 !important;

  opacity: .46;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;

  transition:
    opacity .28s ease,
    filter .28s ease,
    stroke .28s ease;
}

/* acceso “illuminato” (sempre stroke-only) */
.introLogoPart [data-part].isLit,
.introLogoPart [data-part].isLit *{
  fill: none !important;
  stroke: rgba(233,227,216,1) !important;
  opacity: 1;

  filter:
    drop-shadow(0 0 10px rgba(92,52,39,.28))
    drop-shadow(0 0 18px rgba(233,227,216,.18));
}

/* dimmer di regia (micro) */
.introOverlay.isDimmer .introLogoPart [data-part].isLit,
.introOverlay.isDimmer .introLogoPart [data-part].isLit *{
  opacity: .58;
  filter: drop-shadow(0 0 6px rgba(92,52,39,.18));
}

/* label: ancora più grande */
.introLabel{
  min-height: 1.2em;
  font-size: clamp(22px, 6.0vw, 34px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(233,227,216,.92);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .24s ease, transform .24s ease;
}


.introLabel.isIn{
  opacity: 1;
  transform: translateY(0);
}

.introLabel.isEmpty{
  opacity: 0;
  transform: translateY(6px);
}

/* blocco scroll senza “salti” layout (compensa scrollbar) */
body.introLock{
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

@media (prefers-reduced-motion: reduce){
  .introOverlay{ transition: none; }
  .introLogo svg path{ transition: none; }
  .introLabel{ transition: none; opacity: 1; transform: none; }
}

/* =====================================================================
   RECENSIONI (pagina editoriale) — Patch 5.3
   - Nessun form sul sito
   - Estratti + CTA Google
   ===================================================================== */

.reviewsPage{
  padding: 0 0 40px;
}

/* Head: riusa grammatica Menu/Eventi, qui aggiungiamo solo micro layout */
.reviewsHead .menuHead__sub{
  margin-top: 10px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.reviewsBadge{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.reviewsBadge__rating{
  font-weight: 700;
  letter-spacing: .2px;
}

.reviewsBadge__count{
  opacity: .78;
}

.reviewsCtas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.reviewsNote{
  max-width: 62ch;
  opacity: .72;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Sezioni */
.reviewsSection{
  padding: 22px 0;
}

.reviewsSection__title{
  margin: 0 0 12px;
  font-size: 1.1rem;
  letter-spacing: .2px;
}

/* Highlights (pill) */
.pillList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 0.95rem;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Cards — 1 colonna SEMPRE (più editoriale, più “stiloso”) */
.reviewsGrid{
  display: grid;
  gap: 14px;

  /* griglia centrata */
  justify-content: center;
  justify-items: center;

  /* sempre una sola colonna, card-size */
  grid-template-columns: minmax(0, 560px);
}

.reviewCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 14px 14px 12px;
  overflow: hidden;
}

.reviewCard__stars{
  opacity: .9;
  font-size: .95rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.reviewCard__quote{
  margin: 0 0 12px;
  line-height: 1.35;
  opacity: .96;
}

.reviewCard__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  opacity: .72;
  font-size: .92rem;
}

.reviewCard__name{
  font-weight: 600;
}

.reviewCard__source{
  white-space: nowrap;
}

.reviewsEmpty{
  opacity: .75;
}

.reviewsFooterCtas{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* =====================================================================
   HOME — COMING SOON OVERLAY (separato dall’intro buono)
   ===================================================================== */

.comingSoonPage{
  min-height: 100svh;
}

.comingSoonOverlay{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(1100px 620px at 50% 0%,
      rgba(92,52,39,.16) 0%,
      rgba(92,52,39,.07) 28%,
      rgba(0,0,0,0) 62%),
    linear-gradient(180deg,
      rgba(8,8,8,.96),
      rgba(4,4,4,.985));
}

.comingSoonOverlay__bg,
.comingSoonOverlay__glow,
.comingSoonOverlay__noise{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comingSoonOverlay__bg{
  z-index: -3;
  background:
    radial-gradient(1000px 520px at 18% 8%, rgba(92,52,39,.08), transparent 60%),
    radial-gradient(900px 420px at 82% 20%, rgba(233,227,216,.04), transparent 62%),
    linear-gradient(180deg, rgba(8,9,12,.58), rgba(8,9,12,.94));
}

.comingSoonOverlay__glow{
  z-index: -2;
  background:
    radial-gradient(520px 260px at 28% 26%, rgba(92,52,39,.12), transparent 62%),
    radial-gradient(520px 260px at 72% 38%, rgba(182,138,28,.08), transparent 65%);
  filter: blur(18px);
  opacity: .82;
}

.comingSoonOverlay__noise{
  z-index: -1;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.comingSoonOverlay__inner{
  width: min(900px, 92vw);
  padding: 32px 20px;
  display: grid;
  place-items: center;
  text-align: center;
}

.comingSoonOverlay__logoWrap{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 52vw);
  pointer-events: none;
  z-index: 0;
  opacity: .12;
  filter:
    drop-shadow(0 16px 44px rgba(0,0,0,.34))
    drop-shadow(0 0 18px rgba(92,52,39,.08));
}

.comingSoonOverlay__logoWrap[data-logo-size="small"]{
  width: min(900px, 90vw);
}

.comingSoonOverlay__logoWrap[data-logo-size="medium"]{
  width: min(1380px, 98vw);
}

.comingSoonOverlay__logoWrap[data-logo-size="large"]{
  width: min(1700px, 99vw);
}

.comingSoonOverlay__logo{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.comingSoonOverlay__stack{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.comingSoonOverlay__line,
.comingSoonOverlay__final,
.comingSoonOverlay__micro{
  margin: 0;
}

.comingSoonOverlay__line{
  color: rgba(233,227,216,.92);
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px);
  filter: blur(8px);
  transition:
    opacity .52s ease,
    transform .62s cubic-bezier(.2,.9,.2,1),
    filter .62s cubic-bezier(.2,.9,.2,1);
}

.comingSoonOverlay__line--1{
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .22em;
  color: rgba(233,227,216,.78);
}

.comingSoonOverlay__line--2{
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .16em;
}

.comingSoonOverlay__line--3{
  font-size: clamp(28px, 5.2vw, 56px);
  letter-spacing: .20em;
}

.comingSoonOverlay__line.isShown{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.comingSoonOverlay__line.isGone{
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(10px);
}

.comingSoonOverlay__finalWrap{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
  transition:
    opacity .58s ease,
    transform .68s cubic-bezier(.2,.9,.2,1),
    filter .68s cubic-bezier(.2,.9,.2,1);
}

.comingSoonOverlay__finalWrap.isShown{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.comingSoonOverlay__final{
  color: rgba(255,248,236,.98);
  font-size: clamp(18px, 2.8vw, 28px);
  text-transform: uppercase;
  letter-spacing: .24em;
  text-shadow:
    0 0 18px rgba(182,138,28,.12),
    0 1px 0 rgba(0,0,0,.35);
}

.comingSoonOverlay__micro{
  color: rgba(233,227,216,.52);
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  line-height: 1.45;
  max-width: 46ch;
}

body.comingSoonMode,
body.comingSoonPreload{
  padding-top: 0 !important;
}

body.comingSoonMode .nav,
body.comingSoonPreload .nav{
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-12px) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}

body.comingSoonMode .toTop,
body.comingSoonPreload .toTop{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

body.comingSoonMode .alkCookie,
body.comingSoonPreload .alkCookie{
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

@media (max-width: 640px){
  .comingSoonOverlay__inner{
    padding: 28px 16px;
  }

  .comingSoonOverlay__logoWrap{
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 86vw);
    opacity: .10;
    display: grid;
    place-items: center;
  }

  .comingSoonOverlay__logoWrap[data-logo-size="small"]{
    width: 112vw;
    max-width: none;
  }

  .comingSoonOverlay__logoWrap[data-logo-size="medium"]{
    width: 128vw;
    max-width: none;
  }

  .comingSoonOverlay__logoWrap[data-logo-size="large"]{
    width: 144vw;
    max-width: none;
  }

  .comingSoonOverlay__stack{
    gap: 12px;
  }

  .comingSoonOverlay__line--1{
    font-size: 14px;
    letter-spacing: .20em;
  }

  .comingSoonOverlay__line--2{
    font-size: 18px;
    letter-spacing: .14em;
  }

  .comingSoonOverlay__line--3{
    font-size: clamp(24px, 8vw, 40px);
    letter-spacing: .16em;
  }

  .comingSoonOverlay__final{
    font-size: 24px;
    letter-spacing: .16em;
    line-height: 1.18;
  }

  .comingSoonOverlay__micro{
    font-size: 15px;
    letter-spacing: .12em;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce){
  .comingSoonOverlay__line,
  .comingSoonOverlay__finalWrap{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}



/* =====================================================================
   RECENSIONI — Patch 5.7B (centratura “hard”)
   Nota: override a fine blocco → vince in cascata
   ===================================================================== */

/* titoli + blocchi centrati */
.reviewsPage .reviewsSection__title{
  text-align: center;
}
.reviewsPage .reviewsEmpty{
  text-align: center;
}

/* pills centrati */
.reviewsPage .pillList{
  justify-content: center;
}

/* card: contenuto centrato */
.reviewsPage .reviewCard{
  text-align: center;
}

/* meta: da “space-between” → centro in colonna */
.reviewsPage .reviewCard__meta{
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;

  text-align: center;
}


.hubTitle--mark{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 2px 0 4px;
}

.hubTitle__mark{
  width: min(396px, 88vw);
  max-width: 396px;
  height: auto;
  display: block;
  opacity: .98;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 8px 24px rgba(0,0,0,.32));
}

@media (max-width: 640px){
  .hubTitle__mark{
    width: min(300px, 78vw);
    max-width: 300px;
  }
}

/* =====================================================================
   STEP 5 — Micro-audit UI: classi template senza stile dedicato
   ===================================================================== */

/* Bottoni: alias chiaro per CTA principali */
.btn--primary{
  border-color: rgba(182,138,28,.58);
  background:
    radial-gradient(220px 90px at 50% 0%, rgba(182,138,28,.16), transparent 62%),
    rgba(182,138,28,.14);
  color: rgba(255,248,236,.96);
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(182,138,28,.08) inset;
}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{
    border-color: rgba(182,138,28,.72);
    background:
      radial-gradient(220px 90px at 50% 0%, rgba(182,138,28,.22), transparent 62%),
      rgba(182,138,28,.18);
  }
}

/* Menu/Eventi/Single: micro-copy sotto titolo */
.menuMicro{
  margin: 12px auto 0;
  max-width: 68ch;
  color: rgba(233,227,216,.66);
  line-height: 1.58;
  font-size: 14.5px;
  letter-spacing: .02em;
  text-align: center;
}

.menuTabs{
  display: block;
}

.modalPrice{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Head recensioni: compatibilità con template dedicato */
.menuHead__inner{
  width: min(1080px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.menuHead__title{
  margin: 0;
  font-size: clamp(34px, 5.8vw, 56px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.menuHead__sub{
  margin-top: 12px;
}

/* Wrapper sezioni recensioni */
.reviewsPage .wrap{
  width: min(1080px, 92vw);
  margin: 0 auto;
}

.reviewsHighlights,
.reviewsCards{
  position: relative;
}

/* Eventi passati */
.eventsPast{
  margin-top: 26px;
  border-radius: 24px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(620px 220px at 18% 0%, rgba(92,52,39,.12), transparent 62%),
    rgba(10,10,10,.24);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  overflow: hidden;
}

.eventsPast__sum{
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  color: rgba(233,227,216,.86);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: 1px solid rgba(233,227,216,.10);
}

.eventsPast__sum::-webkit-details-marker{
  display: none;
}

.eventsPast__sum::after{
  content: "▾";
  float: right;
  color: rgba(182,138,28,.86);
  transition: transform .18s ease;
}

.eventsPast[open] .eventsPast__sum::after{
  transform: rotate(180deg);
}

.eventsGrid--past{
  padding: 16px;
}

/* Hub */
.hub__top{
  display: grid;
  justify-items: center;
  gap: 8px;
}

.hubTitle{
  margin: 2px 0 4px;
  text-align: center;
  line-height: 1;
}

/* Single evento */
.eventBody{
  color: rgba(233,227,216,.78);
}

.eventBody p{
  margin: 0 0 14px;
}

.eventBody a{
  color: rgba(233,221,185,.96);
  border-bottom: 1px solid rgba(182,138,28,.36);
  padding-bottom: 1px;
}

.eventBody ul,
.eventBody ol{
  margin: 0 0 16px;
  padding-left: 20px;
}

.eventBody li{
  margin: 7px 0;
}

/* Home micro-grid helpers */
.scene__copy,
.scene__visual,
.infoCard__left,
.infoCard__right,
.rhythmCopy{
  min-width: 0;
}

@media (max-width: 640px){
  .menuMicro{
    font-size: 13.5px;
    line-height: 1.52;
  }

  .modalPrice{
    justify-content: flex-start;
  }

  .eventsGrid--past{
    padding: 12px;
  }
}
/* ==========================================================================
   Review Prompt — Menu
   ========================================================================== */

.reviewPrompt{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;

  width: min(390px, calc(100vw - 28px));
  padding: 16px 16px 14px;
  border-radius: 22px;

  border: 1px solid rgba(182,138,28,.26);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(182,138,28,.11), transparent 62%),
    radial-gradient(420px 160px at 80% 0%, rgba(92,52,39,.16), transparent 60%),
    linear-gradient(180deg, rgba(17,19,24,.96), rgba(10,10,10,.94));

  box-shadow:
    0 24px 72px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.04) inset;

  color: rgba(233,227,216,.92);

  opacity: 0;
  transform: translateY(16px) scale(.985);
  pointer-events: none;

  transition:
    opacity .24s ease,
    transform .26s cubic-bezier(.2,.9,.2,1);
}

.reviewPrompt.isVisible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.reviewPrompt__x{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 30px;
  height: 30px;
  border-radius: 999px;

  border: 1px solid rgba(233,227,216,.12);
  background: rgba(0,0,0,.18);
  color: rgba(233,227,216,.64);

  cursor: pointer;
}

.reviewPrompt__title{
  margin: 0;
  padding-right: 34px;

  color: rgba(233,227,216,.96);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.16;
  letter-spacing: .04em;
}

.reviewPrompt__text{
  margin: 9px 0 0;
  color: rgba(233,227,216,.72);
  font-size: 13.5px;
  line-height: 1.48;
}

.reviewPrompt__actions{
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reviewPrompt__btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.13);
  background: rgba(233,227,216,.04);
  color: rgba(233,227,216,.82);

  padding: 10px 12px;
  min-height: 40px;

  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;

  cursor: pointer;
  text-decoration: none;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.reviewPrompt__btn--gold{
  border-color: rgba(182,138,28,.48);
  background: rgba(182,138,28,.16);
  color: rgba(255,248,236,.96);
}

.reviewPrompt__btn--ghost{
  color: rgba(233,227,216,.62);
}

@media (hover:hover) and (pointer:fine){
  .reviewPrompt__x:hover,
  .reviewPrompt__btn:hover{
    transform: translateY(-1px);
    border-color: rgba(182,138,28,.48);
    background: rgba(92,52,39,.18);
    color: rgba(233,227,216,.96);
  }
}

.reviewPrompt__x:focus-visible,
.reviewPrompt__btn:focus-visible{
  outline: 2px solid rgba(182,138,28,.58);
  outline-offset: 3px;
}

@media (max-width: 640px){
  .reviewPrompt{
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    border-radius: 20px;
  }

  .reviewPrompt__actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .reviewPrompt__btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .reviewPrompt{
    transition: none;
    transform: none;
  }
}
/* ==========================================================================
   Menu Review Bar — sostituisce visivamente le fasce orarie
   ========================================================================== */

.menuReviewBar{
  width: min(620px, 100%);
  margin: 14px auto 0;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;

  border-radius: 999px;
  border: 1px solid rgba(233,227,216,.11);

  background:
    radial-gradient(420px 120px at 20% 0%, rgba(182,138,28,.08), transparent 64%),
    rgba(17,19,24,.42);

  color: rgba(233,227,216,.68);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.menuReviewBar__text{
  color: rgba(233,227,216,.68);
}

.menuReviewBar__link{
  color: rgba(233,221,185,.94);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  border-bottom: 1px solid rgba(182,138,28,.42);
  padding-bottom: 2px;
}

@media (hover:hover) and (pointer:fine){
  .menuReviewBar__link:hover{
    color: rgba(255,248,236,.98);
    border-bottom-color: rgba(182,138,28,.78);
  }
}

@media (max-width: 640px){
  .menuReviewBar{
    width: min(360px, 100%);
    border-radius: 18px;
    padding: 11px 12px;
  }

  .menuReviewBar__link{
    display: inline-flex;
    margin-top: 2px;
  }
}

/* ==========================================================================
   MENU LANGUAGE SELECTOR — Select your language
   - UI propria Alkemia
   - Google Translate resta tecnico/nascosto
   - I nomi prodotti vengono protetti via JS con notranslate
   ========================================================================== */
.menuLanguage{
  width: min(640px, 100%);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: max-content minmax(190px, 1fr);
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(233,227,216,.12);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(92,52,39,.14), transparent 62%),
    linear-gradient(180deg, rgba(17,19,24,.62), rgba(10,10,10,.32));
  box-shadow:
    0 14px 38px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.035) inset;
  text-align: left;
}

.menuLanguage__label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(233,227,216,.86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.menuLanguage__icon{
  font-size: 15px;
  line-height: 1;
}

.menuLanguage__select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(182,138,28,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    rgba(17,19,24,.76);
  color: rgba(233,227,216,.96);
  padding: 10px 42px 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(182,138,28,.95) 50%),
    linear-gradient(135deg, rgba(182,138,28,.95) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  background-position:
    calc(100% - 20px) 17px,
    calc(100% - 14px) 17px,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    0 0 0 1px rgba(182,138,28,.08) inset;
}

.menuLanguage__select:focus-visible{
  border-color: rgba(182,138,28,.58);
  box-shadow:
    0 0 0 3px rgba(182,138,28,.16),
    0 10px 24px rgba(0,0,0,.20),
    0 0 0 1px rgba(182,138,28,.12) inset;
}

.menuLanguage__select option{
  background: #14110f;
  color: #e9e3d8;
}

.alkemiaGoogleTranslate,
.goog-te-gadget,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.skiptranslate iframe{
  display: none !important;
}

body{
  top: 0 !important;
}

body.translated-ltr,
body.translated-rtl{
  top: 0 !important;
}

@media (max-width: 640px){
  .menuLanguage{
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 16px;
  }

  .menuLanguage__label{
    justify-content: center;
    font-size: 10px;
    letter-spacing: .14em;
  }

  .menuLanguage__select{
    min-height: 42px;
    font-size: 16px; /* evita zoom iOS */
  }
}