/* ===================== Design tokens ===================== */
:root {
  --void: #050505;
  --charcoal: #0a0a0a;
  --ash: #1a1412;
  --lava: #e8291c;
  --ember: #ff6a1a;
  --amber: #ff8c00;
  --gold: #f4c430;
  --cream: #fff4e2;

  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* [hidden] va sempre rispettato: senza questa regola, elementi con display
   flex/inline-flex nel loro stesso selettore (es. .btn-lava) lo sovrascrivono
   e restano visibili/cliccabili nonostante l'attributo hidden. */
[hidden] { display: none !important; }
html { scroll-behavior: auto; background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--font-body);
  overscroll-behavior-y: none;
  overflow-x: hidden;
  min-height: 100vh; /* fallback per browser senza supporto a svh */
  min-height: 100svh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* ===================== Sfondo lava animato =====================
   Versione leggera: niente blur giganti né rotazioni a schermo intero
   (bloccavano il rendering sui dispositivi meno potenti). Il movimento
   visibile viene da: braci che salgono di continuo (JS), lago di lava
   che pulsa in basso, bolle di magma che derivano (solo transform). */
.lava-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 50%, rgba(232,41,28,0.26) 0%, rgba(255,106,26,0.12) 40%, transparent 70%),
    radial-gradient(110% 80% at 50% -18%, rgba(232,41,28,0.3) 0%, rgba(122,18,7,0.15) 45%, transparent 65%),
    linear-gradient(180deg, #1c070b 0%, #26090a 50%, #1a0709 100%);
}
/* i gradienti radiali hanno già bordi morbidi: nessun filter blur */
.lava-blob { position: absolute; border-radius: 50%; will-change: transform; pointer-events: none; }
.lava-blob-1 {
  width: 70vmax; height: 70vmax; left: -22vmax; top: -20vmax;
  background: radial-gradient(circle, rgba(232,41,28,0.5) 0%, rgba(232,41,28,0.22) 35%, rgba(232,41,28,0) 66%);
  animation: lava-drift-1 22s ease-in-out infinite;
}
.lava-blob-2 {
  width: 60vmax; height: 60vmax; right: -20vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(255,106,26,0.48) 0%, rgba(255,106,26,0.2) 35%, rgba(255,106,26,0) 66%);
  animation: lava-drift-2 26s ease-in-out infinite;
}
.lava-blob-3 {
  width: 48vmax; height: 48vmax; left: 28vmax; top: 34vmax;
  background: radial-gradient(circle, rgba(244,196,48,0.3) 0%, rgba(244,196,48,0.12) 35%, rgba(244,196,48,0) 66%);
  animation: lava-drift-3 32s ease-in-out infinite;
}
/* lago di lava che respira in fondo allo schermo */
.lava-lake {
  position: absolute; inset-inline: 0; bottom: 0; height: 42vh; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 112%, rgba(255,140,0,0.55) 0%, rgba(232,41,28,0.35) 34%, rgba(122,18,7,0.16) 60%, transparent 78%);
  animation: lake-pulse 4.6s ease-in-out infinite;
}
/* contenitore braci che salgono (popolato da JS) */
.lava-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lava-cracks {
  position: absolute; inset: -10%; pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,244,226,0.09) 0%, transparent 2%),
    radial-gradient(circle at 78% 60%, rgba(255,244,226,0.07) 0%, transparent 1.5%),
    radial-gradient(circle at 45% 85%, rgba(255,244,226,0.08) 0%, transparent 2%),
    radial-gradient(circle at 62% 30%, rgba(255,244,226,0.06) 0%, transparent 1.5%),
    radial-gradient(circle at 90% 15%, rgba(255,244,226,0.06) 0%, transparent 1.5%);
  animation: flicker 3.4s ease-in-out infinite;
}
@keyframes lake-pulse {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.08); }
}
@keyframes lava-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10vmax, 12vmax) scale(1.15); }
  66% { transform: translate(-6vmax, 8vmax) scale(0.95); }
}
@keyframes lava-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-12vmax, -10vmax) scale(1.18); }
  70% { transform: translate(-4vmax, -16vmax) scale(0.92); }
}
@keyframes lava-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16vmax, -8vmax) scale(1.3); }
}

.section-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }

/* ===================== Section label (gold, underline) ===================== */
.section-label { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.section-label span { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.35em; color: rgba(244,196,48,0.9); }
.section-label i { width: 40px; height: 1px; background: rgba(244,196,48,0.6); font-style: normal; }
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-heading h2 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* ===================== Buttons ===================== */
.btn-lava {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 14px 32px;
  background: var(--lava); color: var(--cream);
  border-radius: 999px; font-family: var(--font-display);
  font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase;
}
.glow-pulse { animation: glow-pulse 2.4s ease-in-out infinite; }

/* ===================== Scia di braci sul cursore ===================== */
.cursor-ember {
  position: fixed; top: 0; left: 0; z-index: 60;
  border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  animation: cursor-rise 0.7s ease-out forwards;
}
@keyframes cursor-rise {
  0% { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.25); }
}

/* ===================== Pulsante fisso info/contatti (FAB) ===================== */
.fab {
  position: fixed; right: 16px; bottom: 88px; z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* Da chiuso il contenitore e' una colonna invisibile alta quanto il menu:
     senza questo rubava i tocchi a quello che c'e' sotto (foto, flyer). */
  pointer-events: none;
}
.fab-btn { pointer-events: auto; }
/* Tasto del suono: stessa altezza della M ma dall'altra parte, cosi' non
   si pestano i piedi e in mezzo resta libera la barra "Entra in lista". */
.sound-toggle {
  position: fixed; left: 16px; bottom: 88px; z-index: 35;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,20,18,0.85); color: var(--cream);
  border: 1px solid rgba(244,196,48,0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sound-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle.is-off { color: rgba(255,244,226,0.5); border-color: rgba(255,244,226,0.16); }

.fab-btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lava);
  box-shadow: 0 0 0 2px rgba(255,244,226,0.18), 0 6px 24px rgba(232,41,28,0.6);
  animation: glow-pulse 2.4s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.fab-btn img { width: 34px; height: 34px; object-fit: contain; }
.fab-btn:active { transform: scale(0.94); }
.fab.open .fab-btn { transform: rotate(45deg); }
.fab-menu {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab.open .fab-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-item {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform 0.15s ease;
}
.fab-item:active { transform: scale(0.92); }
.fab-item svg { width: 24px; height: 24px; }
/* WhatsApp: icona piena */
.fab-wa svg { fill: #fff; }
/* Instagram ed email: icona a contorno bianco */
.fab-ig svg, .fab-mail svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab-ig svg .ig-dot { fill: #fff; stroke: none; }
.fab-tg svg { fill: #fff; }
.fab-wa { background: #25d366; }
.fab-tg { background: #229ed9; }
.fab-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.fab-mail { background: var(--lava); }
@media (min-width: 640px) {
  .fab { right: 28px; bottom: 28px; }
}

/* CTA hero: molto più visibile sul video (pulsazione + bagliore + riflesso) */
.btn-hero-cta {
  position: relative; overflow: hidden;
  padding: 16px 42px; font-size: 20px;
  background: linear-gradient(120deg, var(--lava), var(--ember));
  border: 2px solid rgba(255,244,226,0.35);
  animation: hero-cta-pulse 1.9s ease-in-out infinite;
}
.btn-hero-cta > span { position: relative; z-index: 2; }
/* Il bottone diventa a due righe: sopra l'ospite in piccolo, sotto l'invito
   grande. Non e' un elemento in piu' nell'hero, e' lo stesso bottone. */
.btn-hero-cta { flex-direction: column; gap: 1px; line-height: 1.05; }
.hero-cta-tag {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,244,226,0.92);
}
@media (min-width: 640px) {
  .hero-cta-tag { font-size: 13px; }
}
.btn-hero-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.55) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: hero-cta-shine 2.9s ease-in-out infinite;
}
@keyframes hero-cta-shine {
  0%, 55% { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}
@keyframes hero-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,106,26,0.55), 0 0 22px rgba(255,106,26,0.55), 0 10px 28px rgba(232,41,28,0.45); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,106,26,0), 0 0 42px rgba(255,106,26,0.9), 0 10px 30px rgba(232,41,28,0.6); }
}

/* ===================== Keyframes ===================== */
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.94; } 50% { opacity: 0.82; } 55% { opacity: 0.97; } }
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232,41,28,0.3); }
  50% { box-shadow: 0 0 20px rgba(255,106,26,0.4); }
}
@keyframes shimmer { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-1.5%,0) scale(1.01); } }
@keyframes kenburns { 0% { transform: scale(1.02) translate(0,0); } 100% { transform: scale(1.13) translate(-1%,-1%); } }
@keyframes drip { 0% { transform: translateY(-16px) scaleY(0.6); opacity: 0; } 60% { transform: translateY(4px) scaleY(1.05); opacity: 1; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes lava-fill { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes boom { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 0.9; } }
@keyframes digit-flip { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes float-up { 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate3d(var(--drift,12px), -120vh, 0); opacity: 0; } }
@keyframes fall-down { 0% { transform: translateY(-10%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(115vh); opacity: 0; } }

.drip { animation: drip 1s ease-out both; }
.drip-delay-1 { animation: drip 1s ease-out 0.35s both; }
/* Solo dissolvenza (niente scala/traslazione): usata sui pulsanti perché
   "drip" sposta e rimpicciolisce l'elemento durante l'entrata — l'area
   cliccabile è comunque presente (solo invisibile) e si muove per ~1s,
   quindi un tap nell'istante sbagliato subito dopo il caricamento manca
   il bersaglio. Con la sola opacità il pulsante resta sempre al suo posto. */
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.fade-in-delay-2 { animation: fade-in 0.6s ease-out 0.55s both; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--lava); border-radius: 8px; }

/* ===================== Loading screen ===================== */
.loading-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--void);
  transition: opacity 0.3s ease;
}
.loading-screen.hide { opacity: 0; pointer-events: none; }
.loading-ember-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 65%, rgba(232,41,28,0.35), transparent 60%);
  animation: flicker 3.2s ease-in-out infinite;
}
.loading-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 24px; }
/* Il filter si attiva solo a decodifica confermata (classe aggiunta via JS):
   applicarlo subito su un'immagine non ancora decodificata puo' far si che
   Safari disegni per un istante un riquadro pieno al posto dell'ombra
   sagomata sulle lettere (bug di rendering legato alla race di decodifica). */
.loading-logo { width: 200px; }
.loading-logo.decoded { filter: drop-shadow(0 0 30px rgba(232,41,28,0.55)); }
.loading-tagline { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; color: var(--gold); margin: 0; }
.loading-bar-wrap { position: relative; width: 260px; }
.loading-bar-track { height: 12px; width: 100%; border-radius: 999px; background: var(--ash); overflow: hidden; box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 18px rgba(255,106,26,0.35), inset 0 0 18px rgba(232,41,28,0.15); }
.loading-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7a1207, var(--lava), var(--ember), var(--gold), var(--lava), #7a1207); background-size: 300% 100%; animation: lava-fill 2.2s linear infinite; }
.loading-percent { margin: 10px 0 0; text-align: center; font-family: var(--font-display); font-size: 32px; color: var(--cream); font-variant-numeric: tabular-nums; }

/* Mascotte che corre attraverso lo schermo (video keyed su canvas) */
.mascot-run-canvas {
  position: absolute; z-index: 1; bottom: 4vh; left: 0;
  height: 36vh; width: auto; aspect-ratio: 480 / 854;
  pointer-events: none;
  will-change: transform;
  visibility: hidden;
}
.mascot-run-canvas.running { visibility: visible; }

@media (min-width: 640px) {
  .loading-logo { width: 260px; }
}
.loading-skip { min-height: 44px; padding: 0 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,244,226,0.5); text-decoration: underline; text-underline-offset: 4px; }
.loading-flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #fff4e2 0%, #ff8c00 45%, #e8291c 100%);
  opacity: 0; transition: opacity 0.18s ease;
}
.loading-flash.show { opacity: 1; }

/* ===================== Nav ===================== */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled { background: rgba(5,5,5,0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-logo { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; }
.nav-logo img { height: 36px; width: 36px; }
.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.8); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.65); }
.nav-cta { min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--lava); font-family: var(--font-display); color: var(--cream) !important; display: flex; align-items: center; }
.nav-burger { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; position: relative; }
.nav-burger span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 999px; background: var(--cream); transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease; }
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger.open { filter: drop-shadow(0 0 6px rgba(232,41,28,0.85)) drop-shadow(0 0 12px rgba(244,196,48,0.6)); }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--lava); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--lava); }

.nav-mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: rgba(5,5,5,0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nav-mobile-menu.open { opacity: 1; pointer-events: auto; }
/* Area tap ≥44px (36px di testo da soli erano sotto lo standard touch) */
.nav-mobile-menu a { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; padding: 8px 24px; }

.bottom-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  padding: 24px 16px max(env(safe-area-inset-bottom), 12px);
  background: linear-gradient(to top, var(--void), rgba(5,5,5,0.9), transparent);
}
.bottom-cta .btn-lava { width: 100%; max-width: 320px; }
/* Due tasti affiancati: "Entra in lista" (pieno, il principale) e
   "Prenota un tavolo" (a contorno). Stessa altezza, meta' larghezza ciascuno. */
.bottom-cta { gap: 8px; }
.bottom-cta .btn-lava, .bottom-cta .btn-tavolo {
  flex: 1 1 0; min-width: 0; max-width: 210px; min-height: 50px;
  padding: 10px 8px; font-size: 16px; line-height: 1.05; text-align: center;
}
.btn-tavolo {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--cream); background: rgba(12,8,6,0.88); border: 1.5px solid rgba(244,196,48,0.7);
  box-shadow: 0 0 14px rgba(244,196,48,0.18);
}
.btn-tavolo[hidden] { display: none; }
.bottom-cta.un-tasto .btn-lava { max-width: 320px; }
.btn-tavolo:active { border-color: var(--gold); }

@media (min-width: 640px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .bottom-cta { display: none; }
}

/* ===================== Hero ===================== */
.hero { position: relative; height: 130vh; }
.hero-sticky {
  position: sticky; top: 0; width: 100%; overflow: hidden; background: var(--void);
  /* Altezza stabile invece di 100dvh: su mobile 100dvh si ridimensiona in
     tempo reale quando la barra degli indirizzi si nasconde/mostra durante
     lo scroll, spostando leggermente i pulsanti dentro l'hero proprio nel
     momento del tap e facendo "sbagliare mira" al click. 100svh resta fermo. */
  height: 100vh; /* fallback per browser senza supporto a svh */
  height: 100svh;
}
.hero-scene { position: absolute; inset: 0; }
.hero-photo { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--void) 0%, rgba(5,5,5,0.35) 22%, rgba(5,5,5,0.05) 45%, rgba(5,5,5,0.4) 100%); }
.hero-scrim-top { position: absolute; inset-inline: 0; top: 0; height: 128px; pointer-events: none; background: linear-gradient(to bottom, rgba(5,5,5,0.8), transparent); }
.hero-content {
  position: relative; z-index: 10; height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 0 24px; text-align: center;
}
/* Indicatore "scorri" (solo telefono). Sta sopra la barra fissa
   "Entra in lista", quindi il bottom tiene conto della sua altezza
   (~84px) piu' la tacca del telefono; pointer-events: none perche' non
   deve mai rubare un tap ai pulsanti sotto. */
.scroll-cue {
  position: absolute; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom));
  z-index: 11; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none;
}
.scroll-cue span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em;
  color: rgba(255,244,226,0.7); text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.scroll-cue svg {
  width: 24px; height: 24px; fill: none; stroke: var(--gold);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(232,41,28,0.7));
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@media (min-width: 640px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* Lo "Scorri" è ancorato a 100px dal fondo mentre il contenuto dell'hero è
   centrato: su schermi bassi il bottone gli finiva sopra e la scritta
   spuntava sopra al tasto. Non ci si può affidare a una media query
   sull'altezza, perché su Safari misura lo schermo SENZA la barra degli
   indirizzi mentre l'hero si rimpicciolisce CON la barra. Qui si tiene
   libera una fascia in fondo: il contenuto non ci entra a nessuna altezza,
   nemmeno dentro il browser di Instagram. */
@media (max-width: 639px) {
  .hero-content { padding-bottom: 80px; }
}

@media (max-height: 640px) {
  /* Qui lo "Scorri" è nascosto, quindi la fascia non va riservata. */
  .hero-content { padding-bottom: 0; gap: 12px; }
  .scroll-cue { display: none; }
}

.hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4em; color: rgba(244,196,48,0.9); }
.hero-wordmark { width: 260px; }
.hero-wordmark img { width: 100%; height: auto; filter: drop-shadow(0 0 35px rgba(232,41,28,0.6)); }
.hero-sub { max-width: 320px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.9); }

@media (min-width: 640px) {
  .hero-wordmark { width: 340px; }
  .hero-sub { max-width: 420px; font-size: 16px; }
}
@media (min-width: 768px) {
  .hero-wordmark { width: 420px; }
}

/* Particella/detriti generati via JS (ember + eruzione) */
.particle { position: absolute; border-radius: 999px; pointer-events: none; }
.particle-ember { background: var(--ember); opacity: 0.7; filter: blur(0.5px); }
.particle-gold { background: var(--gold); opacity: 0.7; filter: blur(0.5px); }
.particle-chunk { background: radial-gradient(circle at 35% 30%, #fff4e2, #ff8c00 45%, #e8291c 100%); }
.particle-rain { width: 3px; border-radius: 999px; background: linear-gradient(to bottom, var(--gold), var(--ember), var(--lava)); }
.burst-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, #fff4e2 0%, #ff8c00 35%, #e8291c 70%, transparent 100%); opacity: 0; }

/* ===================== Prossimo evento ===================== */
.event-section { position: relative; padding: 96px 0; overflow: hidden; }
.event-glow { position: absolute; left: 50%; top: 0; height: 288px; width: 288px; transform: translate(-50%,-33%); border-radius: 999px; background: rgba(232,41,28,0.14); filter: blur(60px); pointer-events: none; }
.event-venue { font-family: var(--font-display); font-size: 44px; text-transform: uppercase; color: var(--cream); text-shadow: 0 0 28px rgba(232,41,28,0.4); margin: 0; }
/* logo del locale al posto della scritta */
.event-venue.has-logo { text-shadow: none; }
.venue-logo {
  width: min(78vw, 340px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 22px rgba(232,41,28,0.45)) drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.event-lineup { max-width: 380px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,244,226,0.6); }

/* ===================== Selettore serate (settimane con 2 eventi) =====================
   Con due serate la seconda scheda finiva oltre tre schermate più in basso
   su telefono: nessuno la vedeva. Qui i due nomi stanno affiancati sopra la
   scheda, entrambi leggibili subito, e si tocca per passare da una all'altra. */
.event-switch {
  display: flex; gap: 8px; width: 100%; max-width: 420px;
  margin: 4px auto 4px; padding: 5px;
  border-radius: 999px; background: rgba(26,20,18,0.7);
  border: 1px solid rgba(244,196,48,0.22);
}
.event-tab {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 10px; border-radius: 999px; border: none;
  background: transparent; color: rgba(255,244,226,0.62);
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
}
.event-tab-day {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.85;
}
.event-tab-venue {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.05;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-tab.is-active {
  background: linear-gradient(135deg, var(--lava), var(--ember));
  color: var(--cream);
  box-shadow: 0 6px 18px rgba(232,41,28,0.35);
}
.event-tab.is-active .event-tab-day { opacity: 1; }
/* "Special Guest": oro quando il tasto e' spento (e' il richiamo), crema
   quando e' acceso (l'oro sul rosso non si leggerebbe). */
.event-tab-tag {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.1;
  color: var(--gold); white-space: nowrap;
}
.event-tab.is-active .event-tab-tag { color: var(--cream); }
@media (min-width: 640px) {
  .event-tab { min-height: 58px; }
  .event-tab-venue { font-size: 20px; }
  .event-tab-day { font-size: 11px; }
  .event-tab-tag { font-size: 10px; }
}

/* Serata a cui si riferisce il modulo aperto: con due serate e i pulsanti
   sparsi per la pagina, senza questo non si saprebbe a quale ci si iscrive. */
.lead-event {
  margin: 2px 0 0; font-family: var(--font-body); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,244,226,0.62);
}

.countdown { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 8px; }
.countdown-pulse {
  position: absolute; left: 50%; top: 50%; z-index: -1; height: 140%; width: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(232,41,28,0.22), transparent 70%);
  animation: countdown-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
.countdown-digit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.digit-face {
  display: block; perspective: 240px;
  font-family: var(--font-display); font-size: 48px; line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.digit-face span { display: inline-block; transform-origin: 50% 50%; }
.countdown-digit label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255,244,226,0.45); }
.countdown-sep { font-family: var(--font-display); font-size: 38px; line-height: 1; margin-top: 4px; color: var(--lava); animation: sep-blink 1s step-start infinite; }
.digit-flip span { animation: digit-flip 0.5s cubic-bezier(0.32,0.1,0.2,1) both; }
#cd-sec.digit-flip span { color: var(--gold); animation: digit-flip-sec 0.5s cubic-bezier(0.32,0.1,0.2,1) both; }

@keyframes countdown-breathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes sep-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes digit-flip {
  0% { transform: rotateX(-100deg) translateY(-8%); opacity: 0; filter: blur(3px); }
  55% { transform: rotateX(20deg) translateY(2%); opacity: 1; filter: blur(0); }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; }
}
@keyframes digit-flip-sec {
  0% { transform: rotateX(-100deg) scale(1.15); opacity: 0; filter: blur(3px); text-shadow: 0 0 18px rgba(244,196,48,0.9); }
  55% { transform: rotateX(20deg) scale(1.08); opacity: 1; filter: blur(0); }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; text-shadow: 0 0 0 rgba(244,196,48,0); }
}

@media (min-width: 640px) {
  .event-venue { font-size: 64px; }
  .countdown { gap: 20px; }
  .digit-face { font-size: 88px; }
  .countdown-sep { font-size: 68px; margin-top: 8px; }
}

.flyer-card {
  perspective: 900px; width: 100%; max-width: 320px;
}
.flyer-placeholder {
  position: relative; aspect-ratio: 4/5; width: 100%; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--ash), var(--charcoal));
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1), 0 24px 48px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
  transition: transform 0.1s ease-out;
}
.flyer-placeholder span { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(255,244,226,0.5); }
.flyer-placeholder small { font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.3); }

/* flyer reale (video animato o immagine) */
.flyer-card--media { max-width: 340px; }
.flyer-media {
  position: relative; aspect-ratio: 9/16; width: 100%; border-radius: 18px; overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 32px rgba(232,41,28,0.4), 0 26px 54px rgba(0,0,0,0.55);
  transition: transform 0.12s ease-out;
  transform-style: preserve-3d;
  animation: flyer-glow 3.4s ease-in-out infinite;
}
.flyer-media video, .flyer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* riflesso che attraversa il flyer */
.flyer-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,244,226,0.28) 48%, rgba(255,244,226,0.05) 55%, transparent 70%);
  transform: translateX(-120%);
  animation: flyer-shine 4.6s ease-in-out infinite;
}
@keyframes flyer-shine {
  0%, 62% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}
@keyframes flyer-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244,196,48,0.3), 0 0 26px rgba(232,41,28,0.35), 0 26px 54px rgba(0,0,0,0.55); }
  50% { box-shadow: 0 0 0 1px rgba(244,196,48,0.55), 0 0 40px rgba(255,106,26,0.55), 0 26px 54px rgba(0,0,0,0.55); }
}

/* data + luogo sotto il nome del locale */
.event-when {
  margin: -8px 0 0; font-family: var(--font-body); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold);
  text-shadow: 0 0 12px rgba(232,41,28,0.4);
}

/* dettagli d'ingresso */
.event-entry { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.entry-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(26,20,18,0.6); border: 1px solid rgba(244,196,48,0.22);
  font-size: 14px; color: rgba(255,244,226,0.9);
}
.entry-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(232,41,28,0.18); color: var(--gold);
}

/* pulsanti azione evento */
/* i due pulsanti evento, stessa grandezza, impilati sotto l'evento */
.event-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.event-cta { width: 100%; max-width: 320px; }
.btn-outline {
  background: transparent; color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.6);
}
.btn-outline:hover { background: rgba(244,196,48,0.12); }
.event-note { margin: -12px 0 0; font-size: 12px; letter-spacing: 0.06em; color: rgba(255,244,226,0.55); }
.event-disclaimer { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,244,226,0.4); }

.partner-venues { width: 100%; }
.partner-venues p { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.5); }
.partner-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.partner-tags span { border-radius: 999px; border: 1px solid rgba(244,196,48,0.3); padding: 6px 14px; font-size: 12px; color: rgba(244,196,48,0.9); }

/* ===================== Sections generiche (video/galleria/about) ===================== */
.section { position: relative; padding: 80px 0; background: transparent; overflow: hidden; }
.section > .section-inner { position: relative; z-index: 1; }
/* velo leggero dietro il testo per leggibilità, senza coprire la lava */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(8,3,2,0.22);
}
/* leggibilità del testo con la lava viva dietro */
.section-inner h2,
.section-inner p,
.section-label span,
.event-venue,
.about-text,
.about-claim { text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 1px 6px rgba(0,0,0,0.85); }

.coming-soon {
  margin: 0 auto; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid rgba(255,244,226,0.1); border-radius: 16px; background: rgba(26,20,18,0.4);
  padding: 48px 32px; text-align: center;
}
.coming-soon-title { margin: 0; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(255,244,226,0.85); }
.coming-soon-text { margin: 0; max-width: 300px; font-size: 14px; color: rgba(255,244,226,0.5); }
.coming-soon-text span { color: rgba(255,244,226,0.7); }

/* ===================== Video / Aftermovie ===================== */
/* Swoosh: un unico carosello orizzontale a scorrimento su tutti i dispositivi */
.video-swoosh { position: relative; z-index: 1; margin-top: 40px; }
.video-carousel {
  display: flex; gap: 18px; padding: 8px 16px 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none;
}
.video-carousel::-webkit-scrollbar { display: none; }
.video-grid { display: none; }

.video-card {
  position: relative; flex: 0 0 78vw; scroll-snap-align: center;
  aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
}

/* frecce swoosh: vetro scuro bordato oro, ben distinte dal tasto play rosso */
.video-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 999px;
  align-items: center; justify-content: center;
  background: rgba(10,8,6,0.78); color: var(--gold);
  border: 1px solid rgba(244,196,48,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 30px; line-height: 1; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.video-arrow:hover { background: rgba(244,196,48,0.18); border-color: var(--gold); transform: translateY(-50%) scale(1.08); }
.video-arrow-prev { left: 8px; }
.video-arrow-next { right: 8px; }
.video-arrow[disabled] { opacity: 0.25; pointer-events: none; }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25); cursor: pointer;
}
.video-card.playing .video-card-overlay { background: transparent; }
.video-play-btn {
  display: flex; height: 64px; width: 64px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--lava); box-shadow: 0 0 24px rgba(255,106,26,0.6);
}
.video-play-btn svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--cream); }
.video-card.playing .video-play-btn { display: none; }
.video-mute-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: flex; height: 44px; width: 44px; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.video-mute-btn svg { width: 20px; height: 20px; fill: var(--cream); }
.video-caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; pointer-events: none;
  padding: 32px 16px 16px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.video-caption p { margin: 0; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: var(--cream); }
.video-caption span { font-size: 12px; color: rgba(255,244,226,0.7); }

@media (min-width: 640px) {
  .video-swoosh { max-width: 1180px; margin: 40px auto 0; }
  /* Niente snap né smooth nativo su desktop: lo snap "mandatory" annullava lo
     scroll delle frecce (i punti di aggancio collassano quasi tutti a 0 con
     più card per schermata) e le animazioni smooth native su questa pagina
     vengono uccise dai loop rAF (Lenis+GSAP) — le frecce animano via GSAP. */
  .video-carousel { padding: 8px 56px 20px; gap: 22px; scroll-snap-type: none; scroll-behavior: auto; }
  .video-card { flex: 0 0 300px; }
  .video-arrow { display: flex; }
}
@media (min-width: 1024px) {
  .video-card { flex: 0 0 320px; }
}

/* ===================== Galleria: griglia masonry + lightbox ===================== */
.gallery-grid {
  margin: 40px auto 0; max-width: 1100px; padding: 0 16px;
  column-count: 2; column-gap: 10px;
}
.gallery-item {
  display: block; width: 100%; margin-bottom: 10px; break-inside: avoid;
  border-radius: 12px; overflow: hidden; background: var(--ash);
  opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease;
}
.gallery-item.in-view { opacity: 1; transform: scale(1); }
/* aspect-ratio riserva lo spazio PRIMA che la foto (lazy) sia scaricata:
   senza, ogni riquadro resta alto 0 e la pagina si allunga di colpo mentre
   si scorre. Oltre al "salto" visivo, questo rompeva lo scroll automatico
   verso la newsletter (il bersaglio veniva calcolato sull'altezza sbagliata).
   object-fit: cover evita deformazioni se una foto futura non fosse 4:5. */
.gallery-item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.04); }

@media (min-width: 640px) {
  .gallery-grid { column-count: 3; column-gap: 14px; }
  .gallery-item { margin-bottom: 14px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 24px;
  /* I browser "in-app" (Instagram, Facebook, TikTok...) a volte riportano
     un'altezza di schermo diversa da quella davvero visibile, con barre che
     appaiono/scompaiono: 100vh da solo lascia uno spazio vuoto in fondo e
     spinge i tasti freccia/scarica fuori dallo schermo. 100dvh si adatta
     all'altezza visibile reale; --app-vh (calcolato via JS in main.js) è la
     rete di sicurezza per i browser che non supportano nemmeno dvh. */
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; display: flex; height: 44px; width: 44px;
  align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--cream);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); display: flex; height: 44px; width: 44px;
  align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--cream);
  font-size: 24px;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (min-width: 640px) {
  .lightbox-prev { left: 32px; }
  .lightbox-next { right: 32px; }
}

/* ===================== About ===================== */
.about-section { padding: 80px 0 112px; }
.about-glow { position: absolute; right: -64px; top: 50%; height: 256px; width: 256px; transform: translateY(-50%); border-radius: 999px; background: rgba(232,41,28,0.14); filter: blur(60px); pointer-events: none; }
.about-section h2 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; margin: 0; }
.about-text { max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255,244,226,0.8); }
.about-claim { font-family: var(--font-display); font-size: 20px; color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.65); margin: 0; }

/* mascotte + testo affiancati su schermi larghi */
.about-layout { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about-mascot {
  width: 150px; flex-shrink: 0;
  filter: drop-shadow(0 14px 34px rgba(232,41,28,0.5));
  animation: mascot-bob 3.2s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
/* card statistiche */
.about-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.about-stat {
  min-width: 108px; padding: 18px 22px; border-radius: 16px;
  background: rgba(26,20,18,0.55); border: 1px solid rgba(244,196,48,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.about-stat strong {
  display: block; font-family: var(--font-display); font-size: 32px; line-height: 1.1;
  color: var(--gold); text-shadow: 0 0 14px rgba(232,41,28,0.5);
}
.about-stat span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,244,226,0.7); }
/* chip dei locali partner nella sezione about */
.about-venues { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; }
.about-venues span {
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(232,41,28,0.12); border: 1px solid rgba(232,41,28,0.4);
  color: rgba(255,244,226,0.85);
}

@media (min-width: 640px) {
  .about-text { font-size: 18px; }
}
@media (min-width: 720px) {
  .about-layout { flex-direction: row; text-align: left; }
  .about-layout .about-text { text-align: left; }
  .about-mascot { width: 180px; }
}

/* ===================== Newsletter ===================== */
.newsletter-section { padding: 80px 0 96px; }
.newsletter-text { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,244,226,0.75); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 480px; }
.newsletter-form input {
  flex: 1 1 220px; min-height: 48px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(255,244,226,0.25); background: rgba(26,20,18,0.75);
  color: var(--cream); font-family: var(--font-body); font-size: 15px;
}
.newsletter-form input::placeholder { color: rgba(255,244,226,0.4); }
.newsletter-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(244,196,48,0.35); }
.newsletter-success {
  display: none; margin: 0; padding: 16px 24px; border-radius: 16px;
  background: rgba(232,41,28,0.14); border: 1px solid rgba(244,196,48,0.35);
  color: rgba(255,244,226,0.92); font-size: 15px;
}
.newsletter-perks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.newsletter-perks span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em;
  background: rgba(26,20,18,0.6); border: 1px solid rgba(255,244,226,0.14);
  color: rgba(255,244,226,0.75);
}

/* ===================== Social (feed Instagram) ===================== */
.social-section { padding: 80px 0 96px; }
.social-glow { position: absolute; left: 50%; bottom: 0; height: 320px; width: 320px; transform: translate(-50%, 40%); border-radius: 999px; background: rgba(255,140,0,0.18); filter: blur(70px); pointer-events: none; }
.social-bio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.social-handle { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; color: var(--gold); text-shadow: 0 0 12px rgba(232,41,28,0.5); }
.social-bio p { max-width: 420px; margin: 0; font-size: 14px; color: rgba(255,244,226,0.6); }

/* Card statiche dei post Instagram (foto salvata + link): niente widget
   ufficiale di Instagram, che spesso resta bloccato ad altezza zero perché
   molti browser bloccano lo script di ridimensionamento nell'iframe. */
.social-embeds {
  display: flex; gap: 16px; width: 100%; max-width: 1100px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
}
.social-embeds > * { scroll-snap-align: center; flex: 0 0 auto; }

/* Altezza fissa, larghezza libera (non un riquadro 4:5 fisso): ogni card
   prende da sola la forma della sua foto — niente tagli (come con "cover")
   e niente barre nere ai lati (come succedeva con "contain" in un riquadro
   di proporzioni diverse dalla foto). */
.social-post-card {
  position: relative; display: block; flex: 0 0 auto; height: 260px;
  border-radius: 14px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
}
.social-post-card img { height: 100%; width: auto; display: block; transition: transform 0.3s ease; }
.social-post-card:hover img { transform: scale(1.05); }
.social-post-card-icon {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  display: flex; height: 32px; width: 32px; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(5,5,5,0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.social-post-card-icon svg { width: 16px; height: 16px; fill: var(--cream); }

@media (min-width: 640px) {
  .social-embeds { justify-content: center; }
  .social-post-card { height: 300px; }
}

/* ===================== Footer ===================== */
.footer { position: relative; overflow: hidden; background: rgba(10,10,10,0.78); padding: 64px 24px 112px; }
.footer-watermark { position: absolute; bottom: -64px; right: -64px; width: 256px; opacity: 0.06; pointer-events: none; }
.footer-inner { gap: 24px; }
.footer-logo { width: 160px; }
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-social-btn {
  min-height: 48px; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; border-radius: 999px; font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.02em; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer-social-btn:active { transform: scale(0.96); }
.footer-social-btn svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
.footer-social-btn--ig {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.footer-social-btn--ig:hover { box-shadow: 0 8px 28px rgba(214,41,118,0.5); }
.footer-social-btn--wa { background: #25D366; }
.footer-social-btn--wa:hover { box-shadow: 0 8px 28px rgba(37,211,102,0.5); }
.footer-contact { margin: 0; font-size: 12px; color: rgba(255,244,226,0.5); }
/* Area toccabile: da telefono il link era alto 15px e prenderlo col dito
   era un terno al lotto. Il padding lo porta a ~44px senza cambiare
   l'aspetto (il margine negativo recupera lo spazio aggiunto). */
.footer-contact a {
  color: rgba(244,196,48,0.8);
  display: inline-block; padding: 14px 6px; margin: -14px -6px;
}
.footer-contact a:hover { text-decoration: underline; }
.footer-disclaimer { margin: 12px auto 0; max-width: 420px; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,244,226,0.4); }
.footer-copy { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,244,226,0.3); }

@media (min-width: 640px) {
  .footer { padding-bottom: 64px; }
  .footer-logo { width: 190px; }
}

/* ===================== Lead form (bottom-sheet mobile / modal desktop) ===================== */
.lead-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.lead-overlay.open { opacity: 1; pointer-events: auto; }
.lead-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
  border-radius: 24px 24px 0 0; background: var(--charcoal);
  box-shadow: 0 0 0 1px rgba(244,196,48,0.35), 0 0 18px rgba(255,106,26,0.35);
  padding: 24px 24px max(env(safe-area-inset-bottom), 24px);
  max-height: 88vh; max-height: 88svh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  /* Da chiuso, su desktop questo pannello sta centrato in pagina (sotto)
     e resta solo invisibile (opacity:0) — senza questo, da chiuso
     "ruba" comunque i click a qualsiasi bottone ci sia sotto (es. il
     primo ENTRA IN LISTA dell'hero, che spesso ci sta esattamente dietro). */
  pointer-events: none;
}
.lead-sheet.open { transform: translateY(0); pointer-events: auto; }
.lead-handle { margin: 0 auto 16px; height: 4px; width: 40px; border-radius: 999px; background: rgba(255,244,226,0.3); }
.lead-header { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-header h3 { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--gold); }
.lead-close { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; border-radius: 999px; color: rgba(255,244,226,0.7); }
.lead-form { display: flex; flex-direction: column; gap: 12px; }
.lead-form input, .lead-form textarea, .lead-form select {
  min-height: 44px; border-radius: 12px; background: var(--ash); padding: 12px 16px;
  color: var(--cream); font-family: var(--font-body); font-size: 16px;
  border: none; width: 100%; resize: vertical;
}
.lead-form textarea { min-height: 64px; line-height: 1.4; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(255,244,226,0.4); }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: 2px solid var(--lava); outline-offset: 0; }
/* campo obbligatorio non compilato: evidenziato in modo sempre visibile
   (niente popup nativo del browser, che dentro un pannello animato/scrollabile
   spesso non si posiziona bene e sembra "vuoto"). */
.lead-form .field-invalid, .newsletter-form .field-invalid {
  outline: 2px solid var(--lava); outline-offset: 0;
  background: rgba(232,41,28,0.14);
  animation: field-shake 0.35s ease;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.lead-status.error { color: var(--lava); font-weight: 600; }
/* menù a tendina numero persone: freccetta custom, niente stile nativo */
.lead-form select.lead-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZjRjNDMwJyBzdHJva2Utd2lkdGg9JzIuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.lead-form select.lead-select:invalid { color: rgba(255,244,226,0.4); }
.lead-select option { color: var(--cream); background: var(--charcoal); }
.lead-form button[type="submit"] { margin-top: 8px; }
.lead-info { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: rgba(255,244,226,0.5); }

/* selettore numero partecipanti (1–5) */
.lead-people-label {
  margin: 6px 0 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,244,226,0.6); text-align: center;
}
.lead-people { display: flex; gap: 10px; justify-content: center; }
.people-option {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ash); border: 1px solid rgba(255,244,226,0.15);
  font-family: var(--font-display); font-size: 20px; color: var(--cream);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.people-option:hover { border-color: rgba(244,196,48,0.5); transform: translateY(-2px); }
.people-option.selected {
  background: var(--lava); border-color: transparent;
  box-shadow: 0 0 16px rgba(232,41,28,0.55);
}
.lead-extra { display: flex; flex-direction: column; gap: 12px; }
.lead-extra-row { display: flex; flex-direction: column; gap: 8px; }
.lead-extra-row p {
  margin: 4px 0 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-align: left;
}
.lead-status { min-height: 20px; margin: 0; text-align: center; font-size: 14px; color: var(--lava); }
.lead-success { display: none; padding: 32px 0; text-align: center; color: rgba(255,244,226,0.9); }

@media (min-width: 640px) {
  .lead-sheet {
    inset-inline: auto; bottom: auto; left: 50%; top: 50%;
    width: 100%; max-width: 380px; border-radius: 24px;
    max-height: 86vh;
    transform: translate(-50%, -50%) scale(0.95); opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .lead-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .lead-handle { display: none; }
}

/* ===================== Pagina Foto Eventi ===================== */
.nav-link-active { color: var(--gold) !important; }
.eventi-section { padding-top: 120px; }
/* Container più largo del default (720px), ma con un tetto: con poche card
   in griglia c'è altrimenti tanto spazio vuoto attorno su desktop, ma senza
   un limite le card diventano enormi (fino a 800px di altezza). */
.eventi-section .section-inner { max-width: 980px; }
.eventi-title { font-family: var(--font-display); font-size: 40px; text-transform: uppercase; margin: 4px 0 0; }
.eventi-sub { color: rgba(255,244,226,0.65); margin: 0; max-width: 480px; }
.eventi-empty { color: rgba(255,244,226,0.5); padding: 40px 0; }

/* auto-fit con una LARGHEZZA MASSIMA (non 1fr libero): con poche card si
   allargano quanto basta per riempire lo spazio ma senza diventare enormi;
   quando gli eventi aumentano, la griglia si stringe da sola in più
   colonne senza bisogno di ritoccare il CSS. */
.eventi-grid {
  width: 100%; margin-top: 16px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  justify-content: center;
}
@media (min-width: 640px) {
  .eventi-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); gap: 22px; }
}

.eventi-card {
  display: block; border-radius: 16px; overflow: hidden; background: var(--ash);
  box-shadow: 0 0 0 1px rgba(255,244,226,0.1);
  opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease;
}
.eventi-card.in-view { opacity: 1; transform: scale(1); }
/* 9/16 come i flyer veri (non 4/5): con l'aspect-ratio sbagliato il crop
   "object-fit:cover" tagliava via testo in alto/basso del flyer. overflow
   hidden qui (non solo sulla card): senza, lo zoom al hover dell'immagine
   "sbordava" fuori dal suo riquadro e finiva sopra al testo della
   didascalia sotto. */
.eventi-card-media { position: relative; aspect-ratio: 9/16; background: var(--charcoal); overflow: hidden; }
.eventi-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.eventi-card:hover .eventi-card-media img { transform: scale(1.05); }
/* Flyer animato: sta sopra la copertina statica, invisibile finché il mouse
   non arriva (JS lo fa partire su mouseenter, lo mette in pausa su
   mouseleave — questo <video> esiste nella pagina solo su dispositivi con
   mouse vero, vedi eventi.js). */
.eventi-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.eventi-card:hover .eventi-card-video { opacity: 1; }
.eventi-card-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
  background: linear-gradient(160deg, var(--ash), var(--charcoal));
}
.eventi-card-placeholder span { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: rgba(255,244,226,0.6); }
.eventi-card-placeholder small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,244,226,0.3); }
.eventi-card-caption { padding: 10px 12px 14px; text-align: left; }
.eventi-card-caption p { margin: 0; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--cream); }
.eventi-card-caption span { font-size: 11px; color: rgba(255,244,226,0.55); }
.eventi-card-telegram {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  border-radius: 999px; background: rgba(244,196,48,0.14); border: 1px solid rgba(244,196,48,0.35);
  color: var(--gold) !important; font-size: 10.5px; letter-spacing: 0.02em;
}

/* Stessa forma del badge Telegram, colore spento: segnala che l'album c'e'
   ma e' ancora vuoto, cosi' non si clicca aspettandosi le foto. */
.eventi-card-soon {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  border-radius: 999px; background: rgba(255,244,226,0.08); border: 1px solid rgba(255,244,226,0.18);
  color: rgba(255,244,226,0.6) !important; font-size: 10.5px; letter-spacing: 0.02em;
}

.eventi-back {
  align-self: flex-start; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,244,226,0.6); padding: 8px 0; min-height: 44px; display: flex; align-items: center;
}
.eventi-back:hover { color: var(--gold); }

/* Griglia a righe piene (non a colonne indipendenti): con le colonne
   "masonry" le foto si distribuiscono per colonna e l'ultima riga resta
   spesso incompleta con un buco vistoso. Con una griglia a celle di
   altezza fissa (aspect-ratio + object-fit: cover) ogni riga si riempie
   sempre in modo uniforme, qualunque sia il numero di foto. */
.photo-grid {
  margin-top: 16px; width: 100%; max-width: 1100px; padding: 0 0 40px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

/* Messaggio quando l'album esiste ma le foto non sono ancora state caricate:
   occupa tutta la larghezza della griglia invece di stare in una cella. */
.album-empty {
  grid-column: 1 / -1; margin: 32px 0 8px; text-align: center;
  font-size: 14px; line-height: 1.6; color: rgba(255,244,226,0.6);
}

.photo-item {
  position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--ash);
  opacity: 0; transform: scale(0.96); transition: opacity 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}
.photo-item.in-view { opacity: 1; transform: scale(1); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.photo-item:hover img { transform: scale(1.05); }



/* ===================== Effetto serata 18/09 =====================
   Tela della pioggia di bandiere: sopra al modulo d'iscrizione (95), sotto
   alla schermata di caricamento (100). Non intercetta i tocchi. */
.festa-bandiere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99; pointer-events: none; }

/* ============ MODALITA' PAUSA (nessuna serata in programma) ============
   Niente scheda: resta la scritta grande della sezione, con delle braci che
   salgono e un bagliore caldo sotto. Animazioni CSS pure, quindi vanno anche
   quando il resto della pagina e' fermo. */
.event-section.in-pausa { position: relative; }
.event-venue-pausa {
  max-width: 14ch; margin-inline: auto;
  /* La scritta e' fatta di lava che scorre: sfumatura animata dentro alle
     lettere (leggera: muove solo lo sfondo, niente sfocature grandi). */
  background: linear-gradient(100deg, #fff1d6 0%, #ffc04d 18%, #ff6a1a 36%, #ff3b1f 50%, #ff8c00 66%, #ffd27a 82%, #fff1d6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* niente text-shadow: con le lettere trasparenti l'ombra finirebbe SOPRA
     alla lava e la spegnerebbe. Il bagliore lo fa il drop-shadow. */
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(255,106,26,0.55));
  animation: attesa-lava 5s linear infinite;
}
/* la regola generale di .event-venue mette un'ombra nera: qui va tolta con piu' forza */
.event-section .event-venue.event-venue-pausa { text-shadow: none; }
@keyframes attesa-lava { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes attesa-calore {
  0%, 100% { text-shadow: 0 0 22px rgba(255,106,26,0.35), 0 0 70px rgba(232,41,28,0.25); }
  50%      { text-shadow: 0 0 40px rgba(255,140,0,0.65), 0 0 110px rgba(232,41,28,0.45); }
}
/* Bagliore che "respira" sotto la scritta: la bocca del vulcano. */
.event-section.in-pausa::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: min(560px, 90vw); height: 260px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,106,26,0.30) 0%, rgba(232,41,28,0.14) 45%, rgba(232,41,28,0) 72%);
  animation: attesa-respiro 4.6s ease-in-out infinite;
}
@keyframes attesa-respiro {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.14); }
}
.event-section.in-pausa .section-inner { position: relative; z-index: 1; }
.fuoco-attesa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fuoco-attesa i {
  position: absolute; bottom: 12%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px rgba(255,140,0,0.95);
  opacity: 0; animation: attesa-brace 7s linear infinite;
}
.fuoco-attesa i:nth-child(1)  { left: 6%;  animation-delay: 0s;   animation-duration: 6.4s; }
.fuoco-attesa i:nth-child(2)  { left: 13%; animation-delay: 1.6s; animation-duration: 7.4s; }
.fuoco-attesa i:nth-child(3)  { left: 21%; animation-delay: 3.2s; animation-duration: 5.9s; }
.fuoco-attesa i:nth-child(4)  { left: 28%; animation-delay: 0.8s; animation-duration: 7.0s; }
.fuoco-attesa i:nth-child(5)  { left: 35%; animation-delay: 4.1s; animation-duration: 6.2s; }
.fuoco-attesa i:nth-child(6)  { left: 43%; animation-delay: 2.3s; animation-duration: 7.8s; }
.fuoco-attesa i:nth-child(7)  { left: 50%; animation-delay: 5.0s; animation-duration: 6.6s; }
.fuoco-attesa i:nth-child(8)  { left: 57%; animation-delay: 1.1s; animation-duration: 7.2s; }
.fuoco-attesa i:nth-child(9)  { left: 65%; animation-delay: 3.7s; animation-duration: 6.0s; }
.fuoco-attesa i:nth-child(10) { left: 72%; animation-delay: 0.4s; animation-duration: 7.6s; }
.fuoco-attesa i:nth-child(11) { left: 79%; animation-delay: 2.8s; animation-duration: 6.8s; }
.fuoco-attesa i:nth-child(12) { left: 87%; animation-delay: 4.6s; animation-duration: 7.1s; }
.fuoco-attesa i:nth-child(13) { left: 93%; animation-delay: 1.9s; animation-duration: 6.3s; }
.fuoco-attesa i:nth-child(14) { left: 97%; animation-delay: 3.4s; animation-duration: 7.5s; }
@keyframes attesa-brace {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  10%  { opacity: 0.95; }
  70%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(22px, -420px) scale(1.2); }
}
/* Crepa di lava sotto la scritta: una linea incandescente con un bagliore
   che la percorre e qualche scintilla che schizza fuori. */
.attesa-extra { margin-top: 26px; text-align: center; }
.attesa-crepa {
  position: relative; width: min(440px, 82vw); height: 4px; margin: 0 auto 30px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(232,41,28,0) 0%, #e8291c 12%, #ff8c00 30%, #fff1d6 50%, #ff8c00 70%, #e8291c 88%, rgba(232,41,28,0) 100%);
  background-size: 220% 100%; box-shadow: 0 0 14px rgba(255,106,26,0.9), 0 0 36px rgba(232,41,28,0.6);
  animation: attesa-crepa 3.2s ease-in-out infinite;
}
@keyframes attesa-crepa { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.attesa-crepa i {
  position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: #ffd9a0; box-shadow: 0 0 10px rgba(255,160,40,1); opacity: 0;
  animation: attesa-schizzo 2.6s ease-out infinite;
}
.attesa-crepa i:nth-child(1) { left: 18%; --dx: -26px; --dy: -70px; animation-delay: 0s; }
.attesa-crepa i:nth-child(2) { left: 34%; --dx: 14px;  --dy: -96px; animation-delay: 0.7s; }
.attesa-crepa i:nth-child(3) { left: 50%; --dx: -8px;  --dy: -120px; animation-delay: 1.3s; }
.attesa-crepa i:nth-child(4) { left: 62%; --dx: 22px;  --dy: -84px; animation-delay: 0.3s; }
.attesa-crepa i:nth-child(5) { left: 76%; --dx: -18px; --dy: -104px; animation-delay: 1.8s; }
.attesa-crepa i:nth-child(6) { left: 44%; --dx: 30px;  --dy: -64px; animation-delay: 2.2s; }
@keyframes attesa-schizzo {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  8%   { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}
/* Data "in codice": le cifre girano senza fermarsi finche' non c'e' la data. */
.attesa-data-label { margin: 0; font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(244,196,48,0.9); }
.attesa-data {
  margin: 10px 0 0; display: flex; justify-content: center; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-size: clamp(64px, 19vw, 104px); line-height: 1; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.attesa-cifra {
  display: inline-block; width: 0.62em; text-align: center; border-bottom: 3px solid rgba(255,106,26,0.75);
  text-shadow: 0 0 18px rgba(255,106,26,0.55);
}
.attesa-data b { font-weight: 400; color: var(--lava); margin: 0 2px; }
.attesa-sotto { margin: 16px auto 0; max-width: 300px; font-size: 14px; line-height: 1.5; color: rgba(255,244,226,0.72); }
/* Gruppo Telegram: secondo tasto, piu' discreto del rosso principale. */
.attesa-tg { margin-top: 26px; text-align: center; position: relative; z-index: 1; }
.attesa-tg p { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,244,226,0.6); }
.btn-tg {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px;
  border: 1.5px solid rgba(244,196,48,0.6); color: var(--cream); text-decoration: none;
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.03em;
  background: rgba(10,10,10,0.6); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-tg svg { width: 22px; height: 22px; fill: #3fb6ff; }
.btn-tg:hover { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,106,26,0.45); }
.btn-tg:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .attesa-crepa, .attesa-crepa i { animation: none; }
  .fuoco-attesa { display: none; }
  .event-venue-pausa, .event-section.in-pausa::after { animation: none; }
}


/* ===================== Apri mappa ===================== */
/* Sotto data e indirizzo: tasto piccolo a contorno, non deve fare
   concorrenza al rosso di "Entra in lista". */
.event-map {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 20px;
  margin-top: -4px; border-radius: 999px; border: 1.5px solid rgba(244,196,48,0.55);
  background: rgba(10,10,10,0.55); color: var(--cream); text-decoration: none;
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.event-map[hidden] { display: none; }
.event-map svg { width: 18px; height: 18px; fill: var(--lava); }
.event-map:hover { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,106,26,0.45); }
.event-map:active { border-color: var(--gold); }

/* ===================== Lingua (bandiere) ===================== */
.lang { position: relative; margin-left: auto; margin-right: 4px; }
.lang-btn, .lang-opt {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.lang-flag {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: block;
  box-shadow: 0 0 0 1.5px rgba(255,244,226,0.55), 0 2px 8px rgba(0,0,0,0.5);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang.open .lang-btn .lang-flag { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255,106,26,0.6); }
.lang-menu {
  position: absolute; top: 48px; left: 50%; margin-left: -26px; width: 52px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(10,10,10,0.92); border: 1px solid rgba(244,196,48,0.35); border-radius: 26px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.lang.open .lang-menu { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) {
  .nav-links { margin-left: auto; }
  .lang { margin-left: 20px; margin-right: 0; }
}
/* Tra 640 e 900 px (telefono in orizzontale, tablet piccoli) il menu in
   francese e spagnolo e' piu' lungo e spingeva la bandiera fuori schermo. */
.lang { flex-shrink: 0; }
@media (min-width: 640px) and (max-width: 899px) {
  .nav-links { gap: 14px; min-width: 0; }
  .nav-links a { font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
  .nav-links .nav-cta { padding: 6px 12px; min-height: 40px; }
  .lang { margin-left: 8px; }
}


/* ===================== Tema Halloween (halloween.js) ===================== */
/* Si accende da solo fino a temaHalloweenFino (config.js). */
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Pipistrello (disegno condiviso) ---------- */
.hw-membrana { fill: url(#hwMembrana); fill-opacity: 0.96; }
.hw-ossa { fill: none; stroke: #4a2414; stroke-width: 0.9; stroke-linecap: round; opacity: 0.85; }
.hw-bordo { fill: none; stroke: url(#hwBordoLuce); stroke-width: 1.4; stroke-linecap: round; }
.hw-pelo { fill: url(#hwPelo); stroke: rgba(255,140,60,0.55); stroke-width: 0.6; }
.hw-ciuffi { fill: none; stroke: #7a4426; stroke-width: 0.6; stroke-linecap: round; opacity: 0.7; }
.hw-zampine { fill: none; stroke: #1a0905; stroke-width: 1; stroke-linecap: round; }
.hw-occhi { fill: #ff3a1a; }
.hw-riflesso { fill: #fff; }
/* battito: ogni ala ruota dalla spalla, il corpo sobbalza al contrario */
.hw-ala { transform-box: view-box; }
.hw-ala-d { transform-origin: 63px 26px; animation: hw-batti-d 0.22s ease-in-out infinite alternate; }
.hw-ala-s { transform-origin: 57px 26px; animation: hw-batti-s 0.22s ease-in-out infinite alternate; }
.hw-corpo { animation: hw-sobbalza 0.22s ease-in-out infinite alternate; }
@keyframes hw-batti-d { from { transform: rotate(-24deg); } to { transform: rotate(26deg) scaleY(0.82); } }
@keyframes hw-batti-s { from { transform: rotate(24deg); } to { transform: rotate(-26deg) scaleY(0.82); } }
@keyframes hw-sobbalza { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }

/* ---------- Pipistrelli in volo ---------- */
.hw-cielo { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.hw-cielo svg, .hw-sciame svg, .hw-luna-volo svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-volo {
  position: absolute; left: 0; will-change: transform;
  animation-name: hw-vola; animation-timing-function: linear; animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.hw-volo-sx { animation-direction: reverse; }
.hw-volo-sx svg { transform: scaleX(-1); }
/* lontani: piu' piccoli, piu' scuri, quasi senza luce sul bordo */
.hw-lontano { opacity: 0.62; }
.hw-lontano .hw-bordo, .hw-lontano .hw-pelo { stroke-opacity: 0.3; }
.hw-onda { animation: hw-onda 1.7s ease-in-out infinite alternate; }
@keyframes hw-vola {
  0%   { transform: translateX(-16vw); opacity: 0; }
  4%   { opacity: 1; }
  56%  { opacity: 1; }
  60%  { transform: translateX(114vw); opacity: 0; }
  100% { transform: translateX(114vw); opacity: 0; }
}
@keyframes hw-onda { from { transform: translateY(-16px) rotate(-6deg); } to { transform: translateY(16px) rotate(5deg); } }

/* ---------- Sciame all'apertura ---------- */
.hw-sciame { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.hw-esce {
  position: absolute; left: 50%; top: 45%;
  opacity: 0; transform: translate(0, 0) scale(0.2);
  animation: hw-esce 1.8s cubic-bezier(.2,.6,.3,1) both;
}
.hw-esce-sx svg { transform: scaleX(-1); }
@keyframes hw-esce {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.2); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25); }
}

/* ---------- Caricamento: luna ---------- */
.hw-luna {
  position: absolute; left: 50%; top: -158px; width: 240px; height: 240px; margin-left: -120px;
  z-index: -1; pointer-events: none;
  animation: hw-luna-sorge 1.4s cubic-bezier(.2,.7,.3,1) both;
}
.hw-luna-disco {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 46px 8px rgba(255,140,50,0.5), 0 0 130px 36px rgba(255,90,20,0.28);
  animation: hw-luna-respira 4s ease-in-out infinite alternate;
}
.hw-luna-disco svg { display: block; width: 100%; height: 100%; }
/* nuvole scure che passano davanti alla luna */
.hw-nuvola {
  position: absolute; height: 80px; width: 320px; left: -40px; border-radius: 50%;
  background:
    radial-gradient(ellipse 48% 42% at 30% 55%, rgba(30,10,40,0.62), rgba(30,10,40,0) 72%),
    radial-gradient(ellipse 42% 36% at 62% 45%, rgba(40,14,52,0.55), rgba(40,14,52,0) 72%),
    radial-gradient(ellipse 30% 32% at 86% 60%, rgba(30,10,40,0.5), rgba(30,10,40,0) 72%);
  animation: hw-nuvola 9s linear infinite;
}
.hw-nuvola-1 { top: 52%; }
.hw-nuvola-2 { top: 16%; height: 60px; opacity: 0.6; animation-duration: 13s; animation-delay: -6s; }
@keyframes hw-nuvola { from { transform: translateX(-300px); } to { transform: translateX(300px); } }
/* pipistrello che passa davanti alla luna: sagoma nera, senza luce */
.hw-luna-volo { position: absolute; left: 0; top: 30%; width: 78px; animation: hw-luna-passa 3.2s cubic-bezier(.4,.1,.6,.9) 0.6s infinite; }
.hw-luna-volo .hw-bordo, .hw-luna-volo .hw-ossa { display: none; }
.hw-luna-volo .hw-membrana, .hw-luna-volo .hw-pelo { fill: #0a0302; stroke: none; }
.tema-halloween .loading-logo.decoded { filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)) drop-shadow(0 6px 18px rgba(0,0,0,0.7)); }
.tema-halloween .loading-tagline { text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 0 2px #000; }
.tema-halloween .loading-flash { background: radial-gradient(circle, #ffffff 0%, #d9b8ff 30%, #7b2cbf 70%, #1a0630 100%); }
@keyframes hw-luna-sorge { from { opacity: 0; transform: translateY(60px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes hw-luna-respira { from { filter: brightness(1); } to { filter: brightness(1.1); } }
@keyframes hw-luna-passa {
  0%   { transform: translate(-110px, 40px) scale(0.7); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(300px, -60px) scale(1.15); opacity: 1; }
  60%, 100% { transform: translate(340px, -70px) scale(1.15); opacity: 0; }
}

/* ---------- Nebbia che sale dal fondo dell'apertura ---------- */
.hw-nebbia { position: absolute; inset-inline: 0; bottom: 0; height: 46%; pointer-events: none; overflow: hidden; }
.hw-nebbia i {
  position: absolute; left: -30%; right: -30%; bottom: -10%; height: 100%;
  background:
    radial-gradient(ellipse 40% 45% at 20% 80%, rgba(200,175,255,0.30), transparent 70%),
    radial-gradient(ellipse 35% 40% at 55% 90%, rgba(255,180,120,0.22), transparent 70%),
    radial-gradient(ellipse 45% 50% at 85% 75%, rgba(180,150,255,0.26), transparent 70%);
  animation: hw-nebbia 16s ease-in-out infinite alternate;
}
.hw-nebbia i + i { bottom: -24%; opacity: 0.8; animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes hw-nebbia { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

/* ---------- Apertura: due bottoni uguali, uno per serata ---------- */
/* Stessa larghezza per tutti e due (si allineano anche se la riga piccola
   e' piu' lunga), stessa forma del bottone principale. */
.hero-cta-coppia { width: min(320px, 86vw); padding-left: 18px; padding-right: 18px; }
.hero-content .hero-cta-coppia + .hero-cta-coppia { margin-top: -6px; }
/* Halloween: solo i colori cambiano */
.hw-cta-halloween {
  background: linear-gradient(120deg, #ff6a1a, #b8320f 55%, #6a1fb0);
  border-color: rgba(255,190,120,0.45);
}

/* ---------- Tasto M in basso a destra: zucca intagliata ---------- */
.tema-halloween .fab-btn {
  position: relative; overflow: visible; background: transparent;
  animation: hw-zucca-alone 2.2s ease-in-out infinite;
}
.hw-zucca { position: absolute; left: -7px; top: -17px; width: 74px; height: 77px; pointer-events: none; }
.hw-zucca svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.hw-spicchi ellipse { stroke: rgba(105,32,3,0.6); stroke-width: 1; }
.hw-zucca-luce { animation: hw-candela 1.6s steps(1, end) infinite; }
/* la M "intagliata": brilla da dentro come una candela */
.tema-halloween .fab-btn img {
  position: relative; z-index: 1; margin-top: 4px;
  filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(-12deg) brightness(1.15)
          drop-shadow(0 0 1px #6a1c00) drop-shadow(0 0 4px #ffe08a) drop-shadow(0 0 10px #ffb02a);
  animation: hw-candela 1.6s steps(1, end) infinite;
}
.tema-halloween .fab.open .fab-btn { transform: rotate(-12deg) scale(1.08); }
/* menu aperto: la candela dentro la zucca si accende al massimo */
.tema-halloween .fab.open .hw-zucca-luce { animation: none; opacity: 1; transform: scale(1.18); transform-box: fill-box; transform-origin: center; }
.tema-halloween .fab.open .fab-btn img { animation: none; }
@keyframes hw-zucca-alone {
  0%, 100% { box-shadow: 0 0 26px rgba(255,140,40,0.35); }
  50%      { box-shadow: 0 0 40px rgba(255,160,60,0.6); }
}
@keyframes hw-candela {
  0%, 100% { opacity: 1; }
  23% { opacity: 0.8; }
  41% { opacity: 1; }
  58% { opacity: 0.88; }
  77% { opacity: 0.72; }
}

/* ---------- Serata di Halloween selezionata ---------- */
.serata-halloween .event-glow { background: rgba(255,106,26,0.24); }
.serata-halloween .flyer-media { animation: hw-flyer 3.2s ease-in-out infinite alternate; }
@keyframes hw-flyer {
  from { box-shadow: 0 0 0 1px rgba(255,140,40,0.55), 0 0 34px rgba(255,106,26,0.55), 0 26px 54px rgba(0,0,0,0.55); }
  to   { box-shadow: 0 0 0 1px rgba(170,90,255,0.55), 0 0 40px rgba(138,43,226,0.55), 0 26px 54px rgba(0,0,0,0.55); }
}
.serata-halloween .countdown .digit-face { color: #ffb24d; text-shadow: 0 0 16px rgba(255,106,26,0.85); }
.serata-halloween .countdown { animation: hw-neon 5.5s linear infinite; }
@keyframes hw-neon {
  0%, 88%, 90%, 94%, 100% { opacity: 1; }
  89% { opacity: 0.3; }
  92% { opacity: 0.55; }
  93% { opacity: 0.2; }
}
.serata-halloween .event-section .btn-lava,
.serata-halloween .bottom-cta .btn-lava { background: linear-gradient(120deg, #ff6a1a, #b8320f 55%, #6a1fb0); }

/* Tasto della serata di Halloween */
.event-tab.hw-tasto .event-tab-tag::before { content: "🎃 "; }
.event-tab.hw-tasto:not(.is-active) { animation: hw-tasto 1.8s ease-in-out infinite; }
.event-tab.hw-tasto:not(.is-active) .event-tab-tag { color: #ff9a3c; }
.event-tab.hw-tasto.is-active { background: linear-gradient(135deg, #ff6a1a, #7b2cbf); box-shadow: 0 6px 20px rgba(138,43,226,0.45); }
@keyframes hw-tasto {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,140,40,0.35); }
  50%      { box-shadow: inset 0 0 0 1.5px rgba(255,140,40,0.95), 0 0 16px rgba(255,106,26,0.45); }
}

/* ---------- Ragnatela con la rugiada ---------- */
.hw-ragnatela { position: absolute; pointer-events: none; fill: none; }
.hw-ragnatela .hw-fili { stroke: rgba(255,244,226,0.55); stroke-width: 0.7; }
.hw-goccia { fill: #fff8ec; filter: drop-shadow(0 0 2px rgba(255,255,255,0.9)); }
.hw-ragnatela-flyer {
  left: -6px; top: -6px; width: 112px; height: 112px; z-index: 5;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.85));
}

/* ---------- Ragno sul bordo destro del flyer: toccato scappa su ---------- */
.flyer-card { position: relative; }
.hw-ragno {
  position: absolute; top: -34px; left: 90%; z-index: 6;
  width: 66px; height: 200px; margin-left: -33px; padding: 0; border: 0; background: none;
  pointer-events: none; transform-origin: 50% 0;
  animation: hw-dondola 3.6s ease-in-out infinite alternate;
}
.hw-filo {
  position: absolute; left: 50%; top: 0; width: 1px; height: 120px; margin-left: -0.5px;
  background: linear-gradient(rgba(255,244,226,0.25), rgba(255,244,226,0.8)); transform-origin: 50% 0;
  animation: hw-filo 2.4s cubic-bezier(.3,.7,.4,1) 0.9s both;
}
.hw-ragno-corpo {
  position: absolute; left: 0; top: 0; width: 66px; height: 58px; margin-top: -12px;
  pointer-events: auto; cursor: pointer;
  animation: hw-scende 2.4s cubic-bezier(.3,.7,.4,1) 0.9s both;
}
.hw-ragno-corpo svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.6)); }
.hw-addome { fill: url(#hwRagnoCorpo); stroke: rgba(255,122,42,0.75); stroke-width: 0.6; }
.hw-clessidra { fill: #e8231a; }
.hw-occhio { fill: #ff2b14; }
.hw-zampe path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hw-zampe-bordo { stroke: rgba(255,122,42,0.8); stroke-width: 3; }
.hw-zampe-nere { stroke: #0b0302; stroke-width: 1.7; }
.hw-zampe { transform-box: view-box; }
.hw-zampe-s { transform-origin: 31px 22px; animation: hw-zampe-s 0.55s ease-in-out infinite alternate; }
.hw-zampe-d { transform-origin: 31px 22px; animation: hw-zampe-d 0.55s ease-in-out infinite alternate; }
@keyframes hw-zampe-s { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes hw-zampe-d { from { transform: rotate(4deg); } to { transform: rotate(-4deg); } }
@keyframes hw-filo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hw-scende { from { transform: translateY(0); } to { transform: translateY(120px); } }
@keyframes hw-sale { from { transform: translateY(120px); } to { transform: translateY(0); } }
@keyframes hw-filo-sale { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes hw-dondola { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.hw-ragno.hw-scappa .hw-ragno-corpo { animation: hw-sale 0.45s cubic-bezier(.5,0,.8,.4) both; }
.hw-ragno.hw-scappa .hw-filo { animation: hw-filo-sale 0.45s cubic-bezier(.5,0,.8,.4) both; }

@media (prefers-reduced-motion: reduce) {
  .hw-cielo, .hw-ragno, .hw-sciame, .hw-nebbia, .hw-luna-volo, .hw-nuvola { display: none; }
  .hw-luna, .hw-luna-disco, .tema-halloween .fab-btn, .tema-halloween .fab-btn img, .hw-zucca-luce { animation: none; }
  .serata-halloween .countdown, .event-tab.hw-tasto, .serata-halloween .flyer-media { animation: none; }
}


/* ---------- Moduli lista/tavolo: scelta della serata (con due serate) ---------- */
.lead-scelta { margin: -4px 0 16px; }
.lead-scelta[hidden] { display: none; }
.lead-scelta-titolo {
  margin: 0 0 8px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,244,226,0.75);
}
.lead-scelta-tasti { display: flex; gap: 8px; }
.lead-scelta-btn {
  flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 10px; border-radius: 999px;
  border: 1.5px solid rgba(244,196,48,0.35); background: var(--ash); color: rgba(255,244,226,0.75);
  font-family: var(--font-display); font-size: 16px; letter-spacing: 0.03em; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lead-scelta-btn.is-active { background: linear-gradient(120deg, var(--lava), var(--ember)); color: var(--cream); border-color: transparent; }
.lead-scelta-btn.is-halloween.is-active { background: linear-gradient(120deg, #ff6a1a, #b8320f 55%, #6a1fb0); }