/* ═══ Pagine legali ═══
   Stesso alfabeto del sito — Cormorant per i titoli, Lato per il testo,
   Montserrat per le etichette, i tre colori del brand — ma senza il motore
   video: sono pagine che si leggono, non si attraversano. Il fondo e lo
   stesso nero caldo, cosi passandoci non si esce dal mondo. */
*{box-sizing:border-box}
:root{
  --miele:#D2B48C; --avorio:#DED2C1; --ink:#0D0B09;
  --ui:"Montserrat",system-ui,sans-serif;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Lato",system-ui,sans-serif;
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--avorio);
  font-family:var(--body);font-weight:300;font-size:clamp(1rem,.55rem + .55vw,1.15rem);
  line-height:1.78;letter-spacing:.004em}

.sk-doc{max-width:46rem;margin:0 auto;padding:clamp(28px,6vh,64px) clamp(20px,5vw,40px) 0}

.sk-doc__et{
  display:block;font-family:var(--ui);font-weight:500;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(210,180,140,.8);
  margin-bottom:var(--s3)}
h1{font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1.06;letter-spacing:-.018em;
  margin:0 0 var(--s5);color:var(--avorio)}
h2{font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.12;letter-spacing:-.012em;
  margin:var(--s8) 0 var(--s4);color:var(--avorio)}
h3{font-family:var(--ui);font-weight:500;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(210,180,140,.8);margin:var(--s6) 0 var(--s3)}
p{margin:0 0 var(--s4);max-width:38em}
ul{margin:0 0 var(--s4);padding-left:1.1rem;max-width:38em}
li{margin-bottom:var(--s2)}
a{color:var(--miele);text-decoration:none;
  border-bottom:1px solid rgba(210,180,140,.4);padding-bottom:1px}
a:hover{border-color:var(--miele)}
strong{font-weight:400;color:#fff}

.sk-doc__agg{font-family:var(--ui);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(222,210,193,.6);margin-top:var(--s7)}

/* Le schede dei trattamenti non stanno piu' qui: hanno un foglio loro,
   assets/scheda.css, e da questo prendono solo i token e il pie'. */

/* ── piè delle pagine legali ── */
.sk-doc__pie{
  max-width:46rem;margin:0 auto;
  padding:var(--s6) clamp(20px,5vw,40px) var(--s7);
  border-top:1px solid rgba(210,180,140,.18)}

/* Sulle schede il piè porta anche il link alle note legali. La riga del
   disclaimer non sta più in fondo a ogni trattamento: da qui ci si arriva
   in un clic, che è quanto serve perché resti facilmente accessibile. */
.sk-doc__pie:has(.sk-pie__legale){
  max-width:84rem;display:flex;flex-wrap:wrap-reverse;gap:var(--s4) var(--s6);
  align-items:center;justify-content:space-between}
.sk-pie__legale{
  display:inline-flex;align-items:center;min-height:44px;border:0;
  font-family:var(--ui);font-weight:500;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(222,210,193,.58);
  transition:color .4s cubic-bezier(.22,1,.36,1)}
.sk-pie__legale:hover,.sk-pie__legale:focus-visible{color:var(--miele)}
/* ── 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}
.sk-firma:hover{color:var(--avorio)}
.sk-firma{border-bottom:0}

/* ═══ Barra delle pagine statiche ═══
   La stessa della home: menu a sinistra, monogramma al centro, invito a
   destra. Sulle schede sta sopra la foto d'apertura, trasparente, e prende il
   fondo quando la si lascia (assets/moto.js); scendendo si ritira. Sulle
   pagine-documento e' piena da subito: non c'e' nessuna foto da lasciar
   vedere, e il testo non deve passarle sotto. */
.sk-barra{position:fixed;top:0;left:0;right:0;z-index:50;
  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);
  border-bottom:1px solid transparent;
  transition:background-color .6s cubic-bezier(.22,1,.36,1),
             border-color .6s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1)}
.sk-barra.is-piena,.sk-barra--piena{background:rgba(13,11,9,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:rgba(210,180,140,.12)}
.sk-barra.is-ritirata{transform:translateY(-100%)}
.sk-barra__sx{justify-self:start;display:flex;align-items:center}
.sk-barra__marchio{justify-self:center;display:grid;place-items:center;
  min-width:44px;min-height:44px;border:0;padding:0}
.sk-barra__k{display:block;width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);
  -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(--miele);transition:background-color .5s cubic-bezier(.22,1,.36,1)}
.sk-barra__cta{justify-self:end;display:inline-flex;align-items:center;min-height:44px;
  padding:0 1.5rem;border:1px solid var(--miele);background:var(--miele);color:var(--ink);
  font-family:var(--ui);font-weight:500;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  transition:background-color .5s cubic-bezier(.22,1,.36,1),color .5s cubic-bezier(.22,1,.36,1),
             opacity .5s cubic-bezier(.22,1,.36,1)}
.sk-barra__cta:hover{border-color:var(--miele)}
@media (hover:hover) and (pointer:fine){
  .sk-barra__cta:hover{background:transparent;color:var(--miele)}
  .sk-barra__marchio:hover .sk-barra__k{background-color:var(--avorio)}
}
.sk-barra__cta:focus-visible{outline:1px solid var(--miele);outline-offset:4px}
@media (max-width:640px){
  .sk-barra__cta{padding:0 1rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .sk-barra.is-ritirata{transform:none}
}
/* sulle pagine-documento la barra e' fissa: il documento parte sotto */
.sk-doc--con-barra{padding-top:calc(76px + clamp(40px,8vh,88px))}