/* ============================================================
   VARIANTE GRAFITE E OTTONE
   Grafite neutro-caldo, ottone come unica scintilla.
   Si carica DOPO home2.css e ridefinisce solo i token.
   ============================================================ */
:root {
  --void: #121514;
  --deep: #1B201E;
  --deep-2: #252B28;
  --edge: #3B443F;

  --h-teal: #7C5E14;          /* accento sulle sezioni chiare: ottone profondo */
  --teal-hover: #654B0C;
  --signal: #E3B457;        /* ottone luminoso, la scintilla */
  --h-plum: #C39BCE;
  --h-gold: #E3B457;
  --gold-deep: #8F6E22;

  --paper: #F0EFEA;
  --paper-dim: #A6A89E;

  --veil-rgb: 18, 21, 20;
  --sig-rgb: 227, 180, 87;
  --dot-rgb: 166, 168, 158;
  --bgl-rgb: 241, 240, 236;

  --bg-l: #F1F0EC;
  --surf-l: #FFFFFF;
  --h-ink: #1B1D1A;
  --ink-dim: #62655D;
  --h-line: #DCDBD3;
}

/* la card 03 non può essere dello stesso ottone della 01: vira al verde salvia */
.card.warm { --accent: #58BFA0; }

/* --- sezione pacchetti/prezzi (in stile "light") --- */
.pkg-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pkg {
  background: var(--surf-l);
  border: 1px solid var(--h-line);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pkg-feature {
  border-color: color-mix(in srgb, var(--signal) 55%, var(--h-line));
  box-shadow: 0 14px 44px -24px rgba(0, 0, 0, .35);
}
.pkg-i {
  color: var(--h-teal);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pkg-price {
  font-family: 'Michroma', sans-serif;
  font-size: 30px;
  color: var(--h-ink);
  line-height: 1;
}
.pkg-cur {
  font-family: var(--sans);
  font-size: .5em;
  font-weight: 500;
  color: var(--ink-dim);
  margin-left: .18em;
  vertical-align: baseline;
}
/* spazio tra il titolo della sezione e la frase sotto (qui il sottotitolo c'è) */
.prezzi .aree-head .lede { margin-top: 16px; }
.pkg p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.prezzi .pkg-note {
  max-width: 1000px;
  margin-top: 22px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}
.pkg-cta {
  text-align: center;
  margin-top: 30px;
}
@media (max-width: 720px) {
  .pkg-grid { grid-template-columns: 1fr; }
}

/* seconda riga della stella-regalo (email) staccata dal campo nome */
.lens-gift-row2 { margin-top: 8px; }

/* ============================================================
   SIPARIO D'INGRESSO, il logo 3D si apre e rivela il sito.
   Mostrato una volta per sessione (gestito da JS); senza audio.
   ============================================================ */
.sipario{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  background:
    radial-gradient(720px 480px at 50% 44%, rgba(227,180,87,.13), transparent 66%),
    radial-gradient(1200px 760px at 50% 44%, rgba(30,44,54,.55), transparent 72%),
    #101312;
  transition:transform 1.15s cubic-bezier(.7,0,.15,1), opacity .95s ease;
}
.sipario.lift{ transform:translateY(-102%); opacity:0; pointer-events:none; }
.sip-sky{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 40%, transparent 42%),
    radial-gradient(1.2px 1.2px at 80% 26%, #fff 40%, transparent 42%),
    radial-gradient(1.6px 1.6px at 66% 72%, #fff 40%, transparent 42%),
    radial-gradient(1.1px 1.1px at 30% 80%, #fff 40%, transparent 42%),
    radial-gradient(1.3px 1.3px at 90% 84%, #fff 40%, transparent 42%),
    radial-gradient(1.2px 1.2px at 20% 55%, #fff 40%, transparent 42%),
    radial-gradient(1.6px 1.6px at 50% 10%, #E3B457 40%, transparent 42%);
  animation:sipTwinkle 3.6s ease-in-out infinite alternate;
}
@keyframes sipTwinkle{ from{opacity:.3;} to{opacity:.62;} }
.sip-stage{ perspective:1400px; position:relative; z-index:1; will-change:transform; }
/* il tuffo dentro la "e": mentre ci si avvicina, il resto della scena si dissolve */
.sip-eye{ position:relative; }
.sipario.diving{ cursor:default; }
.sipario.diving .sip-sky,
.sipario.diving .sip-line,
.sipario.diving .sip-tag,
.sipario.diving .sip-enter,
.sipario.diving .sip-hint{
  opacity:var(--sip-ui, 1);
  transition:none;
  pointer-events:none;
}
/* IL DONDOLIO E' STATO TOLTO IL 13/08/2026, su richiesta del titolare.
   La parola stava ferma sull'asse ma ruotava di ±11 gradi in 3D, per sempre.
   Due ragioni per toglierlo. La prima e' di sostanza: una scritta che oscilla
   di continuo si legge peggio, e questa e' la prima cosa che vede chi arriva.
   La seconda e' che era l'animazione piu' cara della pagina, un piano composito
   ricalcolato a ogni fotogramma con dentro dieci lettere da cinque ombre
   ciascuna: era il grosso della lentezza segnalata sul telefono.
   La prospettiva resta su .sip-stage perche' serve al TUFFO, che e' un'altra
   cosa e dura un attimo. Il fotogramma iniziale del dondolio era gia' quasi
   frontale, quindi l'aspetto cambia pochissimo. */
.sip-tilt{ transform-style:preserve-3d; }
.sipario.open .sip-tilt{ animation:none; transform:rotateY(0) rotateX(0); transition:transform 1.8s ease; }
/* ---- LA PAROLA SI BATTE, UNA LETTERA ALLA VOLTA ----
   Il difetto delle versioni precedenti non era la velocita' della battitura ma
   la SOVRAPPOSIZIONE: le lettere partivano ogni 90 ms e ognuna impiegava 640 ms
   ad arrivare, quindi sette erano in volo insieme. Non si legge come battitura,
   si legge come una macchia. Perche' si percepiscano i colpi separati, ogni
   lettera deve atterrare prima che parta la successiva.
   Numeri presi dalle linee guida di motion design: arrivo 220 ms (micro-
   interazione 150-300 ms), intervallo ~165 ms, curva con un filo di rimbalzo
   invece che lineare. Dieci lettere in circa un secondo e mezzo: si contano.
   Si animano solo trasformazione e opacita', mai la geometria: sono le due
   proprieta' che la scheda video muove da sola senza rifare l'impaginazione. */
.sip-word{
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  font-family:'Michroma',sans-serif;
  font-size:clamp(26px,6.6vw,74px); line-height:1;
  position:relative;
}
.sip-l{
  display:inline-block; position:relative;
  color:#FBE9B8;
  text-shadow:
    0 1px 0 #C99C3E, 0 2px 0 #A87E2C, 0 3px 0 #7F5F1D,
    0 8px 26px rgba(0,0,0,.62), 0 0 46px rgba(227,180,87,.24);
  opacity:0;
  /* La lettera si abbassa sulla riga arrivando dal fondo della scena. Il
     movimento e' piu' contenuto di prima, meno profondita', meno rotazione —
     perche' un tragitto corto si legge come un posarsi, uno lungo come uno
     scarto.
     Curva senza rimbalzo: quella precedente aveva un ritorno elastico in coda
     (il valore oltre 1), e quel piccolo contraccolpo su dieci lettere di fila
     e' esattamente cio' che si percepisce come scattoso. Questa e' la stessa
     curva usata nel resto del sito, quindi il movimento appartiene alla
     stessa mano. */
  transform:translateZ(-170px) translateY(-.14em) rotateX(46deg);
  transform-origin:50% 90%;
  transition:opacity .2s ease-out,
             transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.sip-l.on{ opacity:1; transform:none; }
/* Senza JavaScript .batte non arriva mai: la parola dev'essere intera. */
.sip-word:not(.batte) .sip-l{ opacity:1; transform:none; }

/* La "e" in cui si entra: unico accento pieno, e riferimento del tuffo. */
/* LA PORTA E' LO SPAZIO FRA LA S E LA E, NON LA LETTERA. Cambiato il 13/08/2026.
   La «e» era dorata e pulsava, quindi l'occhio leggeva «si entra da qui, dalla
   lettera». Ma il centro esatto di «beassessed», dieci lettere, cade nello
   SPAZIO fra la quinta e la sesta, ed e' li' che il tuffo ora comincia.
   La lettera torna del colore delle altre, e la luce si sposta sul suo bordo
   sinistro, cioe' esattamente sulla soglia. Senza questo, l'origine dello zoom
   e il punto che si vede illuminato dicevano due cose diverse. */
.sip-eye::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:1px; z-index:-1; pointer-events:none;
  border-radius:50%; opacity:0;
}
.sipario.settled .sip-eye::before{ animation:sipPorta 2.4s ease-in-out infinite; }
.sipario.diving .sip-eye::before{ animation:none; opacity:0; }
@keyframes sipPorta{
  0%,100%{ opacity:1; box-shadow:0 0 20px 9px rgba(227,180,87,.16); }
  50%    { opacity:1; box-shadow:0 0 30px 15px rgba(227,180,87,.5); }
}

/* IL CURSORE STA SULLA LETTERA APPENA BATTUTA, non su un bordo ne' in una
   posizione calcolata, i due modi che nelle versioni precedenti lo lasciavano
   indietro. La classe .qui si sposta con la battitura, quindi il cursore e'
   letteralmente attaccato al punto in cui si scrive. Assoluto: non occupa
   spazio, non sposta nulla. */
.sip-l.qui::after{
  content:""; position:absolute; left:100%; top:8%;
  width:.07em; height:86%; margin-left:.09em;
  background:#E3B457; box-shadow:0 0 18px rgba(227,180,87,.9);
  animation:sipCaret 1s steps(1) infinite;
}
@keyframes sipCaret{ 0%,55%{opacity:1} 55.01%,100%{opacity:0} }
.sip-word::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%);
  background-size:260% 100%; background-position:190% 0; opacity:0; }
.sipario.settled .sip-word::after{ animation:sipSheen 1.5s ease .05s 1 forwards; }
@keyframes sipSheen{ 0%{opacity:0; background-position:190% 0;} 22%{opacity:1;} 100%{opacity:0; background-position:-70% 0;} }
.sip-line{ width:0; height:1px; background:linear-gradient(90deg,transparent,#E3B457,transparent);
  transition:width 1.3s ease .1s; position:relative; z-index:1; }
.sipario.settled .sip-line{ width:min(64vw,540px); }
.sip-tag{ font-family:var(--sans,system-ui),sans-serif; font-size:clamp(11px,1.6vw,13px);
  letter-spacing:.34em; text-transform:uppercase; color:#9A9C92;
  opacity:0; transform:translateY(6px); transition:opacity 1s ease, transform 1s ease; position:relative; z-index:1; margin:0; }
.sipario.settled .sip-tag{ opacity:1; transform:none; }
.sip-enter{ position:relative; z-index:1;
  font-family:var(--sans,system-ui),sans-serif; font-size:13px; letter-spacing:.12em; font-weight:600;
  color:#0d0d0d; background:linear-gradient(180deg,#FBE9B8,#E3B457); border:0; border-radius:999px;
  padding:13px 32px; cursor:pointer; opacity:0; transform:translateY(10px);
  transition:opacity .9s ease .2s, transform .9s ease .2s, filter .25s ease;
  box-shadow:0 14px 42px -14px rgba(227,180,87,.7); }
.sipario.settled .sip-enter{ opacity:1; transform:none; }
.sip-enter:hover{ filter:brightness(1.08); }
.sip-hint{ position:absolute; bottom:22px; left:0; right:0; text-align:center;
  font-family:var(--sans,system-ui),sans-serif; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.26);
  z-index:1; opacity:0; transition:opacity .6s ease; margin:0; }
.sipario.settled .sip-hint{ opacity:1; }

/* --- INGRESSO NELLA "e": portale + fluidità 3D ------------------------------
   La lente dorata emerge dalla "e" e chiude la transizione, così la scena non
   viene mai scalata a dimensioni estreme (era la rasterizzazione del testo
   ombreggiato a ~45x a causare il micro-blocco poco prima dell'apertura). */
.sip-veil{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0;
  transform:scale(.25); transform-origin:50% 52%;
  background:radial-gradient(closest-side,
    rgba(251,233,184,.95), rgba(227,180,87,.42) 26%, rgba(18,26,24,.94) 64%, #0e1512 100%);
  will-change:opacity, transform;
}
/* durante il tuffo: via le ombre stratificate dai glifi (invisibili mentre si
   zooma, ma costosissime da ri-rasterizzare frame per frame) */
.sipario.diving .sip-l{ text-shadow:none !important; }
.sipario.diving .sip-word::after{ display:none; }
/* leggera spinta prospettica: si "entra" nello schermo, non ci si limita a zoomare */
.sipario.diving .sip-tilt{ animation:none; transform:rotateX(3deg); transition:transform .6s ease; }
.sip-stage,.sip-tilt{ backface-visibility:hidden; }
/* Il respiro dorato NON sta piu' sulla lettera: sta sulla soglia fra s ed e,
   vedi .sip-eye::before piu' sopra. La «e» resta una lettera come le altre. */
.sipario.diving .sip-eye{ animation:none; }
/* 'sipEyePulse' e' stata rimossa il 13/08/2026: faceva respirare d'oro la «e»,
   e ora la soglia illuminata e' lo spazio fra la s e la e (.sip-eye::before). */

/* ============================================================
   TELEFONO: L'INTRODUZIONE RESTA, IL MOTO PERPETUO NO
   Aggiunto il 13/08/2026, perche' sul telefono l'ingresso risultava lento.
   ============================================================

   COSA COSTA DAVVERO, misurato e non supposto. Sul sipario girano
   contemporaneamente una quarantina di animazioni, alcune INFINITE, cioe' che
   non finiscono mai finche' la schermata resta aperta. La piu' cara era il
   dondolio 3D della parola, ed e' stata tolta del tutto il 13/08/2026, non solo
   sul telefono: vedi la nota su .sip-tilt piu' sopra.

   COSA RESTA DA ALLEGGERIRE QUI. Le altre due animazioni perpetue, il
   luccichio del cielo e il respiro della «e», piu' le ombre delle lettere.
   Ogni lettera ne porta CINQUE, due delle quali sfocate su 26 e 46 pixel: sono
   dieci lettere, quindi cinquanta ombre da ridisegnare, e la sfocatura e' la
   cosa piu' cara che una scheda grafica di telefono debba fare.

   COSA NON SI TOCCA. La battitura lettera per lettera, la linea che si apre,
   il sottotitolo che sale e il tuffo: sono l'introduzione vera, durano pochi
   secondi e sono l'identita' della pagina. Si toglie solo cio' che continua a
   girare dopo che l'introduzione e' finita.

   Le ombre delle lettere passano da cinque a tre, togliendo le due piu'
   sfocate: a 26 e 46 pixel di sfocatura, su uno schermo da sei pollici, non si
   distinguono, ma sono le piu' care da disegnare.

   ⚠️ NON e' un blocco per «movimento ridotto»: quello sta qui sotto, viene
   dopo ed e' piu' severo, come dev'essere. Chi ha chiesto meno movimento
   riceve meno di questo. */
@media (max-width: 720px){
  /* il cielo resta, smette di pulsare */
  .sip-sky{ animation:none; opacity:.46; }
  /* la «e» resta dorata e invitante, senza respirare all'infinito */
  /* su telefono la soglia resta accesa ma ferma */
  .sipario.settled .sip-eye::before{ animation:none; opacity:1; box-shadow:0 0 22px 10px rgba(227,180,87,.32); }
  /* cinque ombre per lettera diventano tre: spariscono le due sfocate */
  .sip-l{ text-shadow:0 1px 0 #C99C3E, 0 2px 0 #A87E2C, 0 3px 0 #7F5F1D; }
}

@media (prefers-reduced-motion: reduce){
  .sip-tilt{ animation:none; transform:none; }
  /* La linea guida sul movimento ridotto e' esplicita: chi la attiva non deve
     ricevere animazioni. Il sipario viene gia' rimosso dallo script prima di
     comparire; se un domani restasse, qui la parola e' intera e ferma. */
  .sip-word .sip-l{ opacity:1 !important; transform:none !important; }
  .sip-l.qui::after{ animation:none; opacity:1; }
  .sip-line{ width:min(64vw,540px);} .sip-tag,.sip-enter{ opacity:1; transform:none; }
  .sipario,.sip-word,.sip-l,.sip-line,.sip-tag,.sip-enter{ transition:none; }
}

/* --- lo spot video in home: cornice dorata, niente autoplay --- */
.spot-act { padding: clamp(40px, 7vh, 90px) var(--pad, 24px); }
.spot-frame {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(227,180,87,.28);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 60px -20px rgba(227,180,87,.18);
  background: #000;
}
.spot-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* I sottotitoli inglesi dello spot.
   Il browser, da solo, disegna dietro alla frase un rettangolo nero pieno: sul
   filmato sembra un adesivo appiccicato sopra. Qui lo sfondo si toglie e resta
   il solo testo. Tolto il rettangolo pero' serve qualcosa che stacchi le
   lettere dall'immagine, o su una scena chiara spariscono: lo fa l'ombra, che
   non disegna una forma e si vede solo dove serve.
   ::cue accetta poche proprieta' (colore, sfondo, carattere, ombra, contorno).
   Tutto il resto verrebbe ignorato in silenzio, percio' qui non c'e'. */
.spot-frame video::cue {
  background: transparent;
  color: #F0EFEA;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 84%;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 2px 12px rgba(0,0,0,.6);
}
/* Le versioni piu' vecchie di Safari non conoscono ::cue e tengono il loro
   riquadro. Regola a parte: se il selettore non e' riconosciuto cade questa e
   non quella sopra. */
.spot-frame video::-webkit-media-text-track-display {
  background: transparent;
}

/* transizione morbida verso le pagine del percorso (miglioramento progressivo) */
@view-transition { navigation: auto; }
::selection { background: rgba(227,180,87,.32); color: #F0EFEA; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* banner cookie (il foglio style.css non è caricato sulla nuova home) */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(18, 21, 20, .96);
  border-top: 1px solid var(--edge);
}
.cookie-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--paper-dim);
  max-width: 760px;
  line-height: 1.5;
}
.cookie-banner p a { color: var(--signal); }
.cookie-banner button {
  flex: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--signal);
  color: #0A0A0A;
}
.cookie-banner button:hover { filter: brightness(1.1); }

/* ============================================================
   IL VIAGGIO NEL CIELO, la home come percorso immersivo.
   Il cielo (canvas #viaggio) sta dietro tutto; le sezioni
   chiare diventano tappe notturne su vetro; i grafici
   line-art (gaussiana compresa) si disegnano da soli.
   ============================================================ */
#viaggio{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.rotta-viaggio{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg, #7A5C1B, var(--signal));
  box-shadow:0 0 12px rgba(var(--sig-rgb), .6); }
/* il contenuto naviga sopra il cielo, SOLO i contenitori di contenuto:
   gli overlay fissi (sipario, cannocchiale, lente, cookie) NON vanno toccati */
body.hp > nav, body.hp > header, body.hp > section,
body.hp > footer, body.hp > .dawn, body.hp > .dusk{
  position:relative; z-index:1;
}
/* La barra di navigazione deve restare SOPRA l'hero e le sezioni: il suo
   menu a tendina (tre puntini) sporge verso il basso nell'area dell'hero, e
   con lo stesso z-index l'hero, che viene dopo nel DOM, lo copriva,
   rendendo i link non cliccabili. Selettore piu' specifico (body.hp > nav.nav)
   per vincere sulla regola qui sopra; resta relative, cosi' il layout non si
   sposta, basta alzarne il piano. */
body.hp > nav.nav{ z-index:40; }

/* le transizioni buio-luce non servono piu': si resta nella notte */
.dawn, .dusk{ height:clamp(40px, 6vh, 80px); background:transparent; }

/* ---- tappe notturne: le ex sezioni chiare ---- */
.light{
  background:linear-gradient(180deg, rgba(20,26,23,.42), rgba(11,14,13,.18));
  color:var(--paper);
}
.light .eyebrow{ color:var(--signal); }
.light h2, .light h3, .light h4{ color:var(--paper); }
.light .lede{ color:var(--paper-dim); }

/* i tre passi: card di vetro nella notte */
.step{
  background:rgba(20,26,23,.62);
  border:1px solid rgba(var(--sig-rgb), .16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.step.pinned{ box-shadow:0 -18px 44px rgba(0,0,0,.45); }
.step-body p{ color:var(--paper-dim); }
.step-n{ color:var(--signal); }

/* IL TESTO DEL MONITORAGGIO ERA ILLEGGIBILE, e per una svista di questo file.
   In home2.css .monit-say p usa var(--ink-dim), che nel tema chiaro e' un grigio
   scuro su fondo bianco. Qui l'ottone ridefinisce --ink-dim a #62655D e mette le
   sezioni .light su fondo notturno: lo stesso grigio scuro finisce su nero.
   Tutte le altre regole con --ink-dim erano gia' state riportate su --paper-dim
   (.step-body p, .area p, .faq-item p, .pkg p): mancava solo questa, e prende lo
   stesso --paper-dim delle altre. Per un momento era stata messa su --paper, cioe'
   quasi bianco: si leggeva, ma era l'unico paragrafo del sito piu' chiaro degli
   altri e si notava. Il bianco pieno resta ai titoli. */
.monit-say p{ color:var(--paper-dim); }
.monit-note{ color:var(--paper-dim); border-left-color:rgba(var(--sig-rgb), .35); }

/* i grafici line-art diventano costellazioni dorate */
.sv-grid line{ stroke:var(--edge); }
.sv-dots circle{ fill:var(--h-gold); filter:drop-shadow(0 0 6px rgba(var(--sig-rgb), .7)); }
.sv-branch{ stroke:var(--paper-dim); }
.sv-node{ fill:var(--paper-dim); }
.sv-node.hot{ fill:var(--h-gold); filter:drop-shadow(0 0 8px rgba(var(--sig-rgb), .8)); }
/* la gaussiana: si costruisce in oro, con bagliore */
.sv-curve{ stroke:var(--h-gold); stroke-width:2.5;
  filter:drop-shadow(0 0 7px rgba(var(--sig-rgb), .55)); }
.sv-mark{ stroke:var(--gold-deep); }

/* le aree: stelle su vetro. La griglia originale usava sfondo chiaro +
   1px di spazio per le righine: sotto card trasparenti traspariva grigio.
   Ora la griglia e' trasparente con veri spazi, e le card sono definite. */
.aree-grid{
  background:transparent;
  border:none;
  gap:14px;
}
.area{
  background:rgba(15,20,18,.78);
  border:1px solid rgba(var(--sig-rgb), .14);
  border-radius:16px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.area:hover{
  background:rgba(24,31,27,.88);
  border-color:rgba(var(--sig-rgb), .4);
  transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.8), 0 0 34px -16px rgba(var(--sig-rgb), .3);
}
.area .a-i{ color:var(--signal); }
.area h3{ color:var(--paper); }
.area p{ color:var(--paper-dim); }
.area.is-az{ background:rgba(32,27,14,.82); border-color:rgba(var(--sig-rgb), .28); }
.area.is-az:hover{ background:rgba(42,35,18,.9); }
.area.is-az .a-i, .area.is-az h3{ color:var(--h-gold); }

/* i pacchetti: vetro dorato */
.prezzi .pkg, .pkg{
  background:rgba(20,26,23,.6);
  border:1px solid rgba(var(--sig-rgb), .18);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pkg-feature{ border-color:rgba(var(--sig-rgb), .5);
  box-shadow:0 20px 60px -30px rgba(0,0,0,.8), 0 0 40px -18px rgba(var(--sig-rgb), .3); }
.pkg-i{ color:var(--signal); }
.pkg-price{ color:#F5DFA6; }
.pkg-cur{ color:var(--paper-dim); }
.pkg p{ color:var(--paper-dim); }
.prezzi .pkg-note{ color:var(--paper-dim); }

/* le FAQ nella notte */
.faq-item{ border-color:rgba(255,255,255,.08); }
.faq-list{ border-color:rgba(255,255,255,.08); }
.faq-item summary{ color:var(--paper); }
.faq-item summary:hover{ color:var(--signal); }
.faq-item summary::after{ color:var(--signal); }
.faq-item p{ color:var(--paper-dim); }
/* I collegamenti dentro le risposte restavano al blu di sistema: questo foglio
   ridipinge le FAQ per la notte ma non aveva mai toccato gli <a> li' dentro,
   e su fondo scuro quel blu elettrico e' l'unica cosa che si vede della
   risposta. Bianchi, e riconoscibili dalla sottolineatura invece che dal
   colore: il colore da solo non basta a dire "questo si puo' toccare" a chi
   non distingue le tinte. */
.faq-item p a, .faq-body a{
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:rgba(237,242,240,.38);
  text-underline-offset:3px;
}
.faq-item p a:hover, .faq-body a:hover{ text-decoration-color:currentColor; }

/* ---- le tappe emergono dal buio ---- */
.step, .area, .tr, .faq-item, .pkg, .metodo-head, .aree-head, .spot-frame, .reflect-inner{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.step.vista, .area.vista, .tr.vista, .faq-item.vista, .pkg.vista,
.metodo-head.vista, .aree-head.vista, .spot-frame.vista, .reflect-inner.vista{
  opacity:1; transform:none;
}
@media (prefers-reduced-motion: reduce){
  #viaggio{ display:none; }
  .step, .area, .tr, .faq-item, .pkg, .metodo-head, .aree-head, .spot-frame, .reflect-inner{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* --- riga dei link legali nel footer della home ---
   Sta sotto ai link di navigazione, con corpo piu' piccolo: sono documenti
   di servizio, non voci di menu, ma devono restare raggiungibili da ogni
   pagina del sito. */
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}
.foot-legal a {
  font-size: 11.5px;
  color: var(--paper-dim);
  opacity: .75;
  text-decoration: none;
}
.foot-legal a:hover { opacity: 1; color: var(--signal); }

/* --- footer della home su schermo stretto ---
   I link restano su una riga sola, centrati: le voci ci stanno
   riducendo un poco corpo e spaziatura. */
@media (max-width: 640px) {
  .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 30px var(--pad) 34px;
  }
  .foot-links {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;   /* spazi identici fra le voci e ai bordi */
    align-items: center;
    gap: 0;
    width: 100%;
    /* rete di sicurezza: se un giorno le voci non ci stessero, si scorre
       lateralmente invece di finire tagliate fuori dallo schermo */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .foot-links::-webkit-scrollbar { display: none; }
  .foot-links a {
    font-size: 11.5px;
    padding: 4px 0;
    white-space: nowrap;
    text-align: center;
  }
  .foot-legal {
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .foot-legal::-webkit-scrollbar { display: none; }
  .foot-legal a {
    font-size: 10.5px;
    padding: 4px 0;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .foot-links a { font-size: 10.5px; }
  .foot-legal a { font-size: 9.5px; }
}