/*
Theme Name:  TeatronWeb
Theme URI:   https://teatronweb.com
Author:      TeatronWeb / Black Box Studio
Description: Tema ufficiale TeatronWeb v2 — Black Box Studio, stile capannone proiettato
Version:     2.0
License:     Proprietario
Text Domain: teatronweb
*/

:root {
    --bg:       #020202;
    --border:   rgba(255,255,255,0.07);
    --dim:      rgba(255,255,255,0.55);
    --faint:    rgba(255,255,255,0.30);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 300; overflow-x: hidden; }

/* anchor offset */
#hero, #watch, #events, #blackbox, #about, #contact { scroll-margin-top: 56px; }

nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px;
    background: rgba(2,2,2,0.0);
    transition: background 0.4s;
}

/* NAV LEFT: icon + tab labels */
.nav-left { display: flex; align-items: center; gap: 12px; }
nav.scrolled { background: rgba(2,2,2,0.95); border-bottom: 0.5px solid var(--border); backdrop-filter: blur(12px); }
/* .nav-logo: rimossa il 28 mag 2026 (sistema icone). Le due icone-tab
   gemelle sono ora il sistema d'identità. */
.nav-tab-label { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 5px; color: var(--faint); text-transform: uppercase; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.nav-tab-label:hover { color: var(--dim); }
/* 28 mag 2026 (faro-fix) — bug: PHP scrive .nav-tab-active, non .active.
   Selettore corretto: il tab della zona corrente è bianco pieno.
   1 giu 2026 — rimosso pointer-events:none: l'icona-tab della propria zona
   deve restare cliccabile (TEATRONWEB → home TW, BLACK BOX STUDIO → home BBS).
   Resta #fff anche in hover perché questa regola, a pari specificità, segue
   .nav-tab-label:hover nel sorgente → l'aspetto del tab attivo è invariato. */
.nav-tab-label.nav-tab-active { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; color: var(--dim); text-decoration: none; text-transform: uppercase; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-dash-btn { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6); border: 0.5px solid rgba(255,255,255,0.25); padding: 6px 14px; text-decoration: none; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.nav-dash-btn:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

/* HERO */
#hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #020202; }
.studio-ceiling { position: absolute; top: 0; left: 0; right: 0; height: 38%; pointer-events: none; }
.ceiling-light { position: absolute; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.95); box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.5), 0 0 60px rgba(255,255,255,0.15), 0 0 120px rgba(200,220,255,0.08); }
.ceiling-light.l1 { top: 18%; left: 12%; width: 18%; }
.ceiling-light.l2 { top: 18%; left: 41%; width: 18%; }
.ceiling-light.l3 { top: 18%; left: 70%; width: 18%; }
.studio-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.035) 100%); pointer-events: none; }
.floor-reflection { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 100%; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.06) 0%, transparent 70%); pointer-events: none; }
.wall-left, .wall-right { position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.wall-left  { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.6), transparent); }
.wall-right { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.6), transparent); }

.projection { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 0 60px; }
.proj-tag { font-size: 11px; letter-spacing: 6px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 32px; text-shadow: 0 0 30px rgba(255,255,255,0.2); }

.proj-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(72px, 13vw, 180px); letter-spacing: clamp(4px, 1vw, 16px); line-height: 0.9; text-transform: uppercase; color: #fff; text-shadow: none; }

.on-air { position: relative; display: inline-block; animation: on-glow 1.8s ease-in-out infinite; }
@keyframes on-glow {
    0%,100% { text-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 50px rgba(255,255,255,0.5), 0 0 100px rgba(255,255,255,0.25), 0 0 180px rgba(255,230,220,0.12); }
    50%      { text-shadow: 0 0 12px rgba(255,255,255,0.6), 0 0 30px rgba(255,255,255,0.25), 0 0 60px rgba(255,255,255,0.1); }
}
.on-air::after { content: ''; position: absolute; top: 0px; left: 0.10em; width: clamp(6px,0.6vw,10px); height: clamp(6px,0.6vw,10px); border-radius: 50%; background: #e03030; box-shadow: 0 0 8px rgba(224,48,48,1), 0 0 20px rgba(224,48,48,0.7), 0 0 40px rgba(224,48,48,0.3); animation: on-pulse 1.8s ease-in-out infinite; }
@keyframes on-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.15; transform: scale(0.55); } }

/* ── Hero TeatronWeb: il titolo si COMPONE all'apertura — versione AVANGUARDIA
   (one-shot, 9 giu). Concetto: "prima la luce, poi il nome". Sequenza stretta
   ~1,15s. ON si accende per PRIMA (glow on-glow + pallino REC .on-air::after
   PRESERVATI — appendo solo l'accensione one-shot 'proj-ignite' in coda alla lista
   animation), poi TEATR e WEB si svelano DAI LATI con maschera clip-path (wipe) +
   micro-spostamento orizzontale + micro-blur che va a fuoco. Kicker e sottotitolo
   entrano a loro volta con wipe laterale + blur. Solo clip-path/transform/opacity/
   filter ⇒ la riga non si spezza mai (gli span restano inline-block). Easing deciso
   (accelera e si ferma netto). Tutto forwards/one-shot; a prefers-reduced-motion
   (guardia sotto) titolo+kicker+sottotitolo statici, completi, a fuoco, nessun salto.
   TARATURA: durata = 1° valore, delay = valore prima di 'both', su ogni regola .proj-*
   qui sotto. Ampiezza wipe/shift/blur: dentro i @keyframes. */
@keyframes proj-ignite {
    from { opacity: 0; transform: scale(0.8); filter: blur(7px); }
    to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
@keyframes proj-wipe-l {   /* svelato da SINISTRA: maschera sx→dx (il clip a destra si ritira) */
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-0.2em); filter: blur(6px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateX(0);      filter: blur(0); }
}
@keyframes proj-wipe-r {   /* svelato da DESTRA: maschera dx→sx (il clip a sinistra si ritira) */
    from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(0.2em);  filter: blur(6px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateX(0);      filter: blur(0); }
}
.proj-seg { display: inline-block; }                                   /* inline-block: clip/transform ok, resta in riga */
/* Sequenza scaglionata stretta: ON 0s → TEATR 0.15s → WEB 0.3s → kicker 0.45s → sottotitolo 0.6s */
.proj-title .on-air {
    animation: on-glow 1.8s ease-in-out infinite,
               proj-ignite 0.5s cubic-bezier(0.22,1,0.36,1) 0s both;          /* ON accende per prima */
}
.proj-seg-pre  { animation: proj-wipe-l 0.55s cubic-bezier(0.22,1,0.36,1) 0.15s both; }  /* TEATR — da sx */
.proj-seg-post { animation: proj-wipe-r 0.55s cubic-bezier(0.22,1,0.36,1) 0.3s  both; }  /* WEB   — da dx */
.projection .proj-tag { animation: proj-wipe-l 0.5s cubic-bezier(0.22,1,0.36,1) 0.45s both; }  /* kicker — da sx */
.projection .proj-sub { animation: proj-wipe-r 0.55s cubic-bezier(0.22,1,0.36,1) 0.6s both; }  /* THE DIGITAL STAGE — da dx */
/* Sottotitolo Cormorant: word-by-word, FERMO sul posto, solo opacità (leggibile su
   testo piccolo in corsivo). Parte dopo il titolo; ogni parola sfalsata di 0.06s.
   Niente blur/clip/shift. --i (indice parola) iniettato inline dal markup PHP.
   TARATURA: base 0.55s = quando parte la 1ª parola; passo 0.06s = ritmo tra parole;
   durata 0.4s = quanto ci mette ogni parola a comparire. */
@keyframes proj-word-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.proj-lead .proj-word {
    animation: proj-word-in 0.4s cubic-bezier(0.22,1,0.36,1) calc(0.55s + var(--i, 0) * 0.06s) both;
}

/* ── Hero BBS: scatola disegnata attorno a BOX neon (Vlad 29 mag, v2) ──
   Il REC rosso (.on-air::after) è disattivato SOLO nel titolo hero; il glow
   bianco (on-glow) resta. v2: NON più #bbs-box (a quella scala leggeva come
   croce maltese) ma un SVG inline disegnato (scatola aperta in prospettiva,
   alette sfumate verso le punte, quadrato di fondo che incornicia BOX). È
   centrato in absolute sulla parola: non occupa flusso, quindi BLACK/STUDIO
   non si allontanano e le alette passano dietro le parole vicine. */
.bbs-title .on-air::after { display: none; }              /* via il REC rosso, solo qui */
.bbs-box-word  { position: relative; display: inline-block; }
.bbs-box-text {
	position: relative;
	z-index: 2;
	display: inline-block;
	line-height: 1;
	letter-spacing: 0;
	padding: 0 0.05em;          /* solo lati: la distanza orizzontale già giusta */
}
.bbs-box-frame {
	position: absolute;
	left: 0; width: 100%;       /* lati: margine ~4.6px dal padding orizzontale del testo */
	top: 50%;
	height: 0.864em;            /* ALTEZZA scatola — su glifi reali (cap-height); ↑ = più respiro sopra/sotto, ↓ = più stretti */
	transform: translateY(calc(-50% + 0.05em));   /* centra sui glifi visibili di BOX (più bassi del box-parola) */
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}
.bbs-box-frame .bbs-halo,
.bbs-box-frame .bbs-bulb { display: none; }               /* niente lampadina qui */
@keyframes bbs-box-flick { 0%,100% { opacity: 1; } 96% { opacity: 1; } 97% { opacity: 0.66; } 98% { opacity: 1; } }
.bbs-box-text { animation: bbs-box-flick 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bbs-box-text { animation: none; } }

/* Accessibilità: rispetta prefers-reduced-motion — ferma le animazioni infinite
   della spia REC (on-glow / on-pulse) e del blink del player, MA lascia tutto
   acceso fisso e visibile (la spia REC resta rossa: è la firma TW). Solo
   animation:none — nessun display:none, nessuna opacità che spenga. (batch 9 giu) */
@media (prefers-reduced-motion: reduce) {
    .on-air { animation: none; }
    .on-air::after { animation: none; }
    .p-cb.active .p-dot { animation: none; }
    /* compose hero off: titolo statico e completo, nessun movimento */
    .proj-seg-pre, .proj-seg-post { animation: none; }
    .proj-title .on-air { animation: none; }
    .projection .proj-tag, .projection .proj-sub, .projection .proj-lead, .proj-lead .proj-word { animation: none; }
}

.proj-sub { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px, 1.4vw, 18px); font-weight: 400; letter-spacing: clamp(6px, 1.5vw, 16px); text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 16px; text-shadow: 0 0 20px rgba(255,255,255,0.15); }

.proj-actions { display: flex; gap: 16px; justify-content: center; margin-top: 40px; position: relative; z-index: 10; }
.btn-proj { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #000; background: #fff; border: none; padding: 13px 32px; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.2s; box-shadow: 0 0 30px rgba(255,255,255,0.15); }
.btn-proj:hover { opacity: 0.85; color: #000; }
.btn-proj-outline { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); background: transparent; border: 0.5px solid rgba(255,255,255,0.25); padding: 13px 32px; cursor: pointer; text-decoration: none; display: inline-block; transition: color 0.2s, border-color 0.2s; }
.btn-proj-outline:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* SECTIONS */
.section { padding: 100px 60px; max-width: 1200px; margin: 0 auto; }
.s-tag { font-size: 10px; letter-spacing: 5px; color: var(--faint); text-transform: uppercase; margin-bottom: 16px; }
.s-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(36px, 5vw, 72px); font-weight: 700; letter-spacing: 2px; line-height: 0.95; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.s-title em { font-style: normal; color: rgba(255,255,255,0.4); font-weight: 300; }
.s-body { font-size: 15px; font-weight: 300; color: var(--dim); max-width: 520px; line-height: 1.9; }
.proj-divider { width: 100%; border: none; border-top: 0.5px solid rgba(255,255,255,0.07); margin: 0; }

/* NUMBERS */
.numbers { background: #020202; padding: 60px 60px; border-top: 0.5px solid rgba(255,255,255,0.07); border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.numbers-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); }
.num-item { padding: 0 32px; border-right: 0.5px solid rgba(255,255,255,0.07); text-align: center; }
.num-item:last-child { border-right: none; }
.num-val { font-family: 'Barlow Condensed', sans-serif; font-size: 56px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 6px; text-shadow: 0 0 40px rgba(255,255,255,0.2); }
.num-label { font-size: 10px; letter-spacing: 3px; color: var(--faint); text-transform: uppercase; }

/* PLAYER */
.player-section { padding: 80px 0; background: #000; border-top: 0.5px solid rgba(255,255,255,0.07); }
.player-inner { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
.player-header { text-align: center; margin-bottom: 44px; }
#player { width:100%; background:#0c0c0c; border-radius:6px; overflow:hidden; border:0.5px solid rgba(255,255,255,0.08); }
#vp { position:relative; width:100%; aspect-ratio:16/9; background:#000; cursor:pointer; overflow:hidden; }
.vid { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .18s; pointer-events:none; }
.vid.active { opacity:1; }
#p-badge { position:absolute; top:12px; left:14px; background:rgba(0,0,0,0.55); color:rgba(255,255,255,0.55); font-size:9px; font-weight:600; letter-spacing:2px; padding:3px 8px; border-radius:3px; z-index:10; pointer-events:none; text-transform:uppercase; }
#p-loader { position:absolute; inset:0; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:20; transition:opacity .4s; }
#p-loader-ring { width:30px; height:30px; border:2px solid rgba(255,255,255,0.08); border-top-color:#fff; border-radius:50%; animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#p-loader-text { font-size:11px; letter-spacing:2px; color:rgba(255,255,255,0.35); text-transform:uppercase; }
#p-ctrl { position:absolute; bottom:0; left:0; right:0; padding:36px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,0.82)); opacity:0; transition:opacity .2s; z-index:10; }
#vp:hover #p-ctrl, #vp.paused #p-ctrl { opacity:1; }
#p-prog { width:100%; height:4px; background:rgba(255,255,255,0.15); border-radius:2px; cursor:pointer; margin-bottom:10px; position:relative; touch-action:none; }
/* Area di tocco estesa a ~24px (dito ≠ puntatore) senza cambiare l'aspetto */
#p-prog::before { content:''; position:absolute; left:0; right:0; top:-10px; bottom:-10px; }
#p-prog:hover { height:6px; margin-bottom:8px; }
#p-fill { height:100%; background:#fff; border-radius:2px; width:0%; pointer-events:none; transition:width .1s linear; }
#p-bar { display:flex; align-items:center; gap:12px; }
#p-bar button { background:none; border:none; color:#fff; cursor:pointer; padding:3px 6px; font-size:15px; opacity:.85; transition:opacity .15s; line-height:1; }
#p-bar button:hover { opacity:1; }
#p-time { font-size:12px; color:rgba(255,255,255,.65); font-variant-numeric:tabular-nums; white-space:nowrap; flex:1; }
#p-vol { width:65px; accent-color:#fff; cursor:pointer; }
#p-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:#070707; padding:2px; }
.p-cb { background:#141414; border:none; color:rgba(255,255,255,.45); padding:12px 8px; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s,color .15s; position:relative; outline:none; }
.p-cb:hover { background:#1c1c1c; color:rgba(255,255,255,.85); }
.p-cb.active { background:#1e1e1e; color:#fff; }
.p-cb.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#fff; border-radius:1px; }
.p-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); flex-shrink:0; }
.p-cb.active .p-dot { background:#e03030; animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
#p-foot { background:#090909; padding:7px 14px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #161616; }
#p-status { font-size:10px; letter-spacing:1.5px; color:rgba(255,255,255,.3); text-transform:uppercase; }
#p-aud { font-size:10px; letter-spacing:1.5px; color:rgba(255,255,255,.3); text-transform:uppercase; display:flex; align-items:center; gap:5px; }
#p-aud-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.12); }
#p-aud-dot.on { background:#4caf50; }

/* == PLAYER: icone volume/fullscreen + fake-fullscreen + responsive ==
   Rimpatriato dal Customizer (post #70) il 10 giu 2026 — Sessione C */

/* TeatronWeb custom player icons */
.tw-volume-btn,
.tw-fullscreen-btn {
  color: rgba(255,255,255,0.82) !important;
}

.tw-volume-icon,
.tw-fullscreen-icon {
  width: 22px;
  height: 22px;
  display: block;
  opacity: 0.86;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.16));
}

.tw-volume-btn:hover .tw-volume-icon,
.tw-fullscreen-btn:hover .tw-fullscreen-icon {
  opacity: 1;
}

.tw-volume-btn.is-muted .tw-volume-icon {
  opacity: 0.28;
}

/* TeatronWeb fake fullscreen player */
body.tw-player-fullscreen {
  overflow: hidden !important;
}

#player.tw-fake-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  width: 100vw !important;
  height: 100vh !important;   /* fallback browser senza dvh */
  height: 100dvh !important;  /* viewport dinamico mobile (fix striscia PIANO 1-4) */
  background: #000 !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
}

#player.tw-fake-fullscreen #vp {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

#player.tw-fake-fullscreen .vid {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#player.tw-fake-fullscreen #p-strip {
  flex: 0 0 auto !important;
}

#player.tw-fake-fullscreen #p-foot {
  flex: 0 0 auto !important;
}

#player.tw-fake-fullscreen #p-ctrl {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  #player.tw-fake-fullscreen #p-bar {
    gap: 8px !important;
  }

  #player.tw-fake-fullscreen #p-time {
    font-size: 11px !important;
  }

  #player.tw-fake-fullscreen #p-strip {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #player.tw-fake-fullscreen .p-cb {
    font-size: 9px !important;
    padding: 10px 4px !important;
  }

  #player.tw-fake-fullscreen #p-vol {
    display: none !important;
  }
}

/* responsive player ≤600px (rimpatriato dal blocco misto del Customizer) */
@media (max-width: 600px) {
  .player-inner {
    padding: 0 18px;
  }

  #p-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-cb {
    padding: 12px 6px;
    font-size: 10px;
  }
}

/* EVENTS */
.events-carousel { display:flex; align-items:center; gap:20px; margin-top:56px; }
.events-track { flex:1; display:flex; overflow-x:scroll; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; border:0.5px solid rgba(255,255,255,0.07); cursor:grab; }
.events-track::-webkit-scrollbar { display:none; }
.events-track.is-dragging { cursor:grabbing; user-select:none; }
.event-card { background:#060606; padding:36px 28px; border-right:0.5px solid rgba(255,255,255,0.07); transition:background 0.2s; flex-shrink:0; width:calc(100% / 2.2); scroll-snap-align:start; }
.event-card:last-child { border-right:none; }
.event-card:hover { background:#0a0a0a; }
.event-date { font-size:10px; letter-spacing:3px; color:var(--faint); text-transform:uppercase; margin-bottom:14px; }
.event-name { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:700; color:#fff; line-height:1; text-transform:uppercase; margin-bottom:8px; }
.event-composer { font-family:'Cormorant Garamond',serif; font-size:15px; font-style:italic; color:var(--dim); margin-bottom:16px; }
.event-body { font-size:13px; color:var(--dim); line-height:1.7; margin-bottom:22px; }
.event-badge { display:inline-block; font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border:0.5px solid rgba(255,255,255,0.18); color:var(--faint); }
/* Carousel: frecce */
.ec-arrow { background:none; border:none; color:rgba(255,255,255,0.35); cursor:pointer; padding:10px 4px; flex-shrink:0; transition:color 0.2s; line-height:0; }
.ec-arrow:hover:not(:disabled) { color:#fff; }
.ec-arrow:disabled { color:rgba(255,255,255,0.1); cursor:default; }
/* Carousel: dot indicator */
.ec-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.ec-dot { width:18px; height:2px; background:rgba(255,255,255,0.2); border:none; cursor:pointer; padding:0; transition:background 0.25s, width 0.25s; }
.ec-dot.ec-dot-active { background:#fff; width:28px; }
/* Carousel: tablet — 2 card */
@media (max-width:1024px) { .event-card { width:calc(100% / 1.5); } }
/* Carousel: mobile — 1 card */
@media (max-width:600px) { .events-carousel { gap:8px; } .event-card { width:100%; border-right:none; border-bottom:0.5px solid rgba(255,255,255,0.07); } .ec-arrow { display:none; } }

/* BLACK BOX */
.bb-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:56px; }
.services { list-style:none; margin-top:28px; }
.services li { padding:13px 0; border-bottom:0.5px solid rgba(255,255,255,0.07); font-size:14px; color:var(--dim); letter-spacing:0.5px; display:flex; align-items:center; gap:14px; line-height:1.4; }
.services li::before { content:''; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.3); flex-shrink:0; }
.bb-visual { aspect-ratio:16/9; background:#000; border:0.5px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:56px; }
.about-quote { font-family:'Barlow Condensed',sans-serif; font-size:clamp(22px,3vw,38px); font-weight:700; color:#fff; line-height:1.1; text-transform:uppercase; text-shadow:0 0 40px rgba(255,255,255,0.1); }
.about-body { font-size:14px; color:var(--dim); line-height:1.9; }
.about-name { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:600; letter-spacing:2px; color:#fff; text-transform:uppercase; margin-top:28px; }
.about-role { font-size:11px; letter-spacing:3px; color:var(--faint); text-transform:uppercase; margin-top:4px; }

/* CTA */
.cta-section { padding:100px 60px; text-align:center; border-top:0.5px solid rgba(255,255,255,0.07); background:#020202; position:relative; overflow:hidden; }
.cta-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,6vw,80px); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#fff; text-shadow:0 0 60px rgba(255,255,255,0.15); }

/* FOOTER */
footer { padding:56px 60px 40px; border-top:0.5px solid rgba(255,255,255,0.07); background:#020202; }
.footer-brand { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
.footer-logo { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:5px; color:rgba(255,255,255,0.5); text-transform:uppercase; display:block; margin-bottom:8px; }
.footer-tagline { font-family:'Cormorant Garamond',serif; font-size:14px; font-style:italic; color:var(--dim); }
.footer-bridge { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); text-decoration:none; white-space:nowrap; transition:color .2s; }
.footer-bridge:hover { color:#fff; }
.footer-bridge-arrow { transition:color .2s; }
.footer-bridge--tw { color:#e03030; }
.footer-bottom { max-width:1200px; margin:44px auto 0; padding-top:34px; border-top:0.5px solid rgba(255,255,255,0.07); display:flex; flex-direction:column; align-items:center; gap:26px; }

/* SOCIAL — riga orizzontale centrata, icone bianche sottili con glow in hover */
.footer-social { display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-soc { display:inline-flex; color:rgba(255,255,255,0.5); transition:color .2s, filter .2s, transform .2s; }
.footer-soc svg { width:20px; height:20px; fill:currentColor; display:block; }
.footer-soc:hover { color:#fff; filter:drop-shadow(0 0 7px rgba(255,255,255,0.6)); transform:translateY(-2px); }
/* Icone social "in arrivo" (zona BBS, url placeholder): stesso aspetto ma non interattive (14 giu 2026) */
.footer-soc--soon { cursor: default; opacity: .85; }
.footer-soc--soon:hover { color: rgba(255,255,255,0.5); filter:none; transform:none; }

/* INFO */
.footer-info { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.footer-copy { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin:0; }
.footer-contact { font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:0.6px; color:rgba(255,255,255,0.32); margin:0; }
.footer-contact a { color:rgba(255,255,255,0.5); text-decoration:none; transition:color .2s; }
.footer-contact a:hover { color:#fff; }
.footer-legal { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin:0; }
.footer-legal a { color:rgba(255,255,255,0.4); text-decoration:none; transition:color .2s; }
.footer-legal a:hover { color:#fff; }
.footer-sep { color:rgba(255,255,255,0.18); margin:0 9px; }

/* BUTTONS */
.btn-w { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#000; background:#fff; border:none; padding:13px 30px; cursor:pointer; transition:opacity .2s; text-decoration:none; display:inline-block; box-shadow:0 0 24px rgba(255,255,255,0.12); }
.btn-w:hover { opacity:.85; color:#000; }
.btn-outline { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:400; letter-spacing:3px; text-transform:uppercase; color:var(--dim); background:transparent; border:0.5px solid rgba(255,255,255,0.22); padding:13px 30px; cursor:pointer; transition:color .2s,border-color .2s; text-decoration:none; display:inline-block; }
.btn-outline:hover { color:#fff; border-color:rgba(255,255,255,0.4); }

/* BLACK BOX STUDIO PAGE */
.bbs-hero { position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#020202; padding-top:56px; }
.bbs-hero-bg { position:absolute; inset:0; pointer-events:none; }
.bbs-spotlight { position:absolute; top:-20%; width:400px; height:600px; border-radius:50%; opacity:0.04; pointer-events:none; }
.bbs-spot-l { left:-100px; background:radial-gradient(ellipse, rgba(255,255,255,1) 0%, transparent 70%); }
.bbs-spot-r { right:-100px; background:radial-gradient(ellipse, rgba(255,255,255,1) 0%, transparent 70%); }
.bbs-hero-inner { position:relative; z-index:1; text-align:center; max-width:800px; padding:0 40px; }
.bbs-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(52px,9vw,120px); font-weight:800; letter-spacing:4px; text-transform:uppercase; color:#fff; line-height:0.95; margin:16px 0; white-space:nowrap; }
.bbs-title em { font-style:normal; color:rgba(255,255,255,0.35); display:block; } /* STUDIO sempre su riga propria */
.bbs-sub { font-family:'Barlow Condensed',sans-serif; font-size:clamp(13px,1.8vw,18px); font-weight:400; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin:20px 0 40px; }
.bbs-hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bbs-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1200px; margin:48px auto 0; }
.bbs-card { padding:40px 36px; border-right:0.5px solid rgba(255,255,255,0.07); border-bottom:0.5px solid rgba(255,255,255,0.07); transition:background 0.3s; }
.bbs-card:hover { background:rgba(255,255,255,0.025); }
.bbs-card:nth-child(3n) { border-right:none; }
.bbs-card:nth-child(4), .bbs-card:nth-child(5), .bbs-card:nth-child(6) { border-bottom:none; }
.bbs-card-icon { color:rgba(255,255,255,0.3); margin-bottom:20px; }
.bbs-card-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.bbs-card-body { font-size:14px; color:var(--dim); line-height:1.7; }
.bbs-placeholder { text-align:center; background:#020202; }
.bbs-ph-inner { max-width:600px; margin:0 auto; }
.bbs-ph-visual { display:flex; justify-content:center; }

/* RESPONSIVE */
@media(max-width:768px){
    nav { padding:0 20px; }
    .nav-links { display:none; }
    .section { padding:70px 24px; }
    .numbers { padding:50px 24px; }
    .numbers-inner { grid-template-columns:repeat(2,1fr); gap:24px; }
    .num-item { border-right:none; padding:0 12px; }
    .bb-grid, .about-grid { grid-template-columns:1fr; gap:40px; }
    .footer-brand { flex-direction:column; align-items:center; text-align:center; gap:28px; }
    .cta-section { padding:70px 24px; }
    .proj-title { font-size:clamp(54px,14vw,108px); }
    .bbs-services-grid { grid-template-columns:1fr; }
    .bbs-card { border-right:none; }
    .bbs-card:nth-child(4), .bbs-card:nth-child(5) { border-bottom:0.5px solid rgba(255,255,255,0.07); }
    .bbs-card:nth-child(6) { border-bottom:none; }
}

/* LANG SWITCH */
.lang-switch { display: flex; align-items: center; gap: 8px; border-left: 0.5px solid rgba(255,255,255,0.12); }
.lang-item { display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 2px; color: var(--faint); text-decoration: none; text-transform: uppercase; transition: color 0.2s; }
.lang-item:hover { color: #fff; }
.lang-item.lang-active { color: #fff; pointer-events: none; }
.lang-sep { font-size: 10px; color: rgba(255,255,255,0.15); line-height: 1; }
.flag { width: 18px; height: 12px; display: block; border-radius: 2px; overflow: hidden; flex-shrink: 0; }

/* WordPress admin bar */
.admin-bar nav { top: 32px; }
@media screen and (max-width:782px) { .admin-bar nav { top: 46px; } }
/* Icone player */
#p-bar button {
  background: transparent;
  border: 0;
  color: #fff;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Mobile */
@media (max-width: 768px) {
  #p-bar button {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   CATALOGO / CATALOGUE PAGE
   ============================================================ */

.cat-hero { position:relative; padding:120px 40px 56px; background:#020202; text-align:center; overflow:hidden; }
.cat-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%); pointer-events:none; }
.cat-hero-inner { position:relative; z-index:1; max-width:780px; margin:0 auto; }
.cat-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(56px,10vw,140px); font-weight:800; letter-spacing:clamp(3px,0.7vw,10px); text-transform:uppercase; color:#fff; line-height:0.95; margin:14px 0 18px; }
.cat-sub { font-family:'Barlow Condensed',sans-serif; font-size:clamp(12px,1.5vw,16px); font-weight:400; letter-spacing:6px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin:0 0 28px; }
.cat-lead { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(15px,1.7vw,19px); color:rgba(255,255,255,0.5); line-height:1.7; max-width:560px; margin:0 auto; }

.cat-filter-bar { background:#020202; border-top:0.5px solid rgba(255,255,255,0.07); border-bottom:0.5px solid rgba(255,255,255,0.07); position:sticky; top:56px; z-index:50; backdrop-filter:blur(8px); }
.cat-filter-inner { max-width:1200px; margin:0 auto; padding:18px 40px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cat-filter { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); background:transparent; border:0.5px solid rgba(255,255,255,0.12); padding:9px 22px; cursor:pointer; transition:color .18s, border-color .18s, background .18s; }
.cat-filter:hover { color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.3); }
.cat-filter.is-active { color:#000; background:#fff; border-color:#fff; }

.cat-grid-section { background:#020202; padding:60px 40px 100px; }
.cat-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }

.cat-card { position:relative; background:#0a0a0a; border:0.5px solid rgba(255,255,255,0.08); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; cursor:pointer; outline:none; display:flex; flex-direction:column; }
.cat-card.is-hidden { display:none; }
.cat-card:hover, .cat-card:focus-visible { transform:translateY(-4px) scale(1.025); border-color:rgba(255,255,255,0.22); box-shadow:0 18px 60px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06); z-index:2; }

.cat-card-link { position:absolute; inset:0; z-index:3; }
.cat-empty { max-width:1200px; margin:0 auto; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:rgba(255,255,255,0.5); text-align:center; padding:40px 0; }

.cat-poster { position:relative; aspect-ratio:2/3; max-height:200px; overflow:hidden; background:#000; }
.cat-poster svg, .cat-poster img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.cat-card:hover .cat-poster svg, .cat-card:focus-visible .cat-poster svg,
.cat-card:hover .cat-poster img, .cat-card:focus-visible .cat-poster img { transform:scale(1.06); }
.cat-quality { position:absolute; top:10px; right:10px; font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.55); border:0.5px solid rgba(255,255,255,0.25); padding:3px 8px; border-radius:2px; }

.cat-meta { padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.cat-cat { font-family:'Barlow Condensed',sans-serif; font-size:9px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin:0; }
.cat-name { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; letter-spacing:0.8px; color:#fff; margin:0; line-height:1.15; }
.cat-line { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:1.2px; color:rgba(255,255,255,0.45); margin:2px 0 0; }
.cat-dot { color:rgba(255,255,255,0.25); }
.cat-stars { display:inline-flex; gap:1px; color:rgba(255,255,255,0.55); align-items:center; }

.cat-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:0.5px solid rgba(255,255,255,0.06); gap:8px; position:relative; z-index:4; }
.cat-price { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; color:#fff; letter-spacing:0.8px; }
.cat-buttons { display:flex; gap:5px; }
.cat-btn { font-family:'Barlow Condensed',sans-serif; font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:7px 10px; cursor:pointer; display:inline-block; text-align:center; text-decoration:none; transition:opacity .18s, background .18s, color .18s, border-color .18s; }
.cat-btn-ghost { background:transparent; border:0.5px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.7); }
.cat-btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,0.5); }
.cat-btn-fill { background:#fff; border:0.5px solid #fff; color:#000; }
.cat-btn-fill:hover { opacity:.85; }

.cat-overlay { position:absolute; inset:0; z-index:2; padding:24px 22px; background:linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.4) 100%); display:flex; flex-direction:column; justify-content:flex-end; opacity:0; transition:opacity .25s; pointer-events:none; }
.cat-card:hover .cat-overlay, .cat-card:focus-visible .cat-overlay { opacity:1; }
.cat-overlay-cat { font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0 0 6px; }
.cat-overlay-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; letter-spacing:1px; color:#fff; margin:0 0 12px; }
.cat-synopsis { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; line-height:1.55; color:rgba(255,255,255,0.85); margin:0; }

@media (max-width:1024px) {
  .cat-filter-bar { position:static; }
}

@media (max-width:600px) {
  .cat-hero { padding:90px 24px 40px; }
  .cat-grid-section { padding:40px 18px 70px; }
  .cat-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .cat-meta { padding:12px 12px 14px; gap:6px; }
  .cat-name { font-size:15px; }
  .cat-line { font-size:11px; gap:4px; }
  .cat-buttons { gap:4px; }
  .cat-btn { padding:7px 10px; font-size:9px; letter-spacing:1.5px; }
  .cat-price { font-size:15px; }
  .cat-overlay { padding:16px 14px; }
  .cat-overlay-name { font-size:17px; }
  .cat-synopsis { font-size:13px; }
  .cat-quality { font-size:9px; padding:2px 6px; }
  .cat-filter { padding:7px 14px; font-size:10px; letter-spacing:2px; }
  .cat-filter-inner { padding:14px 18px; gap:8px; }
}

/* ============================================================
   DASHBOARD (private, administrators only)
   ============================================================ */

.dash-wrap { background:#020202; min-height:100vh; padding:100px 40px 90px; }
.dash-inner { max-width:1200px; margin:0 auto; }

.dash-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-bottom:24px; border-bottom:0.5px solid rgba(255,255,255,0.1); }
.dash-head h1 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#fff; margin:0; line-height:1; }
.dash-sub { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:400; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin:10px 0 0; }
.dash-head-right { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:1.2px; color:rgba(255,255,255,0.45); text-align:right; line-height:1.7; }
.dash-head-right strong { color:rgba(255,255,255,0.85); font-weight:600; }
.dash-head-right a { color:#fff; text-decoration:none; border-bottom:0.5px solid rgba(255,255,255,0.3); }
.dash-head-right a:hover { border-color:#fff; }

.dash-tabs { display:flex; gap:5px; flex-wrap:wrap; margin:26px 0 34px; }
.dash-tab { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.45); background:transparent; border:0.5px solid rgba(255,255,255,0.12); padding:11px 22px; cursor:pointer; transition:color .18s, border-color .18s, background .18s; }
.dash-tab:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.dash-tab.is-active { color:#000; background:#fff; border-color:#fff; }

.dash-panel { display:none; }
.dash-panel.is-active { display:block; }

.dash-section-title { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0 0 20px; }
.dash-hint { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:rgba(255,255,255,0.4); margin:24px 0 0; }

.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dash-stat { background:#0a0a0a; border:0.5px solid rgba(255,255,255,0.08); padding:30px 26px; }
.dash-stat-num { font-family:'Barlow Condensed',sans-serif; font-size:46px; font-weight:800; color:#fff; line-height:1; }
.dash-stat-label { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-top:12px; }

.dash-table-wrap { overflow-x:auto; border:0.5px solid rgba(255,255,255,0.08); }
.dash-table { width:100%; border-collapse:collapse; background:#0a0a0a; }
.dash-table th { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); text-align:left; padding:15px 18px; border-bottom:0.5px solid rgba(255,255,255,0.1); white-space:nowrap; }
.dash-table td { font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:0.3px; color:rgba(255,255,255,0.82); padding:13px 18px; border-bottom:0.5px solid rgba(255,255,255,0.05); white-space:nowrap; }
.dash-table tbody tr:last-child td { border-bottom:none; }
.dash-table tbody tr:hover td { background:rgba(255,255,255,0.02); }

.dash-badge { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:3px 11px; border-radius:2px; display:inline-block; }
.dash-badge-pub { color:#7ee0a0; background:rgba(126,224,160,0.1); border:0.5px solid rgba(126,224,160,0.3); }
.dash-badge-draft { color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.05); border:0.5px solid rgba(255,255,255,0.15); }

.dash-btn { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:8px 16px; cursor:pointer; border:0.5px solid; transition:color .18s, border-color .18s, background .18s, opacity .18s; }
.dash-btn-ghost { background:transparent; border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.7); }
.dash-btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,0.5); }
.dash-btn-danger { background:transparent; border-color:rgba(224,90,90,0.35); color:rgba(228,125,125,0.9); }
.dash-btn-danger:hover { color:#fff; border-color:rgba(224,90,90,0.75); background:rgba(224,90,90,0.12); }
.dash-btn-fill { background:#fff; border-color:#fff; color:#000; }
.dash-btn-fill:hover { opacity:.85; }
.dash-row-actions { display:flex; gap:6px; }

.dash-social-bar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.dash-social-bar label { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); display:block; margin-bottom:8px; }
.dash-social-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px; }
.dash-social-card { background:#0a0a0a; border:0.5px solid rgba(255,255,255,0.08); padding:20px; }
.dash-social-card h4 { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; margin:0 0 12px; }

.dash-form { max-width:620px; background:#0a0a0a; border:0.5px solid rgba(255,255,255,0.08); padding:32px; }
.dash-field { margin-bottom:20px; }
.dash-field label { display:block; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; }

.dash-field input[type=text], .dash-field input[type=number], .dash-field select, .dash-field textarea,
.dash-social-bar select, .dash-social-card textarea {
  width:100%; background:#020202; border:0.5px solid rgba(255,255,255,0.15); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:15px; padding:11px 14px; box-sizing:border-box;
}
.dash-field input:focus, .dash-field select:focus, .dash-field textarea:focus,
.dash-social-bar select:focus, .dash-social-card textarea:focus { outline:none; border-color:rgba(255,255,255,0.45); }
.dash-field textarea { min-height:110px; resize:vertical; }
.dash-field input[type=file] { color:rgba(255,255,255,0.6); font-family:'Barlow Condensed',sans-serif; font-size:13px; padding:9px 0; border:none; }
.dash-social-bar select { width:auto; min-width:220px; }
.dash-social-card textarea { min-height:140px; line-height:1.5; resize:vertical; color:rgba(255,255,255,0.85); }

.dash-toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); background:#fff; color:#000; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.8px; padding:13px 26px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,0.6); }
.dash-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px) {
  .dash-wrap { padding:90px 22px 70px; }
  .dash-stats { grid-template-columns:repeat(2,1fr); }
  .dash-social-grid { grid-template-columns:1fr; }
  .dash-stat-num { font-size:38px; }
}

@media (max-width:520px) {
  .dash-stats { grid-template-columns:1fr; }
  .dash-head { align-items:flex-start; }
  .dash-head-right { text-align:left; }
  .dash-social-bar select { width:100%; }
  .dash-form { padding:22px; }
}

.dash-banner { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:1px; padding:14px 20px; margin:20px 0 0; border:0.5px solid; }
.dash-banner-ok { color:#7ee0a0; background:rgba(126,224,160,0.08); border-color:rgba(126,224,160,0.35); }
.dash-banner-err { color:#e88; background:rgba(224,90,90,0.08); border-color:rgba(224,90,90,0.4); }

/* ============================================================
   SINGLE VIDEO PAGE (tw_video)
   ============================================================ */

.vid-single { background:#020202; padding:100px 40px 60px; }
.vid-single-inner { max-width:960px; margin:0 auto; }

.vid-back { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin:0 0 20px; }
.vid-back a { color:rgba(255,255,255,0.5); text-decoration:none; transition:color .18s; }
.vid-back a:hover { color:#fff; }

.vid-player-empty { background:#000; border:0.5px solid rgba(255,255,255,0.08); min-height:320px; display:flex; align-items:center; justify-content:center; }
.vid-player-empty span { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.3); }

.vid-info { padding:36px 0 0; }
.vid-cat { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin:0 0 10px; }
.vid-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(34px,5vw,56px); font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#fff; line-height:1; margin:0 0 14px; }
.vid-meta-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:0 0 24px; }
.vid-dot { color:rgba(255,255,255,0.25); }

.vid-buy { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:0.5px solid rgba(255,255,255,0.1); }
.vid-price { font-family:'Barlow Condensed',sans-serif; font-size:32px; font-weight:800; color:#fff; letter-spacing:1px; }
.vid-buy-btn { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#000; background:#fff; border:none; padding:14px 34px; cursor:pointer; transition:opacity .2s; }
.vid-buy-btn:hover { opacity:.85; }
.vid-buy-btn.is-disabled { opacity:.4; cursor:default; }
a.vid-buy-btn { display:inline-block; text-decoration:none; }
.vid-buy-form { margin:0; }
.vid-owned-badge { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#fff; border:0.5px solid rgba(255,255,255,0.4); padding:13px 28px; }
.vid-buy-msg { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:rgba(255,255,255,0.6); margin:14px 0 0; }
.vid-buy-msg-ok { color:#7ec88a; }
.vid-buy-msg-err { color:#e08a8a; }

.vid-player-locked { position:relative; aspect-ratio:16/9; min-height:320px; background:#000; border:0.5px solid rgba(255,255,255,0.08); overflow:hidden; }
.vid-player-locked .vid-locked-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.38) blur(3px); }
.vid-player-locked .cat-poster-svg { position:absolute; inset:0; width:100%; height:100%; filter:brightness(.5); }
.vid-locked-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; text-align:center; background:rgba(2,2,2,0.5); }
.vid-lock-icon { color:rgba(255,255,255,0.85); }
.vid-locked-text { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.85); margin:0; }

.vid-related { background:#020202; padding:20px 40px 100px; }
.vid-related-inner { max-width:1200px; margin:0 auto; }
.vid-related-title { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0 0 20px; }

@media (max-width:600px) {
  .vid-single { padding:90px 20px 40px; }
  .vid-related { padding:10px 18px 70px; }
  .vid-info { padding-top:26px; }
  .vid-buy { gap:14px; }
  .vid-price { font-size:26px; }
  .vid-buy-btn { padding:12px 24px; }
}

/* ============================================================
   CONTATTI PAGE
   ============================================================ */

.contact-section { background:#020202; padding:120px 40px 90px; }
.contact-inner { max-width:560px; margin:0 auto; }

.contact-tag { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin:0 0 10px; }
.contact-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(40px,7vw,72px); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#fff; line-height:1; margin:0 0 18px; }
.contact-lead { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; line-height:1.7; color:rgba(255,255,255,0.5); margin:0 0 40px; }

.contact-form { display:flex; flex-direction:column; gap:22px; }
.contact-form[hidden] { display:none; }
.contact-field { display:flex; flex-direction:column; gap:8px; }
.contact-field label { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.contact-field input, .contact-field textarea {
  width:100%; box-sizing:border-box; background:#0a0a0a; border:0.5px solid rgba(255,255,255,0.15);
  color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:16px; padding:13px 15px;
  transition:border-color .18s;
}
.contact-field input:focus, .contact-field textarea:focus { outline:none; border-color:rgba(255,255,255,0.5); }
.contact-field textarea { resize:vertical; min-height:140px; line-height:1.5; }

/* Honeypot — visually & assistively hidden, but still in the DOM for bots */
.contact-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-error { font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:0.5px; color:#e88; margin:0; }

.contact-submit { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#000; background:#fff; border:none; padding:15px 38px; cursor:pointer; align-self:flex-start; transition:opacity .2s; }
.contact-submit:hover { opacity:.85; }
.contact-submit:disabled { opacity:.5; cursor:default; }

.contact-success { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:500; letter-spacing:1px; color:#7ee0a0; background:rgba(126,224,160,0.08); border:0.5px solid rgba(126,224,160,0.35); padding:24px 26px; margin-top:10px; }

@media (max-width:600px) {
  .contact-section { padding:100px 22px 70px; }
  .contact-submit { align-self:stretch; text-align:center; }
}

/* ============================================================
   GENERIC PAGE (page.php) — legal / content pages
   ============================================================ */

.tw-page { background:#020202; max-width:820px; margin:0 auto; padding:120px 40px 90px; }
.tw-page-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,5vw,54px); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#fff; line-height:1; margin:0 0 36px; }

.tw-page-body { color:rgba(255,255,255,0.62); font-size:16px; line-height:1.8; }
.tw-page-body h2 { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; margin:40px 0 14px; }
.tw-page-body h3 { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.85); margin:28px 0 12px; }
.tw-page-body p { margin:0 0 16px; }
.tw-page-body ul, .tw-page-body ol { margin:0 0 16px; padding-left:24px; }
.tw-page-body li { margin:0 0 8px; }
.tw-page-body strong { color:rgba(255,255,255,0.92); font-weight:600; }
.tw-page-body em { color:rgba(255,255,255,0.45); }
.tw-page-body a { color:#fff; text-decoration:none; border-bottom:0.5px solid rgba(255,255,255,0.35); transition:border-color .18s; }
.tw-page-body a:hover { border-color:#fff; }

@media (max-width:600px) {
  .tw-page { padding:100px 22px 70px; }
}

/* ============================================================
   Pagina Artisti / Artists — aggiunta 24 mag 2026
   ============================================================ */
.artists-page { max-width: 1280px; margin: 0 auto; padding: 80px 24px 120px; }

.artists-hero { text-align: center; margin-bottom: 72px; }
.artists-hero__title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 6vw, 88px);
    letter-spacing: 0.04em;
    margin: 0 0 16px;
}
.artists-hero__subtitle {
    font-size: 18px; opacity: 0.7;
    max-width: 640px; margin: 0 auto;
}

.artists-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 32px;
}
.artists-grid > .artist-card {
    flex: 0 0 calc((100% - 3 * 32px) / 4);
    max-width: calc((100% - 3 * 32px) / 4);
}
@media (max-width: 1100px) {
    .artists-grid > .artist-card {
        flex: 0 0 calc((100% - 2 * 32px) / 3);
        max-width: calc((100% - 2 * 32px) / 3);
    }
}
@media (max-width: 780px) {
    .artists-grid > .artist-card {
        flex: 0 0 calc((100% - 32px) / 2);
        max-width: calc((100% - 32px) / 2);
    }
}
@media (max-width: 480px) {
    .artists-grid { gap: 48px; }
    .artists-grid > .artist-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.artist-card { display: flex; flex-direction: column; }
.artist-card__photo-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
    background: #111;
}
.artist-card__photo {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.artist-card:hover .artist-card__photo { transform: scale(1.04); }
.artist-card__photo-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}

.artist-card__name {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.artist-card__role {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    margin: 0 0 12px;
}
.artist-card__bio { font-size: 14px; line-height: 1.55; margin: 0 0 12px; opacity: 0.85; }
.artist-card__link {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
    transition: opacity 0.2s ease;
}
.artist-card__link:hover { opacity: 0.6; }

.artists-empty { text-align: center; padding: 60px 20px; opacity: 0.5; }

/* ============================================================
   Footer Newsletter — aggiunta 24 mag 2026
   ============================================================ */
.footer-newsletter {
    padding: 50px 30px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.tw-newsletter__copy {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.7);
    margin: 0 0 22px;
}

.tw-newsletter__form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.tw-newsletter__input {
    flex: 1;
    padding: 13px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tw-newsletter__input::placeholder { color: rgba(255,255,255,0.35); }
.tw-newsletter__input:focus {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.09);
}

.tw-newsletter__button {
    padding: 13px 28px;
    background: #fff;
    color: #000;
    border: 1px solid #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.tw-newsletter__button:hover { opacity: 0.8; }
.tw-newsletter__button:disabled { opacity: 0.5; cursor: wait; }

.tw-newsletter__feedback {
    margin-top: 14px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    min-height: 18px;
    color: rgba(255,255,255,0.5);
}
.tw-newsletter__feedback--success { color: #4ade80; }
.tw-newsletter__feedback--error   { color: #f87171; }

@media (max-width: 600px) {
    .footer-newsletter { padding: 40px 20px 30px; }
    .tw-newsletter__form { flex-direction: column; gap: 10px; }
    .tw-newsletter__button { padding: 14px; }
}
/* ============================================================
   Bottone Accedi (header) + Magic Login modal — aggiunta 24 mag 2026
   ============================================================ */
.nav-login-btn {
    display: inline-block;
    margin-left: 12px;
    padding: 8px 18px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.nav-login-btn:hover,
.nav-login-btn:focus { background: rgba(255,255,255,0.08); border-color: #fff; }

.tw-login-dialog {
    border: none;
    padding: 0;
    width: min(92vw, 420px);
    color: #020202;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    border-radius: 4px;
}
.tw-login-dialog::backdrop { background: rgba(0,0,0,0.65); }
.tw-login-dialog form { position: relative; padding: 36px 32px 32px; }
.tw-login-close {
    position: absolute; top: 8px; right: 12px;
    background: transparent; border: 0; font-size: 26px; line-height: 1;
    cursor: pointer; color: #666;
}
.tw-login-close:hover { color: #020202; }
.tw-login-title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.tw-login-hint { font-size: 14px; opacity: 0.7; margin: 0 0 20px; line-height: 1.5; }
.tw-login-label {
    display: block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #444; margin-bottom: 6px;
}
.tw-login-dialog input[type="email"] {
    width: 100%; padding: 12px 14px; font-size: 16px;
    border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box;
    font-family: inherit; margin-bottom: 18px;
}
.tw-login-dialog input[type="email"]:focus { outline: none; border-color: #e03030; }
.tw-login-submit {
    width: 100%; padding: 14px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700; font-size: 14px;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: #020202; color: #fff; border: 0; border-radius: 2px;
    cursor: pointer;
}
.tw-login-submit:hover:not(:disabled) { background: #e03030; }
.tw-login-submit:disabled { opacity: 0.55; cursor: wait; }
.tw-login-feedback {
    margin: 16px 0 0; padding: 12px 14px;
    border-left: 3px solid #e03030;
    font-size: 14px; line-height: 1.5;
}
.tw-login-sent input[type="email"],
.tw-login-sent .tw-login-submit { display: none; }
.tw-login-sent .tw-login-label,
.tw-login-sent .tw-login-hint { display: none; }

/* fix tooltip email vs checkbox newsletter checkout - 25 mag 2026 */
#billing_email_field .description {
    display: block;
    position: static;
    margin: 6px 0 16px;
    padding: 8px 12px;
    background: #f4f8fb;
    border-left: 3px solid #2271b1;
    color: #1d2327;
    font-size: 13px;
    line-height: 1.45;
    opacity: 1;
}
.woocommerce-checkout #mailpoet_woocommerce_checkout_optin {
    margin-top: 4px;
}
.woocommerce-checkout label[for="mailpoet_woocommerce_checkout_optin"],
.woocommerce-checkout .woocommerce-form__label-for-checkbox[data-automation-id="woo-commerce-subscription-opt-in"] {
    display: block;
    clear: both;
    margin-top: 12px;
}

/* Punto 12 (26 mag 2026): label form checkout — neutralizziamo il rosso
 * applicato da WC a `.form-row.woocommerce-invalid label` (var(--wc-red)
 * = #a00). Il rosso resta sull'asterisco `.required` e sul border degli
 * input invalid (default WC). Così "Nome", "Email" ecc. restano neutri
 * anche durante uno stato di errore. */
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce-checkout .form-row .required_field {
    color: inherit !important;
}

/* Strada E (26 mag 2026 sera): nasconde lo switcher lingua nel menu
 * sulle pagine del CPT tw_video. La pagina video mostra già entrambe
 * le lingue (Annotazione IT + Annotation EN, con bandiere inline),
 * quindi cliccare EN nel menu farebbe perdere il contesto del video
 * che si sta guardando. Soluzione CSS-only: rollbackable rimuovendo
 * queste righe. */
body.single-tw_video .lang-switch {
    display: none;
}

/* ============================================
   Bottone "Effettua ordine" — Variante A (27 mag 2026)
   Override viola Stripe → nero cinematografico TeatronWeb
   ============================================ */
#place_order {
    background: #020202 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    width: 100%;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#place_order:hover,
#place_order:focus {
    background: #0a0a0a !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    outline: none;
}

#place_order:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   BLACK BOX STUDIO — REDESIGN classi pagine (Servizi/Lo Spazio/Chi Siamo)
   27 mag 2026 — direzione "card moderne", linguaggio cinema/AI.
   Sostituisce il vecchio polish "asciutto editoriale" (rimosso stesso giorno).

   Convenzioni:
   - Tutto bg dark, card scure border 1px alpha 0.1, hover 0.35.
   - Border-radius 4px (mai pillole).
   - Tipografia inherit (Barlow Condensed) per titoli, sans system per body.
   - Niente serif italic. Niente virgolette decorative. Niente accent rosso.
   - Hero pagine max ~50-60vh (NO 100vh).
   - Container: padding 100px 60px max-width 1200px (allineato a .section).
   ════════════════════════════════════════════════════════════════ */

/* ───── HERO pagine BBS (Servizi/Lo Spazio/Chi Siamo) ───── */
.bbs-page-hero {
	padding: 100px 60px 40px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.bbs-page-hero-inner {
	max-width: 760px;
	margin: 0 auto;
}
.bbs-page-hero--chisiamo {
	padding-bottom: 60px;
}

.bbs-eyebrow {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 18px;
}

.bbs-page-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(44px, 7vw, 96px);
	font-weight: 800;
	letter-spacing: 4px;
	line-height: 0.95;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.bbs-page-tagline {
	font-family: inherit;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 620px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ───── Sezioni e container ───── */
.bbs-section {
	padding: 60px 60px;
	max-width: 1200px;
	margin: 0 auto;
}
.bbs-section--flush {
	padding-top: 20px;
	padding-bottom: 20px;
}

.bbs-section-eyebrow {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 28px;
}

/* ───── Hero photo (21:9 full-width dentro container) ───── */
.bbs-hero-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	background: linear-gradient(135deg, #0a0a0a 0%, #161616 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
}
.bbs-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ───── Grid card (riusato da Servizi e Lo Spazio) ───── */
.bbs-cards-grid {
	display: grid;
	gap: 20px;
}
.bbs-cards-grid--3col { grid-template-columns: repeat(3, 1fr); }
.bbs-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }

/* Variante "stretto" 3-col (Chi Siamo pilastri).
   Aggiunto polish finale 27 mag — gap minore (12px) + margin bottom. */
.bbs-grid {
	display: grid;
}
.bbs-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0 0 32px;
}

/* ───── Card singola ───── */
.bbs-card {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.bbs-card:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.05);
}

/* media slot (16:9 sulle card) */
.bbs-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #0a0a0a 0%, #161616 100%);
	overflow: hidden;
}
.bbs-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* tag "Media slot" placeholder quando il media è vuoto */
.bbs-card-media-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55); /* polish 27 mag: era 0.35, più visibile */
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 4px 8px;
	border-radius: 2px;
}

/* riga simbolo + numero progressivo */
.bbs-card-glyph-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px 0;
	color: rgba(255, 255, 255, 0.8);
}
.bbs-card-icon {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.75);
}
.bbs-card-num {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, 0.35);
}

/* body */
.bbs-card-body {
	padding: 16px 18px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bbs-card-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
	line-height: 1.2;
}
.bbs-card-desc {
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72); /* polish 27 mag: era 0.55 (più nitido) */
	margin: 0;
	min-height: 56px; /* allinea card della stessa riga */
}

/* Body testo per le card "pillar" Chi Siamo (più aria, più nitido).
   Aggiunto polish finale 27 mag — coerente con bbs-card-desc. */
.bbs-card-text {
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
	margin: 0;
	min-height: 56px;
}

/* tags */
.bbs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.bbs-tag {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85); /* polish 27 mag: era 0.65 */
	padding: 3px 8px;
	border: 1px solid rgba(255, 255, 255, 0.28); /* polish 27 mag: era 0.2 */
	border-radius: 2px;
}

/* ───── Arrow list (Lo Spazio: liste 4 item dentro le card) ───── */
.bbs-arrow-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bbs-arrow-list li {
	position: relative;
	padding: 6px 0 6px 18px;
	font-family: inherit;
	font-size: 11.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78); /* polish 27 mag: era 0.7 */
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bbs-arrow-list li:last-child {
	border-bottom: none;
}
.bbs-arrow-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 6px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.35);
}

/* ───── Stat strip (Lo Spazio) ───── */
.bbs-stat-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.bbs-stat {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 22px 16px;
	text-align: center;
}
.bbs-stat-val {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
	margin-bottom: 8px;
}
.bbs-stat-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* ───── Statement bicolore (Chi Siamo hero) ───── */
.bbs-statement {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(18px, 2.4vw, 26px);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 32px auto 0;
	max-width: 760px;
	color: #ffffff;
}
.bbs-statement-strong {
	font-weight: 600;
	color: #ffffff;
	margin: 0 4px;
}
.bbs-statement-thin {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 4px;
}

/* ───── Geo block (Chi Siamo, 2 col media + testo) ───── */
.bbs-geo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}

/* Mappa SVG stilizzata (default Chi Siamo geo block).
   Aggiunto polish finale 27 mag — sostituisce media-slot placeholder. */
.bbs-geo-map {
	aspect-ratio: 4 / 3;
	background: #050505;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}
.bbs-geo-map svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Foto reale come override quando Vlad carica geo_image via ACF. */
.bbs-geo-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.bbs-geo-text {
	padding: 0 4px;
}
.bbs-geo-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #ffffff;
	margin: 8px 0 16px;
	line-height: 0.95;
}
.bbs-geo-body {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* ───── CTA section (fondo di tutte le pagine BBS) ───── */
.bbs-cta-section {
	max-width: 1200px;
	margin: 40px auto 80px;
	padding: 60px 60px;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bbs-cta-line {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 22px;
}
.bbs-cta-btn {
	display: inline-block;
	padding: 14px 28px;
	background: transparent;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 4px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.bbs-cta-btn:hover,
.bbs-cta-btn:focus {
	border-color: rgba(255, 255, 255, 1);
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff !important;
	text-decoration: none !important;
	outline: none;
}

/* ───── Mobile responsive (≤ 768px) ───── */
@media (max-width: 768px) {

	.bbs-page-hero { padding: 60px 24px 30px; }
	.bbs-section { padding: 40px 24px; }
	.bbs-cta-section { padding: 40px 24px; margin-bottom: 60px; }

	.bbs-cards-grid--3col,
	.bbs-cards-grid--2col,
	.bbs-grid-3 {
		grid-template-columns: 1fr;
	}

	.bbs-stat-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.bbs-geo {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.bbs-card-desc {
		min-height: auto;
	}
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR TW — micro-fix 27 mag 2026
   Tre fix CSS-only (niente HTML), reversibili:
   #1  Nascondi 3 .ceiling-light dell'hero home (3 "linee bianche
       orizzontali" sotto la navbar → solo decorative, no info).
   #2  Pareggia larghezza .nav-dash-btn + .nav-login-btn (min-width).
   #3  Rebalance navbar layout (logo sx · menu centro · utility dx)
       da ≥1024px; max-width 1400px da ≥1480px per non esagerare a 4K.
   ════════════════════════════════════════════════════════════════ */

/* ── FIX #1: nasconde le 3 ceiling-light decorative (home TW hero) ── */
.ceiling-light,
.ceiling-light.l1,
.ceiling-light.l2,
.ceiling-light.l3 {
	display: none;
}

/* ── FIX #2: DASHBOARD ed ESCI/ACCEDI stessa larghezza ── */
.nav-dash-btn,
.nav-login-btn {
	min-width: 110px;
	text-align: center;
	box-sizing: border-box;
}

/* ── FIX #3: bilanciamento navbar da desktop ─────────────────────── */
@media (min-width: 1024px) {
	/* I 3 figli del nav: sinistra/destra a misura, centro elastico. */
	#main-nav .nav-left  { flex: 0 0 auto; }
	#main-nav .nav-right { flex: 0 0 auto; }
	#main-nav .nav-links {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (min-width: 1480px) {
	/* Su schermi grandi (≥1480px) restringe la navbar a 1400px max
	   simulando un container centrato senza toccare HTML.
	   Calcolo: padding laterale = (viewport - 1400) / 2, mai sotto 40px. */
	nav#main-nav {
		padding-left:  max(40px, calc((100vw - 1400px) / 2));
		padding-right: max(40px, calc((100vw - 1400px) / 2));
	}
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR MOBILE — 28 mag 2026
   Hamburger ≤1024px, overlay full-screen, navbar non-fixed mobile,
   switcher lingua bandiera 14×9 + testo IT/EN (active bianco /
   inattivo grigio 0.55), niente pipe separatore.
   ════════════════════════════════════════════════════════════════ */

/* 4 giu 2026 — VOCE C: rimossi gli stili di hamburger (.nav-toggle*) e overlay
   (.nav-overlay*). Navigazione mobile = barra in basso (FASE 1/B) + bottom
   sheet (vedi blocco "VOCE C — BOTTOM SHEET MENU" in coda al file). */

/* Switcher lingua RESTYLE — bandiera 14×9, niente pipe, grigio 0.55 ── */
.flag        { width: 14px; height: 9px; }
.lang-item   { color: rgba(255,255,255,0.55); letter-spacing: 2.5px; }
.lang-sep    { display: none; }
.lang-switch { gap: 14px; }

/* ════════════════════════════════════════════════════════════════════
   PREVENTIVO BBS — calcolatore a carrello (page-preventivo.php, 30 mag 2026)
   Stile coerente Black Box Studio: nero cinematografico, Barlow Condensed
   sulle label, bordi tenui, radius 4px. Tutto vanilla, niente librerie.
   ════════════════════════════════════════════════════════════════════ */

.bbs-prev .bbs-prev-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 28px;
	/* 30 mag 2026 (preventivo3): stretch → le due colonne pareggiano l'altezza
	   (bordi sup/inf allineati). La card destra (.bbs-prev-cart, grid-item) si
	   allunga fino in fondo; il contenuto resta in alto, vuoto sotto il totale.
	   In single-column (≤900px) ogni item è solo nella sua riga → nessuna
	   altezza forzata, impilamento normale. */
	align-items: stretch;
}

/* Etichetta step con badge numerato */
.bbs-prev-step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	margin: 0 0 18px;
}
.bbs-prev-step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	font-size: 11px;
	color: #fff;
}

/* ── Picker servizi ── */
.bbs-prev-services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	/* 30 mag 2026 (preventivo5): niente margin-bottom qui. Era spazio fantasma
	   nel fondo della colonna sx (la config è hidden) che, con lo stretch, la
	   card dx riempiva sporgendo sotto le card. Il gap verso la config è ora
	   margin-top sulla config (compare solo quando un servizio è selezionato). */
	margin-bottom: 0;
}
.bbs-prev-svc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px;
	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.bbs-prev-svc:hover,
.bbs-prev-svc:focus-visible {
	border-color: rgba(255,255,255,0.5);
	background: #111;
	outline: none;
}
.bbs-prev-svc.is-active {
	border-color: #fff;
	background: rgba(255,255,255,0.07);
}
.bbs-prev-svc-ico { color: rgba(255,255,255,0.85); line-height: 0; }
.bbs-prev-svc-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.1;
}
.bbs-prev-svc-hint {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.5);
	text-transform: lowercase;
}

/* ── Configuratore ── */
.bbs-prev-config {
	margin-top: 24px;   /* gap verso la griglia servizi; nullo finché [hidden] */
	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	padding: 22px;
}
.bbs-prev-config-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bbs-prev-config-head .bbs-prev-svc-ico { color: #fff; }
.bbs-prev-config-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #fff;
}
.bbs-prev-field { margin-bottom: 18px; }
.bbs-prev-flabel {
	display: block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	margin: 0 0 10px;
}
.bbs-prev-note {
	color: rgba(255,255,255,0.4);
	letter-spacing: 1px;
	text-transform: none;
}

/* Pillole (durata, camere, moduli, trasferta) */
.bbs-prev-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bbs-prev-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 999px;
	color: rgba(255,255,255,0.78);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bbs-prev-pill:hover,
.bbs-prev-pill:focus-visible {
	border-color: rgba(255,255,255,0.6);
	color: #fff;
	outline: none;
}
.bbs-prev-pill.is-active {
	background: #fff;
	border-color: #fff;
	color: #020202;
}
.bbs-prev-pill-sub { font-size: 11px; opacity: 0.7; letter-spacing: 0.5px; }
.bbs-prev-pill.is-active .bbs-prev-pill-sub { opacity: 0.85; }

/* Slider ore */
.bbs-prev-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 3px;
	background: rgba(255,255,255,0.2);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
}
.bbs-prev-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: none;
	cursor: pointer;
}
.bbs-prev-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: none;
	cursor: pointer;
}
#prev-hours-out {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #fff;
	text-transform: none;
}

.bbs-prev-add { width: 100%; margin-top: 6px; cursor: pointer; }

/* ── Carrello / colonna destra ── */
/* 30 mag 2026 (preventivo4): l'etichetta "2 · Il tuo preventivo" è fuori dalla
   card (sopra, come la "1" a sinistra). Il wrapper è il grid-item: flex-column,
   la card sotto fa flex:1 e riempie fino in fondo → top E bottom della card
   allineati con la colonna servizi. */
.bbs-prev-summary {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.bbs-prev-summary .bbs-prev-cart { flex: 1 1 auto; }
.bbs-prev-cart {
	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	padding: 22px;
}
.bbs-prev-empty {
	font-size: 14px;
	font-weight: 300;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.bbs-prev-list { list-style: none; margin: 0; padding: 0; }
.bbs-prev-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bbs-prev-row-ico { color: rgba(255,255,255,0.7); line-height: 0; }
.bbs-prev-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bbs-prev-row-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #fff;
}
.bbs-prev-row-detail {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.3px;
}
.bbs-prev-row-price {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
}
.bbs-prev-row-del {
	background: none;
	border: none;
	color: rgba(255,255,255,0.4);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	transition: color 0.2s ease;
}
.bbs-prev-row-del:hover,
.bbs-prev-row-del:focus-visible { color: #fff; outline: none; }

/* Trasferta globale */
.bbs-prev-travel { margin-top: 20px; }
.bbs-prev-travel-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	margin: 0 0 10px;
}

/* Totale */
.bbs-prev-total {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.15);
	text-align: center;
}
.bbs-prev-total-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	margin: 0 0 8px;
}
.bbs-prev-total-figure {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}
.bbs-prev-dash { color: rgba(255,255,255,0.4); font-weight: 400; }
.bbs-prev-reassure {
	font-size: 13px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
	color: rgba(255,255,255,0.6);
	margin: 14px auto 20px;
	max-width: 340px;
}
.bbs-prev-cta { display: inline-block; width: 100%; box-sizing: border-box; }
.bbs-prev-clear {
	display: block;
	margin: 14px auto 0;
	background: none;
	border: none;
	color: rgba(255,255,255,0.4);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease;
}
.bbs-prev-clear:hover,
.bbs-prev-clear:focus-visible { color: rgba(255,255,255,0.8); outline: none; }

/* ── Fase 2: form richiesta preventivo (sezione "3") ── */
.bbs-prev-request { padding-top: 0; }
.bbs-prev-request-inner { max-width: 640px; margin: 0 auto; }
.bbs-prev-request-intro {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255,255,255,0.6);
	margin: 0 0 26px;
}
.bbs-prev-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bbs-prev-form-field { display: block; margin-bottom: 16px; }
.bbs-prev-form-grid .bbs-prev-form-field { margin-bottom: 0; }
.bbs-prev-form-label {
	display: block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
	margin-bottom: 7px;
}
.bbs-prev-form-opt {
	letter-spacing: 1px;
	color: rgba(255,255,255,0.4);
	text-transform: none;
}
.bbs-prev-form input[type="text"],
.bbs-prev-form input[type="email"],
.bbs-prev-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 4px;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.bbs-prev-form textarea { resize: vertical; line-height: 1.5; min-height: 96px; }
.bbs-prev-form input[type="text"]:focus,
.bbs-prev-form input[type="email"]:focus,
.bbs-prev-form textarea:focus {
	border-color: rgba(255,255,255,0.55);
	background: #111;
	outline: none;
}
.bbs-prev-form input::placeholder,
.bbs-prev-form textarea::placeholder { color: rgba(255,255,255,0.32); }

/* Honeypot: off-screen (non display:none), invisibile e fuori dal flusso tab */
.bbs-prev-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Consenso GDPR */
.bbs-prev-gdpr {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 22px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255,255,255,0.7);
}
.bbs-prev-gdpr input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: #fff;
}
.bbs-prev-gdpr a { color: #fff; text-decoration: underline; }

.bbs-prev-form .bbs-cta-btn { width: 100%; box-sizing: border-box; cursor: pointer; }
.bbs-prev-form .bbs-cta-btn:disabled { opacity: 0.5; cursor: default; }

/* Feedback inline (errore = ambra, mai rosso/verde in zona BBS) */
.bbs-prev-form-feedback {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	min-height: 1em;
	color: rgba(255,255,255,0.7);
}
.bbs-prev-form-feedback.is-error { color: #e0b341; }

/* Conferma fissa (sostituisce il form al successo) */
.bbs-prev-form-done {
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 4px;
	padding: 28px 26px;
	text-align: center;
}
.bbs-prev-form-done-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
	margin: 0 0 8px;
}
.bbs-prev-form-done-text {
	font-size: 14px;
	color: rgba(255,255,255,0.65);
	margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.bbs-prev .bbs-prev-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
	.bbs-prev-services { grid-template-columns: 1fr; }
	.bbs-prev-form-grid { grid-template-columns: 1fr; }
	.bbs-prev-form-grid .bbs-prev-form-field { margin-bottom: 16px; }
}
@media (max-width: 480px) {
	.bbs-prev-row { grid-template-columns: auto 1fr auto; }
	.bbs-prev-row-price { grid-column: 2 / 4; font-size: 12px; }
	.bbs-prev-row-del { grid-row: 1; grid-column: 3; }
}

/* Rispetta prefers-reduced-motion: niente transizioni */
@media (prefers-reduced-motion: reduce) {
	.bbs-prev-svc,
	.bbs-prev-pill,
	.bbs-prev-row-del,
	.bbs-prev-clear,
	.bbs-prev-form input,
	.bbs-prev-form textarea { transition: none; }
}

/* ── Mobile/tablet ≤1024px ──────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Navbar: non più fixed, scorre via con la pagina, sfondo opaco */
	nav#main-nav {
		position: static;
		background: rgba(2,2,2,1);
		padding: 0 20px;
		height: 56px;
	}
	.admin-bar nav#main-nav { top: auto; }
	#main-nav .nav-links { display: none; }
	#main-nav .nav-right { display: none; }
	/* Nasconde i 2 tab TW/BBS dalla barra: l'identita' e' nello switch (voce A). */
	#main-nav .nav-left .nav-tab-label { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR ICONE + RITMO — 28 mag 2026 (sistema)
   REGOLA DEFINITIVA: due ICONE GEMELLE come sistema d'identità.
   - TASTIERA (#tw-keys) = TeatronWeb
   - SCATOLA (#bbs-box)  = Black Box Studio
   - Logo separato RIMOSSO. Le icone-tab sono ora prime a sinistra.
   - Stessa height (--icon-h), stesso allineamento, stesso meccanismo
     currentColor (attivo bianco / inattivo grigio). Devono pesare e
     sfumare uguali a parità di taglia: tastiera gradient 1.0→0.07 in
     5 step, scatola gradient 1.0→0.32 in 5 facce (valori sorgente
     DEFINITIVA).
   - Una sola variabile --icon-h regola la stazza ovunque (barra
     desktop + overlay mobile).
   - Decorazioni hero che usano #tw-keys (front-page.php:197 e
     page-black-box-studio.php:166, 80×58) sono un contesto diverso
     (grafica grande, non icona-nav) e NON rientrano in questo sistema.
   - Ritmo desktop ≥1025px: --nav-gap unica per le 6 voci menu,
     letter-spacing 5→4 sui tab brand per bilanciare il cluster sx.
     Niente separatori (estetica nero cinematografico).
   ════════════════════════════════════════════════════════════════ */

:root {
	--icon-h: 24px;         /* stazza icone-tab gemelle (regolabile da qui sola) */
	--nav-gap: 28px;        /* gap unico delle 6 voci nav-links */
	--nav-side-gap: 20px;   /* gap interno cluster sx (le 2 icone-tab) */
}

/* Tab labels: layout inline-flex per ospitare iconcina + testo */
.nav-tab-label  { display: inline-flex; align-items: center; gap: 0.5em; }
.nav-tab-text   { display: inline-block; }

/* Iconcine tab gemelle: stessa height su entrambi i tab e in tutti i contesti
   (barra desktop + overlay mobile). width:auto deriva la larghezza dall'aspect
   ratio del viewBox 110×80 = 1.375 → ~33px se height=24px. */
.nav-tab-icon {
	height: var(--icon-h);
	width: auto;
	flex-shrink: 0;
	display: block;
	color: inherit;           /* eredita color dal .nav-tab-label */
	overflow: visible;        /* lascia respirare gli stroke in punta */
}

/* Override luminosità SOLO sull'icona scatola quando il tab BBS è INATTIVO.
   Motivo: la scatola è contorni, pesa meno del piano (tasti pieni) a parità di
   colore. La compensazione è asimmetrica per design (le due icone non sono più
   identiche come valori, è voluto). Solo il tab BBS, non il TW: il piano resta
   a var(--faint) ereditato. La regola si applica desktop e overlay. */
#tab-blackbox:not(.nav-tab-active) .nav-tab-icon {
	color: rgba(255, 255, 255, 0.55);
}

/* scale 1.0 esplicito: piano (logo) e box (tab BBS) condividono la stessa
   altezza renderizzata 23px senza nessun nudge. Knob lasciato per future
   iterazioni: se a occhio la box necessita un filo in più, alzare in step
   1.05 → 1.10 → 1.15. NON scendere sotto 1.0. */
#tab-blackbox .nav-tab-icon { transform: scale(1.0); }

/* Ritmo barra desktop (≥1025px) — Vlad 28 mag */
@media (min-width: 1025px) {
	#main-nav .nav-left  { gap: var(--nav-side-gap); }
	#main-nav .nav-links { gap: var(--nav-gap); }
	#main-nav .nav-right { gap: var(--nav-side-gap); }
	/* Bilanciamento cluster sx: tab brand più stretti per ridurre il peso */
	#main-nav .nav-tab-label { letter-spacing: 4px; }
}

/* Ritmo barra — scaglione stretto 1025–1180 (Vlad 29 mag) */
@media (min-width: 1025px) and (max-width: 1180px) {
	#main-nav .nav-links   { gap: 20px; }            /* da 28 → 20 */
	#main-nav .nav-left    { gap: 14px; }            /* da 20 → 14 */
	#main-nav .nav-links a { letter-spacing: 1.5px; }/* da 2.5 → 1.5 */
	#main-nav .nav-tab-label { letter-spacing: 2.5px; } /* da 4 → 2.5 */
}

/* ────────────────────────────────────────────────────────────────
   FARO BBS — lampadina + alone pulsanti al centro di #bbs-box
   ────────────────────────────────────────────────────────────────
   La scatola è anche un faro teatrale (4 trapezoidi = barn doors); al
   centro pulsano lampadina e alone, sincroni, respiro lento ~3s. SOLO
   quando la zona BBS è attiva (.nav-tab-active sul tab BBS). Quando
   inattiva, l'animazione è in pausa al keyframe 0% (lampadina solida +
   alone semi-trasparente = faro fermo ma "acceso fisso"). Dialoga col
   REC rosso di TW (concetto) ma resta DIVERSA: bianco + respiro lento,
   non rosso + lampeggio.

   Implementazione: animazione CSS (NON SMIL <animate>) per affidabilità
   dentro <use>. Play state controllato da var --bbs-bulb-play che il
   selettore dello stato-attivo imposta a "running". prefers-reduced-motion
   spegne tutto: fallback ai valori inline di opacity sui <circle>. */

@keyframes bbs-bulb-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.62; }
}
@keyframes bbs-halo-pulse {
	0%, 100% { opacity: 0.9; }
	50%      { opacity: 0.35; }
}
.bbs-bulb {
	animation: bbs-bulb-pulse 3s ease-in-out infinite;
	animation-play-state: var(--bbs-bulb-play, paused);
}
.bbs-halo {
	animation: bbs-halo-pulse 3s ease-in-out infinite;
	animation-play-state: var(--bbs-bulb-play, paused);
}

/* Trigger pulsazione: quando il tab BBS ha classe .nav-tab-active (scritta dal
   PHP in header.php quando $tw_in_bbs_zone === true) o sull'hero della home BBS
   (page-black-box-studio.php). La custom property propaga ai discendenti,
   incluse le repliche di <symbol> via <use>. Su istanze non taggate
   --bbs-bulb-play resta paused. */
#tab-blackbox.nav-tab-active,
.bbs-hero-svg {
	--bbs-bulb-play: running;
}

/* Accessibilità: rispetta prefers-reduced-motion. Niente respiro, niente
   sorprese: lampadina e alone fermi al loro valore inline (faro acceso fisso). */
@media (prefers-reduced-motion: reduce) {
	.bbs-bulb,
	.bbs-halo { animation: none; }
}

/* ============================================================
   ACCESSIBILITÀ — Focus visibile da tastiera (WCAG 2.4.7)
   31 mag 2026. Blocco SOLO additivo: ripristina un anello di
   focus per gli elementi interattivi che azzerano `outline`
   (`outline:none`) senza un indicatore alternativo adeguato.
   Usa `:focus-visible` → l'anello appare solo per tastiera /
   focus programmatico, NON al click del mouse (estetica intatta).
   `!important` sull'outline serve a vincere le regole `:focus`
   esistenti che impostano `outline:none`, senza doverle editare.
   Anello bianco (≈20:1 su #020202): massima leggibilità, neutro.
   Per rimuovere il fix: cancellare questo blocco o ripristinare
   il backup style.css.bak-*.
   ============================================================ */
#p-prog:focus-visible,
.p-cb:focus-visible,
.cat-card:focus-visible,
.dash-field input:focus-visible,
.dash-field select:focus-visible,
.dash-field textarea:focus-visible,
.dash-social-bar select:focus-visible,
.dash-social-card textarea:focus-visible,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible,
.tw-newsletter__input:focus-visible,
.tw-login-dialog input[type="email"]:focus-visible,
#place_order:focus-visible,
.bbs-cta-btn:focus-visible,
.bbs-prev-svc:focus-visible,
.bbs-prev-pill:focus-visible,
.bbs-prev-range:focus-visible,
.bbs-prev-row-del:focus-visible,
.bbs-prev-clear:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   FASE 1 (3 giu 2026) — MENU MOBILE NUOVO (≤1024px)
   A) Interruttore TW/BBS in alto + lingua testo "IT · EN".
   Classi dedicate (tw-mseg/tw-mlang): nessun impatto su desktop ≥1025px.
   ════════════════════════════════════════════════════════════════ */
.tw-mtop { display: none; }   /* desktop ≥1025px: invisibile */

@media (max-width: 1024px) {
	.tw-mtop {
		display: flex; flex-direction: column; align-items: center;
		gap: 10px; width: 100%; padding: 8px 0 2px;
	}
	/* Interruttore a 2 segmenti — larghezza fissa, non si sposta al cambio */
	.tw-mseg {
		display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
		width: 100%; max-width: 360px; padding: 4px;
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 6px; background: transparent;
	}
	.tw-mseg-btn {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		min-height: 48px; padding: 0 8px; border-radius: 4px;
		background: transparent; color: rgba(255,255,255,0.62);
		font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
		font-size: 11px; letter-spacing: 2px; line-height: 1.05;
		text-transform: uppercase; text-decoration: none; text-align: center;
		transition: background-color 0.28s ease, color 0.28s ease;
	}
	.tw-mseg-icon {
		height: 20px; width: auto; flex-shrink: 0; color: inherit;
		transition: color 0.28s ease;
	}
	/* Attivo = riempimento bianco + testo/icona neri */
	.tw-mseg-btn.is-active { background: #fff; color: #020202; }

	/* Lingua come testo: attiva bianca, altra 45% */
	.tw-mlang {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
		font-size: 13px; letter-spacing: 2px;
	}
	.tw-mlang a { text-decoration: none; color: rgba(255,255,255,0.45); }
	.tw-mlang a.is-active { color: #fff; }
	.tw-mlang-sep { color: rgba(255,255,255,0.30); }

	/* La navbar mobile ospita SOLO lo switch: identità già nello switch.
	   Nascondo .nav-left (vuoto) e centro, così il controllo resta
	   centrato senza il residuo space-between che lo spingeva a lato. */
	nav#main-nav { height: auto; min-height: 56px; align-items: center; justify-content: center; }
	#main-nav .nav-left { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tw-mseg-btn, .tw-mseg-icon { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   FASE 1 (3 giu 2026) — VOCE B: BARRA FISSA IN BASSO (≤1024px)
   5 caselle icona+etichetta. HOME a sx, MENU a dx (MENU inerte: il
   bottom-sheet arriva alla voce C). z-index 150 → sopra il contenuto,
   SOTTO overlay menu (199) e navbar (200). Desktop ≥1025px: nascosta.
   ─────────────────────────────────────────────────────────────── */
.tw-mbar { display: none; }   /* desktop: invisibile */

@media (max-width: 1024px) {
	.tw-mbar {
		display: flex;
		/* La barra e' un <nav>: eredita la base globale nav{top:0;height:56px;
		   padding:0 40px}. top:auto + height:auto annullano la sovra-vincolazione
		   (con top+height impostati, bottom veniva ignorato -> barra in alto,
		   coperta da #main-nav). padding:0 annulla il padding laterale del nav
		   base. Specificita' .tw-mbar (0,1,0) > nav (0,0,1). */
		position: fixed; top: auto; bottom: 0; left: 0; right: 0;
		height: auto; padding: 0;
		z-index: 150;
		background: #020202;
		border-top: 0.5px solid rgba(255,255,255,0.10);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tw-mbar-cell {
		flex: 1 1 0; min-width: 0;
		display: flex; flex-direction: column;
		align-items: center; justify-content: center; gap: 4px;
		min-height: 56px; padding: 6px 2px 8px; position: relative;
		background: none; border: 0;
		color: rgba(255,255,255,0.45);
		font-family: 'Barlow Condensed', sans-serif;
		font-weight: 800; font-size: 10px; letter-spacing: 1px;
		line-height: 1; text-transform: uppercase; text-align: center;
		text-decoration: none; -webkit-tap-highlight-color: transparent;
		transition: color 0.2s ease;
	}
	.tw-mbar-cell .bbs-svg-icon { width: 23px; height: 23px; display: block; }
	.tw-mbar-cell.is-active { color: #fff; }              /* attiva = bianca */
	.tw-mbar-cell.is-active::after {                      /* indicatore rosso */
		content: ""; position: absolute; bottom: 4px; left: 50%;
		transform: translateX(-50%);
		width: 16px; height: 2px; border-radius: 2px; background: #e03030;
	}
	.tw-mbar-menu { cursor: default; }                    /* MENU inerte */

	/* Spazio in fondo cosi' la barra fixed non copre il contenuto */
	body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.tw-mbar-cell { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   COMPITO 2 (4 giu 2026) — HERO MOBILE (≤1024px)
   Meno vuoto sopra la scritta + la sezione successiva fa capolino
   (segnale "scorri"). La navbar mobile e' position:static (riga 2103):
   NON serve padding-top per liberarla. Contenuto allineato in alto e
   hero piu' corto, con ALTEZZA CONTROLLATA UGUALE su TW e BBS cosi'
   i due hero sono alti uguali e il "peek" della sezione sotto e'
   identico. Stesso padding-top sui due (entrambi iniziano con
   .proj-tag) ⇒ vuoto SUPERIORE identico.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Altezza controllata identica. body #hero: specificita' (1,0,1) per
	   battere il Customizer #hero (1,0,0) che impone min-height:100vh. */
	body #hero, .bbs-hero {
		/* Peek tarato a -260px (base). Valore ritoccabile ±20-40px dopo
		   verifica sul telefono vero (l'headless ha l'artefatto DPI). */
		min-height: calc(100svh - 260px);
	}
	body #hero {
		justify-content: flex-start;   /* contenuto in alto (asse principale, column) */
		padding-top: 36px;
		padding-bottom: 40px;
	}
	.bbs-hero {
		align-items: flex-start;       /* contenuto in alto (cross-axis verticale, row) */
		padding-top: 36px;             /* STESSO valore di #hero ⇒ vuoto sopra uguale */
		padding-bottom: 40px;
	}
	/* Fantasma "BB": watermark <text> in .bbs-hero-bg
	   (page-black-box-studio.php:25). Via solo su mobile, template intatto. */
	.bbs-hero-bg text { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   VOCE C (4 giu 2026) — BOTTOM SHEET MENU (≤1024px)
   Pannello che sale dal basso, sopra la barra (z-index 200 > 150),
   backdrop che chiude al tap fuori. Desktop ≥1025: mai mostrato
   (display:none) — e il trigger MENU e' solo nella barra ≤1024.
   ─────────────────────────────────────────────────────────────── */
.tw-sheet-wrap { display: none; }
@media (max-width: 1024px) {
	.tw-sheet-wrap:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 200; }
	.tw-sheet-backdrop { position: absolute; inset: 0; background: rgba(2,2,2,0.6); opacity: 0; transition: opacity 0.28s ease; }
	.tw-sheet {
		position: absolute; left: 0; right: 0; bottom: 0;
		background: #020202; border-top: 1px solid rgba(255,255,255,0.12);
		border-radius: 18px 18px 0 0;
		padding: 10px 22px calc(24px + env(safe-area-inset-bottom));
		max-height: 85vh; overflow-y: auto;
		transform: translateY(100%);
		transition: transform 0.32s cubic-bezier(.22,.61,.36,1);
	}
	.tw-sheet-wrap.is-open .tw-sheet-backdrop { opacity: 1; }
	.tw-sheet-wrap.is-open .tw-sheet { transform: translateY(0); }
	.tw-sheet-handle { display: block; width: 40px; height: 4px; margin: 4px auto 14px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,0.25); cursor: pointer; }
	.tw-sheet-switch { margin-bottom: 10px; }
	.tw-sheet-links { display: flex; flex-direction: column; margin-top: 4px; border-top: 0.5px solid rgba(255,255,255,0.08); }
	.tw-sheet-links a {
		display: flex; align-items: center; min-height: 48px; padding: 14px 4px;
		font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px;
		letter-spacing: 3px; text-transform: uppercase; color: #fff; text-decoration: none;
		border-bottom: 0.5px solid rgba(255,255,255,0.08);
	}
	.tw-sheet-links a:active { color: #e03030; }
	.tw-sheet-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
	.tw-sheet-auth .nav-login-btn, .tw-sheet-auth .nav-dash-btn { width: 100%; text-align: center; }
	body.tw-sheet-lock { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.tw-sheet, .tw-sheet-backdrop { transition: none; }
}

/* ===== FASE 1 — MICRO-INTERAZIONI BOTTOM BAR (solo ≤1024px) ===== */
@media (max-width: 1024px) {
  @media (prefers-reduced-motion: no-preference) {
    .tw-mbar-cell {
      transition: transform 120ms ease;
    }
    .tw-mbar-cell:active {
      transform: scale(0.92);
    }
  }
}

/* ============================================================
   FASE 1 — SCROLL-REVEAL via JS (solo ≤1024px, desktop INVARIATO)
   Rete di sicurezza: l'opacity:0 di base si attiva SOLO se il JS ha
   aggiunto body.tw-reveal-on. Senza JS → contenuto sempre visibile.
   ============================================================ */
@media (max-width: 1024px) {
  @media (prefers-reduced-motion: no-preference) {
    body.tw-reveal-on .tw-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .6s ease, transform .6s ease;
      will-change: opacity, transform;
    }
    body.tw-reveal-on .tw-reveal.tw-revealed {
      opacity: 1;
      transform: none;
      will-change: auto;
    }
  }
}

/* ───── Before/After "grezzo → finito" — slider (PROVA 9 giu, vanilla JS) ───── */
.bbs-ba { --bbs-ba-pos: 50%; position: relative; width: 100%; }
.bbs-ba-stage {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
	background: #0a0a0a; cursor: ew-resize;
	touch-action: none;            /* niente scroll pagina durante il drag su mobile */
	user-select: none; -webkit-user-select: none;
}
.bbs-ba-img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; pointer-events: none;
	-webkit-user-drag: none; user-select: none;
}
.bbs-ba-img--before {
	clip-path: inset(0 calc(100% - var(--bbs-ba-pos)) 0 0);
	transition: clip-path .18s ease;
}
.bbs-ba-handle {
	position: absolute; top: 0; bottom: 0; left: var(--bbs-ba-pos);
	width: 44px; transform: translateX(-50%); margin: 0; padding: 0;
	border: none; background: transparent; cursor: ew-resize; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	touch-action: none; transition: left .18s ease;
}
.bbs-ba-handle::before {
	content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
	width: 2px; transform: translateX(-50%);
	background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(0,0,0,0.55);
}
.bbs-ba-knob {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,0.96); color: #111;
	box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.bbs-ba-knob .bbs-svg-icon { stroke-width: 2; }
.bbs-ba-knob .bbs-svg-icon:first-child { margin-right: -5px; }
.bbs-ba-handle:focus-visible { outline: none; }
.bbs-ba-handle:focus-visible .bbs-ba-knob { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
.bbs-ba-labels { display: flex; justify-content: space-between; margin-top: 10px; }
.bbs-ba-label {
	font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
	letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
/* drag 1:1 senza lag */
.bbs-ba.is-dragging .bbs-ba-img--before,
.bbs-ba.is-dragging .bbs-ba-handle { transition: none; }
/* accessibilità: a movimento ridotto niente transizioni — statico ma pienamente usabile */
@media (prefers-reduced-motion: reduce) {
	.bbs-ba-img--before, .bbs-ba-handle { transition: none; }
}

/* Gap hero → slider (home BBS): riduce SOLO il padding sopra la sezione slider
   (classe esplicita .bbs-section--ba sul <section>). Non tocca il padding
   generale di .bbs-section. Taratura: cambia il numero qui sotto (↑ più aria,
   ↓ più vicino). 60px era il default; 24px = avvicinamento moderato. */
.bbs-section--ba { padding-top: 24px; }

/* Ponte TeatronWeb spento finche' la tenda e' attiva */
.footer-bridge--off{opacity:.3;cursor:default;pointer-events:none}
/* Link verso TeatronWeb disattivati finche' la tenda e' attiva */
.tw-link-off{opacity:.3;cursor:default;pointer-events:none}