/* ============================================================
   GEKO MOVIES — PROPOSTA 6 "COLONNA"
   Impaginazione a due colonne: a sinistra il titolo della sezione
   resta fermo, a destra scorrono i contenuti in formato grande.
   Nero, oro, azzurro. Navigazione normale, molta aria.
   ============================================================ */

:root{
  /* Palette rivista dopo la riunione del 18/09: stessi colori d'identità,
     luminosità alzata per superare il contrasto AA su fondo nero.
     Quando arriveranno i valori ufficiali del brand basta sostituire qui. */
  /* Colori del marchio, campionati dal logo ufficiale (manuale del 9/7/2026):
     l'anello va da #dcd693 (luce, in alto a sinistra) a #705729 (ombra),
     la scritta da #629dd3 (alto) a #354a86 (basso). */
  --marchio-oro-chiaro:#dcd693; --marchio-oro:#aa9654; --marchio-oro-scuro:#705729;
  --marchio-blu-chiaro:#629dd3; --marchio-blu:#4877be; --marchio-blu-scuro:#354a86;
  /* palette del sito: derivata dal marchio, con la luminosità che serve sul nero */
  --nero:#000000; --blu:var(--marchio-blu); --azzurro:#87bee7; --oro:#c9a55f; --crema:#f1e9cd;
  --oro-profondo:var(--marchio-oro);   /* riempimenti e sfumature */
  --fondo:#060607; --superficie:#121216;
  --linea:rgba(241,233,205,.2);
  --testo:#f6f3ea; --testo-2:rgba(246,243,234,.76); --testo-3:rgba(246,243,234,.56);
  --s1:4px; --s2:16px; --s3:32px; --s4:64px; --s5:120px;
  --nav-h:88px; --raggio:6px;
  /* Carattere del manuale: un geometrico di famiglia Futura (a a un piano, j dritta,
     M a gambe aperte). Jost è l'equivalente libero più fedele. Per tornare al serif
     editoriale della 6b basta cambiare --display in "Cormorant Garamond". */
  --display:"Jost","Futura","Century Gothic","Poppins",sans-serif;
  --ui:"Jost","Futura","Century Gothic","Poppins","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:var(--ui);
  font-weight:300;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--crema);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--s4);background:rgba(6,6,7,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea)}
.marchio{display:flex;align-items:center;gap:10px}
.marchio-testo{font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:.22em;color:var(--crema);
  text-transform:uppercase;white-space:nowrap}
.marchio-testo[hidden]{display:none}
.marchio img.logo{height:64px;width:auto;display:block;flex:none;image-rendering:auto;
  filter:drop-shadow(0 0 14px rgba(201,165,95,.22));transition:opacity .28s,transform .28s,filter .28s}
.marchio:hover img.logo{opacity:1;transform:translateY(-1px);filter:drop-shadow(0 0 22px rgba(201,165,95,.42))}
.nav.trasp .marchio img.logo{height:76px;filter:drop-shadow(0 0 24px rgba(201,165,95,.34))}
@media(max-width:760px){.marchio img.logo,.nav.trasp .marchio img.logo{height:44px}}
.menu{display:flex;gap:var(--s3);align-items:center}
.menu a{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--testo-2);padding:7px 0;position:relative;transition:color .28s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--oro);transition:width .3s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--crema)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.burger{display:none;width:40px;height:40px;border:1px solid var(--linea);border-radius:50%;place-items:center}
.burger i{width:15px;height:1px;background:var(--crema);display:block;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:15px;height:1px;background:var(--crema)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.avanzamento{position:fixed;top:var(--nav-h);left:0;height:2px;z-index:79;width:0;
  background:linear-gradient(90deg,var(--oro-profondo),var(--oro),var(--crema))}

/* ---------- impaginazione a due colonne ---------- */
.vista{display:none}
/* backwards e non both: a fine animazione non resta un transform, che romperebbe i position:fixed interni */
.vista.attiva{display:block;animation:entra .45s ease backwards}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.doppia{max-width:1560px;margin:0 auto;padding:calc(var(--nav-h) + var(--s5)) var(--s4) var(--s5);
  display:grid;grid-template-columns:minmax(300px,32%) 1fr;gap:var(--s5);align-items:start}
.doppia>*{min-width:0}
.ferma{position:sticky;top:calc(var(--nav-h) + var(--s4))}
.occhiello{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);margin:0 0 var(--s3)}
h1{font-family:var(--display);font-weight:300;font-size:clamp(2.3rem,4vw,3.8rem);line-height:1.06;
  letter-spacing:-.01em;margin:0 0 var(--s3)}
h1 em{font-style:normal;color:var(--oro)}
h2{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,3.3vw,3.1rem);line-height:1.08;margin:0 0 var(--s3)}
h2 em{font-style:italic;color:var(--oro)}
.intro{color:var(--testo-2);margin:0 0 var(--s4);max-width:40ch}
.azioni{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--raggio);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;transition:.28s}
.btn-oro{background:var(--oro);color:#0c0a06;font-weight:400}
.btn-oro:hover{background:var(--crema);transform:translateY(-2px)}
.btn-linea{border:1px solid var(--linea);color:var(--testo)}
.btn-linea:hover{border-color:var(--crema);background:rgba(226,216,175,.06)}

.dati-colonna{margin-top:var(--s4);border-top:1px solid var(--linea)}
.dati-colonna div{display:flex;justify-content:space-between;gap:var(--s2);padding:12px 0;border-bottom:1px solid rgba(226,216,175,.07)}
.dati-colonna span:first-child{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--testo-3)}
.dati-colonna span:last-child{font-family:var(--display);font-size:1.25rem;color:var(--crema)}

/* ---------- flusso delle opere (home) ---------- */
.flusso{display:grid;gap:var(--s5)}
.lavoro{cursor:pointer;display:block;width:100%;text-align:left}
.lavoro .media{aspect-ratio:16/9;border-radius:var(--raggio);overflow:hidden;position:relative;
  border:1px solid var(--linea);background:linear-gradient(140deg,var(--p1),var(--p2));
  transition:border-color .35s,transform .5s cubic-bezier(.2,.7,.3,1)}
.lavoro .media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(66% 60% at 34% 26%,rgba(226,216,175,.18),transparent 62%),
             linear-gradient(0deg,rgba(0,0,0,.55),transparent 58%)}
.lavoro:hover .media{transform:translateY(-4px);border-color:rgba(226,216,175,.4)}
.lavoro .play{position:absolute;right:18px;bottom:18px;z-index:2;width:48px;height:48px;border:1px solid var(--oro);
  border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4);opacity:0;transform:scale(.92);transition:.3s}
.lavoro .play::after{content:"";border-left:12px solid var(--crema);border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:4px}
.lavoro:hover .play{opacity:1;transform:none}
.lavoro .riga{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.lavoro .num{font-size:10.5px;letter-spacing:.2em;color:var(--oro);min-width:34px}
.lavoro h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.3vw,2.1rem);margin:0;line-height:1.12}
.lavoro .anno{margin-left:auto;font-size:11px;letter-spacing:.2em;color:var(--testo-3)}
.lavoro .sot{margin:6px 0 0 50px;color:var(--testo-2);font-size:14.5px}
.lavoro .meta{margin:8px 0 0 50px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-3)}

/* ---------- catalogo ---------- */
.filtri{display:grid;gap:2px;margin-bottom:var(--s3)}
.filtri button{text-align:left;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-3);
  padding:11px 14px;border-radius:var(--raggio);transition:.28s;display:flex;justify-content:space-between;gap:var(--s2)}
.filtri button:hover{color:var(--crema);background:rgba(226,216,175,.05)}
.filtri button.on{color:#100c04;background:var(--crema)}
.filtri button span{opacity:.7}
.griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
.scheda{cursor:pointer;text-align:left;width:100%}
.scheda .media{aspect-ratio:16/9;border-radius:var(--raggio);overflow:hidden;position:relative;
  border:1px solid var(--linea);background:linear-gradient(140deg,var(--p1),var(--p2));transition:.35s}
.scheda .media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 32% 26%,rgba(226,216,175,.15),transparent 62%),
             linear-gradient(0deg,rgba(0,0,0,.55),transparent 58%)}
.scheda:hover .media{transform:translateY(-3px);border-color:rgba(226,216,175,.4)}
.scheda .tipo{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin:14px 0 0}
.scheda h4{font-family:var(--display);font-weight:300;font-size:1.45rem;margin:6px 0 4px;line-height:1.14}
.scheda .dati{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-3);margin:0}

/* ---------- scheda opera ---------- */
.opera-pagina{max-width:1560px;margin:0 auto;padding:calc(var(--nav-h) + var(--s4)) var(--s4) var(--s5)}
.torna{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-2);
  border-bottom:1px solid var(--linea);padding-bottom:6px;display:inline-block;margin-bottom:var(--s4)}
.torna:hover{color:var(--crema);border-color:var(--crema)}
.opera-hero{aspect-ratio:21/9;border-radius:var(--raggio);position:relative;overflow:hidden;
  border:1px solid var(--linea);background:linear-gradient(150deg,#3a2f19,#0a0a0b);margin:var(--s3) 0 var(--s5)}
.opera-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 40% 30%,rgba(226,216,175,.2),transparent 64%),
             linear-gradient(0deg,rgba(0,0,0,.62),transparent 58%)}
.opera-hero .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:78px;height:78px;
  border:1px solid var(--oro);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);transition:.3s}
.opera-hero .play::after{content:"";border-left:18px solid var(--crema);border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px}
.opera-hero .play:hover{background:var(--oro)}
.opera-hero .play:hover::after{border-left-color:#100c04}
.credits{border-top:1px solid var(--linea)}
.credits div{display:grid;grid-template-columns:120px 1fr;gap:var(--s2);padding:11px 0;border-bottom:1px solid rgba(226,216,175,.07)}
.credits span:first-child{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--testo-3)}
.credits span:last-child{font-size:14px;color:var(--crema)}
.sinossi{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,1.85vw,1.55rem);line-height:1.46;
  color:rgba(243,240,231,.92);margin:0 0 var(--s3)}
.scatti{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.scatti div{aspect-ratio:16/9;border-radius:var(--raggio);border:1px solid var(--linea);
  background:linear-gradient(140deg,var(--p1),var(--p2))}
.salta{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--linea);flex-wrap:wrap}
.salta .l{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);display:block;margin-bottom:6px}
.salta .t{font-family:var(--display);font-size:1.5rem}
.salta :is(button,a):hover .t{color:var(--crema)}

/* ---------- chi siamo ---------- */
.grande{font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.26;max-width:26ch;margin:0 0 var(--s4);color:var(--crema)}
.corpo p{color:var(--testo-2);margin:0 0 var(--s3);max-width:62ch;font-size:16.5px}
.banda{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  margin-top:var(--s5);border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden}
.banda article{background:var(--fondo);padding:var(--s3)}
.banda .campione{height:54px;margin-bottom:var(--s2);border-radius:3px}
.banda h5{margin:0 0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--crema)}
.banda p{margin:0;font-size:14px;color:var(--testo-2)}

/* ---------- diari ---------- */
.diario{display:grid;grid-template-columns:260px 1fr;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid rgba(226,216,175,.09);align-items:start;transition:.3s}
.diario:first-child{border-top:1px solid rgba(226,216,175,.09)}
.diario:hover{background:rgba(226,216,175,.03)}
.diario .scatto{aspect-ratio:16/9;border-radius:var(--raggio);border:1px solid var(--linea);
  background:linear-gradient(140deg,var(--p1),var(--p2))}
.diario .data{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.diario h4{font-family:var(--display);font-weight:400;font-size:1.7rem;margin:8px 0 8px;line-height:1.15}
.diario p{margin:0;color:var(--testo-2);max-width:62ch}

/* ---------- contatti ---------- */
.campo{margin-bottom:var(--s3)}
.campo label{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2);margin-bottom:10px}
.campo input,.campo textarea,.campo select{width:100%;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--raggio);padding:15px;color:var(--testo);font-family:var(--ui);font-size:15px;transition:border-color .28s}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--oro)}
.campo select option{background:#111}
.duecampi{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.esito{margin-top:var(--s2);font-size:13px;min-height:20px}
.social{display:flex;gap:var(--s2);margin-top:var(--s4)}
.social :is(span,a){width:42px;height:42px;border:1px solid var(--linea);border-radius:50%;display:grid;
  place-items:center;font-size:11px;color:var(--testo-2)}

footer{border-top:1px solid var(--linea);padding:var(--s4);max-width:1560px;margin:0 auto}
.piede{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--testo-3)}

.rivela{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rivela.ok{opacity:1;transform:none}

@media (max-width:1100px){
  .doppia{grid-template-columns:1fr;gap:var(--s4);padding:calc(var(--nav-h) + var(--s4)) var(--s3) var(--s4)}
  .ferma{position:static}
  .griglia{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .filtri{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:var(--s2);padding-bottom:8px}
  .filtri button span{display:none}
  .banda{grid-template-columns:1fr}
  .diario{grid-template-columns:1fr}
  .diario .scatto{max-width:320px}
  .opera-pagina{padding:calc(var(--nav-h) + var(--s3)) var(--s3) var(--s4)}
  .scatti{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .nav{padding:0 36px}   /* distanza minima del marchio dal bordo */
  .burger{display:grid}
  .menu{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(6,6,7,.985);padding:var(--s3) var(--s3) var(--s4);border-bottom:1px solid var(--linea);
    /* chiuso: esce del tutto sopra lo schermo, qualunque sia la sua altezza, e non si vede né si raggiunge col tab */
    transform:translateY(calc(-100% - var(--nav-h) - 20px));visibility:hidden;
    transition:transform .4s cubic-bezier(.2,.7,.3,1),visibility 0s linear .4s}
  .menu.aperto{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.3,1),visibility 0s}
  .menu a{font-size:15px;padding:14px 0;width:100%;border-bottom:1px solid rgba(226,216,175,.07)}
}
@media (max-width:760px){
  :root{--s5:72px;--s4:36px}
  .nav{padding:0 26px}   /* distanza minima del marchio dal bordo, a 44px di logo */
  .menu{padding:var(--s3) var(--s2) var(--s4)}
  .griglia{grid-template-columns:1fr}
  .duecampi{grid-template-columns:1fr}
  .opera-hero{aspect-ratio:16/9}
  .lavoro .sot,.lavoro .meta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}
  .rivela{opacity:1;transform:none}
}

/* ============================================================
   HOME DINAMICA — "LA VETRINA"
   Schermo intero, sfondo in movimento, opera in evidenza che
   cambia da sola, rail di anteprime in basso. Stesso alfabeto
   visivo del resto del sito: nero, oro, azzurro.
   ============================================================ */

/* nav trasparente sopra la vetrina */
.nav.trasp{background:transparent;backdrop-filter:none;border-bottom-color:transparent}

.vetrina{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.vetrina-sfondi{position:absolute;inset:0;z-index:0}
.sfondo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.sfondo.on{opacity:1}
.sfondo .tela{position:absolute;inset:-6%;background:linear-gradient(140deg,var(--p1),var(--p2));
  transform:scale(1.04)}
.sfondo .tela::after{content:"";position:absolute;inset:0;
  background:radial-gradient(54% 60% at 64% 32%,rgba(226,216,175,.42),transparent 66%),
             radial-gradient(44% 54% at 16% 80%,rgba(112,159,202,.3),transparent 68%)}
.sfondo .tela::before{content:"";position:absolute;inset:-10%;
  background:conic-gradient(from 200deg at 68% 38%,rgba(226,216,175,.22),transparent 24%,
             rgba(112,159,202,.14) 52%,transparent 76%);
  filter:blur(22px);animation:deriva 24s ease-in-out infinite alternate}
@keyframes deriva{from{transform:translate3d(-3%,-2%,0) scale(1.08)}to{transform:translate3d(3%,2%,0) scale(1.2)}}
.sfondo.on .tela{animation:kenburns 16s ease-out both}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
.sfondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* velo di leggibilità + grana pellicola */
.vetrina-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,5,.62) 0%,rgba(4,4,5,.2) 16%,transparent 30%),
             linear-gradient(100deg,rgba(4,4,5,.93) 0%,rgba(4,4,5,.6) 40%,rgba(4,4,5,.1) 78%),
             linear-gradient(0deg,var(--fondo) 1%,rgba(6,6,7,.56) 26%,transparent 62%)}
.vetrina-grana{position:absolute;inset:-60%;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grana .7s steps(3) infinite}
@keyframes grana{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-2%,1%,0)}66%{transform:translate3d(1%,-2%,0)}}

/* blocco testo */
.vetrina-testo{position:absolute;z-index:3;left:var(--s4);right:var(--s4);
  bottom:calc(var(--s5) + 86px);max-width:min(58ch,52vw)}
.vetrina-testo>*{opacity:0;transform:translateY(22px)}
.vetrina-testo.anima>*{animation:su .8s cubic-bezier(.2,.7,.3,1) forwards}
.vetrina-testo.anima>*:nth-child(1){animation-delay:.05s}
.vetrina-testo.anima>*:nth-child(2){animation-delay:.14s}
.vetrina-testo.anima>*:nth-child(3){animation-delay:.23s}
.vetrina-testo.anima>*:nth-child(4){animation-delay:.32s}
.vetrina-testo.anima>*:nth-child(5){animation-delay:.41s}
@keyframes su{to{opacity:1;transform:none}}
.vetrina-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s2);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--crema);
  border:1px solid rgba(226,216,175,.3);border-radius:100px;padding:7px 16px;background:rgba(0,0,0,.28);
  max-width:100%;text-align:left}
.vetrina-badge i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--oro);display:block;
  box-shadow:0 0 0 0 rgba(154,129,79,.7);animation:pulsa 2.4s ease-out infinite}
@keyframes pulsa{to{box-shadow:0 0 0 14px rgba(154,129,79,0)}}
.vetrina-tit{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,6.4vw,6rem);
  line-height:1.02;letter-spacing:-.015em;margin:0 0 14px;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.vetrina-sot{font-family:var(--display);font-style:italic;font-weight:300;color:var(--oro);
  font-size:clamp(1.05rem,1.9vw,1.5rem);margin:0 0 var(--s2)}
.vetrina-meta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2);margin:0 0 var(--s3)}
.ico-play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* rail delle anteprime */
.vetrina-rail{position:absolute;z-index:3;left:var(--s4);right:var(--s4);bottom:var(--s3);
  display:flex;gap:var(--s2);align-items:flex-end}
.anteprima{width:168px;flex:none;text-align:left;opacity:.5;transition:opacity .35s,transform .35s}
.anteprima:hover{opacity:.85;transform:translateY(-3px)}
.anteprima.on{opacity:1}
.anteprima .mini{display:block;aspect-ratio:16/9;border-radius:4px;border:1px solid var(--linea);position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--p1),var(--p2));transition:border-color .35s}
.anteprima.on .mini{border-color:rgba(226,216,175,.55)}
.anteprima .mini::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(0deg,rgba(4,4,5,.5),transparent 70%)}
.anteprima .mini img.clip{z-index:1}
.anteprima .avz{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--oro);z-index:3;
  transform:scaleX(0);transform-origin:left;display:block}
.anteprima .et{display:block;margin-top:9px;font-size:11px;letter-spacing:.06em;color:var(--testo-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anteprima.on .et{color:var(--crema)}
.anteprima .nn{font-size:9.5px;letter-spacing:.24em;color:var(--oro);margin-right:8px}

/* frecce + indicatore di scorrimento */
.vetrina-frecce{position:absolute;z-index:3;right:var(--s4);bottom:calc(var(--s3) + 96px);display:flex;gap:10px}
.vetrina-frecce button{width:46px;height:46px;border:1px solid var(--linea);border-radius:50%;
  display:grid;place-items:center;color:var(--testo-2);transition:.3s;background:rgba(0,0,0,.25)}
.vetrina-frecce button:hover{border-color:var(--crema);color:var(--crema);background:rgba(226,216,175,.08)}
.vetrina-giu{position:absolute;z-index:3;right:calc(var(--s4) + 24px);bottom:var(--s3);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--testo-2);display:grid;gap:8px;justify-items:center}
.vetrina-giu i{width:1px;height:38px;background:linear-gradient(var(--oro),transparent);display:block;
  animation:scendi 2.2s ease-in-out infinite}
@keyframes scendi{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* striscia scorrevole */
.striscia{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  overflow:hidden;background:rgba(226,216,175,.022)}
.striscia-pista{display:flex;width:max-content;animation:scorri 42s linear infinite}
.striscia-pista>div{display:flex;gap:var(--s4);padding:15px var(--s3) 15px 0}
.striscia span{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--testo-3);white-space:nowrap}
.striscia b{color:var(--oro);font-weight:400;margin-right:10px}
.striscia:hover .striscia-pista{animation-play-state:paused}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (max-width:1100px){
  .vetrina-testo{max-width:none;right:var(--s4);bottom:calc(var(--s4) + 150px)}
  .vetrina-frecce{display:none}
  .vetrina-giu{display:none}
}
@media (max-width:760px){
  .vetrina{height:100svh;min-height:520px}
  .vetrina-velo{background:linear-gradient(0deg,var(--fondo) 6%,rgba(6,6,7,.72) 40%,rgba(6,6,7,.25) 100%)}
  .vetrina-testo{left:var(--s2);right:var(--s2);bottom:calc(var(--s2) + 146px)}
  .vetrina-rail{left:0;right:0;bottom:var(--s2);padding:0 var(--s2);
    overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .vetrina-rail::-webkit-scrollbar{display:none}
  .anteprima{width:132px;scroll-snap-align:start}
  .vetrina-badge{font-size:9px;letter-spacing:.2em;padding:6px 13px}
  .vetrina-testo .azioni .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sfondo.on .tela{animation:none}
  .sfondo .tela::before{animation:none}
  .vetrina-grana{display:none}
  .striscia-pista{animation:none}
  .vetrina-testo>*{opacity:1;transform:none}
}

/* ---------- modale trailer ---------- */
.modale{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:var(--s3);
  background:rgba(3,3,4,.88);backdrop-filter:blur(10px)}
.modale.aperta{display:grid;animation:entra .3s ease both}
.modale-box{width:min(1100px,100%);aspect-ratio:16/9;border:1px solid var(--linea);border-radius:var(--raggio);
  position:relative;overflow:hidden;background:linear-gradient(150deg,var(--p1,#3a2f19),var(--p2,#0a0a0b));display:grid;place-items:center}
.modale-box::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 46% 34%,rgba(226,216,175,.18),transparent 64%)}
.modale-box.con-yt .modale-nota{display:none}
.modale-nota{position:absolute;left:var(--s2);top:var(--s2);z-index:2;text-align:left;max-width:34ch;
  padding:10px 16px;border:1px solid rgba(241,233,205,.18);border-radius:var(--raggio)}
.modale-nota p:first-child{display:none}
.modale-nota p:first-child{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 10px;color:var(--crema)}
.modale-nota p:last-child{margin:0;color:var(--testo-2);font-size:14px}
.modale-chiudi{position:absolute;top:var(--s2);right:var(--s2);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linea);display:grid;place-items:center;color:var(--crema);background:rgba(0,0,0,.4);font-size:18px}
.modale-chiudi:hover{border-color:var(--crema);background:rgba(226,216,175,.1)}


/* ============================================================
   AGGIUNTE POST-RIUNIONE 18/09/2026
   1. intro animata del marchio (eclissi)
   2. effetti luminosi ed eclissi nella vetrina
   3. manifesto e valori: storytelling istituzionale
   4. pannello filtri delle produzioni (modello Proposta 5)
   5. slot estesi per immagini e video
   ============================================================ */

/* ---------- 1. intro: la sigla dell'eclissi ----------
   Il logo è un anello d'oro attorno alla scritta: la sigla lo usa davvero.
   Un filo di luce spunta, l'anello si disegna in senso orario con il bagliore
   in punta (l'"anello di diamante" delle eclissi), la scritta si rivela con
   un passaggio di luce dal bordo sfumato, poi il marchio vola a posarsi nella
   barra in alto, dove resta. Anello in SVG con centro (156.3, 109.6) e raggio
   107.4 su tela 316×220, misurati sul PNG; gradiente ancorato alla tela così
   la luce resta in alto a sinistra come nel marchio. Asset a doppia risoluzione,
   scena a 480px massimi: nessun ingrandimento, quindi bordi puliti. */
.intro-logo{position:fixed;inset:0;z-index:300;display:grid;align-content:center;justify-items:center;
  gap:30px;background:#040405;transition:background .7s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility .3s}
.intro-logo.atterra{background:rgba(4,4,5,0)}
.intro-logo.via{opacity:0;visibility:hidden;pointer-events:none}
.intro-scena{position:relative;z-index:1;width:min(480px,76vw);aspect-ratio:1052/734;
  will-change:transform;transform:translateZ(0)}
.intro-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .32s ease}
.intro-testo,.intro-pieno{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.intro-testo{--p:0%;opacity:0;transition:opacity .25s ease;
  filter:drop-shadow(0 0 12px rgba(143,189,232,.26));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) - 16%),transparent var(--p));
          mask-image:linear-gradient(90deg,#000 calc(var(--p) - 16%),transparent var(--p))}
.intro-pieno{opacity:0;transition:opacity .28s ease,filter .75s ease;
  filter:drop-shadow(0 0 22px rgba(201,165,95,.30))}
.intro-lampo{position:absolute;top:39%;bottom:39%;left:4%;width:22%;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,248,228,.5) 50%,transparent);
  filter:blur(10px);mix-blend-mode:screen}
.intro-firma{position:relative;z-index:1;margin:0;white-space:nowrap;font-size:9.5px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--testo-3);opacity:0;transform:translateY(6px);
  transition:opacity .8s ease,transform .8s ease}
.intro-firma.su{opacity:1;transform:none}
.intro-logo.atterra .intro-firma{opacity:0;transition:opacity .25s}
.intro-salta{position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);z-index:4;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--testo-3);
  border-bottom:1px solid var(--linea);padding-bottom:5px;transition:color .25s,opacity .25s}
.intro-salta:hover{color:var(--crema);border-color:var(--crema)}
.intro-logo.atterra .intro-salta{opacity:0}
@media (max-width:760px){.intro-firma{white-space:normal;text-align:center;max-width:78vw;line-height:1.9;font-size:9px;letter-spacing:.3em}}
@media (prefers-reduced-motion:reduce){.intro-logo{display:none}}

/* ---------- 2. eclissi e luce nella vetrina ---------- */
/* L'eclissi è il richiamo al marchio: un cerchio scuro con la corona di luce.
   Sta solo dove non ci sono immagini o video, per non coprirli mai:
   nell'intro, nel manifesto della home e nella pagina contatti. */
.eclissi{position:absolute;z-index:0;width:var(--dim,300px);aspect-ratio:1;pointer-events:none;opacity:var(--forza,.5)}
.eclissi::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fondo);
  box-shadow:inset 0 0 0 1px rgba(241,233,205,.13),0 0 90px 12px rgba(201,165,95,.12)}
.eclissi::after{content:"";position:absolute;inset:-16%;border-radius:50%;opacity:.7;
  background:conic-gradient(from 212deg,rgba(201,165,95,0),rgba(201,165,95,.45) 38deg,
             rgba(241,233,205,.68) 68deg,rgba(143,189,232,.28) 128deg,rgba(201,165,95,0) 206deg);
  filter:blur(26px);animation:ruota 38s linear infinite}
@keyframes ruota{to{transform:rotate(360deg)}}
@media (max-width:1100px){.eclissi{display:none}}
@media (prefers-reduced-motion:reduce){.eclissi::after{animation:none}}

/* il testo resta sempre sopra */
.manifesto-int>div{position:relative}
.manifesto .claim,.manifesto .firma,.manifesto .testo,
#v-contatti .ferma>*:not(.eclissi),#v-chi-siamo .ferma>*:not(.eclissi){position:relative;z-index:1}
.eclissi{position:absolute!important;z-index:0!important}
.manifesto{overflow:hidden}

/* raggio di luce che attraversa le schede al passaggio del mouse */
.raggio{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(241,233,205,.18) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.lavoro:hover .raggio,.scheda:hover .raggio{transform:translateX(120%)}

/* etichetta "più recente" */
.fresco{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oro);border:1px solid rgba(201,165,95,.42);border-radius:100px;
  padding:4px 11px;vertical-align:middle}
.fresco i{width:5px;height:5px;border-radius:50%;background:var(--oro);display:block}

/* ---------- 3. storytelling: manifesto e valori ---------- */
.manifesto{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:radial-gradient(70% 120% at 20% 0%,rgba(201,165,95,.08),transparent 62%)}
.manifesto-int{max-width:1560px;margin:0 auto;padding:var(--s5) var(--s4);
  display:grid;grid-template-columns:minmax(300px,32%) 1fr;gap:var(--s5);align-items:start}
.manifesto .claim{font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.65rem,2.9vw,2.6rem);line-height:1.24;color:var(--crema);margin:0}
.manifesto .firma{margin:var(--s3) 0 0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro)}
.manifesto .testo p{color:var(--testo-2);font-size:17px;margin:0 0 var(--s3);max-width:64ch}
.manifesto .testo p b{color:var(--crema);font-weight:400}

.valori{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;margin-top:var(--s4)}
.occhiello+.valori,.occhiello+.banda{margin-top:var(--s2)}
.valori article{background:var(--fondo);padding:var(--s3);transition:background .35s}
.valori article:hover{background:rgba(201,165,95,.05)}
.valori .n{font-size:10px;letter-spacing:.28em;color:var(--oro)}
.valori h5{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:12px 0 10px;color:var(--crema)}
.valori p{margin:0;font-size:14.5px;color:var(--testo-2)}
@media (max-width:1100px){.manifesto-int{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) var(--s3)}
  .valori{grid-template-columns:1fr}}

/* citazione dentro le pagine */
.citazione{border-left:2px solid var(--oro);padding:4px 0 4px var(--s3);margin:var(--s4) 0;max-width:58ch;
  font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.4;color:var(--crema)}
.citazione small{display:block;margin-top:14px;font-family:var(--ui);font-style:normal;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--testo-3)}

/* ---------- 4. pannello filtri delle produzioni ---------- */
.pannello{display:grid;gap:var(--s3);margin-top:var(--s3)}
.cerca{position:relative}
.cerca input{width:100%;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:14px 16px 14px 44px;color:var(--testo);font-family:var(--ui);font-size:14.5px;transition:border-color .28s}
.cerca input:focus{outline:none;border-color:var(--oro)}
.cerca input::placeholder{color:var(--testo-3)}
.cerca .lente{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  border:1.5px solid var(--testo-3);border-radius:50%;pointer-events:none}
.cerca .lente::after{content:"";position:absolute;right:-6px;bottom:-4px;width:7px;height:1.5px;
  background:var(--testo-3);transform:rotate(45deg)}
.gruppo>.et{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin:0 0 12px}
.chip{display:flex;flex-wrap:wrap;gap:8px}
.chip button{border:1px solid var(--linea);border-radius:100px;padding:7px 14px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2);transition:.25s;white-space:nowrap}
.chip button:hover{border-color:var(--oro);color:var(--crema);background:rgba(201,165,95,.07)}
.chip button.on{background:var(--crema);border-color:var(--crema);color:#0c0a06}
.chip button .q{opacity:.55;margin-left:7px;font-size:10px}
.chip.lungo{max-height:158px;overflow-y:auto;scrollbar-width:thin;padding:2px 2px 10px;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.chip.lungo::-webkit-scrollbar{width:4px}
.chip.lungo::-webkit-scrollbar-thumb{background:rgba(201,165,95,.35);border-radius:4px}
.chip button.on .q{opacity:.6}
.riepilogo{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  border-top:1px solid var(--linea);padding-top:var(--s2);flex-wrap:wrap}
.riepilogo .quanti{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-3)}
.riepilogo .quanti b{color:var(--crema);font-weight:400}
.azzera{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  border-bottom:1px solid transparent;padding-bottom:3px;transition:.25s}
.azzera:hover{border-color:var(--oro);color:var(--crema)}
.ordina{display:flex;gap:var(--s2);align-items:center;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--testo-3)}
.ordina select{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);
  color:var(--testo-2);padding:9px 12px;font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ordina select:focus{outline:none;border-color:var(--oro)}
.scheda .cast{margin:5px 0 0;font-size:12px;color:var(--testo-2)}
.scheda .cast span{color:var(--testo-3)}
mark{background:rgba(201,165,95,.3);color:var(--crema);border-radius:2px;padding:0 2px}
.vuoto{color:var(--testo-2);border:1px dashed var(--linea);border-radius:var(--raggio);
  padding:var(--s4);text-align:center}

/* ---------- materiali reali: immagini, mp4, YouTube ---------- */
img.clip{object-fit:cover}
.vetrina img.clip{animation:kenburns-foto 26s ease-out both}
@keyframes kenburns-foto{from{transform:scale(1.02)}to{transform:scale(1.16) translate3d(-1.6%,-1.2%,0)}}
.opera-hero img.clip{animation:kenburns-foto 34s ease-out both}
@media (prefers-reduced-motion:reduce){.vetrina img.clip,.opera-hero img.clip{animation:none}}
iframe.clip{border:0;pointer-events:none;z-index:2}
.vetrina iframe.clip{inset:auto;left:50%;top:50%;width:177.78svh;height:56.25svw;
  min-width:100%;min-height:100%;transform:translate(-50%,-50%)}
.modale-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}

/* ---------- video segnaposto ---------- */
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity .8s ease}
.clip.acceso{opacity:1}
.lavoro .media,.scheda .media,.opera-hero,.nastro .fotogramma{isolation:isolate}
.modale-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.modale-nota{background:rgba(4,4,5,.62);border-radius:var(--raggio);backdrop-filter:blur(4px)}

/* ---------- 5. slot per immagini e video ---------- */
.slot{position:relative}
.slot:has(img.clip)::before,.slot:has(iframe.clip)::before{display:none}
.slot::before{content:attr(data-slot);position:absolute;left:10px;top:10px;z-index:3;
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(241,233,205,.55);
  border:1px solid rgba(241,233,205,.22);border-radius:3px;padding:3px 8px;background:rgba(0,0,0,.4)}
.nastro{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:var(--s2);
  overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-top:var(--s3);min-width:0}
.nastro::-webkit-scrollbar{display:none}
.nastro .fotogramma{aspect-ratio:16/9;border-radius:var(--raggio);border:1px solid var(--linea);
  background:linear-gradient(140deg,var(--p1),var(--p2));position:relative;overflow:hidden}
.nastro .fotogramma::after{content:"";position:absolute;inset:0;
  background:radial-gradient(64% 58% at 34% 28%,rgba(241,233,205,.16),transparent 62%)}

/* ============================================================
   SECONDA TORNATA — dalle reference (A24, NEON, Lucky Red,
   The Apartment, Universal, 27b), adattate al nostro alfabeto.
   Stato di uscita, raccolte, tag, premi, schede persona,
   area press. Meccaniche loro, forme nostre.
   ============================================================ */

/* ---------- stato di uscita ---------- */
.stato{display:inline-flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;border-radius:100px;padding:4px 11px;white-space:nowrap;
  border:1px solid currentColor}
.stato i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex:none}
.stato.s-sala{color:var(--crema)}
.stato.s-prossimamente{color:var(--oro)}
.stato.s-disponibile{color:var(--azzurro)}
.stato.s-lavorazione{color:#d79a6a}
.stato.s-archivio{color:var(--testo-3)}
.stato.s-lavorazione i{animation:pulsa 2.4s ease-out infinite}

/* ---------- premi e festival ---------- */
.premi{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.premio{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);
  border:1px solid rgba(201,165,95,.32);border-radius:3px;padding:3px 8px;background:rgba(201,165,95,.06)}
.scheda .premio,.lavoro .premio{font-size:9px}
.alloro{position:absolute;left:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--crema);
  background:rgba(4,4,5,.62);border:1px solid rgba(241,233,205,.28);border-radius:3px;padding:4px 9px}
.alloro::before{content:"❧";color:var(--oro);font-size:11px}

/* ---------- raccolte editoriali ---------- */
.raccolte{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s3)}
.raccolte button{border:1px solid var(--linea);border-radius:var(--raggio);padding:9px 14px;
  font-family:var(--display);font-size:1.02rem;color:var(--testo-2);transition:.25s;text-align:left}
.raccolte button:hover{border-color:var(--oro);color:var(--crema);background:rgba(201,165,95,.06)}
.raccolte button.on{border-color:var(--crema);color:var(--crema);background:rgba(241,233,205,.08)}
.raccolte button small{display:block;font-family:var(--ui);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--testo-3);margin-top:3px}

/* ---------- indice alfabetico ---------- */
.indice{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--s2)}
.indice button{width:26px;height:26px;border-radius:3px;font-size:10.5px;letter-spacing:.04em;
  color:var(--testo-3);transition:.2s}
.indice button:hover:not(:disabled){color:var(--crema);background:rgba(241,233,205,.08)}
.indice button.on{background:var(--crema);color:#0c0a06}
.indice button:disabled{opacity:.22;cursor:default}

/* ---------- tag di disciplina ---------- */
.tagriga{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.tagriga :is(button,a),.tagriga span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--testo-3);border-bottom:1px solid rgba(241,233,205,.16);padding-bottom:2px;transition:.22s}
.tagriga :is(button,a):hover{color:var(--crema);border-color:var(--crema)}

/* ---------- credits cliccabili ---------- */
.credits .nome{color:var(--crema);border-bottom:1px solid rgba(201,165,95,.3);
  padding-bottom:1px;transition:.22s;display:inline-block}
.credits .nome:hover{color:var(--oro);border-color:var(--oro)}
.scheda .cast .nome,.lavoro .meta .nome{color:var(--testo-2);transition:.22s}
.scheda .cast .nome:hover,.lavoro .meta .nome:hover{color:var(--crema)}

/* ---------- scheda persona ---------- */
.persona-testa{display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.persona-sigla{width:104px;height:104px;flex:none;border-radius:50%;border:1px solid var(--linea);
  display:grid;place-items:center;font-family:var(--display);font-size:2.4rem;color:var(--oro);
  background:radial-gradient(70% 70% at 34% 26%,rgba(201,165,95,.16),transparent 70%)}
.persona-ruoli{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.persona-ruoli span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);
  border:1px solid rgba(201,165,95,.3);border-radius:100px;padding:4px 11px}
.persona-conta{margin:var(--s3) 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-3)}
.persona-conta b{color:var(--crema);font-weight:400}

/* ---------- pagina press: linguette e rassegna ---------- */
.press-tabs{display:flex;gap:var(--s3);border-bottom:1px solid var(--linea);margin-top:var(--s3)}
.press-tabs button{padding:12px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--testo-3);position:relative;transition:color .25s}
.press-tabs button .q{color:var(--oro);margin-left:6px;font-size:10px}
.press-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform .3s}
.press-tabs button:hover{color:var(--crema)}
.press-tabs button.on{color:var(--crema)}
.press-tabs button.on::after{transform:none}
.art{padding:var(--s3) 0;border-bottom:1px solid rgba(241,233,205,.09);display:grid;gap:10px}
.art:first-child{border-top:1px solid var(--linea)}
.art-testa{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.art-testata{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.art-data{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-3)}
.art-tipo{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-2);
  border:1px solid var(--linea);border-radius:100px;padding:3px 9px}
.art-titolo{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;
  color:var(--crema);display:inline-flex;gap:10px;align-items:baseline;transition:color .25s;max-width:60ch}
.art-titolo:hover{color:var(--oro)}
.art-titolo .ext{font-family:var(--ui);font-size:12px;color:var(--oro);flex:none;transition:transform .25s}
.art-titolo:hover .ext{transform:translate(2px,-2px)}
.art-cit{margin:0;color:var(--testo-2);font-size:15px;max-width:64ch;font-style:italic;font-family:var(--display);
  font-size:1.1rem;line-height:1.5}
.art-piede{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-3)}
.art-opera{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  border-bottom:1px solid rgba(201,165,95,.35);padding-bottom:2px;transition:.25s}
.art-opera:hover{color:var(--crema);border-color:var(--crema)}
.dicono{margin-top:var(--s5)}
.dicono .art{padding:var(--s2) 0}
.dicono .art-titolo{font-size:1.25rem}
.dicono .azioni{margin-top:var(--s3)}

/* ---------- area press ---------- */
.press-opera{border-top:1px solid var(--linea);padding:var(--s3) 0}
.press-opera:last-of-type{border-bottom:1px solid var(--linea)}
.press-riga{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.press-riga h4{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0;line-height:1.14}
.press-riga .anno{font-size:11px;letter-spacing:.2em;color:var(--testo-3)}
.materiali-lista{display:grid;gap:2px}
.materiale{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--raggio);
  transition:background .22s;cursor:pointer}
.materiale:hover{background:rgba(241,233,205,.04)}
a.materiale{color:inherit}
a.materiale .et::after{content:" ↓";color:var(--oro)}
.materiale input{appearance:none;width:15px;height:15px;flex:none;border:1px solid var(--linea);
  border-radius:3px;background:var(--superficie);position:relative;cursor:pointer}
.materiale input:checked{background:var(--oro);border-color:var(--oro)}
.materiale input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid #0c0a06;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.materiale .et{flex:1;font-size:14px;color:var(--testo-2)}
.materiale .pes{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-3)}
.press-barra{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3);padding:14px var(--s2);border:1px solid var(--linea);
  border-radius:var(--raggio);background:rgba(10,10,12,.96);backdrop-filter:blur(12px)}
.press-barra .quanti{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-3)}
.press-barra .quanti b{color:var(--crema);font-weight:400}
.press-azioni{display:flex;gap:10px;flex-wrap:wrap}
.press-azioni .btn{padding:12px 20px;font-size:10px}
.blocco-crediti{margin-top:var(--s2);background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--raggio);padding:14px;font-family:var(--ui);font-size:12.5px;line-height:1.6;
  color:var(--testo-2);white-space:pre-wrap;width:100%;resize:vertical;min-height:130px}
.blocco-crediti:focus{outline:none;border-color:var(--oro)}
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid rgba(241,233,205,.09)}
.faq summary{padding:16px 0;cursor:pointer;font-size:15.5px;color:var(--crema);list-style:none;
  display:flex;justify-content:space-between;gap:var(--s2);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--oro);font-size:18px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--testo-2);max-width:66ch;font-size:14.5px}

/* ---------- newsletter ---------- */
.iscrizione{display:flex;gap:10px;margin-top:var(--s2);flex-wrap:wrap}
.iscrizione input{flex:1 1 220px;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--raggio);padding:14px;color:var(--testo);font-family:var(--ui);font-size:14px}
.iscrizione input:focus{outline:none;border-color:var(--oro)}

@media (max-width:760px){
  .raccolte button{flex:1 1 calc(50% - 8px)}
  .raccolte button small{font-size:10px}
  .press-azioni{width:100%}
  .press-azioni .btn{flex:1 1 100%;justify-content:center}
  .modale-nota{max-width:70%;font-size:12px;padding:8px 12px}
}
/* schermi tattili (telefono e tablet): leggibilità e bersagli di tocco */
@media (max-width:1000px){
  .stato,.alloro,.premio,.vetrina-badge,.art-tipo,.tagriga :is(button,a),.tagriga span,.fresco,
  .raccolte button small{font-size:10px}
  .vetrina-badge{letter-spacing:.18em}
  .torna{padding:10px 0 8px;margin-bottom:var(--s3)}
  .azzera{padding:10px 0}
  .credits .nome,.scheda .cast .nome,.scheda .dati .nome,.lavoro .meta .nome,.dati-colonna .nome{padding:8px 0;margin:-6px 0}
  .scheda .tipo .nome{padding:10px 0;margin:-8px 0}
  .credits div{padding:14px 0}
  .art-opera{padding:9px 0}
  .tagriga :is(button,a){padding:8px 0 6px}
  .indice button{width:34px;height:34px}
  .chip button{padding:10px 14px}
  .press-tabs button{padding:14px 0}
}

/* ============================================================
   TEMA CHIARO — riunione del 12/10/2026
   Sfondo bianco, azzurro del marchio come colore guida, logo a colori.
   Il sito si apre sullo scuro originale; il tasto nella barra passa al chiaro;
   la scelta resta salvata nel browser. Vetrina, sigla e finestra del trailer
   restano scure: stanno su video e immagini.
   ============================================================ */
.tema{width:42px;height:42px;flex:none;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;
  color:var(--crema);margin-left:var(--s3);transition:border-color .25s,background .25s,color .25s}
.tema:hover{border-color:var(--oro);color:var(--oro)}
.tema svg{width:18px;height:18px}
.tema .sole{display:none}
:root[data-tema="chiaro"] .tema .sole{display:block}
:root[data-tema="chiaro"] .tema .luna{display:none}
.menu{margin-left:auto}
.burger{margin-left:10px}
@media (max-width:1000px){.tema{margin-left:auto}}

:root[data-tema="chiaro"]{
  /* leggibilità: accenti e testi secondari scuriti fino ad almeno 5,5:1 sul bianco */
  --oro:#1c62b0; --oro-profondo:var(--marchio-blu); --azzurro:#164e8c; --crema:#123f73;
  --fondo:#ffffff; --superficie:#f1f6fc;
  --linea:#cbdbec;
  --testo:#0b1a2e; --testo-2:#34445a; --testo-3:#536277;
  color-scheme:light;
}
/* zone che restano scure: i token tornano quelli originali */
:root[data-tema="chiaro"] :is(.vetrina,.intro-logo,.modale){
  --oro:#c9a55f; --oro-profondo:var(--marchio-oro); --azzurro:#87bee7; --crema:#f1e9cd;
  --fondo:#060607; --superficie:#121216; --linea:rgba(241,233,205,.2);
  --testo:#f6f3ea; --testo-2:rgba(246,243,234,.76); --testo-3:rgba(246,243,234,.56);
  color:var(--testo)}
:root[data-tema="chiaro"] .vetrina{--oro:#7db8ee; --oro-profondo:#4877be}
:root[data-tema="chiaro"] .vetrina .btn-oro{background:#2f78c8;color:#fff}
:root[data-tema="chiaro"] .vetrina .btn-oro:hover{background:#4a90dc;color:#fff}
:root[data-tema="chiaro"] .vetrina .btn-linea:hover{border-color:#7db8ee;background:rgba(125,184,238,.12)}
:root[data-tema="chiaro"] .vetrina-badge{border-color:rgba(125,184,238,.45)}
:root[data-tema="chiaro"] .vetrina-badge i{box-shadow:0 0 0 0 rgba(125,184,238,.7);animation-name:pulsa-azzurro}
@keyframes pulsa-azzurro{to{box-shadow:0 0 0 14px rgba(125,184,238,0)}}
:root[data-tema="chiaro"] .anteprima.on .mini{border-color:rgba(125,184,238,.7)}

/* clip della vetrina specchiate orizzontalmente (riunione 12/10/2026), in entrambi i temi */
.vetrina-sfondi{transform:scaleX(-1)}

/* barra: sempre bianca, anche sopra la vetrina */
:root[data-tema="chiaro"] .nav,:root[data-tema="chiaro"] .nav.trasp{background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--linea)}
:root[data-tema="chiaro"] .marchio img.logo,
:root[data-tema="chiaro"] .nav.trasp .marchio img.logo{filter:none}
:root[data-tema="chiaro"] .nav.trasp .marchio img.logo{height:64px}
@media(max-width:760px){:root[data-tema="chiaro"] .nav.trasp .marchio img.logo{height:44px}}
:root[data-tema="chiaro"] .menu a{font-weight:400}
@media (max-width:1000px){:root[data-tema="chiaro"] .menu{background:rgba(255,255,255,.99)}
  :root[data-tema="chiaro"] .menu a{border-bottom-color:var(--linea)}}
:root[data-tema="chiaro"] .burger i,:root[data-tema="chiaro"] .burger i::before,
:root[data-tema="chiaro"] .burger i::after{background:var(--azzurro)}

/* pieni azzurri con testo bianco */
:root[data-tema="chiaro"] .btn-oro{color:#fff}
:root[data-tema="chiaro"] .btn-oro:hover{background:var(--azzurro);color:#fff}
:root[data-tema="chiaro"] .btn-linea{border-color:var(--oro);color:var(--azzurro)}
:root[data-tema="chiaro"] .btn-linea:hover{background:var(--oro);color:#fff}
:root[data-tema="chiaro"] :is(.chip button.on,.indice button.on,.filtri button.on){color:#fff}
:root[data-tema="chiaro"] .materiale input:checked::after{border-color:#fff}
:root[data-tema="chiaro"] mark{background:rgba(47,120,200,.16)}
:root[data-tema="chiaro"] .stato.s-lavorazione{color:#b5652c}
:root[data-tema="chiaro"] .campo select option{background:#fff}

/* linee e fondi che nello scuro erano tinte crema */
:root[data-tema="chiaro"] :is(.dati-colonna div,.credits div,.diario,.diario:first-child,.art,.faq details,
  .tagriga :is(button,a),.tagriga span){border-color:var(--linea)}
:root[data-tema="chiaro"] .manifesto{background:#eaf3fc}
:root[data-tema="chiaro"] .manifesto .valori article{background:#fff}
:root[data-tema="chiaro"] .striscia{background:#f5f9fe}
/* Diari e Press tolti dal sito (riunione 12/10/2026): spariscono anche i rimandi dalla scheda opera.
   Le sezioni restano nel file, nascoste, per riattivarle senza riscriverle. */
#o-press,#o-rassegna,#o-diari,#v-diari,#v-press{display:none!important}
:root[data-tema="chiaro"] .press-barra{background:rgba(255,255,255,.97)}
:root[data-tema="chiaro"] :is(.lavoro:hover .media,.scheda:hover .media){border-color:var(--oro)}
:root[data-tema="chiaro"] .eclissi{opacity:calc(var(--forza,.5)*.6)}
:root[data-tema="chiaro"] .eclissi::before{box-shadow:inset 0 0 0 1px rgba(170,150,84,.35),0 0 90px 12px rgba(98,157,211,.14)}
:root[data-tema="chiaro"] .avanzamento{background:linear-gradient(90deg,var(--marchio-blu-scuro),var(--marchio-blu),var(--marchio-blu-chiaro))}
body,.nav,.manifesto{transition:background-color .35s,color .35s}

/* ---------- tema chiaro: leggibilità ----------
   Jost a 300 su bianco è troppo sottile: testo corrente a 400, titoli a 400,
   etichette maiuscole piccole a 500 e un filo più grandi. */
:root[data-tema="chiaro"] body{font-weight:400}
:root[data-tema="chiaro"] :is(h1,h2,.lavoro h3,.scheda h4,.sinossi,.grande,.manifesto .claim,.marchio-testo){font-weight:400}
:root[data-tema="chiaro"] :is(.occhiello,.firma,.menu a,.btn,.lavoro .num,.lavoro .anno,.lavoro .meta,.scheda .tipo,.scheda .dati,
  .dati-colonna span:first-child,.credits span:first-child,.gruppo>.et,.valori .n,.salta .l,.torna,.quanti,.ordina,
  .ms-btn,.ms-tit,.ms-pulisci,.ms-ok,.scelti button small,.scelti .azzera,.stato,.premio,.tagriga :is(button,a),.tagriga span,
  .fresco,.striscia span,.piede,.campo label,.persona-conta,.persona-ruoli span){font-weight:500}
:root[data-tema="chiaro"] :is(.scheda .tipo,.scheda .dati,.occhiello,.lavoro .meta,.tagriga :is(button,a),.tagriga span,.stato,.premio){font-size:11px}
:root[data-tema="chiaro"] :is(.corpo p,.manifesto .testo p,.intro,.lavoro .sot,.scheda .cast,.valori p,.faq p){color:var(--testo-2)}
:root[data-tema="chiaro"] h1 em,:root[data-tema="chiaro"] h2 em{color:var(--oro)}
:root[data-tema="chiaro"] .ms-opz{color:var(--testo)}
:root[data-tema="chiaro"] .ms-opz input{border-color:#8a98ab}
:root[data-tema="chiaro"] .cerca input,:root[data-tema="chiaro"] .ms-cerca{border-color:#c2d3e6}
:root[data-tema="chiaro"] .cerca input::placeholder{color:#66758a}

/* ============================================================
   PRODUZIONE — filtri a selezione multipla (riunione 12/10/2026)
   Catalogo a tutta larghezza. Barra compatta fissa sotto il menu:
   ricerca e ordinamento, poi un menu per ogni filtro che si apre
   con le caselle da spuntare. I valori scelti compaiono sotto,
   ognuno si toglie con un clic. Su telefono il menu sale dal basso.
   ============================================================ */
.catalogo{max-width:1560px;margin:0 auto;padding:calc(var(--nav-h) + var(--s4)) var(--s4) var(--s5)}
.catalogo-testa h2{margin:0}
.barra-filtri{position:sticky;top:var(--nav-h);z-index:30;display:grid;gap:12px;
  margin:var(--s3) 0 0;padding:14px 0;background:var(--fondo);border-bottom:1px solid var(--linea)}
.barra-riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.barra-filtri .cerca{flex:0 1 380px}
.barra-filtri .cerca input{padding:11px 14px 11px 42px}
.barra-filtri .quanti{margin:0 0 0 auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-3)}
.barra-filtri .quanti b{color:var(--crema);font-weight:400}

.ms{position:relative}
.ms-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--linea);border-radius:100px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--testo-2);white-space:nowrap;transition:.22s}
.ms-btn:hover,.ms.aperto .ms-btn{color:var(--crema);border-color:var(--oro)}
.ms.attivo .ms-btn{color:var(--crema);border-color:var(--oro);background:rgba(201,165,95,.08)}
:root[data-tema="chiaro"] .ms.attivo .ms-btn{background:rgba(47,120,200,.08)}
.ms-n{font-weight:500;font-size:10px;letter-spacing:0;min-width:18px;height:18px;border-radius:9px;padding:0 5px;
  display:grid;place-items:center;background:var(--oro);color:#0c0a06}
:root[data-tema="chiaro"] .ms-n{color:#fff}
.ms-n:empty{display:none}
.ms-btn i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.ms.aperto .ms-btn i{transform:rotate(-135deg) translateY(-1px)}

.ms-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:290px;display:grid;gap:10px;padding:14px;
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--raggio);
  box-shadow:0 20px 50px rgba(0,0,0,.45);animation:tendina .22s cubic-bezier(.2,.7,.3,1) both}
:root[data-tema="chiaro"] .ms-pop{box-shadow:0 20px 50px rgba(14,29,51,.14)}
.ms-pop[hidden]{display:none}
@keyframes tendina{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ms-tit{display:none;margin:0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.ms-cerca{width:100%;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:9px 12px;color:var(--testo);font-family:var(--ui);font-size:13.5px}
.ms-cerca:focus{outline:none;border-color:var(--oro)}
.ms-lista{display:grid;max-height:280px;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;scrollbar-width:thin}
.ms-opz{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--testo-2)}
.ms-opz:hover{background:var(--superficie);color:var(--testo)}
.ms-opz[hidden]{display:none}
.ms-opz input{appearance:none;width:16px;height:16px;flex:none;margin:0;border:1px solid var(--testo-3);border-radius:3px;
  position:relative;cursor:pointer;transition:.15s}
.ms-opz input:checked{background:var(--oro);border-color:var(--oro)}
.ms-opz input:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:5px;height:9px;
  border:solid #0c0a06;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
:root[data-tema="chiaro"] .ms-opz input:checked::after{border-color:#fff}
.ms-opz input:checked~span{color:var(--testo)}
.ms-opz span{flex:1;min-width:0}
.ms-opz em{font-style:normal;font-size:11px;color:var(--testo-3)}
.ms-lista.lettere{grid-template-columns:repeat(4,1fr)}
.ms-piede{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--linea);padding-top:10px}
.ms-pulisci,.ms-ok{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 2px}
.ms-pulisci{color:var(--testo-3)}
.ms-pulisci:hover{color:var(--crema)}
.ms-ok{color:var(--oro)}
.ms-ok:hover{color:var(--crema)}

.scelti{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:var(--s3);margin:14px 0 var(--s3)}
.scelti button{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 13px;border-radius:100px;
  background:var(--superficie);border:1px solid var(--linea);font-size:12.5px;color:var(--testo);transition:.2s}
.scelti button small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-3)}
.scelti button i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;color:var(--testo-3);transition:.2s}
.scelti button:hover{border-color:var(--oro)}
.scelti button:hover i{background:var(--oro);color:var(--fondo)}
.scelti .azzera{background:none;border:0;padding:6px 4px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}

.catalogo .griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
@media (max-width:1100px){
  .catalogo{padding:calc(var(--nav-h) + var(--s4)) var(--s3) var(--s4)}
  .catalogo .griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
}
@media (max-width:760px){
  .barra-filtri .cerca{flex:1 1 100%}
  .barra-filtri .quanti{margin:0}
  .barra-filtri .ordina{margin-left:auto}
  .barra-filtri .ordina label{display:none}
  /* i menu scorrono in orizzontale; quello aperto sale dal basso come un foglio */
  .barra-riga.multi{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s3));padding:0 var(--s3)}
  .barra-riga.multi::-webkit-scrollbar{display:none}
  .ms-pop{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:78svh;padding:18px var(--s2) calc(18px + env(safe-area-inset-bottom));
    border-radius:14px 14px 0 0;border-bottom:0;animation-name:foglio;z-index:210}
  .ms-tit{display:block}
  .ms-lista{max-height:none;min-height:0}
  .ms-pop{grid-template-rows:auto auto 1fr auto}
  .ms-opz{padding:12px 6px;font-size:15px}
  .ms-pulisci,.ms-ok{padding:10px 4px}
  .catalogo .griglia{grid-template-columns:1fr}
  html.ms-foglio .barra-filtri{z-index:220}
  html.ms-foglio body::after{content:"";position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.45)}
}
@keyframes foglio{from{transform:translateY(100%)}to{transform:none}}

/* ============================================================
   HOME — carosello "Ultime produzioni" sul modello di NEON
   ============================================================ */
.neon{padding:var(--s5) 0 var(--s4);max-width:1920px;margin:0 auto}
.neon-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:0 var(--s4);margin-bottom:var(--s3)}
.neon-testa h2{margin:0;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95;color:var(--testo)}
.neon-testa h2 em{font-style:normal;color:var(--oro)}
.neon-frecce{display:flex;gap:10px}
.neon-frecce button{width:50px;height:50px;border-radius:50%;border:1px solid var(--oro);color:var(--crema);
  display:grid;place-items:center;font-size:17px;transition:.25s}
.neon-frecce button:hover:not(:disabled){background:var(--oro);color:var(--fondo)}
.neon-frecce button:disabled{opacity:.28;cursor:default}
.neon-schede{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--s4);margin-bottom:var(--s3)}
.neon-schede button{padding:10px 18px;border-radius:100px;border:1px solid var(--linea);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--testo-2);transition:.25s}
.neon-schede button:hover{border-color:var(--oro);color:var(--crema)}
.neon-schede button[aria-selected="true"]{background:var(--oro);border-color:var(--oro);color:#0c0a06}
:root[data-tema="chiaro"] .neon-schede button[aria-selected="true"]{color:#fff}
.neon-schede b{font-weight:400;opacity:.7;margin-left:7px}
.neon-pista{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0 var(--s4);scroll-padding:0 var(--s4);scrollbar-width:none}
.neon-pista::-webkit-scrollbar{display:none}
.neon-card{flex:0 0 clamp(280px,44vw,780px);scroll-snap-align:start;cursor:pointer;text-align:left;display:block}
.neon-card .media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(140deg,var(--p1),var(--p2))}
.neon-card .media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 28%)}
.neon-card .media .clip{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.neon-card:hover .media .clip{transform:scale(1.03)}
.neon-card .slot::before{display:none}
.neon-et{position:absolute;top:16px;left:16px;z-index:3;font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.neon-tit{display:block;margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--testo);transition:color .25s}
.neon-card:hover .neon-tit{color:var(--oro)}
.neon-meta{display:block;margin-top:2px;font-size:12.5px;color:var(--testo-3)}
.neon .vuoto{margin:0 var(--s4);flex:1}
.neon-piede{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4) 0}
.neon-barra{flex:1 1 200px;max-width:380px;height:2px;background:var(--linea);position:relative;overflow:hidden}
.neon-barra i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--oro);transition:transform .15s,width .2s}
@media (max-width:1000px){
  .neon-frecce{display:none}
  .neon-card{flex-basis:82vw}
}
@media (max-width:760px){
  .neon-testa,.neon-schede,.neon-piede{padding-left:var(--s2);padding-right:var(--s2)}
  .neon-pista{padding:0 var(--s2);scroll-padding:0 var(--s2)}
  .neon .vuoto{margin:0 var(--s2)}
}

/* schede del catalogo: solo immagine, titolo e stato */
.scheda-riga{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.scheda-riga h4{margin:0;font-size:1.3rem;line-height:1.2;min-width:0}
.scheda-B h4{margin:14px 0 4px}
.scheda-riga .stato{flex:none}

/* ---------- contatti: impaginazione rimessa in ordine ---------- */
.contatti-lista div{display:grid;gap:4px;justify-content:start;padding:14px 0}
.contatti-lista span:last-child{font-family:var(--ui);font-size:15.5px;color:var(--crema);overflow-wrap:anywhere}
.contatti-destra{display:grid;gap:var(--s4);min-width:0}
.newsletter{border-top:1px solid var(--linea);padding-top:var(--s4)}
.newsletter .occhiello{margin-bottom:var(--s2)}
.newsletter-testo{color:var(--testo-2);margin:0;max-width:56ch;font-size:15px}
#v-contatti .social{margin-top:var(--s3)}
/* su telefono i due campi vanno in colonna: lo spazio lo dà già .campo, non serve anche il gap */
@media (max-width:760px){.duecampi{gap:0}}