/* ═══════════════════════════════════════════════════════════════
   CASALE SANFILIPPO — «NOTTE D'AGOSTO»
   Il sito è la volta di lampadine del Casale: una notte sola, continua
   dall'alto al piede, coi disegni del posto tracciati a filo d'oro nei
   margini, e un solo punto acceso a dimostrare che la festa è una sola.

   ── LE TRE REGOLE DEL COLORE ──
   1. L'oro non è mai un riempimento, tranne: cuore delle lampadine,
      bottone WhatsApp, il punto sotto la parola appesa.
   2. Il colore della luce (--luce) non tocca mai una lettera.
   3. Le lampadine sono ambra, mai colorate.

   ── CONTRASTI, calcolati ──
   chiaro 14,71:1 · fumo 10,37:1 · oro 7,98:1 — sul fondo più chiaro
   della pagina (--pannello). È il punto peggiore del sito: AAA.

   ── LE TRE TECNICHE DI MOVIMENTO, E NESSUN'ALTRA ──
   DISCESA (y 18→0 + opacity) · VELO (overflow + translate) ·
   TRATTO (stroke-dashoffset legato allo scorrimento).
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:Bodoni;src:url(../font/bodoni.woff2?v=3) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Bodoni;src:url(../font/bodoni-i.woff2?v=3) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Jost;src:url(../font/jost.woff2?v=3) format('woff2');font-weight:300 700;font-display:swap}

:root{
  /* l'ora della sera: 0 all'arrivo, 1 ai contatti */
  --ora:0;

  /* i fondi — un solo gradiente continuo, mai fasce */
  --cielo-1:#0A0D14; --cielo-2:#10141C; --cielo-3:#151511;
  --cielo-4:#1B1813; --cielo-5:#141009; --cielo-6:#0A0806;

  --pannello:#221E17;
  --scurina:rgba(10,8,6,.94);

  --chiaro:#F4F1EA;      /* 14,71:1 sul pannello */
  --fumo:#D3CCBC;        /* 10,37:1 */
  --oro:#C9B274;         /*  7,98:1 — il punto peggiore del sito */
  --su-oro:#100D08;      /* 11,63:1 sull'oro pieno */
  --luce:#FFE9B8;        /* solo luce, mai testo */

  --oro-primo:rgba(201,178,116,.42);
  --oro-medio:rgba(201,178,116,.24);
  --oro-fondo:rgba(201,178,116,.15);
  --filetto:rgba(201,178,116,.30);

  --largo:1320px;
  --gutter:clamp(20px,5vw,72px);
  --respiro:clamp(88px,11vw,180px);
  --testata-h:72px;
  --volta-h:46vh;

  --discesa:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--testata-h) + 14px);
  background:var(--cielo-1);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  position:relative;
  color:var(--fumo);
  font-family:Jost,'Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1.05rem,1rem + .3vw,1.19rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* LA SPINA CONTINUA: un gradiente solo su tutto il documento,
     nessun background-color di sezione, nessuna cucitura. */
  background:linear-gradient(180deg,
    var(--cielo-1)  0%,
    var(--cielo-2)  9%,
    var(--cielo-2) 30%,
    var(--cielo-3) 42%,
    var(--cielo-4) 56%,
    var(--cielo-4) 72%,
    var(--cielo-5) 84%,
    var(--cielo-6) 96%,
    var(--cielo-6) 100%) no-repeat;
  background-size:100% 100%;
}

img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}

.segni{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}

.salta{position:absolute;left:-9999px;top:0;z-index:400;background:var(--oro);color:var(--su-oro);padding:14px 22px;font-weight:600}
.salta:focus{left:14px;top:14px}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ═══ L'ORA · due soli strati fissi che si incrociano ═══ */
.cielo{position:fixed;inset:0;z-index:0;pointer-events:none}
.cielo--presto{background:radial-gradient(130% 78% at 74% -12%,rgba(38,54,84,.42),transparent 62%);opacity:calc(1 - var(--ora))}
.cielo--tardi{background:radial-gradient(120% 74% at 24% 104%,rgba(86,58,26,.34),transparent 64%);opacity:var(--ora)}

/* ═══ LA VOLTA · sette fili sopra la testa, sempre ═══ */
/* La volta è una BANDA sopra il testo, non uno strato dietro.
   L'altezza la calcola il JavaScript: si ferma 16 px sopra la prima riga
   di testo dell'apertura. Un filo o una lampadina dietro una lettera ne
   abbassa il contrasto — sul titolo era arrivato a 1,39:1. */
.volta{
  position:absolute;left:0;right:0;top:var(--testata-h);height:var(--volta-h,26vh);z-index:1;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
}
.volta__fili{position:absolute;left:0;top:0;width:100%;height:100%}
.volta__fili path{fill:none;stroke:var(--oro-medio);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.volta__palma{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:240/640;
              fill:none;stroke:var(--oro-fondo);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* overflow nascosto: se si ruota il telefono e le lampadine non sono
   ancora state riseminate, quelle vecchie non sbordano comunque */
.volta__luci{position:absolute;inset:0;overflow:hidden;opacity:1;transition:opacity .5s ease-out}
.volta__fili{transition:opacity .5s ease-out}
/* ⚠️ La volta NON è più uno strato fisso. Lo era, e bastava scorrere di
   50 px perché il titolo dell'apertura le entrasse dentro: il contrasto
   sull'oro scendeva a 1,00:1. Uno strato fisso scorre, prima o poi,
   dietro OGNI riga della pagina — l'unico rimedio sicuro è non averlo
   fisso. Adesso sta dentro l'apertura e se ne va insieme a lei.
   Sotto la volta ci si resta lo stesso: col filo maestro sul bordo, la
   catenaria dei quattro passi e i tre fili che scendono nei contatti. */

/* le lampadine: <div> con l'alone cotto nel gradiente. Mai filtri. */
.lampadina{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,
    var(--luce) 0%, var(--luce) 18%,
    rgba(255,233,184,.55) 34%,
    rgba(201,178,116,.22) 62%,
    transparent 78%);
  opacity:0;
  animation:respiro var(--periodo,5s) ease-in-out var(--fase,0s) infinite;
  animation-play-state:paused;
}
.lampadina.accesa{animation-play-state:running}
@keyframes respiro{0%,100%{opacity:var(--min,.62)}50%{opacity:var(--max,.88)}}

/* ═══ IL FILO MAESTRO · navigazione, avanzamento e marchio in 2px ═══ */
/* la corsia è larga 14 px così le lampadine non vengono tagliate dal
   bordo dello schermo; il filo vero è la linea da 2 px dentro. */
.filo{position:fixed;left:0;top:0;width:14px;height:100vh;z-index:60;pointer-events:none}
.filo::before{content:"";position:absolute;left:5px;top:0;width:2px;height:100%;background:var(--oro-fondo)}
.filo__riempi{display:block;width:2px;height:100%;margin-left:5px;background:var(--oro);transform:scaleY(0);transform-origin:top;will-change:transform}
.filo__luce{position:absolute;left:1px;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle,var(--luce) 0%,var(--luce) 22%,rgba(201,178,116,.3) 60%,transparent 76%);
  opacity:.18;transition:opacity .5s var(--discesa)}
.filo__luce.qui{opacity:1}

/* ═══ IMPALCATURA ═══ */
.dentro{width:100%;max-width:var(--largo);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:3}
.dentro--stretto{max-width:780px}
.centrato{text-align:center}
.fascia{position:relative;z-index:2;padding-block:var(--respiro)}

/* ═══ TIPOGRAFIA ═══ */
.occhiello{
  display:flex;align-items:center;gap:.8em;
  font-family:Jost;font-size:13.2px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro);line-height:1.3;margin-bottom:20px;
}
.filetto{display:block;width:0;height:1px;background:var(--filetto);flex:none}
.intestazione--centro .occhiello,.centrato .occhiello,.esclusiva__testo .occhiello{justify-content:center}
.titolo--centro{text-align:center}

h1,h2{font-family:Bodoni,Didot,Georgia,serif;font-weight:550;color:var(--chiaro)}
.titolone{font-size:clamp(2.6rem,1.4rem + 5.2vw,6.2rem);line-height:.98;letter-spacing:-.022em}
.titolone--fine{font-size:clamp(2.2rem,1.4rem + 3.4vw,4.4rem);max-width:15ch;margin-inline:auto}
.titolo{font-size:clamp(2.05rem,1.2rem + 3.4vw,4.1rem);line-height:1.02;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--oro);letter-spacing:-.01em;position:relative;display:inline-block}

/* la parola appesa: un capello verticale che finisce in un punto */
h1 em::before,h2 em::before{
  content:"";position:absolute;left:50%;top:-.66em;width:1px;height:0;background:var(--filetto);
  transition:height .5s var(--discesa) .45s;
}
h1 em::after{content:"";position:absolute;left:50%;top:-.66em;width:3px;height:3px;margin-left:-1px;
  border-radius:50%;background:var(--oro);opacity:0;transition:opacity .3s .9s,transform .5s var(--discesa) .45s}
h2 em::after{content:"";position:absolute;left:50%;top:-.66em;width:3px;height:3px;margin-left:-1px;
  border-radius:50%;background:var(--oro);opacity:0;transition:opacity .3s .9s,transform .5s var(--discesa) .45s}
.visto h1 em::before,.visto h2 em::before{height:15px}
.visto h1 em::after,.visto h2 em::after{opacity:1;transform:translateY(15px)}

h3{font-family:Bodoni,Didot,Georgia,serif;font-weight:600;
   font-size:clamp(1.28rem,1.15rem + .5vw,1.55rem);line-height:1.2;letter-spacing:-.005em;color:var(--chiaro)}

.lead{font-weight:350;font-size:clamp(1.18rem,1.05rem + .6vw,1.45rem);line-height:1.55;color:var(--chiaro);max-width:56ch}
/* le due righe dell'apertura: sono la frase del piede, quella che il
   committente ha scelto. Vanno un po' più grandi del lead normale. */
.lead--apertura{font-weight:400;font-size:clamp(1.24rem,1.05rem + .85vw,1.7rem);line-height:1.45;max-width:30ch}
.lead--apertura em{font-style:italic;font-weight:400;color:var(--oro)}
.testo{color:var(--fumo);max-width:58ch}
.testo + .testo{margin-top:.75em}
.centrato .lead,.centrato .testo,.intestazione--centro .testo,.esclusiva__testo .lead{margin-inline:auto}

.cifra{font-family:Bodoni,Didot,serif;font-weight:550;color:var(--oro);line-height:1;
       font-size:clamp(1.9rem,1.5rem + 1.9vw,3rem);display:block;font-variant-numeric:tabular-nums}

.numerone{font-family:Bodoni,Didot,serif;font-weight:550;color:var(--oro);opacity:.45;line-height:.82;
          font-size:clamp(3.4rem,2rem + 5.6vw,7rem);letter-spacing:-.04em;margin-bottom:.16em;display:block}

.intestazione{max-width:760px;margin-bottom:clamp(44px,5.5vw,76px)}
.intestazione .testo{margin-top:18px}
.intestazione--centro{margin-inline:auto;text-align:center}

/* le righe dei titoli: overflow + translate, solo transform */
.riga{display:block;overflow:hidden;padding-bottom:.04em}
.riga__i{display:block}

/* ═══ BOTTONI ═══ */
.azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.azioni--centro{justify-content:center}
.bottone{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 26px;
  font-family:Jost;font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
}
.bottone--grande{min-height:58px;padding:0 32px}
.bottone--oro{background:var(--oro);color:var(--su-oro);border:1px solid var(--oro)}
.bottone--oro:hover,.bottone--oro:focus-visible{background:var(--luce);border-color:var(--luce)}
.bottone--anello{border:1px solid var(--oro-primo);color:var(--chiaro)}
.bottone--anello:hover,.bottone--anello:focus-visible{border-color:var(--oro);color:var(--oro)}

/* ═══ TESTATA ═══ */
.testata{
  position:fixed;inset:0 0 auto;z-index:70;display:flex;align-items:center;gap:20px;
  padding:12px max(var(--gutter),calc((100vw - var(--largo)) / 2 + var(--gutter)));
  min-height:var(--testata-h);
  /* Piena da subito, e senza dipendere dal JavaScript: qualunque cosa
     scorra sotto una barra fissa le passa dietro al testo. Traslucida
     anche solo all'8% bastava a far leggere la pagina attraverso il
     marchio. La riga d'oro compare quando ci si stacca dalla cima. */
  background:#080A10;border-bottom:1px solid transparent;
  transition:border-color .4s var(--discesa);
}
.testata.posata{border-bottom-color:var(--oro-fondo)}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;margin-right:auto}
.marchio__torre{width:30px;height:35px;flex:none;fill:none;stroke:var(--oro);stroke-width:5;
                stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.marchio__nome{font-family:Jost;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--chiaro)}
.testata__cta{min-height:44px;padding:0 18px;font-size:13px}
@media (min-width:900px) and (max-width:1139px){
  .testata__cta{display:none}
  .menu>ul{gap:clamp(13px,1.6vw,20px)}
  .menu>ul>li>a{font-size:14px}
}

.menu>ul{display:flex;align-items:center;gap:clamp(16px,1.9vw,30px);list-style:none}
.menu>ul>li>a{
  position:relative;text-decoration:none;font-family:Jost;font-size:15px;font-weight:600;
  letter-spacing:.04em;padding:8px 0;display:block;white-space:nowrap;color:var(--chiaro);
  transition:color .2s ease-in-out;
}
.menu>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--discesa)}
.menu>ul>li>a:hover::after,.menu>ul>li>a:focus-visible::after,.menu>ul>li>a.qui::after{transform:scaleX(1);transform-origin:left}
.menu>ul>li>a.qui{color:var(--oro)}
.menu__coda,.menu__torre{display:none}
.panino{display:none;width:46px;height:46px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.panino span{display:block;height:1.5px;background:var(--chiaro);transition:transform .4s var(--discesa),opacity .3s}

/* ═══ 1 · APERTURA ═══ */
/* lo spazio in cima non è vuoto: è la banda della volta */
.apertura{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
          padding-top:calc(var(--testata-h) + clamp(54px,11vh,170px))}
.apertura__dentro{display:flex;flex-direction:column;justify-content:center;flex:1;
                  padding-bottom:clamp(26px,3vw,52px)}
.apertura__basso{display:grid;gap:clamp(20px,2.4vw,40px);align-items:end;margin-top:clamp(18px,2.2vw,32px)}
.apertura__basso > *{min-width:0}
.apertura__video{position:relative;width:100%;max-width:min(100%,760px);margin-inline:auto}
.apertura__video::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--oro-primo);z-index:0}
.apertura__video .velo__i{position:relative;z-index:1}
.apertura__video video{width:100%;aspect-ratio:848/382;object-fit:cover;background:var(--cielo-2)}

.fatti{position:relative;z-index:3;padding-bottom:clamp(24px,3vw,38px)}
.fatti__griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--oro-fondo);border-block:1px solid var(--oro-fondo)}
.fatto{background:var(--cielo-1);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:clamp(11px,1.5vw,18px) 8px}
.fatto span{font-family:Jost;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fumo);max-width:20ch;line-height:1.35}

/* ═══ 2 · GLI SPAZI ═══ */
.spazi{overflow:hidden}
.voce{position:relative;margin-block:clamp(60px,8vw,128px);overflow:hidden;padding-block:clamp(14px,2vw,30px)}
.voce__griglia{display:grid;gap:clamp(30px,4.5vw,64px);align-items:center}
.voce__media{position:relative}
.voce__media::before{content:"";position:absolute;inset:0;border:1px solid var(--oro-primo);z-index:3;pointer-events:none}
.voce__media .velo__i{display:block}
.voce__media img,.voce__media video{width:100%;object-fit:cover}
.voce--01 .voce__media video{aspect-ratio:4/5}
.voce--02 .voce__media img{aspect-ratio:4/3}
.voce__parola h3{margin-bottom:12px}
.voce--03 .voce__media video{aspect-ratio:4/5}
/* l'arco è una cornice: le gambe stanno fuori dalla colonna di testo e
   la chiave di volta sopra. Non passa mai dietro una parola. */
.voce__arco{position:absolute;left:50%;top:0;width:min(126%,840px);height:clamp(110px,12.5vw,200px);
            transform:translateX(-50%);
            fill:none;stroke:var(--oro-fondo);stroke-width:1;vector-effect:non-scaling-stroke;z-index:0;pointer-events:none}
.voce--03{padding-top:clamp(116px,13vw,215px)}

/* i disegni di margine: sempre fuori dalla colonna di testo */
.margine{position:absolute;fill:none;stroke:var(--oro-fondo);stroke-width:1;
         vector-effect:non-scaling-stroke;stroke-linecap:round;z-index:0;pointer-events:none}
.margine--piscina{left:calc(-1 * clamp(40px,7vw,150px));bottom:-8%;width:min(52vw,520px);height:auto}
.margine--arco{right:calc(-1 * clamp(24px,4vw,80px));top:-10%;width:min(30vw,280px);height:auto}
.margine--fondo{left:-14%;bottom:4%;width:min(46vw,470px);height:auto}

/* ▸ LA LENTE DELLA SERA */
.sera{position:relative;margin-top:36px;max-width:520px;border:1px solid var(--oro-fondo);
      background:rgba(10,12,18,.32);touch-action:pan-y;cursor:grab;overflow:hidden}
.sera:active{cursor:grabbing}
.sera__tela{display:block;width:100%;height:auto}
.sera__tela path,.sera__tela use{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sera__giorno{stroke:var(--oro-fondo)}
.sera__notte{stroke:var(--oro-primo)}
.sera__bulbi circle{fill:var(--luce);stroke:none;opacity:.92}
.sera__finestra{
  position:absolute;inset:0;pointer-events:none;
  -webkit-clip-path:circle(86px at 50% 50%);clip-path:circle(86px at 50% 50%);
}
.sera__tela--notte{position:absolute;left:0;top:0;width:100%;height:100%}
.sera__invito{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:Jost;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);background:var(--scurina);padding:5px 12px;pointer-events:none;transition:opacity .4s}
.sera__invito.via{opacity:0}

/* ═══ 3 · L'ESCLUSIVA ═══ */
.esclusiva{overflow:hidden;padding-top:clamp(100px,13vw,210px)}
.esclusiva__dentro{display:grid;justify-items:center;text-align:center}
.esclusiva__torre{position:absolute;right:-5%;top:5%;width:min(38vw,400px);height:auto;
  fill:none;stroke:var(--oro-fondo);stroke-width:1.1;vector-effect:non-scaling-stroke;z-index:0;pointer-events:none}
.recinto{position:relative;width:min(88%,540px);margin-bottom:clamp(34px,4.5vw,64px)}
.recinto__tela{display:block;width:100%;height:auto}
.recinto__tela path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.recinto__perimetro{stroke:var(--oro);stroke-opacity:.72;stroke-dasharray:1;stroke-dashoffset:1}
.recinto__dentro path{stroke:var(--oro-primo);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.recinto__luci{position:absolute;inset:0;pointer-events:none}
.recinto__luci .lampadina{width:18px;height:18px;margin:-9px 0 0 -9px;animation:none;opacity:0}

.esclusiva__testo{max-width:740px;margin-bottom:clamp(38px,5vw,66px)}
.esclusiva__testo .lead{margin-top:20px}

.terne{display:grid;gap:0;width:100%;max-width:1060px;text-align:left}
.terna{position:relative;background:var(--pannello);padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px)}
.terna + .terna::before{content:"";position:absolute;left:0;top:10%;width:1px;height:0;background:var(--filetto);
  transition:height .8s var(--discesa),background-color .2s ease-in-out}
.visto .terna + .terna::before{height:80%}
.terna:hover + .terna::before,.terna:hover::before{background:var(--oro)}
.terna__n{font-family:Jost;font-size:13.2px;font-weight:600;letter-spacing:.2em;color:var(--oro);display:block;margin-bottom:14px}
.terna h3{margin-bottom:9px}

/* ═══ 4 · GLI EVENTI ═══ */
.eventi{overflow:hidden;padding-bottom:calc(var(--respiro) + clamp(150px,20vw,290px))}
.sestina{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px);position:relative;z-index:3}
.sestina > *{min-width:0}
.voce-e{position:relative;padding:clamp(20px,2.6vw,30px) 0 clamp(20px,2.6vw,30px) 72px;transition:transform .3s var(--discesa)}
.voce-e:hover{transform:translateY(-3px)}
.anello{position:absolute;left:0;top:clamp(20px,2.4vw,30px);width:52px;height:52px;display:grid;place-items:center}
.anello svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anello b{font-family:Jost;font-size:13.2px;font-weight:600;letter-spacing:.06em;color:var(--oro);line-height:1}
.anello circle{fill:none;stroke:var(--oro-primo);stroke-width:1;vector-effect:non-scaling-stroke;
               stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%;
               transition:stroke .2s ease-in-out}
.voce-e:hover .anello circle{stroke:var(--oro)}
.voce-e .occhiello{display:none}
.voce-e h3{margin-bottom:8px;overflow-wrap:break-word}
/* sotto i 640 px l'anello si mette sopra, o il titolo non ci sta */
@media (max-width:639px){
  .anello{width:44px;height:44px}
  .voce-e{padding-left:60px}
}
@media (max-width:559px){
  /* a due colonne il testo starebbe in 115 px: cinque righe da tre parole */
  .sestina{grid-template-columns:1fr;gap:0}
  .voce-e{border-top:1px solid var(--oro-fondo)}
  .voce-e:last-child{border-bottom:1px solid var(--oro-fondo)}
}
.orizzonte{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(170px,24vw,330px);z-index:0;pointer-events:none}
.orizzonte path,.orizzonte use{fill:none;stroke:var(--oro-fondo);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.orizzonte__bulbi circle{fill:var(--luce);stroke:none;opacity:.5}

/* ═══ 5 · L'ALLESTIMENTO ═══ */
.allestimento{position:relative;z-index:2;isolation:isolate}
.allestimento__scena{position:relative;width:100%;height:clamp(440px,78vh,860px);overflow:hidden;margin:0}
.allestimento__scena .velo__i{display:block;width:100%;height:100%}
.allestimento__scena img{width:100%;height:110%;object-fit:cover}
/* il velo scende molto meno: il pannello ha già un fondo suo, e una
   fascia «scenografica» in cui la fotografia non si vede è un rettangolo
   nero. Il testo sta dentro il pannello, quindi il contrasto non dipende
   dai pixel dello scatto. */
.allestimento__scena::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(95deg,rgba(10,8,6,.82) 0%,rgba(10,8,6,.45) 34%,rgba(10,8,6,.12) 62%,rgba(10,8,6,.05) 100%)}
.cascate{position:absolute;left:0;top:0;width:100%;height:56%;z-index:3;pointer-events:none}
.cascate path{fill:none;stroke:var(--oro-medio);stroke-width:1;vector-effect:non-scaling-stroke}
.angoli{position:absolute;inset:clamp(16px,2.4vw,34px);z-index:4;pointer-events:none}
.angoli svg{position:absolute;width:56px;height:56px;fill:none;stroke:var(--oro-primo);stroke-width:1.1;vector-effect:non-scaling-stroke}
.angoli svg:nth-child(1){left:0;top:0}
.angoli svg:nth-child(2){right:0;top:0}
.angoli svg:nth-child(3){right:0;bottom:0}
.angoli svg:nth-child(4){left:0;bottom:0}
.allestimento__dentro{position:absolute;inset:0;z-index:5;display:flex;align-items:center;pointer-events:none}
.pannello{max-width:min(100%,520px);background:var(--pannello);border:1px solid var(--oro-fondo);
          padding:clamp(26px,3.2vw,44px);pointer-events:auto}
.pannello .lead{margin-top:18px}
.pannello .testo{margin-top:12px}

/* ═══ 6 · LE FESTE ═══ */
.clip-riga{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px)}
.clip-riga > *{min-width:0}
.clip{position:relative;padding-top:26px}
.clip__filo{position:absolute;left:50%;top:0;width:1px;height:26px;background:var(--filetto)}
.clip__filo::after{content:"";position:absolute;left:-1.5px;bottom:-2px;width:4px;height:4px;border-radius:50%;background:var(--oro)}
.clip__apri{display:block;width:100%;padding:0;cursor:pointer;position:relative}
.clip__cornice{display:block;position:relative;overflow:hidden}
.clip__cornice::after{content:"";position:absolute;inset:0;border:1px solid var(--oro-primo);z-index:3;pointer-events:none;transition:border-color .25s ease-in-out}
.clip__apri:hover .clip__cornice::after,.clip__apri:focus-visible .clip__cornice::after{border-color:var(--oro)}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--cielo-4)}
.clip figcaption{padding-top:14px;color:var(--chiaro);font-size:1rem;line-height:1.5;text-align:left}
.etichetta{display:block;font-family:Jost;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-bottom:6px}

/* ═══ 7 · COME SI PRENOTA ═══ */
.catena{position:relative;padding-top:clamp(40px,6vw,96px)}
.catena__filo{position:absolute;left:0;top:0;width:100%;height:clamp(86px,10vw,160px);pointer-events:none}
.catena__tratto{fill:none;stroke:var(--oro-primo);stroke-width:1.2;vector-effect:non-scaling-stroke;
                stroke-dasharray:1;stroke-dashoffset:1}
.passi{list-style:none;display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,54px) clamp(20px,2.4vw,36px);position:relative;z-index:2}
.passi > *{min-width:0}
.passo{position:relative;padding-top:44px}
.passo__luce{position:absolute;left:0;top:0;width:18px;height:26px;display:block;opacity:0;transition:opacity .4s ease-out}
.passo__luce svg{width:100%;height:100%;fill:none;stroke:var(--oro);stroke-width:1;vector-effect:non-scaling-stroke;overflow:visible}
.passo__luce circle{fill:rgba(255,233,184,.2)}
.passo.accesa .passo__luce{opacity:1}
.passo__n{font-family:Bodoni,Didot,serif;font-weight:550;font-size:clamp(2.6rem,1.9rem + 2.6vw,4.2rem);
          line-height:.8;color:var(--oro);opacity:.3;display:block;margin-bottom:12px;transition:opacity .5s ease-out}
.passo.accesa .passo__n{opacity:1}
.passo h3{margin-bottom:8px}
.richiamo{margin-top:clamp(44px,5vw,72px);padding:clamp(26px,3vw,40px);border:1px solid var(--oro-fondo);
          background:var(--pannello);display:grid;gap:22px;align-items:center}
.richiamo p{font-family:Bodoni,Didot,serif;font-weight:600;font-size:clamp(1.24rem,1.05rem + .8vw,1.7rem);line-height:1.3;color:var(--chiaro)}

/* ═══ 8 · LA GALLERIA ═══ */
.filtri{position:relative;display:flex;flex-wrap:wrap;gap:0;margin-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--oro-fondo)}
.filtro{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;cursor:pointer;
        font-family:Jost;font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--fumo);
        transition:color .2s ease-in-out}
.filtro i{font-style:normal;font-size:13px;opacity:.7}
.filtro:hover{color:var(--chiaro)}
.filtro[aria-pressed="true"]{color:var(--oro)}
.filtri__corsa{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--oro);
               transition:transform .42s var(--discesa),width .42s var(--discesa)}

.armatura{position:relative}
.armatura__linee{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.armatura__linee path{fill:none;stroke:var(--oro-medio);stroke-width:1;vector-effect:non-scaling-stroke;
                      stroke-dasharray:1;stroke-dashoffset:1}
/* a righe flessibili: se l'ultima riga non è piena le tessere che
   restano si mettono in centro. Con una griglia a caselle resterebbe una
   cella vuota incorniciata dall'armatura, che è proprio il buco che il
   committente aveva segnalato. */
.mosaico{--vuoto:clamp(10px,1.4vw,18px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vuoto)}
.tessera{position:relative;padding:0;background:var(--cielo-5);cursor:zoom-in;overflow:hidden;
         flex:0 0 calc((100% - var(--vuoto)) / 2 - .5px);
         aspect-ratio:4/5;transition:transform .35s var(--discesa)}
.tessera:hover{transform:translateY(-4px)}
.tessera img{width:100%;height:100%;object-fit:cover}
.tessera::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .25s ease-in-out}
.tessera:hover::after,.tessera:focus-visible::after{border-color:var(--oro-primo)}
.tessera[hidden]{display:none}
.nota{margin-top:24px;padding-top:18px;border-top:1px solid var(--oro-fondo);color:var(--fumo)}

/* ═══ 9 · DOMANDE ═══ */
.domande{overflow:hidden}
.domande__arco{position:absolute;right:-7%;bottom:6%;width:min(38vw,340px);height:auto;
  fill:none;stroke:var(--oro-fondo);stroke-width:1;vector-effect:non-scaling-stroke;z-index:0;pointer-events:none}
.qd{border-top:1px solid var(--filetto)}
.qd:last-child{border-bottom:1px solid var(--filetto)}
.qd summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:22px 46px 22px 0;position:relative;color:var(--chiaro);
  font-family:Jost;font-weight:600;font-size:clamp(1.05rem,.98rem + .42vw,1.24rem);line-height:1.4;
  transition:color .2s ease-in-out;
}
.qd summary::-webkit-details-marker{display:none}
.qd summary:hover{color:var(--oro)}
.qd__luce{width:14px;height:20px;flex:none;opacity:.2;transition:opacity .35s ease-out}
.qd__luce svg{width:100%;height:100%;fill:none;stroke:var(--oro);stroke-width:1.2;vector-effect:non-scaling-stroke;overflow:visible}
.qd[open] .qd__luce{opacity:1}
.qd[open] .qd__luce circle{fill:rgba(255,233,184,.22)}
.qd__t{flex:1}
.qd__rombo{position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-5.5px;
           border:1px solid var(--oro);transition:transform .4s var(--discesa),background-color .3s}
.qd[open] .qd__rombo{transform:rotate(45deg);background:var(--oro)}
.qd__corpo{overflow:hidden}
.qd__corpo .testo{padding:0 0 24px;max-width:64ch}

/* ═══ 10 · CONTATTI — qui la volta torna, ma dentro la sezione ═══ */
.volta-fine{position:absolute;left:0;right:0;top:0;height:clamp(120px,17vw,260px);z-index:1;pointer-events:none;overflow:hidden}
.volta-fine__fili{position:absolute;left:0;top:0;width:100%;height:100%}
.volta-fine__fili path{fill:none;stroke:var(--oro-medio);stroke-width:1;vector-effect:non-scaling-stroke;
                       stroke-dasharray:1;stroke-dashoffset:1}
.volta-fine__luci{position:absolute;inset:0}

/* ═══ 10 · CONTATTI ═══ */
.contatti{overflow:hidden;padding-top:clamp(130px,15vw,250px);padding-bottom:clamp(120px,14vw,220px)}
.contatti .lead{margin-top:24px}
.indirizzo{margin-top:34px;font-family:Jost;font-size:13.2px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fumo)}

/* ═══ PIEDE ═══ */
.piede{position:relative;z-index:2;padding-top:clamp(56px,7vw,92px);border-top:1px solid var(--oro-fondo)}
.piede__cima{text-align:center;padding-bottom:clamp(40px,5vw,66px)}
.piede__torre{width:clamp(120px,14vw,160px);height:auto;margin-inline:auto;display:block;
              fill:none;stroke:var(--oro);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.piede__filetto{display:block;width:0;height:1px;background:var(--oro);margin:22px auto 18px}
.piede__nome{font-family:Jost;font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.piede__paga{margin-top:12px;color:var(--fumo);max-width:46ch;margin-inline:auto}
.piede__griglia{display:grid;gap:clamp(30px,4vw,48px);padding-bottom:clamp(36px,4vw,56px)}
.piede__col h3{font-family:Jost;font-size:13.2px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:18px}
.piede__col ul{list-style:none;display:grid;gap:4px}
.piede__col a{text-decoration:none;display:inline-block;padding-block:9px;transition:color .2s ease-in-out}
.piede__col a:hover{color:var(--oro)}
.piede__contatti li{display:flex;align-items:flex-start;gap:12px;line-height:1.6;min-height:42px}
.piede__contatti .ico{margin-top:.35em;color:var(--oro)}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--oro-fondo);color:var(--oro);
          transition:border-color .2s ease-in-out,color .2s ease-in-out}
.social a:hover{border-color:var(--oro);color:var(--luce)}
.social .ico{width:20px;height:20px}
.piede__coda{padding-block:24px;border-top:1px solid var(--oro-fondo);
             display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:13px;letter-spacing:.06em}
.piede__firma a{color:var(--oro);text-decoration:none;display:inline-block;padding-block:11px}
.piede__firma a:hover{text-decoration:underline}
.su{position:absolute;right:var(--gutter);top:-23px;width:46px;height:46px;display:grid;place-items:center;
    background:var(--oro);color:var(--su-oro);transition:background-color .2s ease-in-out}
.su:hover{background:var(--luce)}
.su .ico{width:20px;height:20px;stroke-width:1.6}

/* ═══ LA LENTE E IL TEATRO ═══ */
.lente,.teatro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,4vw,48px)}
.lente[hidden],.teatro[hidden]{display:none}
.lente__fondo,.teatro__fondo{position:absolute;inset:0;background:var(--cielo-6);opacity:0}
.lente__corpo,.teatro__corpo{position:relative;z-index:2;text-align:center;max-width:min(1180px,94vw)}
.lente__telaio{position:relative;display:block}
.lente__telaio img{max-width:100%;max-height:72vh;object-fit:contain;margin-inline:auto;display:block}
.angoli--lente{inset:-14px}
.lente figcaption,.teatro figcaption{margin-top:18px;color:var(--fumo);font-size:15px;max-width:64ch;margin-inline:auto}
.lente__comandi{position:absolute;inset:auto 0 clamp(12px,3vw,28px);z-index:3;display:flex;justify-content:center;align-items:center;gap:18px}
.lente__conta{font-family:Jost;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--oro);min-width:5ch}
.lente__x,.teatro__x{position:absolute;top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);z-index:3}
.tondo{width:50px;height:50px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--oro-fondo);
       color:var(--oro);font-family:Jost;font-size:1.05rem;transition:border-color .2s,color .2s,background-color .2s}
.tondo:hover,.tondo:focus-visible{border-color:var(--oro);background:var(--oro);color:var(--su-oro)}
.teatro__telaio{display:block;position:relative}
.teatro__telaio video{max-height:72vh;width:auto;max-width:100%;margin-inline:auto;display:block;border:1px solid var(--oro-primo)}
.teatro__audio{position:absolute;left:50%;bottom:clamp(12px,3vw,28px);transform:translateX(-50%);z-index:3;font-size:13px;min-height:46px}

/* ═══ LE TRE TECNICHE ═══ */
.js .aa{opacity:0;transform:translateY(18px)}
/* VELO — due maschere: la banda scende, l'immagine controtrasla e resta
   ferma. Solo transform, composito anche sulle WebView vecchie. */
.velo{overflow:hidden}
.velo__i{display:block;overflow:hidden}
.js .velo__i{transform:translateY(101%)}
.js .velo__i > img,.js .velo__i > video{transform:translateY(-101%)}
/* i titoli si spezzano subito: niente lampo di testo non animato */
.js .spezza{visibility:hidden}
.js .spezza.pronto{visibility:visible}
.tratti path,.tratti use{stroke-dasharray:1;stroke-dashoffset:1}
.margine use,.voce__arco use,.esclusiva__torre use,.domande__arco use,.piede__torre use,.marchio__torre use{stroke-dasharray:1;stroke-dashoffset:1}

/* ═══════════════ TELEFONO ═══════════════ */
@media (max-width:560px){
  /* sul telefono l'apertura non deve superare lo schermo di più di un
     palmo: i quattro fatti si devono affacciare */
  .apertura{padding-top:calc(var(--testata-h) + 104px)}
  .titolone{font-size:clamp(2.3rem,1.2rem + 4.8vw,3.1rem)}
  .apertura__basso{margin-top:16px;gap:18px}
  .testata{padding-inline:16px;gap:10px}
  .marchio__nome{font-size:13px;letter-spacing:.1em}
  .testata__cta{display:none}
  .azioni .bottone{width:100%}
  .bottone{white-space:normal;text-align:center;line-height:1.3;padding-block:13px}
  .fatti__griglia{border-inline:1px solid var(--oro-fondo)}
  .terne{gap:0}
  .terna + .terna{border-top:1px solid var(--filetto)}
  .terna + .terna::before{display:none}
}

/* ═══════════════ MENU A TENDINA ═══════════════ */
@media (max-width:899px){
  .panino{display:flex}
  .menu{
    position:fixed;inset:var(--testata-h) 0 auto;z-index:65;background:rgba(8,10,16,.98);
    border-bottom:1px solid var(--oro-fondo);padding:10px var(--gutter) 30px;
    display:grid;transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .4s var(--discesa),opacity .3s,visibility .3s;
    max-height:calc(100dvh - var(--testata-h));overflow-y:auto;overflow-x:hidden;
  }
  .menu.aperto{transform:none;opacity:1;visibility:visible}
  .menu__torre{display:block;position:absolute;right:-26%;bottom:-8%;width:58%;height:auto;
    fill:none;stroke:rgba(201,178,116,.09);stroke-width:1.2;vector-effect:non-scaling-stroke;z-index:0;pointer-events:none}
  .menu>ul{flex-direction:column;align-items:stretch;gap:0;position:relative;z-index:2}
  .menu>ul>li{position:relative;padding-left:22px}
  .menu>ul>li::before{content:"";position:absolute;left:5px;top:0;height:50%;width:1px;background:var(--filetto)}
  .menu>ul>li::after{content:"";position:absolute;left:3.5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--oro)}
  .menu>ul>li>a{padding:17px 0;border-bottom:1px solid var(--oro-fondo);font-size:16px}
  .menu>ul>li>a::after{display:none}
  .menu__coda{display:grid;gap:14px;margin-top:26px;justify-items:start;position:relative;z-index:2}
  .menu__coda .bottone{width:100%}
  .menu__tel{font-family:Jost;font-size:13.2px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .panino.aperto span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .panino.aperto span:nth-child(2){opacity:0}
  .panino.aperto span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ═══════════════ DA 640 ═══════════════ */
@media (min-width:640px){
  .fatti__griglia{grid-template-columns:repeat(4,1fr)}
  .tessera{flex-basis:calc((100% - var(--vuoto) * 2) / 3 - .5px)}
  .clip-riga{grid-template-columns:repeat(4,1fr);align-items:start}
  .passi{grid-template-columns:repeat(2,1fr)}
  .richiamo{grid-template-columns:1fr auto;gap:30px}
  .piede__coda{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ═══════════════ DESKTOP ═══════════════ */
@media (min-width:900px){
  :root{--testata-h:80px}
  .panino{display:none}
  .menu{display:flex;align-items:center;margin-inline:auto}
  .apertura__basso{grid-template-columns:minmax(0,.9fr) minmax(0,1.32fr);gap:clamp(26px,3vw,56px)}
  .apertura__video{max-width:740px;margin-inline:0 0}
  .voce__griglia{grid-template-columns:1.05fr .95fr}
  .voce--01 .voce__griglia{grid-template-columns:1fr minmax(0,380px)}
  .voce--01 .voce__media video{aspect-ratio:464/832}
  .voce--03 .voce__griglia{grid-template-columns:1fr minmax(0,360px)}
  .voce--03 .voce__media video{aspect-ratio:9/16}
  .voce__griglia--specchio{grid-template-columns:1fr 1fr}
  .terne{grid-template-columns:repeat(3,1fr)}
  .sestina{grid-template-columns:repeat(3,1fr)}
  .passi{grid-template-columns:repeat(4,1fr)}
  .catena{padding-top:clamp(70px,9vw,140px)}
  .catena__filo{height:clamp(120px,14vw,210px)}
  .piede__griglia{grid-template-columns:repeat(3,1fr)}
  .lista-domande{position:relative;z-index:2}
}

@media (min-width:1200px){
  .tessera{flex-basis:calc((100% - var(--vuoto) * 3) / 4 - .5px)}
}

/* ═══════════════ MENO MOVIMENTO ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  :root{--ora:.5}
  .js .aa{opacity:1;transform:none}
  .js .velo__i{transform:none}
  .js .velo__i > img,.js .velo__i > video{transform:none}
  .js .spezza{visibility:visible}
  .tratti path,.tratti use,.margine use,.voce__arco use,.esclusiva__torre use,.domande__arco use,
  .piede__torre use,.marchio__torre use,.catena__tratto,.recinto__perimetro,.recinto__dentro path,
  .armatura__linee path,.anello circle{stroke-dashoffset:0 !important}
  .volta .lampadina,.volta-fine .lampadina,.filo__luce{opacity:.8 !important}
  .lampadina{animation:none !important}
  .passo__luce,.qd__luce{opacity:1 !important}
  .passo__n{opacity:1 !important}
  .tessera:hover,.voce-e:hover{transform:none}
  .visto h1 em::before,.visto h2 em::before{height:15px}
  .visto h1 em::after,.visto h2 em::after{opacity:1;transform:translateY(15px)}
}