/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* shared base only — the public site and /admin each load their own stylesheet */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #07070c;
  color: #eeecf5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/(site)/wa-float.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   WA-FLOAT — il pulsante WhatsApp che accompagna tutto il sito pubblico
   -------------------------------------------------------------------------
   Prefisso `waf-` / `.waf__…`: non tocca nessuna classe di site.css.
   Usa solo i token già dichiarati in site.css :root (--void, --ink, --warm,
   --line, --ease, --grad-two): nessun colore nuovo, nessun verde WhatsApp.

   Impilamento sul sito pubblico:
     preloader 200 · lightbox 160 · modal 150 · dock-logo 95 · nav 90
     >>> waf 85 <<<  · hero__scroll 5 · coming-soon 1
   Sta sopra la pagina e sopra la vetrina coming-soon, ma sotto la barra di
   navigazione (e quindi sotto il menu che si apre su telefono) e sotto ogni
   finestra modale: non deve mai coprire una cosa che il visitatore ha appena
   aperto.
   ========================================================================= */

.waf {
  position: fixed;
  z-index: 85;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));

  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px; /* bersaglio pieno: 48 > 44 */
  padding: 0 15px;
  border-radius: 12px;

  color: var(--ink);
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  /* vetro scuro: si stacca dalla pagina senza accendersi */
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.92), rgba(8, 8, 10, 0.94));
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  /* platino, l'accento del sito */
  --waf-accent: var(--warm);

  /* `transform` resta libero per il rientro: l'ingresso muove `translate`,
     che è una proprietà separata (vedi @keyframes wafIn). */
  transition:
    transform 0.3s var(--ease),
    opacity 0.22s linear,
    visibility 0s,
    border-color 0.3s var(--ease),
    gap 0.34s var(--ease);

  /* `backwards` e non `both`: durante l'attesa vale il fotogramma iniziale,
     a fine corsa NON resta nulla appiccicato — così `.is-tucked` può muovere
     transform e visibility senza essere scavalcata dall'animazione. */
  animation: wafIn 0.55s var(--ease) 1.2s backwards;
}

@keyframes wafIn {
  from {
    opacity: 0;
    visibility: hidden;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}

/* ── mirini: le quattro squadrette della casa ───────────────────────────── */
.waf__c {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--waf-accent);
  opacity: 0.72;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.waf__c--tl {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 12px;
}
.waf__c--tr {
  top: -1px;
  right: -1px;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 12px;
}
.waf__c--bl {
  bottom: -1px;
  left: -1px;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 12px;
}
.waf__c--br {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 12px;
}

.waf__ico {
  flex: none;
  color: var(--waf-accent);
  transition: color 0.3s var(--ease);
}

.waf__lbl {
  white-space: nowrap;
}
/* telefono: si legge l'etichetta corta, sempre. Niente hover da scoprire. */
.waf__lbl--l,
.waf__sr--l {
  display: none;
}

/* Il pezzo di frase che completa il nome del link per chi non vede lo
   schermo. `display:none` sull'altra coppia lo toglie davvero dall'albero di
   accessibilità: non si sovrappongono mai. */
.waf__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── acceso: mouse sopra, dito premuto, focus da tastiera ───────────────── */
.waf:hover,
.waf:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
}
.waf:hover .waf__c,
.waf:focus-visible .waf__c,
.waf:active .waf__c {
  opacity: 1;
}
.waf:hover .waf__ico,
.waf:focus-visible .waf__ico {
  color: var(--ink);
}
.waf:active {
  transform: scale(0.97);
}
/* il contorno di focus è già quello del sito (a:focus-visible in site.css) */

/* ── si ritira mentre si scende, torna appena si risale (solo telefono) ─── */
.waf.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(150%);
  pointer-events: none;
  transition:
    transform 0.3s var(--ease),
    opacity 0.22s linear,
    visibility 0s linear 0.3s;
}

/* ── sulla vetrina coming-soon prende l'ambra di quella pagina ──────────── */
/* `.cs` e `.waf` sono fratelli nel layout: la vetrina è tutta ambra hazard su
   acciaio, un pulsante platino ci starebbe come un ospite. */
.cs ~ .waf {
  --waf-accent: #e0a92e;
}

/* =========================================================================
   DESKTOP (721px+) — lo studio: c'è spazio, il pulsante può stare fermo e
   aprirsi al passaggio del mouse.
   ========================================================================= */
@media (min-width: 721px) {
  .waf {
    right: 28px;
    bottom: 28px;
    height: 54px;
  }
}

/* Da 721px il pulsante si chiude a quadrato e l'etichetta si apre al passaggio
   del mouse — ma SOLO dove il mouse c'è davvero.
   Perché: il sito pubblico (site.css) cambia assetto a 900px, non a 721. Fra
   721 e 899 la pagina è ancora in versione stretta — menu a panino, colonne
   impilate — cioè quasi sempre un tablet, che il mouse non ce l'ha. Con la
   sola larghezza a decidere, lì il pulsante diventava una icona muta:
   l'etichetta esisteva solo nell'hover, e su un dito l'hover non esiste.
   `(hover: hover)` separa «schermo largo» da «c'è un puntatore», che è la
   domanda vera. */
@media (min-width: 721px) and (hover: hover) {
  .waf {
    padding: 0 16px; /* 16 + 22 (icona) + 16 = 54: chiuso è un quadrato */
    gap: 0;
  }
  /* col mouse non si ritira mai: in basso a destra non c'è nulla da coprire e
     un pulsante che scompare mentre si legge è solo un pulsante che manca. */
  .waf.is-tucked {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .waf__lbl--s,
  .waf__sr--s {
    display: none;
  }
  .waf__sr--l {
    display: inline;
  }
  .waf__lbl--l {
    display: inline;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-width 0.34s var(--ease),
      opacity 0.2s linear;
  }
  .waf:hover,
  .waf:focus-visible {
    gap: 10px;
  }
  .waf:hover .waf__lbl--l,
  .waf:focus-visible .waf__lbl--l {
    max-width: 16rem;
    opacity: 1;
  }
}

/* Tablet e schermi grandi col dito: l'etichetta resta SCRITTA (niente hover da
   scoprire) e il pulsante continua a ritirarsi scorrendo in giù, perché il
   rischio di coprire un «Acquista» nella lista biglietti resta quello di
   prima. Cambia solo la taglia, che qui c'è spazio. */
@media (min-width: 721px) and (hover: none) {
  .waf {
    padding: 0 18px;
    gap: 10px;
  }
}

/* =========================================================================
   MOVIMENTO RIDOTTO — entra e basta, senza scivolare; il rientro diventa
   istantaneo invece che una scivolata.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .waf {
    animation-name: wafFade;
    transition: opacity 0.15s linear, visibility 0s;
  }
  .waf:active {
    transform: none;
  }
  .waf.is-tucked {
    transform: none;
    transition: opacity 0.15s linear, visibility 0s linear 0.15s;
  }
  .waf__lbl--l,
  .waf__c,
  .waf__ico {
    transition: none;
  }
}
@keyframes wafFade {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Parcheggiato: il bottone WhatsApp dell'hero è in vista, e due inviti
   identici sullo stesso schermo sono uno di troppo. Il flottante entra in
   scena solo quando l'hero esce (osservatore in wa-float.tsx). */
.waf.is-parked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/(site)/site.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   MAIN CLUB MILANO — "Due Anime"
   A nightclub lit by two opposing lasers: warm (Latin) + cold (Urban).
   ========================================================================= */

:root{
  /* ---- base (neutral monochrome) ---- */
  --void:      #08080a;
  --void-2:    #0e0e11;
  --raise:     #16161a;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.06);
  --ink:       #f2efe8;   /* soft warm white */
  --muted:     #96939b;
  --muted-2:   #7d7a82;   /* ≥4.5:1 on --void & --raise (WCAG AA) */

  /* ---- monochrome + ONE tenue accent (platinum). The two "souls" keep only a
         whisper of temperature — warm pearl vs cool steel — never red/blue. ---- */
  --warm:      #dcd5c6;   /* warm platinum — the accent */
  --warm-2:    #c0b9a8;
  --warm-gold: #ece5d5;
  --cold:      #c6cad1;   /* cool steel */
  --cold-2:    #a2a7af;
  --cyan:      #e6e2d8;   /* bright pearl — highlights & focus */

  --grad-two: linear-gradient(100deg, #efe9dc 0%, #dcd5c6 38%, #b9bcc2 72%, #d3d6db 100%);
  --grad-warm: linear-gradient(120deg, #faf6ee, #dcd5c6 55%, #aba290);
  --grad-cold: linear-gradient(120deg, #f3f5f8, #c6cad1 55%, #8f949c);

  /* ---- type ---- */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;
  /* Il corsivo delle due anime: dove il grotesk è l'urban, lui è il latino.
     Vive SOLO nella parola d'accento dei titoli e nel «vs» — un gesto, ovunque
     lo stesso, mai un tappeto. */
  --f-corsivo: 'Fraunces', Georgia, serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--cold-2); color:#fff; }

/* =========================================================================
   PRELOADER
   ========================================================================= */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
  /* si nasconde DA SOLO dopo il caricamento (indipendente dal JS): l'animazione
     forwards vince su tutto e resta hidden. Il JS può accelerare con .is-done. */
  animation:preOut .5s var(--ease) 1.8s forwards;
}
@keyframes preOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.preloader.is-done{ animation:preOut .45s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce){
  .preloader{ animation-delay:.3s; }
}
.preloader__mark{ display:flex; gap:.28em; font-family:var(--f-display); font-weight:900;
  font-size:clamp(38px,9vw,88px); letter-spacing:-.02em; line-height:1; }
.preloader__word{ opacity:0; transform:translateY(24px); animation:preIn .7s var(--ease) forwards; }
.preloader__word.warm{ color:var(--warm); }
.preloader__word.cold{ color:var(--cold); animation-delay:.12s; }
@keyframes preIn{ to{ opacity:1; transform:none; } }
.preloader__bar{ width:min(220px,54vw); height:2px; background:var(--line); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0; background:var(--grad-two); animation:preBar 1.15s var(--ease) forwards; }
@keyframes preBar{ to{ width:100%; } }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:18px;
  padding:16px var(--pad);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,8,14,.72);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
  padding-top:12px; padding-bottom:12px;
}
.nav__brand{ display:flex; align-items:center; }
.nav__logo{ height:34px; width:auto; filter:drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:13.5px; font-weight:500; color:var(--muted); letter-spacing:.01em;
  position:relative; padding:4px 0; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--grad-two); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:4px; }
.nav__burger{ display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  border-radius:10px; background:rgba(255,255,255,.03); position:relative; }
.nav__burger span{ position:absolute; left:11px; right:11px; height:1.6px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s; }
.nav__burger span:nth-child(1){ top:16px; }
.nav__burger span:nth-child(2){ bottom:16px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  --bg:transparent;
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:13px 22px; border-radius:100px; border:1px solid var(--line);
  color:var(--ink); background:var(--bg);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .35s, background .3s, color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn__meta{ font-family:var(--f-mono); font-size:11px; color:var(--muted); font-weight:400; }
.btn--solid{
  background:var(--ink); color:#0a0a11; border-color:var(--ink); font-weight:700;
}
.btn--solid:hover{ box-shadow:0 12px 34px -10px rgba(255,255,255,.35); }
.btn--solid .btn__meta{ color:#4a4658; }
.btn--ghost{ background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); }
.btn--ticket{
  position:relative; border-color:transparent; font-weight:700;
  background:linear-gradient(var(--void),var(--void)) padding-box,
             var(--grad-two) border-box;
}
.btn--ticket::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--grad-two); opacity:0; transition:opacity .3s; z-index:-1;
}
.btn--ticket:hover{ color:#0a0a11; }
.btn--ticket:hover::before{ opacity:1; }
.btn:focus-visible, a:focus-visible, .chip:focus-visible, input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; height:100svh; min-height:620px; display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(60px,9vh,110px); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03); }
/* scrim leggero: il video resta protagonista a tutto schermo, scurisce solo
   quanto basta per leggere il testo e fondersi nella sezione successiva */
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 0%, rgba(7,7,12,.18) 60%, rgba(7,7,12,.7) 100%),
    linear-gradient(180deg, rgba(7,7,12,.35) 0%, rgba(7,7,12,.05) 30%, rgba(7,7,12,.5) 82%, var(--void) 100%);
}
/* two-soul lights */
.lights{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.light{ position:absolute; border-radius:50%; filter:blur(30px); mix-blend-mode:screen;
  opacity:.55; will-change:transform; }
.light--warm{ width:60vw; height:60vw; left:-16vw; top:-8vw;
  background:radial-gradient(circle, rgba(255,59,83,.55), rgba(255,138,61,.18) 45%, transparent 68%);
  animation:breathe 8s ease-in-out infinite; }
.light--cold{ width:64vw; height:64vw; right:-20vw; bottom:-14vw;
  background:radial-gradient(circle, rgba(75,99,255,.5), rgba(138,61,255,.18) 45%, transparent 68%);
  animation:breathe 9s ease-in-out infinite reverse; }
@keyframes breathe{ 0%,100%{ opacity:.42; } 50%{ opacity:.62; } }

.grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__inner{ position:relative; z-index:5; max-width:var(--maxw); width:100%; margin:0 auto; }
.hero__eyebrow{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
.hero__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--warm);
  box-shadow:0 0 0 4px rgba(255,59,83,.2); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(255,59,83,0); } }

.hero__title{ margin:0; font-family:var(--f-display); font-weight:900; line-height:.82;
  letter-spacing:-.035em; font-size:clamp(74px, 20vw, 320px); text-transform:uppercase; }
.hero__line{ display:block; overflow:hidden; }
.hero__line em{ display:inline-block; font-style:normal; transform:translateY(105%);
  animation:lineUp 1s var(--ease) forwards; }
.line-1 em{ animation-delay:.15s; color:var(--ink); }
.line-2{ margin-left:.08em; }
.line-2 em{ animation-delay:.28s; background:var(--grad-two); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes lineUp{ to{ transform:none; } }

.hero__claim{ font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(16px,2.4vw,26px); margin:20px 0 0; }
.hero__claim i{ font-style:normal; color:var(--warm); margin:0 .2em; }
.hero__sub{ color:var(--muted); max-width:44ch; margin:14px 0 0; font-size:clamp(14px,1.5vw,17px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__scroll{ position:absolute; z-index:5; right:var(--pad); bottom:clamp(60px,9vh,110px);
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero__hash{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--muted);
  writing-mode:vertical-rl; text-orientation:mixed; }
.hero__arrow{ width:1px; height:44px; background:linear-gradient(var(--muted),transparent); position:relative; }
.hero__arrow::after{ content:""; position:absolute; bottom:0; left:-2px; width:5px; height:5px;
  border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:rotate(45deg);
  animation:down 1.8s ease-in-out infinite; }
@keyframes down{ 0%,100%{ transform:translateY(-6px) rotate(45deg); opacity:0; } 50%{ opacity:1; } 80%{ transform:translateY(2px) rotate(45deg); } }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:20px 0; overflow:hidden; background:var(--void-2); }
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content;
  animation:scrollX 32s linear infinite; }
.marquee__track span{ font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,3.4vw,40px); letter-spacing:-.01em; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.32); white-space:nowrap; }
.star{ width:12px; height:12px; flex:none; transform:rotate(0deg);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.star.warm{ background:var(--warm); } .star.cold{ background:var(--cold); }
@keyframes scrollX{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* =========================================================================
   SECTION SCAFFOLD
   ========================================================================= */
section{ padding:clamp(72px,11vh,140px) var(--pad); max-width:calc(var(--maxw) + var(--pad)*2);
  margin:0 auto; }
.section-head{ max-width:760px; margin:0 0 clamp(40px,6vh,64px); }
.eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:12px; margin:0 0 20px; }
.eyebrow .idx{ color:var(--warm); font-weight:700; }
.section-title{ font-family:var(--f-display); font-weight:900; line-height:.92; letter-spacing:-.03em;
  font-size:clamp(38px,6.5vw,88px); text-transform:uppercase; margin:0; }
/* La parola d'accento del titolo: corsivo morbido, minuscolo, col gradiente di
   sempre. Il titolo diventa un duetto — MAIUSCOLE fredde e corsivo caldo —
   cioè le due anime del club scritte, non solo dette. Il padding a destra
   evita che il background-clip tagli la coda delle lettere inclinate. */
.grad{ background:var(--grad-two); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:var(--f-corsivo); font-style:italic; font-weight:430;
  text-transform:none; letter-spacing:-.01em; padding-right:.08em;
  font-variation-settings:"SOFT" 80, "opsz" 100; }
.section-lead{ color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:52ch; margin:22px 0 0; }

/* =========================================================================
   DUE ANIME
   ========================================================================= */
.anime__split{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--void-2); }
.soul{ position:relative; padding:clamp(30px,4vw,54px); overflow:hidden; isolation:isolate;
  transition:background .4s; }
.soul__tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); }
.soul__name{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(44px,7vw,96px); line-height:.9; margin:14px 0 4px; letter-spacing:-.02em; }
.soul__genres{ font-size:14px; color:var(--ink); margin:0 0 18px; font-weight:500; }
.soul__text{ color:var(--muted); max-width:34ch; margin:0; font-size:15px; }
.soul__glow{ position:absolute; z-index:-1; width:70%; aspect-ratio:1; border-radius:50%;
  filter:blur(60px); opacity:.28; transition:opacity .45s, transform .6s var(--ease); }
.soul--warm .soul__name{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.soul--warm .soul__glow{ background:var(--warm); right:-15%; top:-10%; }
.soul--cold .soul__name{ background:var(--grad-cold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.soul--cold .soul__glow{ background:var(--cold); left:-15%; bottom:-10%; }
.soul:hover .soul__glow, .soul:focus .soul__glow{ opacity:.5; transform:scale(1.15); }
.soul--warm:hover{ background:rgba(255,59,83,.05); }
.soul--cold:hover{ background:rgba(75,99,255,.05); }
.anime__divider{ display:flex; align-items:center; justify-content:center; padding:0 6px;
  background:var(--line); position:relative; }
.anime__divider span{ font-family:var(--f-corsivo); font-style:italic; font-size:15px; color:var(--muted-2);
  background:var(--void-2); padding:8px 4px; border:1px solid var(--line); border-radius:100px;
  writing-mode:vertical-rl; letter-spacing:.1em; }

/* =========================================================================
   PROGRAMMA
   ========================================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px; }
.chip{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); padding:9px 18px; border:1px solid var(--line); border-radius:100px;
  background:transparent; transition:color .25s, border-color .25s, background .25s; }
.chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.chip.is-active{ color:#0a0a11; background:var(--ink); border-color:var(--ink); font-weight:700; }

.events{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:22px; }
.ev{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--raise); display:flex; flex-direction:column;
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s, opacity .4s;
  will-change:transform; }
.ev.is-hide{ display:none; }
.ev:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.2); }
.ev[data-soul="warm"]:hover{ box-shadow:0 26px 60px -30px rgba(255,59,83,.6); }
.ev[data-soul="cold"]:hover{ box-shadow:0 26px 60px -30px rgba(75,99,255,.6); }
.ev__poster{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--void-2); }
.ev__poster img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ev:hover .ev__poster img{ transform:scale(1.05); }
/* designed poster (no photo) */
.ev__gen{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:20px; }
.ev__gen[data-soul="warm"]{ background:radial-gradient(120% 80% at 100% 0%, rgba(255,59,83,.55), transparent 60%), radial-gradient(120% 90% at 0% 100%, rgba(255,194,77,.35), transparent 55%), #14060a; }
.ev__gen[data-soul="cold"]{ background:radial-gradient(120% 80% at 0% 0%, rgba(75,99,255,.55), transparent 60%), radial-gradient(120% 90% at 100% 100%, rgba(53,230,255,.28), transparent 55%), #06081a; }
.ev__gen b{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.9;
  font-size:clamp(30px,3vw,40px); letter-spacing:-.02em; }
.ev__gen .ev__gtag{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  align-self:flex-start; padding:5px 10px; border:1px solid rgba(255,255,255,.35); border-radius:100px; }
/* In alto a DESTRA, non a sinistra: i promoter mettono il QR «scan for tix»
   nell'angolo sinistro delle locandine (Andrea, 21/08: il badge lo copriva). */
.ev__flag{ position:absolute; top:14px; right:14px; z-index:2; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:100px;
  background:rgba(7,7,12,.72); backdrop-filter:blur(6px); border:1px solid var(--line); }
.ev__flag.big{ background:var(--grad-two); color:#0a0a11; border-color:transparent; font-weight:700; }
.ev__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.ev__date{ font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--muted);
  text-transform:uppercase; }
.ev__date b{ color:var(--ink); }
.ev__name{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:21px; line-height:1.02; margin:6px 0 2px; }
.ev__meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
/* di base compare su ogni card (richiesta di Andrea, 27/08: "è carino"),
   anche sulle serate senza anima warm/cold assegnata; quelle due la
   sovrascrivono con la propria sfumatura */
.ev__soul-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); }
.ev[data-soul="warm"] .ev__soul-dot{ background:var(--warm); }
.ev[data-soul="cold"] .ev__soul-dot{ background:var(--cold); }
.ev__buy{ margin-top:auto; width:100%; justify-content:center; }
.programma__note{ font-family:var(--f-mono); font-size:11.5px; color:var(--muted-2); margin-top:26px; letter-spacing:.02em; }

/* =========================================================================
   GALLERY
   ========================================================================= */
/* auto-flow dense: con le taglie libere (0041) l'ordine può lasciare buchi —
   il flusso denso li riempie con la prima tessera che ci sta. L'ordine
   numerico resta quello del pannello; la POSIZIONE la ottimizza la griglia. */
.gallery__grid{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:120px; gap:6px; grid-auto-flow:dense; }
/* Da desktop il mosaico sfonda i margini del sito e corre da bordo a bordo:
   la gallery deve sembrare viva, un flusso che non sta nel recinto. Su
   telefono non serve — lì c'è il carosello. */
@media (min-width:721px){
  .gallery__grid{ width:100vw; margin-left:calc(50% - 50vw); }
}
.g-item{ position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  cursor:pointer; background:var(--void-2); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.g-item:hover img{ transform:scale(1.06); }
.g-item::after{ content:"↗"; position:absolute; right:12px; bottom:10px; font-size:15px;
  opacity:0; transform:translateY(6px); transition:.3s; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6); }
.g-item:hover::after{ opacity:1; transform:none; }
/* IL COLPEVOLE DEGLI SPAZI (scovato con l'inspector, 22/08): i browser danno
   a <figure> un margine di default di 16px 40px, e nessuno l'aveva mai
   azzerato — 40px di vuoto per lato su ogni foto. */
.g-item{ margin:0; }

/* ── Mobile: carosello a scorrimento (22/08) ────────────────────────────────
   La parete a incastro è un piacere da desktop; sul telefono diventa
   francobolli. Sotto i 720px la galleria è una fila sola che scorre da
   sola (il motore è in site.js/interactions), ferma il dito e riparte. */
@media (max-width:720px){
  .gallery__grid{ display:flex; overflow-x:auto; gap:6px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:8px; scrollbar-width:none; }
  .gallery__grid::-webkit-scrollbar{ display:none; }
  .gallery__grid .g-item{ flex:0 0 80vw; height:min(100vw,460px);
    scroll-snap-align:center; }
}

.g-item .g-cap{ position:absolute; left:12px; bottom:10px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.05em; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.8); opacity:0; transition:.3s;
  padding-right:34px; }
.g-item:hover .g-cap{ opacity:1; }
.g-a{ grid-column:span 5; grid-row:span 4; }
.g-b{ grid-column:span 4; grid-row:span 4; }
.g-c{ grid-column:span 3; grid-row:span 2; }
.g-d{ grid-column:span 3; grid-row:span 2; }
.g-e{ grid-column:span 4; grid-row:span 2; }
.g-f{ grid-column:span 8; grid-row:span 2; }
/* Intera invece che ritagliata (0041): per locandine e grafiche il taglio è
   una ferita — qui l'immagine respira nella tessera, su fondo d'acciaio. */
.g-item.g-intera img{ object-fit:contain; background:#101014; }
/* Le taglie nuove (richiesta 21/08): dalla maxi alla piena larghezza. Stessa
   griglia a 12 colonne, solo più vocabolario. */
.g-g{ grid-column:span 6; grid-row:span 4; }
.g-h{ grid-column:span 12; grid-row:span 4; }
.g-i{ grid-column:span 6; grid-row:span 2; }
.g-j{ grid-column:span 4; grid-row:span 3; }

/* =========================================================================
   RIDER
   ========================================================================= */
.rider{ }
.rider__inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center;
  border:1px solid var(--line); border-radius:calc(var(--radius) + 6px); padding:clamp(30px,5vw,64px);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(75,99,255,.10), transparent 50%),
    radial-gradient(90% 120% at 100% 100%, rgba(255,59,83,.10), transparent 50%),
    var(--void-2); }
.rider .section-title{ font-size:clamp(38px,5.5vw,74px); }
.rider .btn{ margin-top:30px; }
.rider__specs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rider__specs li{ display:flex; justify-content:space-between; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--line-2); }
.rider__specs li:last-child{ border-bottom:none; }
.rider__k{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.rider__v{ text-align:right; font-size:14.5px; color:var(--ink); font-weight:500; }

/* =========================================================================
   DOVE SIAMO
   ========================================================================= */
.dove__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; }
.mapcard{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:380px;
  border:1px solid var(--line); background:linear-gradient(150deg,#0b0e1c,#0a0710); isolation:isolate; }
.mapcard__grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:44px 44px; mask:radial-gradient(70% 70% at 60% 45%, #000 40%, transparent 100%); }
.mapcard__roads{ position:absolute; inset:0; }
.mapcard__roads::before,.mapcard__roads::after{ content:""; position:absolute; background:rgba(255,255,255,.09); }
.mapcard__roads::before{ left:0; right:0; top:52%; height:8px; transform:rotate(-8deg); box-shadow:0 40px 0 rgba(255,255,255,.05); }
.mapcard__roads::after{ top:0; bottom:0; left:58%; width:8px; transform:rotate(6deg); }
.mapcard__pin{ position:absolute; left:58%; top:48%; transform:translate(-50%,-100%);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:#fff; white-space:nowrap;
  padding:7px 12px 7px 26px; background:rgba(7,7,12,.8); border:1px solid var(--warm); border-radius:100px;
  box-shadow:0 10px 30px -8px rgba(255,59,83,.6); }
.mapcard__pin b{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:9px; height:9px;
  border-radius:50%; background:var(--warm); box-shadow:0 0 0 5px rgba(255,59,83,.25); }
.mapcard__badge{ position:absolute; right:16px; bottom:16px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.06em; color:var(--cyan); padding:7px 13px; border:1px solid rgba(53,230,255,.3);
  border-radius:100px; background:rgba(53,230,255,.06); }
.dove__info{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3vw,40px);
  background:var(--void-2); display:flex; flex-direction:column; }
.info-row{ padding:18px 0; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:6px; }
.info-row:first-child{ padding-top:0; }
.info-k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.info-v{ font-size:16px; line-height:1.45; }
.info-v a{ color:var(--ink); border-bottom:1px solid var(--line); transition:border-color .25s; }
.info-v a:hover{ border-color:var(--cyan); }
.dove__info .btn{ margin-top:26px; align-self:flex-start; }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.news__inner{ text-align:center; border:1px solid var(--line); border-radius:calc(var(--radius) + 6px);
  padding:clamp(44px,7vw,88px) var(--pad);
  background:radial-gradient(80% 130% at 50% 0%, rgba(138,61,255,.14), transparent 60%), var(--void-2); }
.news__title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(32px,5vw,64px); margin:0; line-height:.95; }
.news__lead{ color:var(--muted); margin:16px auto 0; max-width:42ch; }
.news__form{ display:flex; gap:10px; max-width:460px; margin:30px auto 0; flex-wrap:wrap; }
.news__form input{ flex:1; min-width:200px; background:var(--void); border:1px solid var(--line);
  border-radius:100px; padding:14px 20px; color:var(--ink); font-size:15px; transition:border-color .25s; }
.news__form input::placeholder{ color:var(--muted-2); }
.news__form input:focus{ border-color:var(--cold); outline:none; }
.news__ok{ margin:18px 0 0; color:var(--cyan); font-weight:600; }
.news__ok span{ font-family:var(--f-mono); font-size:11px; color:var(--muted); font-weight:400; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ padding:clamp(56px,8vh,90px) var(--pad) 36px; border-top:1px solid var(--line);
  max-width:calc(var(--maxw) + var(--pad)*2); margin:0 auto; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px;
  border-bottom:1px solid var(--line-2); }
/* Il logo del footer cresce (richiesta 21/08): è il timbro di chiusura della
   pagina, non una firma in piccolo. Sotto, la riga di legge in mono. */
.footer__brand img{ height:104px; width:auto; margin-bottom:18px; }
.footer__legal{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em;
  color:var(--muted); margin:14px 0 0; max-width:46ch; line-height:1.8;
  text-transform:none; font-weight:400; }
.footer__brand p{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:14px;
  letter-spacing:.02em; margin:0; line-height:1.7; }
.footer__brand span{ font-family:var(--f-mono); font-weight:400; text-transform:none; color:var(--muted);
  letter-spacing:.02em; font-size:12px; }
.footer__nav,.footer__social{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.footer__nav a{ color:var(--muted); font-size:14px; transition:color .25s; width:fit-content; }
.footer__nav a:hover{ color:var(--ink); }
.footer__social a{ display:flex; flex-direction:column; font-size:14px; color:var(--ink); gap:2px;
  transition:color .25s; width:fit-content; }
.footer__social a span{ font-family:var(--f-mono); font-size:11px; color:var(--muted); }
.footer__social a:hover{ color:var(--cyan); }
.footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted-2); }

/* =========================================================================
   TICKET MODAL
   ========================================================================= */
.modal{ position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center;
  padding:20px; }
.modal.is-open{ display:flex; }
.modal__overlay{ position:absolute; inset:0; background:rgba(4,4,8,.72); backdrop-filter:blur(8px);
  animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal__card{ position:relative; z-index:2; width:min(460px,100%); background:var(--raise);
  border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); padding:30px;
  max-height:90vh; overflow:auto; animation:pop .4s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.98); } }
.modal__x{ position:absolute; top:16px; right:18px; background:none; border:none; color:var(--muted);
  font-size:28px; line-height:1; transition:color .2s; }
.modal__x:hover{ color:var(--ink); }
.modal__head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.modal__soul{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; border:1px solid var(--line); }
.modal__soul[data-soul="warm"]{ color:var(--warm); border-color:rgba(255,59,83,.4); }
.modal__soul[data-soul="cold"]{ color:var(--cold); border-color:rgba(75,99,255,.4); }
.modal__date{ font-family:var(--f-mono); font-size:12px; color:var(--muted); }
.modal__title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em;
  font-size:28px; line-height:1; margin:0 0 22px; }
.tickets{ display:flex; flex-direction:column; gap:12px; }
.tk{ display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--line);
  border-radius:12px; transition:border-color .25s, background .25s; }
.tk:hover{ border-color:rgba(255,255,255,.22); }
.tk__info{ flex:1; }
.tk__name{ font-weight:600; font-size:14.5px; }
.tk__desc{ font-size:12px; color:var(--muted); }
.tk__price{ font-family:var(--f-mono); font-size:14px; margin-right:4px; }
.stepper{ display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:100px; }
.stepper button{ width:30px; height:30px; background:none; border:none; color:var(--ink); font-size:17px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .2s; }
.stepper button:hover{ background:rgba(255,255,255,.08); }
.stepper button:disabled{ color:var(--muted-2); cursor:not-allowed; }
.stepper span{ min-width:22px; text-align:center; font-family:var(--f-mono); font-size:14px; }
.modal__total{ display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 18px;
  padding-top:18px; border-top:1px solid var(--line); }
.modal__total span{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.modal__total b{ font-family:var(--f-display); font-weight:900; font-size:30px; }
.modal__pay{ width:100%; justify-content:center; }
.modal__pay:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.modal__fineprint{ font-size:11.5px; color:var(--muted-2); text-align:center; margin:16px 0 0; line-height:1.5; }
.modal__fineprint b{ color:var(--muted); }
.modal__done{ text-align:center; padding:14px 0; }
.modal__check{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:50%; background:var(--grad-two); color:#0a0a11; font-size:30px; font-weight:900; margin-bottom:18px;
  animation:pop .5s var(--ease); }
.modal__done h3{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:26px; margin:0 0 8px; }
.modal__done p{ color:var(--muted); margin:0 0 22px; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox{ position:fixed; inset:0; z-index:160; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(4,4,8,.9); backdrop-filter:blur(10px); }
.lightbox.is-open{ display:flex; animation:fade .3s ease; }
.lightbox__fig{ margin:0; max-width:min(92vw,760px); text-align:center; }
.lightbox__fig img{ max-height:82vh; width:auto; margin:0 auto; border-radius:12px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9); }
.lightbox__fig figcaption{ font-family:var(--f-mono); font-size:12px; color:var(--muted); margin-top:16px; letter-spacing:.04em; }
.lightbox__x{ position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:34px; }
.lightbox__nav{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:#fff; width:52px; height:52px;
  border-radius:50%; font-size:26px; flex:none; transition:background .2s; }
.lightbox__nav:hover{ background:rgba(255,255,255,.15); }
.lightbox__prev{ margin-right:14px; } .lightbox__next{ margin-left:14px; }

/* =========================================================================
   REVEAL
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav.is-open .nav__links{ display:flex; position:fixed; inset:64px 0 auto; flex-direction:column;
    gap:0; background:rgba(8,8,14,.96); backdrop-filter:blur(20px); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px; }
  .nav.is-open .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line-2); font-size:16px; color:var(--ink); }
  .nav__cta{ display:none; }
  .nav.is-open .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .rider__inner{ grid-template-columns:1fr; }
  .dove__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .anime__split{ grid-template-columns:1fr; }
  .anime__divider{ padding:6px 0; }
  .anime__divider span{ writing-mode:horizontal-tb; }
  .gallery__grid{ grid-auto-rows:90px; }
  .g-a{ grid-column:span 12; grid-row:span 4; }
  .g-b{ grid-column:span 12; grid-row:span 4; }
  .g-c,.g-d{ grid-column:span 6; grid-row:span 2; }
  .g-e{ grid-column:span 6; grid-row:span 2; }
  .g-f{ grid-column:span 6; grid-row:span 2; }
  .footer__top{ grid-template-columns:1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; gap:6px; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .hero__line em{ transform:none; }
  .hero__video{ display:none; }
  .hero__media{ background:url("/assets/img/hero-poster.jpg") center/cover; }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* =========================================================================
   LOGO DOCK (hero → navbar) + bigger navbar logo
   ========================================================================= */
/* logo grande in navbar dopo il dock: ~2x su desktop; su mobile resta centrato */
.nav__brand{ width:auto; height:auto; display:flex; align-items:center; flex:none; }
.nav__logo{ height:88px; width:auto; }
.dock-logo{ position:fixed; display:none; height:auto; z-index:95; pointer-events:none;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.55)); }
/* Col drawer aperto il logo in volo si fa da parte: non deve MAI coprire il menu */
body.menu-aperto .dock-logo{ display:none !important; }
@media (max-width:680px){
  .nav__brand{ position:absolute; left:50%; transform:translateX(-50%); }
  .nav__logo{ height:52px; }
}

.hero{ align-items:center; text-align:center; }
.hero__inner--center{ display:flex; flex-direction:column; align-items:center; max-width:920px; margin:0 auto; }
.hero__inner--center .hero__eyebrow{ justify-content:center; }
.hero__logo{ width:min(74vw,560px); height:auto; margin:8px auto 12px;
  filter:drop-shadow(0 12px 44px rgba(0,0,0,.5)); }
/* Su telefono il logo chiede più scena: +30% rispetto al 74vw di base */
@media (max-width:720px){ .hero__logo{ width:min(96vw,560px); } }
/* E la striscia degli eventi deve entrare nella prima schermata: l'hero
   le lascia il suo spazio in fondo invece di prendersi tutto lo schermo */
@media (max-width:720px){ .hero{ height:calc(100svh - 66px); min-height:560px; } }
/* La stagione sopra il logo: titolo vero — peso 900, tracking stretto */
.hero__season{ font-family:var(--f-display); font-weight:900;
  font-size:clamp(30px,4vw,48px); letter-spacing:.02em; text-transform:uppercase;
  line-height:1; color:var(--ink); margin:0 0 8px; }
.hero__inner--center .hero__sub{ margin-left:auto; margin-right:auto; }
.hero__inner--center .hero__cta{ justify-content:center; }

/* =========================================================================
   ACCOUNT / AUTH / RESERVATION
   ========================================================================= */
.acct{ display:flex; align-items:center; gap:10px; }
.acct__email{ font-size:12px; color:var(--muted); max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.btn--sm{ padding:8px 15px; font-size:12.5px; }
.acctmodal .modal__card{ width:min(400px,100%); }
.acct__hint{ font-size:13px; color:var(--muted); margin:-8px 0 16px; }
.acctform{ display:flex; flex-direction:column; gap:12px; }
.af{ display:flex; flex-direction:column; gap:6px; }
.af > span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.af input, .af select{ background:var(--void); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--ink); font-size:15px; width:100%; }
.af input:focus, .af select:focus{ outline:2px solid var(--cold); outline-offset:1px; }
.acct__toggle{ text-align:center; font-size:13px; color:var(--muted); margin:16px 0 0; }
.linklike{ background:none; border:none; color:var(--cyan); cursor:pointer; font-size:13px; padding:0; font-weight:600; }
.acct__ok{ color:var(--cyan); font-size:13px; margin:2px 0 0; }
@media (max-width:900px){
  .acct__email{ display:none; }
  /* mobile: burger (drawer) a SINISTRA, profilo a DESTRA.
     Il burger ha order:-1 e perde il suo margin-left:auto; il profilo
     (.umenu da loggato, .acct/.btn--sm da sloggato) prende auto → destra.
     Bonus: .umenu__panel è ancorato right:0 → col profilo a destra il
     dropdown apre verso l'interno invece di uscire dallo schermo. */
  .nav__burger{ order:-1; margin-left:0; }
  .nav .umenu, .nav .acct, .nav > .btn--sm{ margin-left:auto; }
}

/* account page bits */
.pill{ font-size:11px; padding:4px 11px; border-radius:100px; border:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }
.acct-table td{ font-size:14px; }

/* modal provider buttons */
.modal__providers{ display:flex; flex-direction:column; gap:10px; }
.modal__providers .modal__pay{ width:100%; justify-content:center; }
.modal__soldout{ text-align:center; color:var(--muted); font-size:14px; padding:6px 0 2px; }

/* account avatar + dropdown menu */
.umenu{ position:relative; }
.uavatar{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--grad-two); color:#0a0a11; font-weight:800; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; letter-spacing:.02em; }
.uavatar--lg{ width:44px; height:44px; font-size:15px; }
.umenu__panel{ position:absolute; top:48px; right:0; width:240px; background:var(--raise);
  border:1px solid var(--line); border-radius:14px; padding:8px; z-index:95;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7); animation:umIn .18s ease; }
@keyframes umIn{ from{ opacity:0; transform:translateY(-6px); } }
.umenu__head{ display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-bottom:1px solid var(--line-2); margin-bottom:6px; }
.umenu__id{ display:flex; flex-direction:column; min-width:0; }
.umenu__id b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.umenu__id span{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.umenu__item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; color:var(--ink); font-size:14px; padding:11px 10px; border-radius:9px; cursor:pointer; }
.umenu__item:hover{ background:rgba(255,255,255,.06); }
.umenu__item span{ width:18px; text-align:center; opacity:.9; }

/* profile card (account page) */
.uavatar--xl{ width:64px; height:64px; font-size:22px; }
.pf-card{ border:1px solid var(--line); border-radius:16px; background:var(--void-2); padding:22px; max-width:560px; }
.pf-head{ display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line-2); margin-bottom:18px; }
.pf-name{ font-family:var(--f-display); font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:-.01em; }
.pf-email{ font-size:13px; color:var(--muted); }
.pf-form{ display:flex; gap:12px; align-items:flex-end; }
.pf-ok{ color:var(--cyan); font-size:13px; margin:12px 0 0; }

/* =========================================================================
   MONOCHROME OVERRIDES
   Everything colour-driven flows from the redefined --warm/--cold/--grad
   tokens above; these rules neutralise the few hard-coded red/blue literals
   (glows, shadows, generated posters) into light/grey so the palette is
   fully black & white with a single platinum accent.
   ========================================================================= */
::selection{ background:rgba(255,255,255,.85); color:#0a0a0c; }

/* ambient hero footage → colori originali, appena scurito per la leggibilità del testo */
.hero__video{ filter:contrast(1.04) brightness(.88); }
@media (prefers-reduced-motion: reduce){
  .hero__media{ filter:contrast(1.03) brightness(.88); }
}

.light--warm{ background:radial-gradient(circle, rgba(255,252,244,.22), rgba(255,255,255,.06) 45%, transparent 68%); }
.light--cold{ background:radial-gradient(circle, rgba(226,231,240,.20), rgba(255,255,255,.05) 45%, transparent 68%); }

.hero__eyebrow .dot{ box-shadow:0 0 0 4px rgba(255,255,255,.16); }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } }

.soul--warm:hover{ background:rgba(255,255,255,.045); }
.soul--cold:hover{ background:rgba(255,255,255,.03); }

.ev[data-soul="warm"]:hover{ box-shadow:0 26px 60px -30px rgba(255,255,255,.20); }
.ev[data-soul="cold"]:hover{ box-shadow:0 26px 60px -30px rgba(255,255,255,.14); }
.ev__gen[data-soul="warm"]{ background:
  radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(120% 90% at 0% 100%, rgba(255,255,255,.07), transparent 55%), #141418; }
.ev__gen[data-soul="cold"]{ background:
  radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.16), transparent 60%),
  radial-gradient(120% 90% at 100% 100%, rgba(255,255,255,.05), transparent 55%), #0d0d11; }

.rider__inner{ background:
  radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.05), transparent 50%),
  radial-gradient(90% 120% at 100% 100%, rgba(255,255,255,.04), transparent 50%),
  var(--void-2); }

.mapcard{ background:linear-gradient(150deg,#0d0d10,#090909); }
.mapcard__pin{ box-shadow:0 10px 30px -8px rgba(255,255,255,.18); }
.mapcard__pin b{ box-shadow:0 0 0 5px rgba(255,255,255,.16); }
.mapcard__badge{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); }

.news__inner{ background:radial-gradient(80% 130% at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--void-2); }

.modal__soul[data-soul="warm"]{ border-color:rgba(255,255,255,.28); }
.modal__soul[data-soul="cold"]{ border-color:rgba(255,255,255,.24); }

/* photography keeps its original colours everywhere (flyers, gallery, lightbox) */
.ev__poster img{ filter:contrast(1.02); transition:transform .6s var(--ease), filter .5s var(--ease); }
.g-item img{ filter:contrast(1.02); transition:transform .6s var(--ease), filter .5s var(--ease); }

/* =========================================================================
   PRENOTA UN TAVOLO — pre-dialog scelta serata via locandina
   ========================================================================= */
.res-pick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .res-pick{ grid-template-columns:1fr; } }
.res-card{ display:flex; flex-direction:column; gap:0; text-align:left; cursor:pointer;
  background:var(--void); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  padding:0; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.res-card:hover{ border-color:var(--cold); transform:translateY(-2px); }
.res-card:focus-visible{ outline:2px solid var(--cold); outline-offset:2px; }
.res-card__poster{ display:block; aspect-ratio:3/4; background:var(--raise); overflow:hidden; }
.res-card__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.res-card__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:900; font-size:34px; letter-spacing:.04em;
  color:var(--muted-2); background:linear-gradient(135deg,var(--raise),var(--void)); }
.res-card__meta{ display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; }
.res-card__meta b{ font-size:14px; line-height:1.2; }
.res-card__meta span{ font-family:var(--f-mono); font-size:11px; color:var(--muted); }

.res-back{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:0 0 4px; }
.res-back:hover{ color:var(--ink); }
.res-chosen{ display:flex; align-items:center; gap:12px; margin:2px 0 16px; }
.res-chosen__poster{ width:46px; height:60px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); flex:none; }
.res-chosen b{ display:block; font-size:15px; line-height:1.2; }
.res-chosen .muted{ font-family:var(--f-mono); font-size:11px; }

/* ── Coming Soon ──────────────────────────────────────────────────────── */
/* ── Coming soon — linguaggio "industrial": ambra hazard su acciaio, type
   condensed + mono, mirini agli angoli. Portato dalla pagina statica
   coming-soon-aruba.html, resa dinamica (CMS, countdown, lingue).

   Secondo strato, aggiunto dopo: il VETRO. Non il glassmorphism da libreria
   (pannello bianco al 10%, blur, bordino tutt'intorno) che si vede identico su
   mille siti — quello avrebbe cancellato l'identità invece di aggiungerci
   qualcosa. Qui il vetro è quello che c'è davvero dentro un locale: lastre di
   plexiglass illuminate di taglio, il fascio di un faro che attraversa la
   nebbia, il riflesso dei LED sul pavimento bagnato, il policarbonato dei
   flight case. Da cui tre regole, valide per tutto il blocco:

     1. la luce arriva da UN lato. I bordi chiari stanno in alto e a sinistra,
        l'ombra in basso a destra: è un pezzo di materiale con uno spessore, non
        un rettangolo con la cornice.
     2. il movimento è lento e non finisce mai — nessuno scatto, nessun
        rimbalzo. Spento del tutto con `prefers-reduced-motion`.
     3. la luce non passa MAI sopra il testo. Gli aloni stanno sotto (`z-index`
        negativo dentro il riquadro), e i loro valori di trasparenza sono tarati
        perché il paragrafo grigio resti sopra 4.5:1 anche nel punto in cui
        l'alone è più acceso. Il contrasto viene prima dell'effetto: per questo
        `--cs-mut` qui sotto è più chiaro di com'era. ── */
.cs {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  display: grid; place-items: center;
  /* In basso si lascia una corsia libera: lì atterra il pulsante WhatsApp
     flottante (fisso, 48px + 14 di margine), e su telefono cadrebbe sopra
     l'angolo del riquadro. Da 721px in su il riquadro è largo al massimo 680px
     e il pulsante gli sta comodamente a lato: la corsia non serve più. */
  padding: 48px 20px calc(110px + env(safe-area-inset-bottom, 0px));
  --con: #0c0c0e; --steel: #1c1c20; --amb: #e0a92e;
  /* Il grigio del paragrafo è salito da #8b8b90 a #a2a2a8. Le lastre di vetro
     schiariscono il fondo sotto il testo di qualche punto, e col vecchio grigio
     il rapporto di contrasto scendeva sotto il minimo proprio nel punto in cui
     l'alone ambra passa. Più chiaro qui = più leggibile di prima, non uguale. */
  --cs-ink: #ededea; --cs-mut: #a2a2a8; --cs-line: rgba(255,255,255,.12);
  /* il taglio illuminato del vetro, e lo spessore in ombra sotto */
  --cs-luce: rgba(255,255,255,.20); --cs-luce-2: rgba(255,255,255,.08);
  /* accelerazione "liquida": nessun inizio secco, nessuna frenata brusca */
  --cs-fluid: cubic-bezier(.42,0,.35,1);
  /* Stack identici alla pagina Aruba, non quelli del sito: la vetrina ha un suo
     linguaggio. Archivo (il display del sito) NON va in cima allo stack condensed
     — è largo, e il titolo perderebbe la compressione che regge questo layout.
     Stesso motivo per il mono di sistema al posto di Space Mono. */
  --cs-cond: "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", Impact, system-ui, sans-serif;
  --cs-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--con); color: var(--cs-ink); font-family: var(--cs-mono);
  /* griglia tecnica + alone centrale: nessun video, la texture è il fondo */
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, #17171b, #0a0a0c 70%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

/* ── LO SFONDO SCELTO DAL PANNELLO ────────────────────────────────────────
   Esiste solo se qualcuno ha scelto un aspetto in /admin/sito: senza scelta
   l'elemento non viene proprio montato, e la vetrina resta quella di sempre.

   È una lastra sola, fissa, con quattro strati sovrapposti — dall'alto:
     1-2. la griglia tecnica, ridisegnata identica a quella di `.cs`. Se non
          stesse anche qui, una tinta unita la coprirebbe e la vetrina
          perderebbe la sua texture: l'aspetto si applica SOPRA il disegno,
          non al posto suo.
     3.   la velatura, un nero regolabile. Vale solo per l'immagine (per le
          tinte `--cs-velo` non viene mai scritta e resta 0): un'immagine
          sotto il testo lo cancella nove volte su dieci, e questo strato è
          il motivo per cui non succede.
     4.   la tinta, la sfumatura o l'immagine — quello che arriva da
          `--cs-fondo`, sempre in forma di immagine CSS.

   `z-index: 0` e primo nel documento: la nebbia (stesso livello, dopo) le
   passa sopra, la lastra di vetro col testo (`z-index: 1`) sta più in alto.
   Nessuno strato nuovo davanti a qualcosa che c'era già. */
.cs__sfondo { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,var(--cs-velo, 0)), rgba(0,0,0,var(--cs-velo, 0))),
    var(--cs-fondo, none);
  background-size: 44px 44px, 44px 44px, cover, cover;
  background-position: 0 0, 0 0, center, center;
  background-repeat: repeat, repeat, no-repeat, no-repeat; }

/* ── La nebbia ────────────────────────────────────────────────────────────
   Due aloni larghissimi che scorrono dietro tutto: il fascio di un faro che
   attraversa la sala vuota. Nessun `filter: blur()` e nessuna immagine — un
   gradiente radiale è già morbido di suo, e sfocare una superficie grande
   quanto lo schermo è il tipo di costo che una pagina d'attesa non si può
   permettere. Si muove per `transform`, l'unica proprietà che la scheda
   grafica anima senza ridisegnare nulla. */
.cs__haze { position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 24% 26%, rgba(224,169,46,.075), transparent 70%),
    radial-gradient(44% 34% at 76% 74%, rgba(122,170,255,.055), transparent 72%);
  animation: cs-haze 38s var(--cs-fluid) infinite alternate; }
@keyframes cs-haze {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

/* bande hazard: l'elemento che dice "cantiere" prima di ogni parola.
   Restano identiche nel disegno — sono la firma — ma ora hanno sopra il
   riflesso di una lastra: il nastro sta SOTTO il plexiglass, non stampato
   sullo schermo. L'alone ambra intorno è il LED che ci batte contro. */
.cs__hz { position: fixed; left: 0; right: 0; height: 12px; z-index: 5; opacity: .85;
  background: repeating-linear-gradient(45deg, var(--amb) 0 14px, #0c0c0e 14px 28px);
  filter: drop-shadow(0 0 12px rgba(224,169,46,.28)); }
.cs__hz::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.30), rgba(255,255,255,.04) 44%, rgba(0,0,0,.34)); }
.cs__hz--top { top: 0; } .cs__hz--bot { bottom: 0; }
.cs__hz--bot::after { transform: scaleY(-1); }

/* ── La lastra ────────────────────────────────────────────────────────────
   Il riquadro non è più un rettangolo scuro: è un pezzo di vetro appoggiato
   sopra la griglia tecnica. `backdrop-filter` sfoca DAVVERO ciò che ha dietro
   — la griglia si legge attraverso, sfocata: è quello che dice all'occhio cosa
   sta davanti e cosa dietro, più di qualsiasi ombra. Il fondo resta scuro di
   proposito (non il bianco al 10% da manuale): sopra ci va il testo. */
.cs__frame { position: relative; z-index: 1; width: min(680px, 100%);
  border: 1px solid var(--cs-line);
  background: linear-gradient(158deg,
    rgba(36,36,44,.60) 0%, rgba(14,14,17,.72) 46%, rgba(9,9,11,.80) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  /* il taglio in alto a sinistra prende luce, lo spessore in basso a destra la
     perde: un lato solo, come il bordo molato di una lastra */
  box-shadow:
    inset 1px 0 0 var(--cs-luce),
    inset 0 1px 0 var(--cs-luce-2),
    inset -1px -1px 0 rgba(0,0,0,.55),
    0 40px 90px -40px rgba(0,0,0,.95);
  /* tiene l'alone interno dentro il riquadro invece di lasciarlo scivolare
     dietro al fondo della pagina */
  isolation: isolate;
  padding: clamp(28px,6vw,56px) clamp(22px,5vw,50px); }

/* La luce dentro la lastra. `z-index:-1` la mette sopra il fondo del riquadro e
   sotto tutto il resto: nessuna parola ci nuota dentro. */
.cs__lume { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; }
.cs__lume::before { content: ""; position: absolute; left: -30%; top: -50%;
  width: 130%; height: 170%;
  background:
    radial-gradient(46% 42% at 32% 34%, rgba(224,169,46,.085), transparent 68%),
    radial-gradient(42% 38% at 74% 64%, rgba(140,185,255,.070), transparent 70%);
  animation: cs-lume 27s var(--cs-fluid) infinite alternate; }
@keyframes cs-lume {
  from { transform: translate3d(-4%, 2%, 0) scale(1); }
  to   { transform: translate3d(10%, -4%, 0) scale(1.16); }
}
/* il riflesso che corre lungo il taglio superiore: un LED che passa dietro il
   bordo del vetro, una volta ogni dodici secondi */
.cs__lume::after { content: ""; position: absolute; top: 0; left: 0;
  width: 36%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.70) 45%, rgba(224,169,46,.90) 70%, transparent);
  animation: cs-taglio 12s var(--cs-fluid) infinite; }
@keyframes cs-taglio {
  0%        { transform: translateX(-120%); }
  60%, 100% { transform: translateX(320%); }
}
/* mirini: quattro angoli, due dagli pseudo-elementi e due da <span> */
.cs__frame::before, .cs__frame::after, .cs__cr {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--amb); }
.cs__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cs__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.cs__cr--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.cs__cr--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

.cs__tag { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--amb);
  margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.cs__tag::before { content: ""; width: 26px; height: 1px; background: var(--amb); }
.cs__logo { width: min(260px, 66vw); height: auto; margin: 0 0 26px; display: block;
  /* resta in bianco e nero come prima; l'alone ambra è il faro che lo prende
     da dietro, non un colore aggiunto al marchio */
  filter: grayscale(1) contrast(1.05) drop-shadow(0 0 22px rgba(224,169,46,.20)); }
/* Le quattro cose che il pannello può cambiare del titolo — carattere, peso,
   misura, spaziatura — arrivano da variabili, e OGNI variabile ha come valore
   di ripiego esattamente quello che c'era scritto qui prima. Senza aspetto
   scelto nessuna di queste variabili esiste, e il titolo è identico a ieri;
   con l'aspetto scelto arrivano dall'attributo `style` di `.cs`. */
.cs__title { font-family: var(--cs-cond); font-weight: var(--cs-peso, 800); text-transform: uppercase;
  line-height: .92; font-size: var(--cs-misura, clamp(46px,13vw,104px));
  letter-spacing: var(--cs-spazio, .01em); margin: 0 0 18px;
  /* stacca il titolo dalla lastra: l'ombra è nera e larga, non un contorno */
  text-shadow: 0 6px 40px rgba(0,0,0,.65); }
.cs__title .dim { color: var(--cs-mut); }
.cs__status { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-ink);
  border-left: 3px solid var(--amb); padding-left: 12px; margin: 0 0 22px; }
.cs__msg { color: var(--cs-mut); font-size: 14.5px; line-height: 1.75; max-width: 52ch; margin: 0 0 30px; }

.cs__count { display: flex; gap: 10px; margin: 0 0 32px; flex-wrap: wrap; }
/* quattro tessere di vetro appoggiate sulla lastra grande: stessa luce di
   taglio in alto a sinistra, quindi si leggono come oggetti SOPRA e non come
   buchi ritagliati dentro */
.cs__unit { border: 1px solid var(--cs-line); min-width: 66px;
  background: linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 1px 0 0 var(--cs-luce-2), inset 0 1px 0 var(--cs-luce),
    0 14px 26px -20px rgba(0,0,0,.95);
  padding: 12px 6px; text-align: center; }
.cs__unit b { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .04em; }
.cs__unit span { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-mut); }

.cs__rule { display: flex; align-items: center; gap: 14px; margin: 6px 0 24px;
  color: var(--cs-mut); font-size: 11px; letter-spacing: .24em; }
.cs__rule::before, .cs__rule::after { content: ""; height: 1px; background: var(--cs-line); flex: 1; }

/* ── Vetrina: le due azioni ────────────────────────────────────────────────
   Scrivere su WhatsApp è per chiunque passi di qui; il technical rider serve
   alle agenzie e ai tecnici. Pesi diversi, forme diverse: il primo è l'unico
   blocco pieno della pagina, il secondo una riga di testo con la freccia in
   giù e il formato scritto accanto. In colonna sul telefono — il pollice
   incontra prima il pulsante — in riga da 721px, con abbastanza aria in mezzo
   da non sembrare due gemelli. */
.cs__act { display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin: 0 0 30px; }

.cs__wa { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px; text-decoration: none;
  background: var(--amb); color: var(--con); border: 1px solid var(--amb);
  font-family: var(--cs-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  /* resta l'unico blocco pieno della pagina — è il pulsante, non un pannello
     di vetro. Il vetro qui è solo il riflesso sul bordo alto e l'alone che
     getta sotto di sé, come un LED ambra acceso appoggiato alla lastra. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),
    0 16px 34px -18px rgba(224,169,46,.65);
  transition: background-color .15s, color .15s, box-shadow .15s; }
/* si svuota al passaggio del mouse: dove il mouse non c'è resta pieno, che è
   il suo stato normale — l'invito non dipende dal puntatore */
@media (hover: hover) { .cs__wa:hover { background: transparent; color: var(--amb); } }
/* il contorno del focus non può essere ambra su ambra: qui è chiaro */
.cs__wa:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }

.cs__rider { display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 0; text-decoration: none; color: var(--cs-mut);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: color .15s; }
/* freccia in giù: dice "si scarica" prima del clic, senza icone importate */
.cs__rider::before { content: "\2193"; color: var(--amb); font-weight: 700; }
.cs__pdf { border: 1px solid var(--cs-line); padding: 3px 7px; font-size: 10px;
  letter-spacing: .16em; color: var(--cs-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 var(--cs-luce-2); }
@media (hover: hover) { .cs__rider:hover { color: var(--cs-ink); }
  .cs__rider:hover .cs__pdf { border-color: var(--amb); } }
.cs__rider:focus-visible { outline: 2px solid var(--amb); outline-offset: 3px; }

/* detto solo a voce: sullo schermo la nuova scheda si capisce dal contesto,
   a chi ascolta la pagina no */
.cs__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Le miniature ─────────────────────────────────────────────────────────
   Poche, e nessun titolo sopra: quattro immagini che dicono cos'è il locale
   senza chiedere di leggere niente. Se non ce n'è nessuna il markup non esiste
   proprio — niente riquadro vuoto, niente spazio che avanza.

   Righe flessibili e non una griglia a colonne fisse, per una ragione che si
   vede solo provando: il numero di post NON è garantito: quattro è il massimo,
   ma se il pannello ne rende visibili due sono due. Una griglia a passo fisso
   lascerebbe corsie vuote sulla destra — buchi, cioè esattamente ciò che qui
   non deve esserci. Così invece le tessere si distribuiscono su quante ne
   trovano, crescendo fino a un tetto (150px) oltre il quale quattro miniature
   diventerebbero quattro immagini grandi, cioè una galleria.
   Misurato: 375px → due per riga da 140; 1234px → una fila sola da 138. */
.cs__posts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px;
  width: 100%; }

/* 4/5 e non il quadrato che verrebbe più comodo: i post della Pagina arrivano
   in 3/4 (720×960), e ritagliarli quadrati taglierebbe via un quarto
   dell'altezza — cioè, su una locandina, la data o il nome di chi suona. Con
   4/5 il taglio è del 6% ai bordi e la locandina resta una locandina. */
.cs__post { position: relative; display: block; aspect-ratio: 4 / 5;
  flex: 1 1 104px; max-width: 150px;
  overflow: hidden; text-decoration: none;
  border: 1px solid var(--cs-line);
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: inset 1px 0 0 var(--cs-luce-2), inset 0 1px 0 var(--cs-luce),
    0 16px 28px -22px rgba(0,0,0,.95); }
/* il taglio acceso in basso: la lastra illuminata da sotto, che è come si
   vedono davvero i pannelli in un locale */
.cs__post::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; opacity: .5;
  background: linear-gradient(90deg, transparent, rgba(224,169,46,.9), transparent);
  transition: opacity .3s var(--cs-fluid); }
.cs__post img { display: block; width: 100%; height: 100%; object-fit: cover;
  /* desaturate quel tanto che le tiene dentro la tavolozza della vetrina, non
     spente in attesa di un mouse che sul telefono non arriva mai */
  filter: grayscale(.4) contrast(1.05);
  transition: filter .4s var(--cs-fluid), transform .6s var(--cs-fluid); }
@media (hover: none) { .cs__post img { filter: contrast(1.03); } }
@media (hover: hover) {
  .cs__post:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.06); }
  .cs__post:hover::after { opacity: 1; }
}
.cs__post:focus-visible { outline: 2px solid var(--amb); outline-offset: 3px; }
.cs__post:focus-visible img { filter: grayscale(0) contrast(1.05); }
.cs__post:focus-visible::after { opacity: 1; }
/* La freccia si vede SEMPRE: è il modo in cui la miniatura dice "porto
   altrove", e se comparisse solo col mouse chi guarda dal telefono non lo
   saprebbe mai. Col mouse sopra si accende, non si materializza. */
.cs__post-go { position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: var(--amb); opacity: .85;
  background: rgba(10,10,12,.62); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity .2s var(--cs-fluid); }
.cs__post:hover .cs__post-go, .cs__post:focus-visible .cs__post-go { opacity: 1; }

@media (min-width: 721px) {
  .cs { padding-bottom: 48px; }
  .cs__act { flex-direction: row; align-items: center; gap: 26px; flex-wrap: wrap; }
}
/* Tutto quello che si muove si ferma qui, aloni compresi: chi ha chiesto meno
   movimento al sistema operativo non deve vedere niente scorrere. Restano il
   vetro, i bordi illuminati e la profondità — che sono immobili. */
@media (prefers-reduced-motion: reduce) {
  .cs__wa, .cs__rider, .cs__post img, .cs__post::after, .cs__post-go,
  .cs__social a { transition: none; }
  .cs__haze, .cs__lume::before { animation: none; }
  /* la riga di luce sul taglio non ha un posto sensato da fermo: sparisce */
  .cs__lume::after { animation: none; display: none; }
}

.cs__social { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
/* anche questi diventano tessere di vetro; e finalmente sono alti 44px, la
   misura sotto la quale un pollice sbaglia bersaglio */
/* `gap` e non lo spazio dentro `content`: da quando la riga è un flex, lo
   spazio scritto nella freccia verrebbe mangiato e resterebbe "→Instagram" */
.cs__social a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-ink);
  border: 1px solid var(--cs-line); padding: 11px 16px; text-decoration: none;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 1px 0 0 var(--cs-luce-2), inset 0 1px 0 var(--cs-luce);
  transition: border-color .15s var(--cs-fluid), color .15s var(--cs-fluid); }
.cs__social a::before { content: "\2192 "; color: var(--amb); }
.cs__social a:hover { border-color: var(--amb); color: var(--amb); }
.cs__social a:focus-visible { outline: 2px solid var(--amb); outline-offset: 3px; }

.cs__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--cs-mut); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 26px; }
.cs__meta b { color: var(--cs-ink); font-weight: 600; }


/* sezioni disattivate dalla gestione */
[hidden] { display: none !important; }

/* ── Striscia Social ──────────────────────────────────────────────────── */
.socialstrip{ padding:clamp(60px,9vw,120px) 0; }
.ss-track{ display:flex; gap:16px; overflow-x:auto; padding:8px 6vw 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.ss-track::-webkit-scrollbar{ height:6px; } .ss-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:100px; }
.ss-item{ position:relative; flex:0 0 auto; width:clamp(228px,29vw,320px); aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  scroll-snap-align:start; border:1px solid var(--line,rgba(255,255,255,.1)); background:#111; text-decoration:none; display:block; }
/* Queste sono le uniche foto di persone vere della pagina: tenerle in bianco e
   nero fino al passaggio del mouse le spegneva, e su telefono — dove il mouse
   non passa mai — restavano grigie per sempre. Resta una desaturazione leggera
   che le tiene insieme al resto della pagina, non un velo che le nasconde. */
.ss-item img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4); transition:filter .3s, transform .5s; }
.ss-item:hover img, .ss-item:focus-visible img{ filter:grayscale(0); transform:scale(1.05); }
@media (hover: none){ .ss-item img{ filter:none; } }
/* data del post: chip in mono, alto a sinistra — è l'informazione che rende
   la striscia "viva" invece di una galleria senza tempo */
.ss-date{ position:absolute; top:10px; left:10px; z-index:1;
  font-family:var(--f-mono,ui-monospace,monospace); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink,#f2efe8);
  background:rgba(8,8,10,.72); border:1px solid rgba(255,255,255,.14);
  padding:4px 8px; border-radius:6px; backdrop-filter:blur(4px); }
/* affordance del link: appare solo al passaggio, come promessa di apertura */
.ss-open{ position:absolute; top:10px; right:10px; z-index:1; font-size:13px;
  color:var(--warm,#dcd5c6); background:rgba(8,8,10,.72); border:1px solid rgba(255,255,255,.14);
  width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s; }
.ss-item:hover .ss-open, .ss-item:focus-visible .ss-open{ opacity:1; transform:none; }
.ss-item:focus-visible{ outline:2px solid var(--cyan,#e6e2d8); outline-offset:3px; }
.ss-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; font-size:12.5px; color:#f2efe8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); }
.ss-follow{ display:inline-block; margin:6px 6vw 0; color:var(--muted,#96939b); font-size:13px; text-decoration:none; border-bottom:1px solid transparent; }
.ss-follow:hover{ color:var(--ink,#f2efe8); border-color:currentColor; }

/* ── Selettore lingua ────────────────────────────────────────────────────── */
.langsw{ display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--line,rgba(255,255,255,.10)); border-radius:999px;
  background:rgba(255,255,255,.03); }
.langsw button{ appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-mono,ui-monospace,monospace); font-size:11px; letter-spacing:.08em;
  color:var(--muted,#96939b); padding:5px 9px; border-radius:999px; line-height:1;
  transition:color .2s var(--ease,ease), background-color .2s var(--ease,ease); }
.langsw button:hover:not(:disabled){ color:var(--ink,#f2efe8); }
.langsw button.is-active{ color:var(--void,#08080a); background:var(--warm,#dcd5c6); }
/* la lingua attiva è disabilitata: niente cursore "vietato", è solo già scelta */
.langsw button:disabled{ cursor:default; }
.langsw button:focus-visible{ outline:2px solid var(--cyan,#e6e2d8); outline-offset:2px; }

.langsw--nav{ margin-left:10px; }
/* Nella vetrina il selettore prende il linguaggio industrial: squadrato e
   ambra, non la pillola chiara del sito. Deve stare DOPO le regole base qui
   sopra — stessa specificità, vince l'ultima. */
.langsw--cs{ margin-top:28px; border-radius:0; padding:0;
  border-color:var(--cs-line); background:var(--con); }
.langsw--cs button{ border-radius:0; padding:9px 13px; color:var(--cs-mut); }
.langsw--cs button:hover:not(:disabled){ color:var(--amb); }
.langsw--cs button.is-active{ background:var(--amb); color:var(--con); }
.langsw--cs button:focus-visible{ outline-color:var(--amb); }

/* su mobile la nav è già affollata: il selettore resta ma si stringe */
@media (max-width:860px){
  .langsw--nav{ margin-left:6px; padding:2px; }
  .langsw--nav button{ padding:4px 6px; font-size:10px; }
}

/* ── Hero senza video (richiesta di Andrea, 21/08) ──────────────────────────
   «Solo logo su sfondo nero, per il momento», e la scritta subito sotto il
   logo: fondo pieno, niente lastra video, e il pacchetto logo→claim→scritta→
   pulsanti si stringe. Quando il video tornerà (HERO_VIDEO in page.tsx),
   queste regole semplicemente non si applicano più. */
/* Il fondale dell'hero: la nebbia rossa del club (foto vera), con uno
   scrim scuro sopra perché logo e testi restino padroni della scena */
.hero--nero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.78) 100%),
    #000 url("/assets/img/hero-fondale-bn.jpg") center/cover no-repeat;
}
/* L'hero è una <section>, ma non deve ereditarne la gabbia: lo sfondo nero
   va da bordo a bordo dello schermo (il contenuto resta centrato da
   .hero__inner). Senza questo, sui monitor larghi restano bande laterali. */
section.hero{ max-width:none; }
.hero--nero .hero__logo{ margin-bottom:6px; }
.hero--nero .hero__claim{ margin-top:0; }
.hero--nero .hero__sub{ margin-top:8px; }
.hero--nero .hero__cta{ margin-top:24px; }

/* ── Sezione «Due piste. Due anime.» centrata (richiesta di Andrea) ───────── */
.anime .section-head{ text-align:center; }
.anime .section-head .eyebrow{ justify-content:center; }
.anime .section-lead{ margin-left:auto; margin-right:auto; }

/* L'indirizzo sotto il logo (21/08): margini da riga di mezzo, non da apertura */
.hero--nero .hero__eyebrow{ margin:2px 0 14px; }

/* ── Le tavole delle sale (scheda tecnica → tavola d'archivio) ─────────────
   Tratto sottile, etichette in mono, e l'impianto Nexò come costellazione:
   satelliti piccoli, subwoofer grandi, tutti che respirano piano. Al passaggio
   la tavola si accende — la sala che si sveglia. */
/* La tavola fa da fondale; nome e piano le galleggiano sopra, centrati.
   L'ombra dietro al nome insegue il puntatore (o il dito): variabili --sx/--sy
   scritte dal JS, ombra tinta per anima — un'insegna che respira col mouse. */
.soul{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(260px,30vw,380px); }
.soul__plan{ position:absolute; inset:0; margin:auto; width:min(88%,400px); height:auto;
  opacity:.42; transition:opacity .45s var(--ease); pointer-events:none; }
.soul__piano{ position:relative; z-index:1; }
.soul__name{ position:relative; z-index:1; margin:0;
  text-shadow:
    calc(var(--sx, 0) * 1px) calc(var(--sy, 0) * 1px) 26px var(--ombra-anima, rgba(0,0,0,.9)),
    calc(var(--sx, 0) * 2px) calc(var(--sy, 0) * 2px) 70px var(--ombra-anima-2, rgba(0,0,0,.6)); }
/* Scritte delle sale tutte bianche (22/08): anche l'alone dietro le lettere
   passa al bianco — niente più tinte rosse/blu sui nomi */
.soul--warm{ --ombra-anima:rgba(255,255,255,.42); --ombra-anima-2:rgba(255,255,255,.16); }
.soul--cold{ --ombra-anima:rgba(255,255,255,.42); --ombra-anima-2:rgba(255,255,255,.16); }
.soul--warm .soul__plan{ color:var(--warm); }
.soul--cold .soul__plan{ color:var(--cold); }
.soul:hover .soul__plan, .soul:focus .soul__plan{ opacity:.95; }
.soul__plan .muri{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:square; }
.soul__plan .tramezzi{ fill:none; stroke:currentColor; stroke-width:1; opacity:.55; }
.soul__plan .pilastro{ fill:currentColor; opacity:.7; }
.soul__plan text{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; fill:currentColor; opacity:.6; }
.soul__plan .plan-sala{ font-size:11px; opacity:.85; }
.soul__plan .plan-sub{ fill:currentColor; animation:plan-pulse 2.6s ease-in-out infinite; }
.soul__plan .plan-sat{ fill:currentColor; opacity:.8; animation:plan-pulse 3.4s ease-in-out infinite reverse; }
@keyframes plan-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .soul__plan .plan-sub, .soul__plan .plan-sat{ animation:none; }
}
.soul__piano{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:12px 0 0; }

/* ── Titoli a font unico (25/08) ───────────────────────────────────────────
   Il corsivo esce da TUTTI i titoli di sezione: la parola accentata resta
   col suo velo di gradiente, ma torna grotesk pieno, maiuscolo, peso 900. */
.section-title .grad{ font-family:var(--f-display); font-style:normal;
  font-weight:900; text-transform:uppercase; letter-spacing:-.03em; padding-right:0;
  font-variation-settings:normal; }
.rider__inner{ position:relative; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008) 55%);
  padding:clamp(26px,4.5vw,54px);
  /* i mirini stanno su tl e br: QUEI due angoli sono vivi (squadrati), gli
     altri due restano morbidi — prima il tondo spuntava da sotto il mirino */
  border-radius:0 var(--radius) 0 var(--radius); }
.rider__specs li{ transition:border-color .25s, padding-left .25s; border-left:2px solid transparent; }
.rider__specs li:hover{ border-left-color:var(--warm); padding-left:12px; }
.rider__v{ font-size:15px; }
.rider__cr{ position:absolute; width:18px; height:18px; border:2px solid var(--warm); }
.rider__cr--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.rider__cr--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* La testata delle sale al centro VERO dello schermo: .section-head ha una
   max-width pensata per le sezioni allineate a sinistra — qui, dove tutto è
   centrato, servono anche i margini automatici. */
.anime .section-head{ margin-left:auto; margin-right:auto; }

/* I nomi delle sale in bianco luminoso (21/08): l'identità di colore la danno
   l'ombra che insegue il puntatore e la tavola dietro — il nome è pura luce. */
.soul .soul__name{ background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:#ffffff; color:#ffffff; }

/* ── La mappa con le tre viste (22/08) ─────────────────────────────────────
   Mappa e Satellite sono iframe di Google (frame-src dedicato nella CSP);
   «Club» è la tavola stilizzata di sempre. La vista attiva la decide
   data-vista sul contenitore, i tab in alto a sinistra. */
.mapcard__tabs{ position:absolute; top:12px; right:12px; left:auto; z-index:3; display:flex; gap:4px;
  padding:3px; border-radius:100px; background:rgba(8,8,10,.82);
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.mapcard__tab{ appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  padding:6px 12px; border-radius:100px; line-height:1; transition:color .2s, background-color .2s; }
.mapcard__tab:hover{ color:var(--ink); }
.mapcard__tab.is-active{ color:var(--void); background:var(--warm); }
.mapcard__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:none; }
.mapcard__club{ position:absolute; inset:0; display:none; }
.mapcard[data-vista="mappa"] .mapcard__frame--mappa{ display:block; }
.mapcard[data-vista="satellite"] .mapcard__frame--satellite{ display:block; }
.mapcard[data-vista="club"] .mapcard__club{ display:block; }

/* Le fermate sulla tavola Club: pastiglie mono con la lettera del mezzo.
   M3 nel blu della linea, bus in ambra, treno in verde Trenord-ish. */
.mapcard__stop{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink);
  background:rgba(8,8,10,.78); border:1px solid rgba(255,255,255,.18);
  padding:4px 8px; border-radius:100px; backdrop-filter:blur(4px); white-space:nowrap; }
.mapcard__stop i{ font-style:normal; font-weight:700; font-size:9px; line-height:1;
  display:grid; place-items:center; width:16px; height:16px; border-radius:50%; color:#fff; }
/* M3 = la linea GIALLA di Milano (corretto il 22/08: era finito un blu da M4) */
.mapcard__stop--metro i{ background:#f2b600; color:#08080a; }
.mapcard__stop--bus i{ background:#b45309; }
.mapcard__stop--treno i{ background:#1a7a3c; }

/* ── I mezzi come si leggono in strada (22/08) ─────────────────────────────
   Bolli tondi coi colori veri (M3 gialla, bus arancio ATM, T verde Trenord),
   pastiglie e una mini-CTA per riga che porta a comprare il biglietto. */
.info-v--mezzi{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.linea{ display:inline-grid; place-items:center; min-width:26px; height:26px;
  padding:0 6px; border-radius:50px; font-family:var(--f-mono); font-weight:700;
  font-size:12px; letter-spacing:.02em; }
.linea--m3{ background:#f2b600; color:#08080a; }
.linea--bus{ background:rgba(180,83,9,.18); color:#e8a35c; border:1px solid rgba(232,163,92,.4); }
.linea--treno{ background:#1a7a3c; color:#fff; }
.mini-cta{ margin-left:auto; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:5px 11px;
  white-space:nowrap; transition:color .2s, border-color .2s; }
.mini-cta:hover{ color:var(--warm); border-color:var(--warm); }
.info-tel{ font-size:18px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.info-tel:hover{ color:var(--warm); }