/* Hallmark · macrostructure: Split Studio · genere: editoriale · due mondi carta/palco
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */
@import url("tokens.css?v=7");

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--mist);
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lead-body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-style:normal;font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--track-display);line-height:var(--lead-tight);
  text-wrap:balance;overflow-wrap:break-word;min-width:0}
p{margin:0;max-width:var(--measure)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}

.wrap{width:min(100% - var(--gutter)*2, var(--container));margin-inline:auto}
.sec{padding-block:var(--space-section)}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--accent)}
.lead{font-size:var(--text-lg);line-height:1.45;color:var(--mist);max-width:46ch}

/* ============== palco scuro ============== */
.palco{background:var(--ink);color:var(--heading);border-radius:var(--radius-stage);
  padding:var(--space-8) var(--gutter);position:relative;overflow:hidden}
.palco .eyebrow{color:var(--accent-bright)}
.palco .lead,.palco p{color:var(--mist)}

/* ============== nav ============== */
.masthead{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  transition:background var(--dur-2) var(--ease-out),backdrop-filter var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);border-bottom:1px solid transparent}
.masthead.giu{background:rgb(246 243 238 / .86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.mark{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  letter-spacing:.02em;color:var(--heading);transition:color var(--dur-2) var(--ease-out);white-space:nowrap}
.masthead.giu .mark{color:var(--ink)}
.masthead nav{display:flex;gap:var(--space-5)}
.masthead nav a{font-size:var(--text-xs);letter-spacing:.04em;color:var(--mist);
  padding-block:.4rem;border-bottom:1px solid transparent;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.masthead.giu nav a{color:var(--mist)}
.masthead nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.nav-cta{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  border:1px solid rgb(247 245 241 / .34);border-radius:var(--radius-pill);padding:.55rem 1.05rem;
  color:var(--heading);white-space:nowrap;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.masthead.giu .nav-cta{border-color:var(--accent);color:var(--accent)}
.nav-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:560px){ .nav-cta{display:none} }
@media (max-width:820px){ .masthead nav{display:none} }

/* ============== 1 · hero ============== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:var(--ink);color:var(--heading);overflow:hidden;padding-block:var(--nav-h) var(--space-9)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgb(13 15 18 / .92) 0%, rgb(13 15 18 / .74) 34%, rgb(13 15 18 / .18) 66%, rgb(13 15 18 / .05) 100%),
    linear-gradient(180deg, rgb(13 15 18 / .72) 0%, rgb(13 15 18 / .18) 30%, rgb(13 15 18 / .28) 64%, rgb(13 15 18 / .92) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero .wrap .sub,.hero .wrap .badges{max-width:min(100%,46ch)}
@media (min-width:1000px){ .hero .wrap .sub,.hero .wrap .badges{max-width:52%} }
.hero h1{font-size:clamp(2.8rem,8.4vw,8.6rem);text-transform:uppercase;letter-spacing:-.045em;line-height:.86;white-space:nowrap}
.hero h1 .thin{font-weight:300;color:var(--mist);display:block}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.badge{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:700;
  border:1px solid rgb(247 245 241 / .28);border-radius:var(--radius-pill);padding:.42rem .9rem;
  background:rgb(13 15 18 / .35);backdrop-filter:blur(8px);white-space:nowrap}
.badge:nth-child(2){border-color:var(--accent-bright);color:var(--accent-bright)}
.hero .sub{margin-top:var(--space-4);font-size:var(--text-md);color:var(--mist);max-width:38ch}
.hero .sub b{color:var(--heading);font-weight:700}
.cta{display:inline-block;margin-top:var(--space-6);background:var(--accent);color:var(--accent-ink);
  font-size:var(--text-xs);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  padding:1rem 1.7rem;border-radius:var(--radius-pill);position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.cta:hover{background:var(--accent-bright);transform:translateY(-2px)}
.figures{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-5);
  margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid rgb(247 245 241 / .16)}
.figs{display:flex;gap:var(--space-7);flex:1 1 auto;min-width:0}
.fig b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);line-height:1;letter-spacing:var(--track-display)}
.fig span{display:block;margin-top:.35rem;font-size:var(--text-xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--fog);white-space:nowrap}
.socials{display:flex;gap:var(--space-5);font-size:var(--text-xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--fog)}
.socials a:hover{color:var(--accent-bright)}
@media (max-width:700px){
  .socials{display:none}
  .figs{gap:var(--space-5);justify-content:space-between;width:100%}
  .fig span{font-size:10px;letter-spacing:.08em;white-space:normal;max-width:10ch}
}
.scroll-hint{position:absolute;left:50%;bottom:var(--space-3);translate:-50% 0;z-index:2;
  font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog)}

/* ============== 2 · manifesto (carta) ============== */
.manifesto{padding-block:var(--space-section)}
.manifesto-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center}
@media (min-width:900px){ .manifesto-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,340px);gap:var(--space-9)} }
.manifesto h2{font-size:var(--text-display-s);text-transform:uppercase}
.manifesto h2 .thin{display:block;font-weight:300;text-transform:none;color:var(--accent);
  font-size:.56em;line-height:1.14;letter-spacing:var(--track-tight);margin-top:.4em}
.manifesto p{margin-top:var(--space-5);color:var(--mist)}
.manifesto-reel video{width:100%;border-radius:var(--radius-md);background:#000;box-shadow:var(--shadow-card)}

/* ============== 3 · confronto (palco a tutta pagina) ============== */
.stage{position:relative;min-height:88svh;overflow:hidden;background:var(--ink);color:var(--heading);
  display:flex;align-items:flex-end;touch-action:pan-y;user-select:none}
.stage .shot{position:absolute;inset:0}
.stage .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .shot .after{clip-path:inset(0 0 0 var(--pos,50%))}
.divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:rgb(247 245 241 / .55);z-index:2;pointer-events:none}
.grip{position:absolute;top:50%;left:var(--pos,50%);translate:-50% -50%;z-index:3;width:64px;height:64px;border-radius:50%;
  border:1px solid rgb(247 245 241 / .38);background:rgb(13 15 18 / .34);backdrop-filter:blur(10px);
  display:grid;place-items:center;pointer-events:none;box-shadow:0 0 0 10px rgb(247 245 241 / .05)}
.stage .wrap{position:relative;z-index:4;padding-bottom:var(--space-8)}
.stage h2{font-size:var(--text-display-s);text-transform:uppercase}
.stage h2 .thin{font-weight:300;color:var(--mist)}
.stage .sub{margin-top:var(--space-3);color:var(--mist);max-width:42ch}
.glass{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;z-index:4;width:280px;
  background:rgb(29 33 38 / .5);backdrop-filter:blur(16px);border:1px solid rgb(247 245 241 / .16);
  border-radius:var(--radius-md);padding:var(--space-5)}
.glass h2{font-size:var(--text-sm);letter-spacing:var(--track-caps);text-transform:uppercase;margin-bottom:var(--space-2)}
.glass p{font-size:var(--text-sm);color:var(--mist)}
.glass .flag{display:inline-block;margin-top:var(--space-3);font-size:var(--text-xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--accent-bright);border:1px solid var(--accent-bright);padding:.2rem .5rem;border-radius:var(--radius-sm)}
@media (max-width:1100px){ .glass{display:none} }
.rail{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;z-index:5;display:flex;flex-direction:column;align-items:flex-end}
@media (min-width:1101px){ .rail{right:calc(var(--gutter) + 310px)} }
.rail button{background:none;border:0;cursor:pointer;color:var(--fog);font-size:var(--text-xs);
  letter-spacing:var(--track-caps);display:flex;align-items:center;gap:.7rem;padding:.8rem .2rem;min-height:44px;
  transition:color var(--dur-1) var(--ease-out)}
.rail button::after{content:"";width:20px;height:1px;background:currentColor;transition:width var(--dur-2) var(--ease-out)}
.rail button[aria-selected="true"]{color:var(--accent-bright)}
.rail button[aria-selected="true"]::after{width:46px}
.drag-hint{position:absolute;left:50%;bottom:var(--space-4);translate:-50% 0;z-index:4;font-size:var(--text-xs);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog)}

/* ============== planimetria ============== */
.plan{padding-block:var(--space-section)}
.plan-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-7)}
.plan-head h2{font-size:var(--text-2xl);text-transform:uppercase}
.plan-head p{color:var(--fog);font-size:var(--text-sm);max-width:34ch}
.plan-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:start}
@media (min-width:960px){ .plan-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-9)} }
.plan-box{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-card)}
.plan-box img.map{width:100%}
.plan-svg{position:absolute;inset:0;width:100%;height:100%}
.plan-svg polygon{fill:rgb(14 124 123 / .07);stroke:var(--accent);stroke-width:.32;cursor:pointer;
  transition:fill var(--dur-2) var(--ease-out),stroke-width var(--dur-1) var(--ease-out)}
.plan-svg polygon:hover,.plan-svg polygon:focus-visible{fill:rgb(14 124 123 / .22);stroke-width:.66;outline:none}
.pin{pointer-events:none}
.pin circle{fill:var(--accent)}
.pin circle.halo{fill:none;stroke:var(--accent);stroke-width:.3;transform-box:fill-box;transform-origin:center;animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{r:1.1;opacity:.75}70%{r:3.6;opacity:0}100%{opacity:0}}
.pin text{fill:#fff;font-family:var(--font-display);font-weight:700;font-size:1.5px;text-anchor:middle}
.plan-side h3{font-size:var(--text-lg);text-transform:uppercase;margin-bottom:var(--space-2)}
.plan-side p{color:var(--fog);font-size:var(--text-sm);margin-bottom:var(--space-6)}
.plan-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.plan-list button{display:flex;align-items:center;gap:var(--space-5);width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:var(--space-5) var(--space-2);
  cursor:pointer;min-height:64px;transition:background var(--dur-1) var(--ease-out),padding-left var(--dur-2) var(--ease-out)}
.plan-list button:hover{background:var(--surface-2);padding-left:var(--space-4)}
.plan-list .n{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);color:var(--accent);min-width:2ch}
.plan-list .nm{flex:1;font-size:var(--text-md)}
.plan-list .mq{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog)}
.plan-list .go{color:var(--fog);transition:transform var(--dur-2) var(--ease-out),color var(--dur-1) var(--ease-out)}
.plan-list button:hover .go{transform:translateX(5px);color:var(--accent)}
.peek{position:fixed;z-index:70;width:220px;border-radius:var(--radius-md);overflow:hidden;pointer-events:none;
  box-shadow:var(--shadow-card);background:var(--surface);border:1px solid var(--line);
  opacity:0;transform:translate(-50%,-108%) scale(.96);transition:opacity var(--dur-1),transform var(--dur-1) var(--ease-out)}
.peek.on{opacity:1;transform:translate(-50%,-114%) scale(1)}
.peek img{width:100%;aspect-ratio:3/2;object-fit:cover}
.peek b{display:block;padding:.55rem .7rem .1rem;font-size:var(--text-sm)}
.peek span{display:block;padding:0 .7rem .6rem;font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent)}
@media (hover:none){ .peek{display:none} }

/* popup stanza */
dialog.room{border:0;padding:0;background:transparent;max-width:min(94vw,980px);width:100%;color:var(--ink)}
dialog.room::backdrop{background:rgb(13 15 18 / .88);backdrop-filter:blur(8px)}
.room-card{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-deep)}
.room-shot{margin:0;position:relative;background:#000}
.room-shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:640px){ .room-shot img{aspect-ratio:4/3} }
.room-shot figcaption{position:absolute;left:var(--space-4);bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3);
  background:rgb(13 15 18 / .62);backdrop-filter:blur(10px);border-radius:var(--radius-sm);padding:.5rem .75rem}
.room-shot figcaption svg{width:46px;height:62px}
.room-shot figcaption polygon{fill:rgb(255 255 255 / .16);stroke:rgb(255 255 255 / .3);stroke-width:.8}
.room-shot figcaption polygon.on{fill:var(--accent-bright);stroke:var(--accent-bright)}
.room-shot figcaption span{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:#fff}
.room-txt{padding:var(--space-5) var(--space-6) var(--space-6);display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:var(--space-5)}
.room-txt h3{font-size:var(--text-xl);text-transform:uppercase}
.room-txt p{color:var(--mist);font-size:var(--text-sm);max-width:46ch;margin-top:.35rem}
.room-nav{display:flex;gap:var(--space-2)}
.room-arrow,.room-close{background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-pill);
  cursor:pointer;min-height:46px;transition:border-color var(--dur-1),background var(--dur-1)}
.room-arrow{width:46px}
.room-close{padding:0 1.1rem;font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase}
.room-arrow:hover,.room-close:hover{border-color:var(--accent);background:var(--accent-tint)}

/* ============== recensioni ============== */
.rec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-7)}
.rec-head h2{font-size:var(--text-2xl);text-transform:uppercase}
.rec-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:820px){ .rec-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)} }
.rec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-5);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
.rec:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.rec .stelle{color:var(--accent);letter-spacing:.2em}
.rec blockquote{margin:0;font-size:var(--text-md);line-height:1.5}
.rec figcaption{margin-top:auto;font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog)}
.rec.vuota{border-style:dashed;justify-content:center;text-align:center;min-height:170px;color:var(--fog);font-size:var(--text-sm)}

/* ============== vendi + form (palco) ============== */
.vendi{padding-block:var(--space-section)}
.vendi-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:start}
@media (min-width:960px){ .vendi-grid{grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:var(--space-9)} }
.vendi h2{font-size:var(--text-display-s);text-transform:uppercase}
.vendi h2 .thin{display:block;font-weight:300;color:var(--accent-bright)}
.vendi-punti{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;flex-direction:column;gap:var(--space-3)}
.vendi-punti li{position:relative;padding-left:1.8rem;color:var(--mist)}
.vendi-punti li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:99px;background:var(--accent-bright)}
.modulo{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.mod-top{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent-bright);font-weight:700}
.modulo label{display:flex;flex-direction:column;gap:.45rem;font-size:var(--text-xs);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--fog)}
.modulo label em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75}
.modulo input,.modulo textarea{font-size:var(--text-base);color:var(--heading);background:var(--elevated);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem .95rem;min-height:50px;
  text-transform:none;letter-spacing:0;resize:vertical;transition:border-color var(--dur-1),background var(--dur-1)}
.modulo input:focus,.modulo textarea:focus{outline:none;border-color:var(--accent-bright);background:var(--ink)}
.modulo input::placeholder,.modulo textarea::placeholder{color:var(--fog)}
.modulo input[aria-invalid="true"]{border-color:var(--accent-deep)}
.modulo button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
  padding:1.05rem 1.5rem;min-height:54px;cursor:pointer;transition:background var(--dur-1)}
.modulo button:hover{background:var(--accent-bright)}
.mod-nota{font-size:var(--text-xs);color:var(--fog);text-align:center}

/* ============== open house ============== */
.openhouse{padding-block:var(--space-section)}
.oh-head{margin-bottom:var(--space-7)}
.oh-head h2{font-size:var(--text-display-s);text-transform:uppercase;margin:var(--space-3) 0}
.oh-head h2 .thin{display:block;font-weight:300;color:var(--accent)}
.oh-box{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media (min-width:960px){ .oh-box{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-9)} }
.oh-tappe{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.oh-tappe button{display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);color:var(--fog);padding:var(--space-4) var(--space-2);
  cursor:pointer;min-height:60px;transition:color var(--dur-1),padding-left var(--dur-2) var(--ease-out)}
.oh-tappe button:hover{color:var(--mist);padding-left:var(--space-3)}
.oh-tappe button[aria-selected="true"]{color:var(--ink)}
.oh-tappe .k{font-family:var(--font-display);font-weight:700;color:var(--line);min-width:2.4ch}
.oh-tappe button[aria-selected="true"] .k{color:var(--accent)}
.oh-scena{background:var(--ink);color:var(--heading);border-radius:var(--radius-stage);
  padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-6);min-height:340px;position:relative;overflow:hidden}
.oh-scena::after{content:"";position:absolute;right:-10%;top:-20%;width:60%;height:80%;border-radius:50%;
  background:radial-gradient(circle, var(--line-accent) 0%, transparent 68%);pointer-events:none}
.oh-num{display:flex;align-items:baseline;gap:var(--space-4);position:relative;z-index:2}
.oh-num b{font-family:var(--font-display);font-weight:700;font-size:var(--text-numeral);line-height:.82;
  color:var(--accent-bright);letter-spacing:-.05em}
.oh-num span{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog);max-width:16ch}
.oh-testo{position:relative;z-index:2}
.oh-testo h3{font-size:var(--text-xl);text-transform:uppercase;margin-bottom:var(--space-2)}
.oh-testo p{color:var(--mist);font-size:var(--text-sm)}
.oh-barra{height:3px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:auto;position:relative;z-index:2}
.oh-barra i{display:block;height:100%;width:0;background:var(--accent-bright);border-radius:99px;
  transition:width 700ms var(--ease-out);box-shadow:0 0 14px var(--accent-bright)}

/* ============== metodo ============== */
.band{padding-block:var(--space-section)}
.band h2{font-size:var(--text-2xl);text-transform:uppercase;margin-bottom:var(--space-7)}
.steps{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)} }
.step{border-top:2px solid var(--accent);padding-top:var(--space-4)}
.step h3{font-size:var(--text-lg);margin-bottom:var(--space-2);letter-spacing:var(--track-tight)}
.step p{color:var(--mist);font-size:var(--text-sm)}

/* ============== citazione (palco) ============== */
.say{padding-block:var(--space-section)}
.say blockquote{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);
  line-height:1.08;letter-spacing:var(--track-display);max-width:20ch}
.say blockquote em{font-style:normal;color:var(--accent-bright)}
.say cite{display:block;margin-top:var(--space-6);font-style:normal;font-size:var(--text-xs);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fog)}

/* ============== chiusura ============== */
.colophon{border-top:1px solid var(--line);padding-block:var(--space-5) var(--space-8);
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);justify-content:space-between;
  font-size:var(--text-xs);color:var(--fog)}

dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,420px);width:100%}
dialog.lightbox::backdrop{background:rgb(13 15 18 / .9)}
dialog.lightbox video{width:100%;border-radius:var(--radius-md)}
dialog.lightbox .close{position:absolute;top:-2.4rem;right:0;background:none;border:0;color:#fff;
  font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:1ms!important;animation:none!important}
}

/* ===== rifiniture premium: alone, profondità, vetro ===== */
.palco,.oh-scena{box-shadow:var(--shadow-deep)}
.palco::after,.oh-scena::after{content:"";position:absolute;right:-12%;top:-24%;width:62%;height:86%;
  border-radius:50%;background:var(--glow-soft);pointer-events:none}
.modulo{box-shadow:var(--shadow-card)}
.modulo:focus-within{box-shadow:var(--shadow-glow)}
.rec{background:var(--surface);border-color:var(--line)}
.rec:hover{box-shadow:var(--shadow-glow);border-color:var(--line-accent)}
.plan-box{background:var(--surface);box-shadow:var(--shadow-card)}
.plan-box:hover{box-shadow:var(--shadow-glow)}
.cta,.modulo button{box-shadow:0 10px 30px -12px #9A6AE699}
.cta:hover,.modulo button:hover{box-shadow:0 16px 40px -12px #9A6AE6cc}
.room-card{background:var(--surface);box-shadow:var(--shadow-deep)}
.step{border-top-color:var(--accent)}
.oh-num b{text-shadow:0 0 60px #9A6AE666}
.hero h1{text-shadow:0 4px 60px #00000099}
.badge{background:#0C0E1159}
.masthead.giu{background:#08090Bd9;border-bottom-color:var(--line)}
.masthead.giu .mark,.masthead.giu nav a{color:var(--mist)}
.peek{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow-deep)}
.plan-list button:hover{background:var(--surface-2)}
.oh-tappe button:hover{color:var(--mist)}
.oh-tappe button[aria-selected="true"]{color:var(--heading)}
.oh-tappe .k{color:var(--dim)}
.plan-svg polygon{fill:#9A6AE61f;stroke:var(--accent)}
.plan-svg polygon:hover,.plan-svg polygon:focus-visible{fill:#9A6AE640}
.pin circle{fill:var(--accent)} .pin circle.halo{stroke:var(--accent)}
.pin text{fill:var(--accent-ink)}
.room-shot figcaption polygon.on{fill:var(--accent);stroke:var(--accent)}

/* niente fantasma di trascinamento sulle immagini */
.stage img,.plan-box img,.peek img,.room-shot img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.stage.dragging{cursor:ew-resize}

/* ================= PLANIMETRIA · versione ricca ================= */
.plan-head{align-items:flex-start}
.plan-head h2{font-size:var(--text-display-s);margin-top:var(--space-3)}
.plan-grid{grid-template-columns:1fr}
@media (min-width:1000px){ .plan-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--space-8)} }

/* la pianta come un foglio appoggiato */
.plan-foglio{position:relative}
.plan-foglio::before{content:"";position:absolute;inset:-6% -4% -10%;border-radius:var(--radius-lg);
  background:var(--glow-soft);opacity:.5;pointer-events:none}
.plan-box{position:relative;border-radius:var(--radius-md);overflow:hidden;background:#EFEAE1;
  box-shadow:var(--shadow-deep);border:1px solid var(--line);transition:box-shadow var(--dur-3) var(--ease-out)}
.plan-box:hover{box-shadow:var(--shadow-glow),var(--shadow-deep)}
.plan-scala{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);
  font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dim)}
.plan-scala span{flex:1;height:1px;background:var(--line-strong);max-width:120px}

.plan-svg polygon{fill:transparent;stroke:transparent;stroke-width:.5;cursor:pointer;
  transition:fill var(--dur-2) var(--ease-out),stroke var(--dur-2) var(--ease-out)}
.plan-svg polygon.viva{fill:#9A6AE652;stroke:var(--accent-bright)}
.pin circle{fill:var(--accent);transition:r var(--dur-2) var(--ease-out)}
.pin.viva circle{fill:var(--accent-bright)}

/* pannello anteprima grande */
.plan-vista{margin:0 0 var(--space-5);border-radius:var(--radius-md);overflow:hidden;position:relative;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.plan-vista img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.plan-vista.cambia img{opacity:0;transform:scale(1.04)}
.plan-vista figcaption{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--line)}
.vista-n{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--accent);line-height:1}
.vista-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.vista-t b{font-size:var(--text-md);color:var(--heading)}
.vista-t em{font-style:normal;font-size:var(--text-sm);color:var(--fog);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vista-mq{font-size:var(--text-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dim);white-space:nowrap}

.plan-list button.viva{background:var(--surface-2);padding-left:var(--space-4)}
.plan-list button.viva .n,.plan-list button.viva .go{color:var(--accent-bright)}