/* ═══════════════════════════════════════════════
   PEPTIDIUM — vetrina
   Colonna narrativa a sinistra, sequenza fissa a destra.
   ═══════════════════════════════════════════════ */

:root{
  --ink:      #050403;
  --ink-2:    #0a0806;
  --ink-3:    #100c08;
  --gold:     #d9a441;
  --gold-lt:  #f2d79b;
  --gold-dp:  #8a5e1e;
  --marble:   #ede7dc;
  --muted:    rgba(237,231,220,.56);
  --faint:    rgba(237,231,220,.30);
  --line:     rgba(217,164,65,.20);
  --line-2:   rgba(237,231,220,.10);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --viz-w: 46vw;               /* larghezza della colonna immagine */
  --rail-w: 54vw;              /* larghezza della colonna testo */
  --pad:  clamp(22px, 4.4vw, 76px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Colore ambientale campionato dal frame corrente.
     Aggiornato dal JS a ogni fotogramma: quando la sequenza vira
     all'arancione, tutta la pagina vira con lei. */
  --amb: 12, 9, 6;             /* r,g,b del frame */
  --amb-a: 0;                  /* quanto il frame è illuminato: 0 → 1 */
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--ink);
  color:var(--marble);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-loading{ overflow:hidden; height:100vh }

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
svg{ display:block }
::selection{ background:rgba(217,164,65,.28); color:#fff }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad) }

/* ── grana ─────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none } }

/* ═══════════ LOADER ═══════════ */
.loader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--ink); transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none }
.loader__inner{ text-align:center; width:min(320px,80vw) }
.loader__mark{ width:92px; aspect-ratio:1; margin:0 auto 24px; opacity:.96 }
.loader__mark img{
  display:block; width:100%; height:100%; object-fit:contain;
  animation:pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:.5;transform:scale(.97)} 50%{opacity:1;transform:scale(1)} }
.loader__word{
  font-size:11px; font-weight:400; letter-spacing:.52em; text-indent:.52em;
  opacity:.9; margin-bottom:30px;
}
.loader__bar{ height:1px; background:rgba(237,231,220,.13); overflow:hidden; margin-bottom:16px }
.loader__bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold-lt));
  transition:width .35s var(--ease);
}
.loader__pct{
  font-family:var(--serif); font-size:26px; font-weight:300;
  color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.loader__note{
  margin-top:8px; font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--faint);
}

/* ═══════════════════════════════════════════════
   COLONNA IMMAGINE — fissa, a destra, frame intero
   ═══════════════════════════════════════════════ */
/* La tela occupa sempre l'intero schermo: è il disegno al suo interno
   che passa dalla colonna destra al pieno formato. Così l'espansione
   non tocca il layout e resta fluida. */
.viz{
  position:fixed; inset:0; z-index:1;
  width:100vw; height:100vh; height:100svh;
  pointer-events:none;
  will-change:opacity;
}
.viz__inner{ position:absolute; inset:0 }

#seq{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  /* Finché il fotogramma vive nella colonna, il suo margine sinistro
     viene dissolto anziché tagliato. --edge è il punto in cui l'immagine
     comincia davvero, --feather l'ampiezza della dissolvenza: entrambi
     calcolati dal JS e portati a zero quando si va a piena pagina. */
  -webkit-mask-image:linear-gradient(to right,
      transparent var(--edge, 0%),
      #000 calc(var(--edge, 0%) + var(--feather, 0%)),
      #000 100%);
  mask-image:linear-gradient(to right,
      transparent var(--edge, 0%),
      #000 calc(var(--edge, 0%) + var(--feather, 0%)),
      #000 100%);
}

/* ── ALONE AMBIENTALE ──────────────────────────
   Strato fisso dietro l'intera pagina. Prende il colore del frame
   e lo diffonde verso sinistra fino a spegnersi nel nero: è ciò che
   elimina lo stacco quando la sequenza si accende di arancione. */
.amb{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--amb-a);
  background:
    linear-gradient(to right,
      rgba(var(--amb), 0)    0%,
      rgba(var(--amb), .05) 34%,
      rgba(var(--amb), .20) 62%,
      rgba(var(--amb), .46) 84%,
      rgba(var(--amb), .70) 100%),
    radial-gradient(ellipse 62% 78% at 82% 48%, rgba(var(--amb), .40), transparent 72%);
}
@media (max-width:900px){
  .amb{
    background:
      linear-gradient(to bottom,
        rgba(var(--amb), .34) 0%,
        rgba(var(--amb), .16) 42%,
        rgba(var(--amb), 0) 78%);
  }
}

/* alone caldo dietro il soggetto */
.viz__glow{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 58% 48% at 50% 44%, rgba(var(--amb), .34), transparent 70%);
  opacity:calc(var(--amb-a) * .9 + .1);
}

/* Velo di leggibilità.
   In colonna raccorda il margine dell'immagine; a piena pagina diventa
   la penombra su cui poggia il testo. --exp (0 → 1) governa il passaggio. */
.viz__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* penombra sotto la colonna di testo, cresce con l'espansione */
    linear-gradient(to right,
      rgba(5,4,3, calc(.20 + var(--exp, 0) * .72)) 0%,
      rgba(5,4,3, calc(.12 + var(--exp, 0) * .58)) 26%,
      rgba(5,4,3, calc(.04 + var(--exp, 0) * .26)) 46%,
      transparent 66%),
    /* raccordo caldo del margine, si spegne a piena pagina */
    linear-gradient(to right,
      rgba(var(--amb), calc(.42 * (1 - var(--exp, 0)))) 0%,
      rgba(var(--amb), calc(.16 * (1 - var(--exp, 0)))) 12%,
      transparent 28%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 14%, transparent 86%, var(--ink) 100%);
}

/* percorso narrativo */
.viz__journey{
  position:absolute; right:var(--pad); bottom:34px;
  display:flex; align-items:center; gap:12px;
  font-size:9.5px; letter-spacing:.18em; color:var(--faint);
  text-transform:uppercase;
}
.viz__stage, .viz__step{
  display:block; position:relative; height:12px; overflow:hidden;
}
.viz__stage{ width:90px }
.viz__step{ width:20px }
.viz__stage > span, .viz__step > span{
  position:absolute; inset:0;
  opacity:0; transform:translateY(110%);
  transition:opacity .38s var(--ease), transform .48s var(--ease);
}
.viz__stage > span{ text-align:right; color:var(--gold-lt) }
.viz__journey[data-stage="0"] [data-stage-label="0"],
.viz__journey[data-stage="0"] [data-stage-step="0"],
.viz__journey[data-stage="1"] [data-stage-label="1"],
.viz__journey[data-stage="1"] [data-stage-step="1"],
.viz__journey[data-stage="2"] [data-stage-label="2"],
.viz__journey[data-stage="2"] [data-stage-step="2"]{
  opacity:1; transform:translateY(0);
}
.viz__rule{
  width:clamp(60px,6vw,92px); height:1px; background:rgba(237,231,220,.14);
  display:block; position:relative;
}
.viz__rule i{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold-lt)); display:block;
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,4,3,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-2);
  padding-block:13px;
}
.nav__brand{ display:flex; align-items:center; gap:11px }
.nav__glyph{
  display:block; width:32px; height:32px; object-fit:cover;
  border-radius:50%; flex:none;
}
.nav__brand span{
  font-size:12px; font-weight:500; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
}
.nav__links{ display:flex; gap:32px }
.nav__links a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); position:relative; padding-block:4px;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--marble) }
.nav__links a:hover::after{ width:100% }
.nav__actions{ display:flex; align-items:center; gap:10px; flex:none }
@media (max-width:1000px){ .nav__links{ display:none } }
@media (max-width:640px){
  .nav{ gap:12px }
  .nav__brand span{ display:none }
  .nav__actions{ gap:8px }
  .nav__actions .btn{ padding:9px 12px; font-size:9.5px }
  .nav__actions .btn svg{ display:none }
}

/* ═══════════ BOTTONI ═══════════ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:2px;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:#1a1206;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s;
}
.btn svg{ width:14px; flex:none }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(217,164,65,.5); filter:brightness(1.06) }
.btn--sm{ padding:9px 17px; font-size:10.5px }
.btn--lg{ padding:16px 32px; font-size:12px; letter-spacing:.16em }
.btn--ghost{ background:transparent; color:var(--marble); border-color:rgba(237,231,220,.22) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lt); box-shadow:none }

/* ═══════════ TIPOGRAFIA ═══════════ */
.kicker, .eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:24px;
}
.kicker i, .eyebrow i{ width:34px; height:1px; background:var(--gold); opacity:.55; display:block }
.eyebrow--c{ justify-content:center }

.chapmark{ display:flex; align-items:center; gap:16px; margin-bottom:22px }
.chapmark__n{
  font-family:var(--serif); font-size:15px; letter-spacing:.3em; color:var(--gold);
}
.chapmark__l{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--faint);
  position:relative; padding-left:18px;
}
.chapmark__l::before{
  content:''; position:absolute; left:0; top:50%; width:10px; height:1px;
  background:var(--faint);
}

.hero__t{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(42px,5.4vw,82px); line-height:1.02; letter-spacing:-.022em;
}
.hero__t em{ font-style:italic; color:var(--gold-lt) }
.hero__t .ln{ display:block; overflow:hidden }
.hero__t .ln > span{ display:block; will-change:transform }

.h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,3.5vw,54px); line-height:1.08; letter-spacing:-.016em;
  margin-bottom:26px;
}
.h2 em{ font-style:italic; color:var(--gold-lt) }

.big{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,5vw,76px); line-height:1; letter-spacing:-.025em;
  margin-bottom:26px;
}
.big em{ font-style:italic; color:var(--gold-lt) }

.lede{
  margin-top:30px; max-width:42ch;
  font-size:clamp(14.5px,1.05vw,16.5px); color:var(--muted); line-height:1.78;
}

/* richiamo all'azione dentro l'apertura */
.hero__cta{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:36px;
}
.hero__note{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}

/* collegamento sottolineato dalla riga che si allunga */
.linkline{
  display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
}
.linkline i{
  width:28px; height:1px; background:var(--gold); display:block;
  transition:width .45s var(--ease);
}
.linkline:hover i{ width:52px }
.p{
  font-size:clamp(14px,1vw,15.5px); color:var(--muted);
  max-width:50ch; line-height:1.82; margin-bottom:20px;
}
.p--c{ margin-inline:auto; text-align:center }
.p--tight{ margin-top:26px; margin-bottom:0; color:var(--faint); font-size:13px }
.micro{ font-size:10.5px; letter-spacing:.06em; color:var(--faint); line-height:1.6 }
.micro--c{ text-align:center }

.pull{
  margin:34px 0; padding-left:24px; border-left:1px solid var(--line);
}
.pull p{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); font-weight:300;
  line-height:1.34; color:var(--marble);
}
.pull em{ font-style:italic; color:var(--gold-lt) }

.sign{ display:flex; align-items:center; gap:14px; margin-top:32px }
.sign__rule{ width:44px; height:1px; background:var(--gold); opacity:.6 }
.sign__txt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint) }

/* ═══════════════════════════════════════════════
   COLONNA NARRATIVA
   ═══════════════════════════════════════════════ */
.rail{
  position:relative; z-index:2;
  width:var(--rail-w);
  padding-inline:var(--pad);
}
.blk{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(80px,12vh,150px);
}
.blk__in{ width:100%; max-width:640px }
.blk--hero{ min-height:100vh; min-height:100svh }
.blk--end{ padding-bottom:clamp(120px,18vh,220px) }

/* ── indizio di scroll ── */
.scrollhint{
  display:flex; align-items:center; gap:14px; margin-top:56px;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
  transition:opacity .6s var(--ease);
}
.scrollhint.is-hidden{ opacity:0 }
.scrollhint i{
  width:52px; height:1px; display:block; position:relative; overflow:hidden;
  background:rgba(237,231,220,.14); flex:none;
}
.scrollhint i::after{
  content:''; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background:var(--gold); animation:trickle 2.2s var(--ease) infinite;
}
@keyframes trickle{ 0%{left:-100%} 60%,100%{left:100%} }

/* ── fatti ── */
.facts{ display:flex; gap:38px; margin-top:34px; list-style:none; flex-wrap:wrap }
.facts li{ display:flex; flex-direction:column; gap:5px }
.facts b{ font-family:var(--serif); font-size:26px; font-weight:400; color:var(--gold-lt) }
.facts span{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint) }

/* ── elenco con spunta ── */
.ticks{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:15px }
.ticks li{
  position:relative; padding-left:28px;
  font-size:13.5px; color:var(--muted); line-height:1.62;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:.58em;
  width:11px; height:5px;
  border-left:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(-45deg);
}
.ticks--tight{ margin-top:26px; gap:12px }

/* ── cifre ── */
.metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
.metric{ background:var(--ink); padding:clamp(24px,2.6vw,36px) clamp(18px,2vw,28px) }
.metric__row{ display:flex; align-items:baseline; gap:4px; margin-bottom:16px }
.metric__v{
  font-family:var(--serif); font-size:clamp(38px,4vw,58px); font-weight:300;
  line-height:1; color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.metric__u{ font-family:var(--serif); font-size:clamp(16px,1.6vw,22px); color:var(--gold); opacity:.7 }
.metric__l{ font-size:10.5px; letter-spacing:.1em; color:var(--faint); line-height:1.65; text-transform:uppercase }
@media (max-width:520px){ .metrics{ grid-template-columns:1fr } }

/* ── metodo ── */
.steps{ list-style:none; margin-top:12px; border-top:1px solid var(--line-2) }
.step{
  display:flex; gap:clamp(18px,2.4vw,34px); align-items:flex-start;
  padding:26px 0; border-bottom:1px solid var(--line-2);
  transition:border-color .5s var(--ease);
}
.step:hover{ border-bottom-color:var(--line) }
.step__n{
  font-family:var(--serif); font-size:13px; letter-spacing:.26em;
  color:var(--gold); opacity:.75; padding-top:6px; flex:none;
}
.step__t{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,26px); margin-bottom:9px }
.step__p{ font-size:13px; color:var(--muted); line-height:1.78; max-width:46ch }

/* ── certificato ── */
.coa{
  margin-top:34px;
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2) 60%,var(--ink));
  border:1px solid var(--line); padding:clamp(22px,2.6vw,32px);
  position:relative; overflow:hidden;
}
.coa::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold-lt),var(--gold-dp));
}
.coa__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding-bottom:20px; border-bottom:1px solid var(--line-2); margin-bottom:18px;
}
.coa__brand{ font-size:11px; font-weight:500; letter-spacing:.36em; text-indent:.36em }
.coa__sub{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold-lt); margin-top:5px }
.coa__seal{ width:38px; color:var(--gold); opacity:.85; flex:none }
.coa__r{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px dashed rgba(237,231,220,.07);
}
.coa__r span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
.coa__r b{
  font-family:var(--serif); font-size:16px; font-weight:400; color:var(--marble);
  font-variant-numeric:tabular-nums; text-align:right;
}
.coa__chart{ margin-top:22px }
.coa__chart svg{ width:100%; height:70px; overflow:visible }
.coa__base{ stroke:rgba(237,231,220,.14); stroke-width:1; fill:none }
.coa__trace{
  stroke:var(--gold-lt); stroke-width:1.3; fill:none; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(242,215,155,.35));
}
.coa__axis{
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.coa + .micro{ margin-top:14px }

/* ═══════════ CONTATTO ═══════════ */
.cta{
  position:relative; z-index:3; padding:clamp(100px,14vw,190px) 0; overflow:hidden;
  border-top:1px solid var(--line-2); background:var(--ink);
}
.cta__bg{ position:absolute; inset:0; z-index:0 }
.cta__bg img{ width:100%; height:122%; object-fit:cover; opacity:.42; will-change:transform }
.cta__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,4,3,.5), rgba(5,4,3,.95) 78%),
    linear-gradient(to bottom, var(--ink), transparent 22%, transparent 78%, var(--ink));
}
.cta__wrap{ position:relative; z-index:2; text-align:center }
.cta__h{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,6vw,78px); line-height:1.04; letter-spacing:-.022em; margin-bottom:24px;
}
.cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:38px 0 22px }

/* ═══════════ FOOTER ═══════════ */
.foot{
  position:relative; z-index:3; background:var(--ink);
  padding:clamp(56px,7vw,90px) 0 34px; border-top:1px solid var(--line-2);
}
.foot__top{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap; padding-bottom:36px;
}
.foot__brand{ display:flex; align-items:center; gap:11px }
.foot__brand span{
  font-size:12px; font-weight:500; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
}
.foot__nav{ display:flex; gap:26px; flex-wrap:wrap }
.foot__nav a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  transition:color .35s var(--ease);
}
.foot__nav a:hover{ color:var(--gold-lt) }

/* Nota di legge: deve esserci, non deve pesare.
   Stessa discrezione di un link "privacy" a piè di pagina. */
.disclaimer{
  margin-top:18px;
  font-size:9.5px; line-height:1.65; letter-spacing:.02em;
  color:rgba(237,231,220,.19);
  max-width:96ch;
}
.disclaimer em{ font-style:italic }

.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:10.5px; letter-spacing:.08em; color:var(--faint);
}
.foot__legal{ display:flex; gap:22px }
.foot__legal a{ transition:color .35s var(--ease) }
.foot__legal a:hover{ color:var(--gold-lt) }

/* ═══════════════════════════════════════════════
   TABLET / MOBILE
   La sequenza passa dietro al testo, a piena pagina.
   ═══════════════════════════════════════════════ */
@media (max-width:900px){
  :root{ --viz-w:100vw; --rail-w:100% }

  .viz{ width:100vw }
  /* qui il testo poggia direttamente sull'immagine: il velo deve
     reggere la lettura anche sui fotogrammi accesi */
  .viz__scrim{
    background:
      linear-gradient(to bottom, rgba(var(--amb), .18) 0%, transparent 46%),
      linear-gradient(to bottom,
        rgba(5,4,3,.90) 0%,
        rgba(5,4,3,.74) 26%,
        rgba(5,4,3,.80) 52%,
        rgba(5,4,3,.93) 80%,
        var(--ink) 100%);
  }
  .viz__glow{ opacity:calc(var(--amb-a) * .4 + .1) }
  .viz__journey{ display:none }        /* finirebbe sotto il testo */

  .rail{ width:100% }
  .blk__in{ max-width:none }
  .p, .lede, .step__p{ max-width:60ch }
  .blk{ min-height:auto; padding-block:clamp(66px,11vh,112px) }
  .blk--hero{ min-height:100svh }
}

/* schermi molto larghi: si evita che il testo si allontani troppo */
@media (min-width:1800px){
  .blk__in{ max-width:700px; margin-left:auto; margin-right:clamp(40px,6vw,120px) }
}

/* ═══════════ STATI INIZIALI ANIMAZIONE ═══════════ */
.no-js .loader{ display:none }
.no-js .viz{ opacity:1 }

/* ═══════════════════════════════════════════════
   PAGINE LEGALI
   Nessuna sequenza, nessuna scenografia: solo testo
   leggibile. Riusa la stessa palette della vetrina.
   ═══════════════════════════════════════════════ */
.legal{
  position:relative; z-index:2;
  max-width:820px; margin-inline:auto;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(60px,8vh,100px);
}

.legal__head{ padding-bottom:clamp(34px,5vh,54px); border-bottom:1px solid var(--line-2) }
.legal__eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.legal__eyebrow i{ width:34px; height:1px; background:var(--gold); opacity:.55; display:block }
.legal__t{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.02em;
}
.legal__meta{
  margin-top:20px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

/* avviso da rimuovere quando i campi sono compilati */
.legal__warn{
  margin:34px 0 0; padding:16px 18px;
  border-left:2px solid var(--gold);
  background:rgba(217,164,65,.05);
  font-size:12.5px; line-height:1.7; color:var(--muted);
}
.legal__warn b{ color:var(--gold-lt); font-weight:500 }

/* indice */
.legal__toc{ margin:clamp(38px,6vh,58px) 0; list-style:none; counter-reset:toc }
.legal__toc li{ counter-increment:toc; border-bottom:1px solid var(--line-2) }
.legal__toc a{
  display:flex; align-items:baseline; gap:16px; padding:11px 2px;
  font-size:13.5px; color:var(--muted); transition:color .35s var(--ease);
}
.legal__toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--serif); font-size:11px; letter-spacing:.16em;
  color:var(--gold); opacity:.7; flex:none;
}
.legal__toc a:hover{ color:var(--gold-lt) }

/* corpo */
.legal section{ margin-top:clamp(40px,6vh,62px); scroll-margin-top:100px }
.legal h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2.4vw,28px); line-height:1.2; letter-spacing:-.008em;
  margin-bottom:18px; display:flex; align-items:baseline; gap:14px;
}
.legal h2 span{
  font-size:11px; letter-spacing:.2em; color:var(--gold); opacity:.7;
  font-family:var(--sans); flex:none;
}
.legal h3{
  font-family:var(--sans); font-weight:500; font-size:13px;
  letter-spacing:.06em; color:var(--marble); margin:26px 0 10px;
}
.legal p{ font-size:14px; line-height:1.85; color:var(--muted); margin-bottom:16px }
.legal p:last-child{ margin-bottom:0 }
.legal a:not(.legal__toc a):not(.btn){
  color:var(--gold-lt); text-decoration:underline;
  text-decoration-color:rgba(242,215,155,.3); text-underline-offset:3px;
  transition:text-decoration-color .35s var(--ease);
}
.legal a:not(.legal__toc a):not(.btn):hover{ text-decoration-color:var(--gold-lt) }

.legal ul:not(.legal__toc){ list-style:none; margin:6px 0 18px }
.legal ul:not(.legal__toc) li{
  position:relative; padding-left:22px; margin-bottom:11px;
  font-size:14px; line-height:1.75; color:var(--muted);
}
.legal ul:not(.legal__toc) li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.55;
}
.legal ul:not(.legal__toc) li b{ color:var(--marble); font-weight:500 }

/* tabella dei servizi terzi */
.legal__tbl{ width:100%; border-collapse:collapse; margin:20px 0; font-size:13px }
.legal__tbl th, .legal__tbl td{
  text-align:left; padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line-2); vertical-align:top;
}
.legal__tbl th{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); font-weight:400;
}
.legal__tbl td{ color:var(--muted); line-height:1.65 }
.legal__tbl td:first-child{ color:var(--marble); white-space:nowrap; padding-right:24px }
.legal__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* segnaposto da compilare */
.ph{
  color:var(--gold-lt); background:rgba(217,164,65,.09);
  border-bottom:1px dashed rgba(217,164,65,.45);
  padding:1px 5px; border-radius:2px; font-style:normal;
  font-size:.94em; white-space:nowrap;
}

.legal__back{
  display:inline-flex; align-items:center; gap:11px; margin-top:clamp(50px,7vh,80px);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-lt);
}
.legal__back i{ width:26px; height:1px; background:var(--gold); display:block; transition:width .4s var(--ease) }
.legal__back:hover i{ width:44px }

@media (max-width:640px){
  .legal h2{ flex-direction:column; gap:6px }
  .legal__tbl td:first-child{ white-space:normal }
}

/* ═══════════════════════════════════════════════
   NAVIGAZIONE DA TASTIERA
   Chi si muove con Tab deve sempre vedere dov'è.
   :focus-visible non disturba chi usa il mouse.
   ═══════════════════════════════════════════════ */
:where(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:2px;
}
/* sul pulsante pieno l'oro su oro sparirebbe: si inverte */
.btn:focus-visible{
  outline:2px solid var(--marble);
  outline-offset:3px;
}
/* il vecchio anello di default resta solo dove manca :focus-visible */
:where(a, button, summary):focus:not(:focus-visible){ outline:none }

/* collegamento di salto: invisibile finché non riceve il fuoco */
.skip{
  position:fixed; top:12px; left:12px; z-index:10000;
  transform:translateY(-160%);
  padding:12px 20px; border-radius:2px;
  background:var(--gold-lt); color:#1a1206;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .28s var(--ease);
}
.skip:focus{ transform:translateY(0) }