/* ═══════════════════════════════════════════════════════════
   STUDIO K — Kobido Olistico · Bolzano
   Tema del brand sopra il motore scroll-world.

   Il motore incapsula la sua CSS in @layer sw: tutto ciò che
   sta qui, non essendo in un layer, vince senza forzature.
   ═══════════════════════════════════════════════════════════ */

:root,
.sw-root{
  /* ── Colore ── */
  /* I tre colori del brand, presi dallo studio reale. Vedi DESIGN-SYSTEM §2.1 */
  --miele:#D2B48C;        /* logo. Titoli grandi e superfici, mai testo piccolo */
  --noce:#6B4428;         /* parquet. Superficie per pannelli e riquadri        */
  --avorio:#DED2C1;       /* pareti e teli. Il colore del testo: 7.86:1 AAA     */

  /* Neutro funzionale, non un colore del brand: lo scroll world mette il testo
     sopra il video, e nessuno dei tre e abbastanza scuro per fare da velo.
     Il noce al 72% lascia il corpo a 4.5:1; questo lo porta a 7.86:1.
     Sta al sistema come il nero dell'inchiostro sta a una carta intestata. */
  --ink:#0D0B09;

  /* alias di compatibilita: il codice esistente li usa ancora */
  --gold:var(--miele);
  --cream:var(--avorio);

  --sw-bg:#0D0B09;
  --sw-ink:#DED2C1;
  --sw-ink-soft:rgba(222,210,193,.68);
  --sw-accent:#D2B48C;

  /* ── Tipografia ──
     Cormorant per i titoli, Montserrat per i titoli di sezione,
     Lato per i paragrafi. */
  --sw-font-display:"Cormorant Garamond",Georgia,serif;
  --sw-font-body:"Lato",system-ui,sans-serif;
  --ui:"Montserrat",system-ui,sans-serif;

  /* Scala con tracking specifico per dimensione: il testo grande va
     stretto, il piccolo va aperto. Un solo letter-spacing sbaglierebbe
     da qualche parte. */
  --t-display:clamp(2.6rem,5.1vw,4.4rem);
  --t-title:clamp(2rem,3.3vw,2.9rem);
  --t-price:clamp(1.5rem,2vw,1.9rem);
  /* Il termine in vw era troppo debole e il soffitto troppo basso: a 2560px
     il corpo restava a 17px e l'etichetta a 11,2px, cioe la stessa misura che
     hanno su un telefono da 320. Uno schermo grande si guarda da piu lontano,
     quindi il testo deve crescere con lui. La forma `rem + vw` cresce in modo
     continuo invece che a scatti, e i due estremi restano fissati dal clamp. */
  --t-body:clamp(1rem,.55rem + .55vw,1.22rem);
  --t-label:clamp(.68rem,.52rem + .2vw,.84rem);

  /* ── Spazio: scala in rem, così scala col testo dell'utente ── */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4.5rem;

  --ease:cubic-bezier(.22,1,.36,1);
  /* Il budget UI e sotto i 300ms. Il passaggio del mouse e "decine di volte
     al giorno": va ridotto, non dilatato. Il pannello a schermo intero e una
     tendina, e li la forbice ammessa arriva a 500ms. */
  --t-hover:.2s;      /* colore e stato al passaggio del mouse */
  --t-stato:.28s;     /* sottolineature e indicatori */
  --t-pannello:.32s;  /* apertura del menu a schermo intero */
}

html,body{margin:0;background:var(--ink);overflow-x:hidden}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ═══ 1. Via la barra laterale ═══ */
.sw-route{display:none !important}
/* Via anche la barra di avanzamento in cima. Il motore continua a scriverle
   la trasformazione a ogni frame: è innocuo su un elemento non renderizzato,
   e non va rimosso dal DOM o read() andrebbe in errore. */
.sw-scrollbar{display:none !important}

/* ═══ 2. Leggibilità sopra il video ═══
   La scrim non è più una fascia fissa a sinistra: viaggia col blocco di
   copy, perché ogni scena lo colloca in un punto diverso. */
.sw-copylayer::before{display:none}

/* Il fondo dietro al testo NON è un riquadro: è un gradiente a tutta scena.
   Coprendo da bordo a bordo non ha contorni percepibili, quindi legge come
   illuminazione della ripresa invece che come una toppa nera dietro al testo.

   Vive sulla SCENA, non sul blocco di copy: il motore scrive `transform`
   inline su .sw-copy, e un elemento trasformato diventa blocco contenitore
   anche per i figli position:fixed — la luce resterebbe intrappolata nella
   larghezza del blocco invece di coprire lo schermo. La scena non è
   trasformata, quindi lì il gradiente è davvero a tutto campo.
   app.js assegna a ogni scena la stessa classe di layout della sua copy. */
.sw-scene::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--luce,linear-gradient(180deg,rgba(13,11,9,.30),rgba(13,11,9,.14) 45%,rgba(13,11,9,.42)))}

.sw-copy{position:absolute}

/* ═══ 3. Tipografia ═══ */
.sw-root{font-family:var(--sw-font-body);font-weight:300}

/* Numerazione di scena (01 / 06) rimossa: enumerare le sezioni è una
   decorazione, non un'informazione. Toglierla riporta anche l'hero a
   quattro elementi (occhiello, titolo, testo, CTA) invece di cinque. */
.sw-copy__num{display:none}

/* titolo di sezione — Montserrat */
.sw-copy__eyebrow{
  font-family:var(--ui);font-weight:500;font-size:var(--t-label);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--avorio);margin-top:var(--s5);
  text-shadow:0 2px 14px rgba(13,11,9,.9)}

/* titolo — Cormorant, mai grassetto, tracking negativo perché è grande */
.sw-copy__title{
  font-family:var(--sw-font-display);font-weight:300;
  font-size:var(--t-title);line-height:1.06;letter-spacing:-.018em;
  color:var(--cream);margin:var(--s4) 0 0;
  text-shadow:0 2px 34px rgba(13,11,9,.95),0 1px 3px rgba(13,11,9,.75)}

/* paragrafo — Lato, interlinea generosa, misura corta */
.sw-copy__body{
  font-family:var(--sw-font-body);font-weight:300;
  font-size:var(--t-body);line-height:1.78;letter-spacing:.004em;
  color:var(--avorio);max-width:36ch;margin-top:var(--s5);
  text-shadow:0 1px 16px rgba(13,11,9,.95)}

.sw-copy__tags{gap:var(--s2);margin-top:var(--s6)}
.sw-copy__tags li{
  font-family:var(--ui);font-weight:400;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--avorio);background:rgba(13,11,9,.5);
  border:1px solid rgba(210,180,140,.34);
  border-radius:0;padding:var(--s2) var(--s3);backdrop-filter:blur(6px)}

/* ═══ 4. Bottoni ═══
   Il motore usa color:#fff su background:var(--sw-ink): con --sw-ink crema
   sarebbe bianco su crema, illeggibile. Riscritti entrambi. */
.sw-copy__cta{gap:var(--s3);margin-top:var(--s6)}
.sw-btn{
  /* senza questo, width:100% nell'hero sommava i 2rem di padding laterale
     e il bottone sbordava di 64px dalla propria colonna */
  box-sizing:border-box;
  font-family:var(--ui);font-weight:500;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
  /* larghezza minima comune: senza, "Vedi il listino" risultava più largo
     di "Prenota ora" e il bottone secondario pesava più del primario */
  min-width:12.5rem;display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:0;padding:1.05rem 2rem;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease)}
.sw-btn--primary{color:var(--ink);background:var(--gold);border:1px solid var(--gold)}
/* il motore solleva i bottoni di 2px al passaggio: lo annulliamo senza
   cancello, perche su touch quel sollevamento resterebbe appiccicato al tap */
.sw-btn--primary:hover,.sw-btn--ghost:hover{transform:none}
.sw-btn--ghost{
  color:var(--cream);border:1px solid rgba(222,210,193,.42);
  background:rgba(13,11,9,.3);backdrop-filter:blur(6px)}

/* risposta immediata alla pressione, non al rilascio */
.sw-btn:active{transform:scale(.985);transition:transform .1s ease-out}

/* ── Area di tocco ──
   Misurati: il bottone pieno stava a 39px, quello fantasma dell'hero a 17, il
   monogramma a 28. Sotto i 44px il dito sbaglia. Dove basta si alza l'altezza
   minima; dove alzarla sposterebbe il disegno — il fantasma dell'hero e il
   monogramma vivono su una sottolineatura sottile — si allarga solo la zona
   sensibile con uno pseudo-elemento invisibile, che non occupa spazio nel
   flusso e non muove di un pixel cio che si vede. */
/* `min-height` da sola non basta e non centra:
   — senza box-sizing:border-box il minimo vale sul CONTENUTO, e padding e
     bordo si sommano sopra: 44 + 20,8 + 2 = 66,8px, che e l'altezza sbagliata
     che rendeva il bottone in barra sfalsato rispetto a hamburger e monogramma;
   — con display:block il testo resta appoggiato in alto invece di centrarsi:
     misurati 11,4px sopra e 43,4 sotto. Serve un contenitore flessibile. */
.sw-btn,.sw-topcta{
  box-sizing:border-box;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
.sk-l--apertura .sw-btn--ghost,.sw-brand{position:relative}
.sk-l--apertura .sw-btn--ghost::before,
.sw-brand::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
/* la riga del listino stava a 41px: due pixel di respiro per parte */
.sk-listino__riga{padding-block:calc(var(--s4) + 2px)}

/* ═══ 5. Varietà di impaginazione ═══
   Ogni scena colloca la copy in un punto diverso. La ripetizione della
   stessa colonna sinistra per sei volte è ciò che rendeva lo scroll piatto.
   Il soggetto della ripresa sta al centro-destra: le varianti evitano di
   coprirlo, tranne dove la scena è deliberatamente centrata. */

/* Il motore riscrive `transform` inline a ogni frame (una micro-parallasse
   sulla copy), e lo stile inline batte qualsiasi regola CSS. Centrare con
   translate(-50%) qui non funziona: il blocco sborda.
   Centriamo invece con inset opposti + margin auto, che non tocca transform
   e lascia la parallasse del motore al suo posto. */
.sw-copy{
  width:min(40vw,440px);height:fit-content;
  left:auto;right:auto;top:auto;bottom:auto}

/* Le tre "luci": da sinistra, da destra, e la sala che si abbassa.
   Nessuna arriva a un bordo netto dentro il viewport. */
:root,.sw-root{
  /* Settembre 2026: con la luce dorata la sala e' piu' chiara, e a 40% lo
     stop .66 lasciava la scena 2 a 6,17:1. A .74 torna sopra 7. */
  --luce-sx:linear-gradient(97deg,
    rgba(13,11,9,.94) 0%,rgba(13,11,9,.89) 20%,rgba(13,11,9,.74) 40%,
    rgba(13,11,9,.40) 58%,rgba(13,11,9,.12) 74%,rgba(13,11,9,0) 88%);
  /* Più forte della gemella di sinistra, e non per simmetria mancata: nella
     ripresa le lampade e le candele stanno a destra, mentre la sinistra è
     già in penombra. Con gli stop di --luce-sx il corpo del testo scendeva
     a 6,3:1 sulla scena 5. */
  --luce-dx:linear-gradient(263deg,
    rgba(13,11,9,.95) 0%,rgba(13,11,9,.90) 24%,rgba(13,11,9,.78) 44%,
    rgba(13,11,9,.42) 62%,rgba(13,11,9,.14) 78%,rgba(13,11,9,0) 90%);
  /* Alleggerita rispetto alla versione tarata sullo studio bianco: questa
     ripresa è già in penombra, e a .86 restavano 14:1 di contrasto dove ne
     bastano 7, buttando via la stanza. A .76 il margine resta ampio. */
  --luce-giu:linear-gradient(180deg,
    rgba(13,11,9,.64) 0%,rgba(13,11,9,.76) 42%,rgba(13,11,9,.78) 62%,rgba(13,11,9,.70) 100%);
  /* Fascia bassa: l'inquadratura resta libera in alto e il buio sale solo
     dove poggia il testo. È la luce dell'hero, che ora occupa tutta la
     larghezza in fondo invece di una colonna a sinistra. */
  --luce-basso:linear-gradient(180deg,
    rgba(13,11,9,0) 0%,rgba(13,11,9,.10) 30%,rgba(13,11,9,.38) 48%,
    rgba(13,11,9,.72) 66%,rgba(13,11,9,.89) 82%,rgba(13,11,9,.93) 100%);
}

/* La stessa classe sta sia sulla copy (che la usa per posizionarsi) sia sulla
   scena (che la usa per la direzione della luce). I due ruoli vanno tenuti
   separati, o le regole di posizione sposterebbero anche il video. */

/* ── direzione della luce, sulla scena ── */
.sw-scene.sk-l--apertura{--luce:var(--luce-basso)}
.sw-scene.sk-l--bassa,
.sw-scene.sk-l--media{--luce:var(--luce-sx)}
.sw-scene.sk-l--destra{--luce:var(--luce-dx)}
.sw-scene.sk-l--centro,
.sw-scene.sk-l--chiusura{--luce:var(--luce-giu)}

/* ── posizione, sulla copy ── */

/* 1 · apertura: fascia bassa a tutta larghezza.
   Titolo grande a sinistra, testo e azioni a destra, entrambi appoggiati
   al bordo inferiore. L'inquadratura resta libera in alto.

   Due colonne e due righe: riga 1 porta occhiello e testo, riga 2 titolo e
   bottoni. Con align-items:end ogni cella si appoggia in basso, così il
   testo di destra chiude alla stessa altezza del titolo. */
.sw-copy.sk-l--apertura{
  left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);
  bottom:clamp(36px,7vh,84px);top:auto;
  /* contenuto, non a tutta larghezza: oltre i 1500px il blocco destro
     finiva schiacciato contro il bordo, lontano dal titolo */
  width:auto;max-width:1500px;margin-inline:auto;
  display:grid;align-items:end;
  /* la colonna era 22vw: a 1990px diventava 438px e i bottoni si stiravano
     a riempirla. Con il tetto a 300px restano proporzionati alle etichette. */
  grid-template-columns:1fr clamp(300px,26vw,380px);
  column-gap:clamp(24px,4vw,64px);row-gap:var(--s4)}

.sk-l--apertura .sw-copy__eyebrow{grid-area:1/1;margin:0 0 var(--s2)}
/* balance distribuisce le righe invece di riempire la prima e lasciare
   "viso." orfano sulla seconda.

   Il padding sotto non è decorativo: con line-height .98 la riga è più corta
   dei glifi, e i discendenti di "massaggio" scendono ~7px sotto il riquadro.
   Allineando i riquadri (align-items:end) il testo risultava più basso dei
   bottoni. Il padding riporta il fondo del riquadro sul fondo dell'inchiostro,
   così l'allineamento è quello che l'occhio vede. */
.sk-l--apertura .sw-copy__title{
  grid-area:2/1;margin:0;text-wrap:balance;padding-bottom:.085em;
  font-size:clamp(2.8rem,6.2vw,5.4rem);letter-spacing:-.03em;line-height:.98}
/* niente max-width qui: il testo riempie la colonna e chiude alla stessa
   larghezza dei bottoni sotto, altrimenti i due blocchi restano slegati */
.sk-l--apertura .sw-copy__body{
  margin:0;max-width:none;
  /* era .95rem fisso: il paragrafo dell'hero restava a 15,2px da 320px a
     2560px, l'unico testo del sito che non scalava mai */
  font-size:clamp(.95rem,.52rem + .5vw,1.15rem);
  line-height:1.68;color:var(--avorio)}
/* affiancati e allineati a sinistra, con il paragrafo sopra.
   Il primario resta l'unico elemento pieno: due riquadri uguali si
   dividerebbero l'attenzione invece di sommarla. */
.sk-l--apertura .sw-copy__cta{
  margin:0;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:flex-start;gap:var(--s5)}

/* Il blocco di destra: paragrafo e inviti attaccati, appoggiati alla stessa
   base del titolo. Occupa entrambe le righe della griglia, così il vuoto tra
   riga 1 e riga 2 non li separa piu. */
.sk-hero-dx{
  grid-area:1/2 / span 2 / span 1;
  align-self:end;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s5)}
.sk-l--apertura .sw-btn--primary{
  min-width:0;width:auto;white-space:nowrap;flex:0 0 auto}

/* il secondario e testo, non riquadro: accanto a un pieno, un secondo
   riquadro pesa uguale e annulla la gerarchia */
.sk-l--apertura .sw-btn--ghost{
  min-width:0;width:auto;flex:0 0 auto;white-space:nowrap;
  border:0;background:none;backdrop-filter:none;
  padding:0 0 3px;font-size:.66rem;letter-spacing:.16em;
  color:rgba(222,210,193,.76);
  border-bottom:1px solid rgba(210,180,140,.38);
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}

/* 2 · sinistra bassa, blocco più largo e titolo più contenuto */
.sw-copy.sk-l--bassa{
  left:clamp(20px,5vw,64px);bottom:15%;width:min(42vw,500px)}

/* 3 · sinistra, centrata verticalmente */
.sw-copy.sk-l--media{
  left:clamp(20px,5vw,64px);top:0;bottom:0;margin-block:auto}

/* 4 · listino: centrato. Qui la sala si abbassa: il testo sta sopra la zona
   più chiara della ripresa, e una luce laterale non basterebbe. */
.sw-copy.sk-l--centro{
  left:0;right:0;margin-inline:auto;
  top:0;bottom:0;margin-block:auto;
  width:min(86vw,720px);text-align:center}
.sk-l--centro .sw-copy__body{margin-left:auto;margin-right:auto;max-width:44ch}
.sk-l--centro .sw-copy__cta{justify-content:center}

/* 5 · destra, bassa — il soggetto è già uscito di campo a sinistra */
.sw-copy.sk-l--destra{
  left:auto;right:clamp(20px,5vw,64px);bottom:17%;text-align:right}
.sk-l--destra .sw-copy__body{margin-left:auto}
.sk-l--destra .sw-copy__cta{justify-content:flex-end}

/* 6 · chiusura: centrata, la più ampia */
.sw-copy.sk-l--chiusura{
  left:0;right:0;margin-inline:auto;
  top:0;bottom:0;margin-block:auto;
  width:min(86vw,700px);text-align:center}
.sk-l--chiusura .sw-copy__title{font-size:var(--t-display);letter-spacing:-.026em;line-height:1.0}
.sk-l--chiusura .sw-copy__body{margin-left:auto;margin-right:auto}
.sk-l--chiusura .sw-copy__cta{justify-content:center}

/* ═══ 6. Listino ═══
   Nome e prezzo, niente altro. La chiarezza qui vale più della decorazione. */
.sk-listino{
  margin:var(--s7) 0 0;padding:0;
  border-top:1px solid rgba(210,180,140,.22);
  text-align:left}
.sk-listino__riga{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid rgba(210,180,140,.22);
  transition:border-color var(--t-hover) var(--ease)}
/* Il link e sul nome, ma lo pseudo-elemento lo stende su tutta la riga:
   si prenota toccando anche il prezzo, senza rompere la validita del <dl>. */
.sk-listino__link{
  color:inherit;text-decoration:none;
  transition:color var(--t-hover) var(--ease)}
.sk-listino__link::after{content:"";position:absolute;inset:0}
.sk-listino__link:focus-visible{outline:1px solid var(--miele);outline-offset:4px}
.sk-listino__nome{
  font-family:var(--sw-font-display);font-weight:400;
  font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:.002em;
  color:var(--cream)}
.sk-listino__nota{
  display:block;font-family:var(--sw-font-body);font-weight:300;
  font-size:.85rem;line-height:1.6;letter-spacing:.004em;
  color:rgba(222,210,193,.62);margin-top:var(--s1)}
.sk-listino__prezzo{
  font-family:var(--sw-font-display);font-weight:300;
  font-size:var(--t-price);letter-spacing:-.01em;
  color:var(--miele);white-space:nowrap}

/* ═══ 7. Topbar ═══
   Tre colonne: menu a sinistra, logo esattamente al centro, CTA a destra. */
/* minmax(0,1fr) e non 1fr: il minimo `auto` di 1fr lascia che il contenuto
   largo di una colonna laterale spinga il centro, e il logo esce dall'asse
   sugli schermi stretti. */
/* Il padding verticale era clamp(16,2.4vw,30px): con i 44px del bersaglio
   touch portava la barra a 104px, oltre il tetto di 80. Ora si ferma a 76. */
.sw-topbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  padding:clamp(12px,1.2vw,16px) clamp(20px,5vw,64px)}
.sw-brand{grid-column:2;justify-self:center}
/* la CTA sta dentro .sk-destra insieme al selettore di lingua (vedi sotto);
   il posizionamento è di quel contenitore, non suo */

/* Solo il monogramma. Senza la parola accanto può reggere qualche pixel
   in più: da solo al centro, a 26px sembrava un residuo. */
.sw-brand{gap:0}
.sw-brand__mark{
  /* Era 34px fisso su desktop e 28 su telefono. Cresce invece con lo schermo,
     come tutto il resto della scala: il tetto e 44px, che e esattamente
     l'altezza utile della barra — oltre, la barra si alzerebbe per fare posto
     a un monogramma, che non e un buon motivo per alzarla. */
  width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);
  border-radius:0;box-shadow:none;background:none;
  -webkit-mask:url("assets/img/logo-k.svg") no-repeat center/contain;
  mask:url("assets/img/logo-k.svg") no-repeat center/contain;
  background-color:var(--gold);
  transition:background-color var(--t-hover) var(--ease)}

/* La scritta sparisce alla vista ma resta leggibile dagli screen reader:
   senza, il link in cima non avrebbe alcun nome accessibile — sarebbe un
   riquadro d'oro che non si annuncia. Non usare display:none. */
.sw-brand__name{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ─── Lato destro della barra: l'invito a prenotare ───
   La lingua sta nel menu (assets/menu.js), accanto al luogo e al contatto. */
.sk-destra{grid-column:3;justify-self:end;
  display:flex;align-items:center;gap:clamp(14px,2vw,26px)}

.sw-topcta{
  font-family:var(--ui);font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);
  border:1px solid var(--gold);border-radius:0;padding:.8rem 1.5rem;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}

.sw-topcta:active{transform:scale(.985);transition:transform .1s ease-out}

/* variante silenziosa: attiva finché l'hero mostra il proprio invito,
   così i due bottoni d'oro non si annullano a vicenda (app.js §5b) */
.sw-topcta.is-quiet{
  background:transparent;color:var(--gold);
  border-color:rgba(210,180,140,.55)}

/* la nav vive dentro il pannello del menu; qui solo gli azzeramenti, nel
   caso un aggiornamento del motore la rimetta in linea prima che app.js
   la sposti — così non lampeggia una pillola bianca al caricamento */
.sw-nav{background:transparent;border:0;border-radius:0;padding:0;backdrop-filter:none}

/* ═══ 8. Menu ═══
   Il menu a schermo intero sta in assets/menu.css e assets/menu.js: e' lo
   stesso su tutte le pagine del sito, quindi non vive qui. */

/* Il motore applica al poster una parallasse di -2vw con scale(1.03): a 390px
   di larghezza sono 7,8px di traslazione contro 6 di margine, e il bordo
   destro restava scoperto di 1,8px — una fessura chiara lungo tutto il lato.
   Si vede solo prima che la clip sia caricata e sotto moto ridotto, ma e la
   prima impressione. Un po' di larghezza in piu la chiude senza toccare il
   motore: con left e width dichiarati, `right` viene ignorato. */
.sw-scene__still{left:-4%;width:108%}

/* ── Piè di pagina ──
   Il sito non ha sezioni sotto lo scroll-world, quindi la barra non "segue" il
   contenuto: sta fissa in basso e si accende solo sull'ultima scena, dove lo
   scorrimento finisce. Prima di allora non c'è e non intercetta nulla. */
.sk-pie{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) clamp(20px,5vw,64px);
  background:linear-gradient(180deg,rgba(13,11,9,0) 0%,rgba(13,11,9,.86) 46%,rgba(13,11,9,.95) 100%);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-pannello) var(--ease)}
.sk-pie.is-in{opacity:1;pointer-events:auto}
/* a menu aperto sparisce: il pannello ha già i suoi collegamenti legali */
.sk-menu-aperto .sk-pie{opacity:0;pointer-events:none}

.sk-pie__legali{display:flex;align-items:center;gap:var(--s5)}
.sk-pie__legali a{
  font-family:var(--ui);font-weight:500;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(222,210,193,.72);text-decoration:none;
  padding:.45rem 0;min-height:32px;display:inline-flex;align-items:center;
  transition:color var(--t-hover) var(--ease)}
.sk-pie__legali a:focus-visible{color:var(--avorio);outline:1px solid var(--miele);outline-offset:3px}

/* ── Firma dell'agenzia ──
   Outfit Bold, maiuscolo, come nel riferimento. Il blu del marchio e #2249a2:
   sul nero caldo del sito misura 2,38:1, sotto la soglia di 3:1 che vale per un
   segno grafico, e sparirebbe. Qui viene schiarito sullo stesso tono fino a
   4,16:1 — geometria e giallo restano identici all'originale. Su fondo chiaro
   (nessuna pagina, per ora) basterebbe riportare --nexa-blu a #2249a2. */
.sk-firma{
  --nexa-blu:#3D6FD6; --nexa-oro:#FACC15;
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;border:0;padding:.45rem 0;
  color:rgba(222,210,193,.72);
  transition:color .2s cubic-bezier(.22,1,.36,1)}
.sk-firma__testo{
  font-family:"Outfit",var(--ui,system-ui),sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap}
.sk-firma__segno{flex:none;display:block}

/* ═══ 9. Cielo e indizio ═══ */
.sw-sky__glow{
  background:radial-gradient(58% 44% at 74% 18%,rgba(210,180,140,.16),transparent 70%),
             radial-gradient(46% 34% at 46% 54%,rgba(232,217,192,.07),transparent 72%)}
/* Indicatore di scorrimento rimosso. Chi non ha ancora scorso sta guardando
   la prima scena: sa cos'è lo scroll. Resta nel DOM perché il motore gli
   scrive l'opacità a ogni frame. */
.sw-hint{display:none !important}

/* ═══ 10. Mobile ═══
   Su schermo stretto la varietà orizzontale non c'è: tutte le scene
   diventano una colonna sola, e la varietà resta nel ritmo verticale. */
@media(max-width:860px){
  .sw-copy,
  .sw-copy.sk-l--apertura,.sw-copy.sk-l--bassa,.sw-copy.sk-l--media,
  .sw-copy.sk-l--centro,.sw-copy.sk-l--destra,.sw-copy.sk-l--chiusura{
    left:clamp(18px,5vw,40px);right:clamp(18px,5vw,40px);
    width:auto;margin-inline:0;text-align:left}
  /* Il listino e la chiusura sono centrati su desktop e restano centrati qui:
     e la loro identita, non un vezzo della larghezza. Prima il blocco stretto
     li appiattiva a sinistra come tutti gli altri, e le due scene che devono
     fermare lo scorrimento diventavano uguali alle quattro che lo
     accompagnano. La scena 5 resta invece allineata a sinistra: a destra lo
     era per non coprire il soggetto della ripresa, una ragione che
     nell'inquadratura verticale del telefono non esiste piu, e il testo
     allineato a destra su colonna stretta si legge peggio. */
  .sw-copy.sk-l--centro,.sw-copy.sk-l--chiusura{text-align:center}
  /* l'hero perde la seconda colonna: titolo, testo e azioni si impilano,
     sempre appoggiati in basso */
  .sw-copy.sk-l--apertura{
    top:auto;bottom:clamp(28px,6vh,64px);margin-block:0;
    grid-template-columns:1fr;row-gap:var(--s3)}
  .sk-l--apertura .sw-copy__eyebrow{grid-area:auto}
  .sk-l--apertura .sw-copy__title{grid-area:auto;font-size:clamp(2.2rem,9vw,3.2rem)}
  /* il blocco torna in colonna sotto il titolo, o resterebbe in una seconda
     colonna che a questa larghezza non esiste piu */
  .sk-hero-dx{grid-area:auto;align-self:auto;gap:var(--s4)}
  .sk-l--apertura .sw-copy__body{max-width:34ch}
  .sk-l--apertura .sw-copy__cta{flex-direction:row}
  /* la larghezza minima vale solo per il pieno: il secondario e testo,
     e con 11rem sborderebbe di 25px oltre il bordo destro */
  .sk-l--apertura .sw-btn--primary{width:auto;min-width:10.5rem}
  .sk-l--apertura .sw-btn--ghost{width:auto;min-width:0}
  /* il salto fra paragrafo e inviti era 16px contro i 24 del desktop: la
     stessa aria, cosi il blocco respira come la sua versione grande */
  .sk-l--apertura .sw-copy__cta{gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}

  .sw-copy.sk-l--media{top:26%;bottom:auto;margin-block:0}
  .sw-copy.sk-l--bassa,.sw-copy.sk-l--destra{top:auto;bottom:15%;margin-block:0}
  .sw-copy.sk-l--centro,.sw-copy.sk-l--chiusura{top:20%;bottom:auto;margin-block:0}
  .sk-l--destra .sw-copy__body{margin-left:0;margin-right:0}
  .sk-l--centro .sw-copy__body,
  .sk-l--chiusura .sw-copy__body{margin-left:auto;margin-right:auto}
  .sk-l--destra .sw-copy__eyebrow,
  .sk-l--destra .sw-copy__cta,
  .sk-l--destra .sw-copy__tags{justify-content:flex-start}
  .sk-l--centro .sw-copy__cta,
  .sk-l--centro .sw-copy__tags,
  .sk-l--chiusura .sw-copy__cta{justify-content:center}
  /* il listino resta allineato a sinistra dentro la scena centrata: nome a
     sinistra e prezzo a destra e la forma che si legge, centrarlo li
     mescolerebbe */
  .sk-l--centro .sk-listino{text-align:left}

  /* su schermo stretto il testo attraversa tutta la larghezza: la luce
     laterale non funziona più, si abbassa la sala per tutte le scene */
  .sw-scene::after{
    background:linear-gradient(180deg,
      rgba(13,11,9,.62) 0%,rgba(13,11,9,.80) 38%,rgba(13,11,9,.88) 70%,rgba(13,11,9,.84) 100%) !important}
  /* a schermo intero su telefono: una colonna sola, informazioni sotto le voci */
  .sw-topcta{padding:.7rem 1rem;font-size:.6rem}
  .sk-destra{gap:10px}
  

  /* A 320px la barra va a capo su due righe e diventa alta 119px: misurato,
     sovrapponeva di 9px gli inviti dell'ultima scena — e col piè cliccabile
     avrebbe rubato il tocco sul bordo di "Prenota ora". Qui si stringe sui
     margini e sul passo fra le due righe, non sui bersagli, che restano
     prendibili. */
  .sk-pie{padding-block:var(--s2);row-gap:var(--s2)}
  .sk-pie__legali{gap:var(--s4)}
}

@media(max-width:560px){
  /* Misurato: il rapporto titolo/corpo era 2,21 su telefono contro 5,57 su
     desktop. Il corpo sta giusto dov'e — 15,2px si leggono bene in mano — ma
     il titolo era troppo piccolo, e senza quello stacco la gerarchia si
     appiattisce e le scene si somigliano tutte. Non si arriva a 5,57 su un
     telefono, o il titolo mangia lo schermo: qui si sale a circa 2,8, che e
     la stessa distanza percepita su una colonna larga un terzo. */
  .sw-copy__title{font-size:clamp(2rem,8.4vw,2.9rem)}
  .sk-l--apertura .sw-copy__title,
  .sk-l--chiusura .sw-copy__title{font-size:clamp(2.3rem,10.4vw,3.4rem)}
  /* su schermo stretto i due bottoni vanno a capo: la larghezza minima
     scende, o il secondo sborda dalla colonna */
  .sw-btn{padding:.95rem 1.5rem;font-size:.66rem;min-width:11rem}
  .sk-listino__nome{font-size:1.1rem}
  .sk-listino__prezzo{font-size:1.3rem}
}

@media(max-width:400px){
  .sw-topbar{padding-left:14px;padding-right:14px;column-gap:8px}
  .sw-topcta{padding:.65rem .75rem;letter-spacing:.1em}
}

/* ═══ Viewport basso — telefono in orizzontale ═══
   Ogni scena è alta quanto lo schermo e non scorre: quello che non ci sta
   viene tagliato. A 390px di altezza il listino sfondava di 193px, a 568px di 156.
   Regola sull'ALTEZZA, non sulla larghezza: un telefono ruotato è largo
   844px e passerebbe indenne da qualsiasi breakpoint orizzontale. */
/* La condizione era la sola altezza, e prendeva due casi opposti: il telefono
   coricato, dove i 390px sono davvero stretti, e il telefono piccolo in piedi,
   dove a 568px restano da 244 a 426px liberi per scena e comprimere non serve
   a niente — anzi appiattisce la gerarchia dei titoli senza motivo.
   `orientation:landscape` separa i due: corto E largo e il caso vero. */
@media(max-height:620px) and (orientation:landscape){
  .sw-copy__title{font-size:clamp(1.5rem,3.4vh,2rem);line-height:1.08}
  .sk-l--apertura .sw-copy__title,
  .sk-l--chiusura .sw-copy__title{font-size:clamp(1.7rem,4vh,2.3rem)}
  .sw-copy__body{font-size:.95rem;line-height:1.6;margin-top:var(--s3)}
  .sw-copy__eyebrow{margin-top:var(--s3)}
  .sw-copy__num{display:none}
  .sw-copy__cta{margin-top:var(--s4)}
  .sw-btn{padding:.75rem 1.3rem}

  /* l'hero resta ancorato in basso anche qui, ma con meno respiro */
  .sw-copy.sk-l--apertura{top:auto;bottom:6%;margin-block:0}
  .sk-l--apertura .sw-copy__title{font-size:clamp(1.8rem,4.6vh,2.6rem)}
  .sw-copy.sk-l--media,
  .sw-copy.sk-l--centro,.sw-copy.sk-l--chiusura{top:0;bottom:0;margin-block:auto}
  .sw-copy.sk-l--bassa,.sw-copy.sk-l--destra{top:auto;bottom:8%;margin-block:0}
  .sw-hint{display:none}
}

/* Il listino invece va compresso a QUALUNQUE schermo basso, coricato o no:
   e la scena piu alta del sito e a 320x568 sfondava di 14px. Le descrizioni
   se ne vanno per prime — nome e prezzo bastano a decidere, e sono
   l'informazione che si e venuti a cercare. Le righe si stringono ma non
   sotto i 44px di area sensibile. */
@media(max-height:700px){
  .sk-listino{margin-top:var(--s4)}
  .sk-listino__riga{padding-block:.6rem}
  .sk-listino__nota{display:none}
  .sk-listino__nome{font-size:1.05rem}
  .sk-listino__prezzo{font-size:1.25rem}
}

/* ═══ 10b. Passaggio del mouse ═══
   Un dispositivo touch non ha un passaggio del mouse: emette un :hover finto
   al tocco e ce lo lascia finche non tocchi altrove. Senza questo cancello,
   toccare una voce del menu la lasciava accesa d'oro e allargata.
   I :focus-visible restano fuori: la tastiera deve vedere lo stato ovunque. */
@media (hover:hover) and (pointer:fine){
  .sw-btn--primary:hover{color:var(--gold);background:transparent}
  .sw-btn--ghost:hover{color:var(--ink);background:var(--cream);border-color:var(--cream)}
  .sk-l--apertura .sw-btn--ghost:hover{
    background:none;color:var(--avorio);border-color:var(--miele)}
  .sw-brand:hover .sw-brand__mark{background-color:var(--avorio)}
  .sw-topcta:hover{background:transparent;color:var(--gold)}
  .sw-topcta.is-quiet:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
  .sk-pie__legali a:hover{color:var(--avorio)}
  .sk-firma:hover{color:var(--avorio)}
}

/* ═══ 11. Accessibilità ═══ */
/* Moto ridotto vuol dire meno movimento, non nessuna transizione. Azzerare
   tutto con un `*` costringeva il pannello a comparire di scatto, e un taglio
   secco e piu violento della dissolvenza che sostituiva. Qui restano le
   dissolvenze e gli indicatori di stato, sparisce lo spostamento.
   Il motore si regola gia da solo: con moto ridotto non carica affatto le
   clip, non interpola e non trasla i testi (scrub-engine.js). */
@media(prefers-reduced-motion:reduce){
  /* niente scatto alla pressione (il menu ha le sue regole in menu.css) */
  .sw-btn:active,.sw-topcta:active{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .sw-copy__tags li,.sw-btn--ghost{backdrop-filter:none;background:rgba(13,11,9,.9)}
}
@media(prefers-contrast:more){
  .sw-scene::after{background:rgba(13,11,9,.92) !important}
  .sw-copy__body{color:var(--cream)}
}