/* Naturalmente Sale — landing · ristrutturazione grafica del 04/10/2026
   Base: il design di ChatGPT (palette, logo, arco dell'hero, ramo d'ulivo, numeri grandi, fascia blu
   col bordo curvo, ovale pesca). Sopra: un sistema tipografico nuovo (Fraunces morbido per i titoli
   grandi, Figtree per tutto il resto), un linguaggio di forma unico (l'arco, come i portici di Cava)
   e il movimento. I colori di :root sono quelli misurati sul design (confronta-design.py --colori). */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-soft.woff2") format("woff2");font-weight:280 520;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-soft-italic.woff2") format("woff2");font-weight:280 520;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --brand:#405B97;        /* blu del logo: il colore principale */
  --brand-hover:#314D83;
  --ink:#16233A;          /* titoli, e la notte della stanza del sale */
  --body:#55606E;         /* testi */
  --muted:#5E6A75;
  --ivory:#FAF7F2;        /* fondo */
  --white:#FFFFFF;
  --sage:#E9ECE4;         /* fascia salvia */
  --sky:#E5ECF5;          /* fascia azzurra */
  --salt-pink:#C69682;    /* rosa sale: numeri, luce */
  --eyebrow:#9A5A47;      /* occhielli (il #A86450 misurato, scurito per il contrasto AA) */
  --peach:#F4E0D2;        /* ovale pesca */
  --stone:#D2BAA2;        /* l'11 materico */
  --botanical:#7F8974;    /* ramo d'ulivo */
  --line:#E4E3DE;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px,5.4vw,80px);
  --side:max(var(--gutter),calc((100% - var(--maxw)) / 2));
  --space:clamp(88px,9vw,140px);
  --curve:clamp(26px,4.6vw,70px);
  --header-h:140px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 22px 50px -18px rgba(22,35,58,.28);
  --arch-r:22px;
}

/* ───────── base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:124px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--body);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-variant-numeric:lining-nums}
/* grana leggerissima su tutta la pagina */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:url("../img/grana.png") 0 0/160px 160px repeat;opacity:.42;mix-blend-mode:soft-light}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul,ol{margin:0}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.container{width:min(100% - 2 * var(--gutter),var(--maxw));margin-inline:auto}
.section{position:relative;padding-block:var(--space)}
main > section,.site-footer{overflow-x:clip}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--white);color:var(--ink);padding:12px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.nowrap{white-space:nowrap}

/* ───────── tipografia ───────── */
h1,h2{font-family:var(--font-display);font-weight:320;color:var(--ink);letter-spacing:-.016em;line-height:1.02;font-variation-settings:"opsz" 144;text-wrap:balance}
h2{font-size:clamp(40px,5.4vw,78px)}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--brand);letter-spacing:-.01em}
h3{font-family:var(--font-body);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lead{font-size:clamp(17.5px,1.4vw,19.5px);line-height:1.6;color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 12.5px/1.4 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.eyebrow--blue{color:var(--brand)}
.eyebrow--muted{color:var(--muted)}

/* ───────── pulsanti ───────── */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:14px 26px 14px 28px;border-radius:999px;background:var(--brand);color:var(--white);font:600 15.5px/1.2 var(--font-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;text-wrap-style:balance;box-shadow:0 1px 0 rgba(22,35,58,.05);transition:background .3s ease,color .3s ease,transform .35s var(--ease),box-shadow .35s ease}
.button .icon{width:18px;height:18px;transition:transform .35s var(--ease)}
.button:hover{background:var(--brand-hover);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(64,91,151,.55)}
.button:hover .icon{transform:translateX(4px)}
.button--small{min-height:48px;padding:11px 20px 11px 22px;font-size:14.5px}
.button--outline{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px rgba(64,91,151,.7)}
.button--outline:hover{background:var(--brand);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--brand),0 14px 30px -10px rgba(64,91,151,.5)}
.button--light{background:var(--ivory);color:var(--brand)}
.button--light:hover{background:var(--white);color:var(--brand);box-shadow:0 14px 34px -12px rgba(10,20,40,.45)}
.button--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.button--ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--white)}
.button--glow{background:var(--peach);color:var(--ink);box-shadow:0 0 0 1px rgba(244,224,210,.4),0 18px 50px -14px rgba(198,150,130,.75)}
.button--glow:hover{background:var(--ivory);color:var(--ink);box-shadow:0 0 0 1px rgba(244,224,210,.6),0 22px 60px -12px rgba(198,150,130,.95)}
.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--brand);font:600 15.5px/1.3 var(--font-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;padding:10px 0;min-height:44px}
.text-link .icon{width:18px;height:18px;transition:transform .3s var(--ease)}
.text-link:hover .icon{transform:translateX(4px)}

/* ───────── l'arco: la forma di tutte le foto ─────────
   cima a mezzo cerchio, base appena smussata: per una foto 4:5 il raggio verticale è il 40% */
.arch{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/5;border-radius:50% 50% var(--arch-r) var(--arch-r) / 40% 40% var(--arch-r) var(--arch-r);background:var(--sage)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.arch img[data-parallax]{inset:-7% 0;height:114%;transition:none;will-change:transform}

/* ───────── header in vetro ───────── */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s ease,box-shadow .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;height:var(--header-h);transition:height .45s var(--ease)}
.brand{display:block;flex:none;border-radius:8px}
.brand{position:relative}
.logo{width:118px;height:auto;transition:width .45s var(--ease),opacity .45s ease}
.logo--white{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.main-nav{display:flex;align-items:center;gap:clamp(24px,3vw,48px)}
.nav-list{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav-list a{position:relative;display:block;padding:10px 0;font:500 15px/1.2 var(--font-body);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-list a:hover::after,.nav-list a[aria-current="true"]::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-list a[aria-current="true"],.nav-list a[aria-current="page"]{color:var(--brand)}
.menu-toggle{display:none}
.site-header.is-scrolled{background:rgba(250,247,242,.82);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 rgba(22,35,58,.07),0 10px 34px -18px rgba(22,35,58,.25)}
.site-header.is-scrolled .header-inner{height:112px}
.site-header.is-scrolled .logo{width:88px}
/* idea 1 · sopra le fasce notte e blu l'header diventa vetro scuro, col logo bianco del kit */
.site-header.is-dark{background:rgba(22,35,58,.74);box-shadow:0 1px 0 rgba(250,247,242,.08),0 14px 40px -20px rgba(0,0,0,.6)}
.site-header.is-dark .logo:not(.logo--white){opacity:0}
.site-header.is-dark .logo--white{opacity:1}
.site-header.is-dark .nav-list a{color:var(--ivory)}
.site-header.is-dark .nav-list a::after{background:var(--peach)}
.site-header.is-dark .nav-list a[aria-current="true"],.site-header.is-dark .nav-list a[aria-current="page"]{color:var(--peach)}
.site-header.is-dark .nav-button{background:var(--ivory);color:var(--brand)}
.site-header.is-dark .nav-button:hover{background:var(--white)}
.site-header.is-dark .menu-toggle{color:var(--ivory)}
.nav-list a{transition:color .4s ease}

/* ───────── 1 · apertura ───────── */
.hero{position:relative;display:grid;grid-template-columns:var(--side) minmax(0,1fr) minmax(0,1.04fr);padding-top:var(--header-h);isolation:isolate}
.hero::before{content:"";position:absolute;inset:-10% 0 0 0;z-index:-1;pointer-events:none;background:radial-gradient(48% 52% at 16% 34%,rgba(198,150,130,.20),transparent 72%),radial-gradient(34% 40% at 2% 70%,rgba(127,137,116,.14),transparent 70%),radial-gradient(30% 34% at 56% 6%,rgba(229,236,245,.9),transparent 70%);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.hero-copy{grid-column:2;align-self:center;position:relative;z-index:2;padding:40px clamp(24px,4vw,56px) 110px 0;max-width:660px}
.hero-title{font-size:clamp(46px,6vw,92px);line-height:.98;letter-spacing:-.02em;margin-bottom:28px}
.hero-title .line{display:block;overflow:hidden;padding:0 .12em .1em 0;margin-bottom:-.1em}
.hero-title .line-in{display:inline-block}
.hero-title em{color:var(--brand)}
.hero-text{max-width:31em;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink);opacity:.82}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-points li{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(22,35,58,.07);font:500 15px/1.3 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.dot-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--sky);color:var(--brand)}
.dot-icon .icon{width:18px;height:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-media{grid-column:3;position:relative;min-height:clamp(480px,47vw,720px);margin-top:8px}
.hero-frame{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-top-left-radius:min(24vw,340px) min(26vw,360px);background:var(--sage)}
.hero-photo{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:50% 50%;will-change:transform}
.hero-arc{position:absolute;left:-22px;top:-22px;width:min(44vw,600px);height:auto;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 92%);mask-image:linear-gradient(to bottom,#000 45%,transparent 92%)}
.badge{position:absolute;right:7%;bottom:-62px;z-index:4;width:154px;height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("../img/decorazioni/bollino-base.svg") center/contain no-repeat;filter:drop-shadow(0 16px 26px rgba(22,35,58,.14));color:var(--ink);text-align:center}
.badge-number{display:block;font:340 60px/.86 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.05em}
.badge-text{display:block;margin-top:6px;font:italic 300 22px/1 var(--font-display);color:var(--brand)}
.hero-leaf{position:absolute;left:-30px;bottom:-40px;width:150px;z-index:1;opacity:.9;pointer-events:none;transform-origin:30% 100%}

/* ───────── fascia che scorre ───────── */
.marquee{position:relative;overflow:hidden;margin-top:clamp(84px,8vw,120px);padding:22px 0;border-block:1px solid rgba(22,35,58,.08);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex-wrap:nowrap;width:max-content}
.marquee-track li{display:flex;align-items:center;flex:none;font:italic 300 clamp(26px,2.9vw,42px)/1.15 var(--font-display);letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.marquee-track li::after{content:"";flex:none;width:22px;height:22px;margin-inline:clamp(26px,3vw,48px);background:var(--salt-pink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 7 7-2 11-9 2-4-11Z M12 2l-1 10 6 8M4 11l7 1 8-3M11 12 8 22'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 7 7-2 11-9 2-4-11Z M12 2l-1 10 6 8M4 11l7 1 8-3M11 12 8 22'/%3E%3C/svg%3E") center/contain no-repeat}
.marquee-track li:nth-child(even)::after{background:var(--botanical);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3C6 1 1 8 5 15c5 8 17 3 15-12Z M4 21 16 8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3C6 1 1 8 5 15c5 8 17 3 15-12Z M4 21 16 8'/%3E%3C/svg%3E")}
.js .marquee-track.is-ready{animation:marquee 70s linear infinite}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ───────── fasce colorate col bordo curvo (come la fascia blu del design) ───────── */
.band{position:relative;isolation:isolate;margin-top:var(--curve)}
.band-curve{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:var(--curve);display:block;pointer-events:none}
.band-curve path{fill:var(--band-bg)}
.band--night{--band-bg:var(--ink);background:var(--ink);color:var(--ivory)}
.band--sky{--band-bg:var(--sky);background:var(--sky)}
.band--sage{--band-bg:var(--sage);background:var(--sage)}
.band--blue{--band-bg:var(--brand);background:var(--brand);color:var(--white)}

.treatments::before,.booking::before,.contact::before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 160px);mask-image:linear-gradient(to bottom,transparent,#000 160px)}

/* ───────── 2 · la stanza del sale: si entra nella stanza ───────── */
.salt{--overlap:clamp(110px,11vw,180px);margin-top:calc(var(--curve) + clamp(40px,4vw,64px));padding:clamp(40px,5vw,80px) 0 calc(var(--overlap) + clamp(72px,7vw,110px))}
.salt-light{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:calc(.35 + .65 * var(--p,1));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.salt-light::before{content:"";position:absolute;left:-4%;top:6%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(244,224,210,.42),rgba(198,150,130,.30) 45%,rgba(198,150,130,0) 100%);animation:breathe 10s ease-in-out infinite}
.salt-light::after{content:"";position:absolute;right:-10%;top:-6%;width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(64,91,151,.62),rgba(64,91,151,0));animation:breathe 13s ease-in-out -4s infinite reverse}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.78}50%{transform:scale(1.05);opacity:1}}
.salt-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);column-gap:clamp(40px,7vw,120px);align-items:center}
.salt-media{grid-column:1;grid-row:1;position:relative;padding:0 14% 90px 0}
.salt-copy{grid-column:2;grid-row:1;position:relative;z-index:2}
.salt-portal .arch--portal{aspect-ratio:768/1020;border-radius:50% 50% 26px 26px / 37.6% 37.6% 26px 26px;background:var(--ink);transform:scale(calc(.9 + .1 * var(--p,1)));transform-origin:50% 70%;box-shadow:0 0 0 1px rgba(244,224,210,.12),0 40px 120px -30px rgba(198,150,130,.55)}
.salt-inset{position:absolute;right:0;bottom:0;width:40%;z-index:2}
.salt-inset .arch{box-shadow:0 0 0 7px var(--ink),0 30px 60px -20px rgba(0,0,0,.6)}
.salt-title{font-size:clamp(52px,6.6vw,104px);line-height:.94;color:var(--ivory);letter-spacing:-.022em}
.salt-title span{display:block}
.salt-title em{display:block;padding-left:.75em;color:var(--salt-pink)}
.salt-metric{margin:clamp(26px,3.4vw,48px) 0 clamp(18px,2vw,28px);font:300 clamp(104px,12.6vw,196px)/.8 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.05em;white-space:nowrap;background:linear-gradient(100deg,var(--peach) 8%,var(--salt-pink) 52%,var(--stone) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 40px rgba(198,150,130,.35));padding-bottom:.06em}
.salt-texts{display:grid;gap:14px;max-width:34em}
.salt-texts p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.62;color:rgba(250,247,242,.82)}
.salt-ticket{display:grid;gap:12px;max-width:34em;margin:30px 0 34px;padding:22px 0 20px;border-block:1px solid rgba(244,224,210,.18)}
.salt-figures{display:flex;align-items:baseline;gap:clamp(28px,4vw,56px)}
.salt-figure{display:flex;align-items:baseline;gap:10px}
.salt-num{font:300 clamp(46px,4.4vw,64px)/.9 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--ivory)}
.salt-unit{font:600 12.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--salt-pink)}
.salt-num--cur{letter-spacing:-.01em}
.salt-figure + .salt-figure{padding-left:clamp(28px,4vw,56px);border-left:1px solid rgba(244,224,210,.18)}
.salt-price{font-size:15px;color:rgba(250,247,242,.66)}
.salt-crystals{position:absolute;left:max(12px,calc((100% - var(--maxw)) / 2 - 90px));bottom:clamp(36px,4vw,64px);width:clamp(100px,10vw,160px);opacity:.34;pointer-events:none;filter:brightness(2.4) saturate(.6)}

/* ───────── 3 · consulenze ───────── */
.consult{padding-top:0}
.consult-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(40px,7vw,120px);align-items:start}
.consult-copy{grid-column:1;grid-row:1;padding-top:clamp(64px,7vw,110px)}
.consult-copy h2{max-width:11em}
.types{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 26px}
.types li{display:inline-flex;align-items:center;gap:9px;padding:9px 18px 9px 14px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font:500 15px/1.2 var(--font-body);color:var(--ink)}
.types .icon{width:18px;height:18px;color:var(--brand)}
.method{margin:26px 0 36px;max-width:36em}
.method li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.method li:last-child{border-bottom:1px solid var(--line)}
.method .icon{width:19px;height:19px;margin-top:4px;color:var(--botanical)}
.method p{font-size:16.5px;color:var(--ink);opacity:.86}
.consult-media{grid-column:2;grid-row:1;position:relative;z-index:3;margin-top:calc(-1 * var(--overlap,clamp(110px,11vw,180px)))}
.consult-media::before{content:"";position:absolute;inset:18% -18% -10% -26%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(229,236,245,.95),rgba(229,236,245,0));pointer-events:none}
.consult-media .arch{box-shadow:0 40px 90px -40px rgba(22,35,58,.45)}
.medallion{position:absolute;left:-46px;bottom:37px;z-index:4;display:grid;place-items:center;width:132px;height:148px;background:url("../img/decorazioni/bollino-base.svg") center/contain no-repeat;filter:drop-shadow(0 16px 26px rgba(22,35,58,.16));font:300 42px/1 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}

/* ───────── 4 · trattamenti e corsi ───────── */
.treatments{padding:clamp(52px,5vw,84px) 0 clamp(72px,7vw,110px)}
.treatments::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 92% 8%,rgba(255,255,255,.85),transparent 70%),radial-gradient(36% 46% at 4% 80%,rgba(244,224,210,.5),transparent 70%)}
.treatments-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;flex-wrap:wrap;margin-bottom:clamp(40px,4.4vw,64px)}
.treatments-head h2{max-width:10.5em}
.carousel{width:min(100% - 2 * var(--gutter),var(--maxw));margin-inline:auto}
.t-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.9vw,30px);align-items:start}
.t-card{position:relative}
.t-card:nth-child(even){margin-top:64px}
.t-card .arch{transition:transform .6s var(--ease),box-shadow .6s ease;box-shadow:0 18px 40px -26px rgba(22,35,58,.35)}
.t-card:hover .arch{transform:translateY(-8px);box-shadow:0 34px 60px -26px rgba(22,35,58,.45)}
.t-card:hover .arch img{transform:scale(1.06)}
.t-title{margin-top:20px;font-size:18px;line-height:1.25}
.t-meta{display:inline-flex;margin-top:10px;padding:5px 12px;border-radius:999px;background:var(--white);font:600 13.5px/1.3 var(--font-body);color:var(--brand);font-variant-numeric:tabular-nums}
.t-cta{display:flex;align-items:center;gap:6px;width:max-content;margin-top:12px;padding:4px 0;font:600 14px/1.2 var(--font-body);color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(64,91,151,.3);transition:border-color .3s ease,gap .3s var(--ease)}
.t-cta .icon{width:15px;height:15px;transition:transform .35s var(--ease)}
.t-cta::after{content:"";position:absolute;inset:0;border-radius:24px}
.t-card:hover .t-cta{border-color:var(--brand);gap:9px}
.t-card:hover .t-cta .icon{transform:translate(2px,-2px)}
.t-cta:focus-visible{outline:none}
.t-cta:focus-visible::after{outline:2px solid var(--brand);outline-offset:6px}
.carousel-bar{display:none}
.courses{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);align-items:center;gap:clamp(28px,5vw,88px);margin-top:clamp(56px,6vw,90px);padding:clamp(22px,2.6vw,40px);border-radius:44px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(64,91,151,.1)}
.courses-media{position:relative;width:100%;max-width:360px}
.courses-media .arch{box-shadow:0 26px 60px -30px rgba(22,35,58,.45)}
.courses-copy{padding:0 clamp(0px,3vw,48px) 0 0}
.courses-copy .button{margin-top:32px}
.courses-text{font:320 clamp(30px,3.4vw,50px)/1.1 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

/* ───────── 5 · prodotti: la vetrina ───────── */
.products::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 40% at 88% 18%,rgba(244,224,210,.7),transparent 70%)}
.products{isolation:isolate}
.products-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:28px clamp(32px,6vw,96px);margin-bottom:clamp(44px,5vw,72px)}
.products-head h2{max-width:10em}
.products-intro{display:grid;gap:14px;padding-bottom:8px}
.products-intro p{font-size:17px;color:var(--ink);opacity:.84}
.p-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.p-card{position:relative;display:flex;flex-direction:column;border-radius:40px;padding:clamp(22px,2.6vw,40px);background:linear-gradient(170deg,rgba(244,224,210,.62),rgba(244,224,210,.26));box-shadow:inset 0 0 0 1px rgba(198,150,130,.16);transition:transform .6s var(--ease),box-shadow .6s ease}
.p-card--sage{background:linear-gradient(170deg,rgba(233,236,228,1),rgba(233,236,228,.55));box-shadow:inset 0 0 0 1px rgba(127,137,116,.16)}
.p-card:hover{box-shadow:inset 0 0 0 1px rgba(198,150,130,.2),var(--shadow-soft)}
.p-media{position:relative;aspect-ratio:860/600;margin:4px 6% 0 4%}
.p-halo{position:absolute;inset:-5% -6% -3% -2%;width:108%;height:108%;max-width:none;transition:transform .9s var(--ease)}
.p-oval{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:0 26px 50px -30px rgba(22,35,58,.5)}
.p-oval img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.p-card:hover .p-oval img{transform:scale(1.05)}
.p-card:hover .p-halo{transform:translate(-8px,6px)}
.p-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:1;margin-top:clamp(26px,3vw,40px)}
.p-title{font-size:clamp(21px,1.8vw,25px);line-height:1.2}
.p-tags{display:flex;flex-wrap:wrap;gap:8px}
.p-tags li{padding:7px 15px;border-radius:999px;background:var(--white);font:600 14px/1.2 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(22,35,58,.06)}
.p-tags .p-tag--price{background:var(--ink);color:var(--ivory)}
.p-body .button{margin-top:auto}

/* ───────── 6 · prezzi: il listino ───────── */
.prices{padding-top:0}
.prices-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:32px clamp(32px,6vw,96px);align-items:start;padding-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.prices-head{position:relative}
.prices-head h2{font-size:clamp(64px,9vw,136px);line-height:.88;letter-spacing:-.03em}
.prices-crystals{width:clamp(90px,9vw,130px);margin-top:28px;opacity:.75}
.price-row{display:flex;align-items:baseline;gap:18px;padding:24px 0 20px;border-bottom:1px solid var(--line)}
.price-row:first-child{padding-top:6px}
.price-name{font:500 clamp(17px,1.45vw,20px)/1.35 var(--font-body);color:var(--ink)}
.price-lead{flex:1 1 auto;min-width:28px;height:4px;align-self:baseline;background:radial-gradient(circle,rgba(22,35,58,.32) 1.1px,transparent 1.6px) 0 50%/9px 4px repeat-x;transform:translateY(-4px)}
.price-value{flex:none;font:320 clamp(30px,2.8vw,42px)/1 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.005em;color:var(--brand);white-space:nowrap}
.price-note{margin-top:24px;font-size:16px;color:var(--body)}
.price-note a,.step-text a,.faq-answer a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ───────── 7 · come prenotare: la linea che si disegna ───────── */
.booking{padding:clamp(52px,5vw,84px) 0 var(--space)}
.booking::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(34% 60% at 96% 90%,rgba(255,255,255,.6),transparent 70%)}
.booking-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(44px,5vw,76px)}
.steps-wrap{--num:clamp(76px,7.6vw,118px);--elbow:44px;position:relative}
.steps-line{position:absolute;left:0;right:var(--elbow);top:calc(var(--num) * .46);height:1.5px;background:rgba(64,91,151,.42);transform:scaleX(var(--dh,1));transform-origin:left center}
.steps-line-v{position:absolute;right:var(--elbow);top:calc(var(--num) * .46);bottom:56px;width:1.5px;background:rgba(64,91,151,.42);transform:scaleY(var(--dv,1));transform-origin:center top}
.steps-cta{position:relative;z-index:1;display:flex;justify-content:flex-end;margin-top:clamp(40px,4vw,56px)}
.steps-cta .button.is-lit{animation:lit 1.9s var(--ease-out) 1}
@keyframes lit{0%{box-shadow:0 0 0 0 rgba(64,91,151,.5),0 0 0 0 rgba(244,224,210,0)}35%{box-shadow:0 0 0 9px rgba(64,91,151,.16),0 0 46px 12px rgba(198,150,130,.55)}100%{box-shadow:0 0 0 24px rgba(64,91,151,0),0 0 0 0 rgba(198,150,130,0)}}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding-right:calc(var(--elbow) + 28px)}
.step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num icon" "text text";align-items:center;align-content:start;gap:22px 18px}
.step-number{grid-area:num;padding-right:18px;background:var(--sage);font:300 var(--num)/.92 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.05em;color:var(--salt-pink);transition:opacity .8s ease,transform .8s var(--ease)}
.step-icon{grid-area:icon;justify-self:start;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--brand);box-shadow:0 10px 24px -14px rgba(22,35,58,.4);transition:transform .6s var(--ease)}
.step-icon .icon{width:20px;height:20px}
.step-text{grid-area:text;max-width:22em;font-size:17px;color:var(--ink)}
.js .booking .step{opacity:.45;transition:opacity .7s ease}
.js .booking .step.is-on{opacity:1}

/* ───────── 8 · chi siamo ───────── */
.about-inner{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);align-items:center}
.about-art{position:relative;height:clamp(220px,24vw,340px);display:flex;align-items:center}
.about-number{display:block;font:420 clamp(230px,31vw,460px)/.74 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.09em;color:var(--stone);background:linear-gradient(rgba(176,138,98,.40),rgba(176,138,98,.40)),url("../img/foto/texture-11.webp") center/cover no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em;margin-left:-.06em;will-change:transform}
.about-leaf{position:absolute;left:clamp(150px,17vw,260px);top:-6%;width:clamp(90px,13vw,190px);opacity:.9;pointer-events:none;transform-origin:20% 100%}
.about-copy{border-left:1px solid rgba(64,91,151,.5);padding:20px 0 20px clamp(32px,5.5vw,84px)}
.about-copy h2{margin-bottom:22px}
.about-copy p:not(.eyebrow){max-width:32em;font-size:17.5px;color:var(--ink);opacity:.86}
.about-copy p + p{margin-top:12px}
.about-copy .lead{opacity:1}

/* ───────── 9 · domande frequenti ───────── */
.faq{padding-top:clamp(24px,3vw,48px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:130px}
.faq-head h2{max-width:6em}
.faq-leaf{width:clamp(80px,8vw,120px);margin-top:28px;opacity:.75;transform:rotate(-8deg)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;min-height:64px;cursor:pointer;list-style:none;font:500 clamp(17px,1.45vw,20px)/1.35 var(--font-body);color:var(--ink);transition:color .3s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand)}
.faq-question{text-wrap:balance}
.faq-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(64,91,151,.28);color:var(--brand);transition:transform .5s var(--ease),background .35s ease,color .35s ease}
.faq-icon .icon{width:18px;height:18px}
.faq-item[open] .faq-icon{transform:rotate(135deg);background:var(--brand);color:var(--white)}
.faq-answer{overflow:hidden}
.faq-answer p{padding:0 72px 26px 0;max-width:40em;font-size:16.5px;line-height:1.65}

/* ───────── 10 · dove siamo ───────── */
.contact{margin-top:calc(var(--curve) + 10px);padding:clamp(40px,4vw,64px) 0 clamp(80px,8vw,120px);overflow-x:clip}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(44% 70% at 84% 30%,rgba(144,167,206,.42),transparent 70%),radial-gradient(30% 50% at 0% 100%,rgba(22,35,58,.28),transparent 70%)}
.contact-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:40px}
.contact h2{color:var(--white)}
.contact-list{display:grid;gap:14px;margin-top:30px}
.contact-list li{display:flex;align-items:flex-start;gap:14px;font-size:18px;line-height:1.45;color:var(--white);text-wrap:pretty}
.contact-list .icon{width:21px;height:21px;margin-top:2px;opacity:.8}
.contact-list a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px;transition:text-decoration-color .3s ease}
.contact-list a:hover{text-decoration-color:var(--white)}
.contact-list a[href^="tel"],.footer-info a[href^="tel"]{white-space:nowrap}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.contact-art{position:relative;justify-self:center;width:clamp(200px,22vw,320px);aspect-ratio:4/5.4}
.contact-arch{position:absolute;inset:0;border:1px solid rgba(255,255,255,.32);border-bottom:0;border-radius:50% 50% 0 0 / 37% 37% 0 0}
.contact-arch::after{content:"";position:absolute;inset:14px 14px 0;border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:inherit}
.contact-leaf{position:absolute;left:18%;bottom:-6%;width:78%;opacity:.95;pointer-events:none;transform-origin:30% 100%}

/* ───────── footer ───────── */
.site-footer{position:relative;background:var(--ivory)}
.footer-main{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:40px;padding-block:56px 30px}
.logo--footer{width:190px}
.footer-brand{justify-self:start;border-radius:8px}
.footer-info{text-align:center;font-size:15px;line-height:1.75;color:var(--body)}
.footer-info a{color:var(--body);text-decoration:none}
.footer-info a:hover{color:var(--brand);text-decoration:underline}
.footer-name{font-weight:700;color:var(--ink);margin-bottom:4px}
.footer-nav{justify-self:end;display:flex;gap:44px}
.footer-nav a{display:inline-block;padding:4px 0;font-size:15px;color:var(--ink);text-decoration:none}
.footer-nav a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
.footer-social a{color:var(--brand)}
.footer-note{padding-bottom:18px;text-align:center}
.footer-note p{font-size:12.5px;color:var(--body);max-width:640px;margin-inline:auto}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:18px 28px;font-size:12.5px;color:var(--body)}
.footer-bottom a{color:var(--body);text-decoration:none;padding:6px 2px}
.footer-bottom a:hover{color:var(--brand);text-decoration:underline}
.credit a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* pulsante fisso WhatsApp (solo telefono) */
.wa-fixed{display:none}

/* banner cookie (una riga) */
.cookie-bar{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;font-size:13px;line-height:1.35;color:var(--ink);background:rgba(250,247,242,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(22,35,58,.05)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cookie-bar a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.cookie-bar__ok{flex:none;border:1px solid var(--brand);background:none;color:var(--brand);font-size:13px;font-weight:600;padding:6px 16px;border-radius:999px;min-height:40px}
.cookie-bar__ok:hover{background:var(--brand);color:var(--white)}

/* pagine di servizio (privacy, 404) */
.legal{padding:calc(var(--header-h) + 48px) 0 72px}
.legal-inner{max-width:760px}
.legal h1{font-size:clamp(44px,5.4vw,72px);margin-bottom:14px}
.legal h2{font-size:clamp(28px,2.8vw,38px);margin:40px 0 10px}
.legal p{margin-top:10px}
.legal a:not(.button){color:var(--brand)}
.not-found .legal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-legal .header-inner .text-link{margin-left:auto}

/* ───────── movimento ───────── */
/* apertura: le righe del titolo salgono, il resto arriva in cascata */
.js .hero-title .line-in{transform:translateY(108%);animation:line-up 1.1s var(--ease-out) forwards;animation-delay:calc(var(--d,0) * 110ms + 120ms)}
.js .load{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease-out) forwards;animation-delay:calc(var(--d,0) * 90ms + 200ms)}
.js .hero-photo{animation:settle 2.2s var(--ease-out) both}
.js .hero-arc{animation:fade 1.6s ease .5s both}
.js .badge{animation:pop 1s var(--ease-out) .9s both}
@keyframes line-up{to{transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes settle{from{scale:1.08}to{scale:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
/* il ramo d'ulivo si muove appena, come al vento */
.hero-leaf,.contact-leaf,.about-leaf{animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-1.5deg}50%{rotate:2deg}}

/* entrate a cascata allo scorrere */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.in{opacity:1;transform:none}
/* foto che si svelano dal basso */
.js .reveal-photo .arch{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-out),transform .6s var(--ease),box-shadow .6s ease;transition-delay:calc(var(--d,0) * 140ms)}
.js .reveal-photo.in .arch{clip-path:inset(-30%)}
.js .salt-portal .arch--portal{transition:clip-path 1.6s var(--ease-out)}
.js .reveal-photo .medallion{opacity:0;transition:opacity .8s ease .7s}
.js .reveal-photo.in .medallion{opacity:1}

/* ───────── computer piccolo ───────── */
@media (max-width:1180px){
  .main-nav{gap:24px}
  .nav-list{gap:22px}
  .nav-list a{font-size:14.5px}
  .hero-leaf{width:120px;left:-50px}
  .t-list{gap:16px}
  .t-title{font-size:16.5px}
}
@media (min-width:1024px) and (max-width:1100px){
  .logo{width:104px}
  .nav-list{gap:16px}
  .nav-list a{font-size:14px}
  .nav-button{padding:9px 16px;min-height:44px;font-size:14px}
}

/* ───────── tablet ───────── */
@media (max-width:1023px){
  :root{--header-h:118px}
  .logo{width:92px}
  .site-header.is-scrolled .header-inner{height:94px}
  .site-header.is-scrolled .logo{width:64px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-8px;border:0;background:none;color:var(--brand);border-radius:12px}
  .menu-toggle .icon{width:28px;height:28px}
  .menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
  .menu-toggle[aria-expanded="true"] .icon-close{display:block}
  .main-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 26px;background:var(--ivory);box-shadow:0 24px 40px -20px rgba(22,35,58,.25);border-top:1px solid var(--line)}
  .main-nav.is-open{display:flex;animation:menu-in .4s var(--ease-out)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list a{padding:14px 0;font:320 28px/1.15 var(--font-display);letter-spacing:-.02em;border-bottom:1px solid var(--line)}
  .nav-list a::after{display:none}
  .nav-button{margin-top:18px;min-height:52px}
  .site-header:has(.main-nav.is-open){background:rgba(250,247,242,.94)}

  .hero-copy{padding:36px 28px 100px 0}
  .badge{width:128px;height:142px;bottom:-50px}
  .badge-number{font-size:48px}
  .badge-text{font-size:19px}

  .salt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .salt-media{padding-right:10%}

  /* trattamenti: carosello */
  .carousel{width:100%}
  .t-list{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:12px var(--gutter) 18px;scrollbar-width:none}
  .t-list::-webkit-scrollbar{display:none}
  .t-card{flex:0 0 min(38vw,300px);scroll-snap-align:start}
  .t-card:nth-child(even){margin-top:0}
  .t-card:hover .arch{transform:none}
  .carousel-bar{display:block;position:relative;width:min(100% - 2 * var(--gutter),var(--maxw));height:2px;margin:10px auto 0;border-radius:2px;background:rgba(64,91,151,.14);overflow:hidden}
  .carousel-bar span{position:absolute;left:0;top:0;bottom:0;width:calc(var(--size,.4) * 100%);border-radius:2px;background:var(--brand);transform:translateX(calc(var(--pos,0) * (100% / var(--size,.4) - 100%)))}

  .courses{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}
  .footer-main{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;padding-block:44px 16px}
  .footer-brand{justify-self:center}
  .logo--footer{width:130px}
  .footer-info{font-size:14.5px;line-height:1.65}
  .footer-nav{grid-column:auto;justify-self:center;flex-direction:column;gap:6px;align-items:center}
  .footer-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
  .footer-nav a{font-size:14.5px;padding:8px 0}
  .footer-bottom{flex-wrap:wrap;justify-content:center;text-align:center;padding-block:12px 18px;row-gap:2px;column-gap:14px}
  .credit{order:3;width:100%}
  /* 12 · l'occhiello dell'apertura su una riga */
  .hero-copy .eyebrow{letter-spacing:.14em}
}

/* ───────── telefono ───────── */
@media (max-width:767px){
  :root{--header-h:112px;--gutter:22px;--space:76px;--curve:30px;--arch-r:16px}
  html{scroll-padding-top:104px}
  body{font-size:16px;padding-bottom:76px}
  h2{font-size:clamp(34px,9.6vw,42px);line-height:1.04}
  .lead{font-size:16.5px}
  .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:14px}
  .eyebrow::before{width:20px}
  .button{min-height:52px;padding:13px 22px;font-size:15px}
  .logo{width:84px}
  .site-header.is-scrolled .header-inner{height:94px}
  .site-header.is-scrolled .logo{width:64px}

  /* apertura */
  .hero{grid-template-columns:var(--gutter) minmax(0,1fr)}
  .hero::before{background:radial-gradient(70% 40% at 20% 20%,rgba(198,150,130,.2),transparent 72%),radial-gradient(60% 30% at 100% 60%,rgba(229,236,245,.9),transparent 70%)}
  .hero-copy{grid-column:2;padding:14px var(--gutter) 34px 0;max-width:none}
  .hero-title{font-size:clamp(38px,10.6vw,48px);line-height:1;margin-bottom:18px}
  .hero-text{font-size:16px}
  .hero-points{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
  .hero-points li{font-size:14.5px}
  .dot-icon{width:30px;height:30px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
  .hero-media{grid-column:2;min-height:0;height:clamp(300px,92vw,440px);margin-top:10px}
  .hero-frame{border-top-left-radius:42vw 44vw}
  .hero-arc{left:-14px;top:-14px;width:52%}
  .badge{right:auto;left:-6px;bottom:-40px;width:104px;height:116px}
  .badge-number{font-size:40px}
  .badge-text{font-size:16px}
  .hero-leaf{display:none}

  .marquee{margin-top:64px;padding:16px 0}
  .marquee-track li{font-size:26px}
  .marquee-track li::after{width:17px;height:17px;margin-inline:22px}

  /* stanza del sale */
  .salt{--overlap:0px;margin-top:calc(var(--curve) + 40px);padding:26px 0 70px}
  .salt-grid{display:flex;flex-direction:column;align-items:stretch}
  .salt-copy{display:contents}
  .salt-title{order:1;font-size:clamp(46px,13.4vw,60px)}
  .salt-title em{padding-left:.5em}
  .salt-media{order:2;margin-top:28px;padding:0 18% 54px 0}
  .salt-metric{order:3;margin:32px 0 18px;font-size:clamp(92px,28vw,124px)}
  .salt-texts{order:4;gap:12px}
  .salt-texts p{font-size:16px}
  .salt-ticket{order:5;margin:24px 0 26px;padding:18px 0 16px}
  .salt-num{font-size:46px}
  .salt-unit{font-size:11px}
  .salt > .container > .button,.salt-copy > .button{order:6;align-self:stretch}
  .salt-inset{width:44%}
  .salt-inset .arch{box-shadow:0 0 0 5px var(--ink),0 20px 40px -16px rgba(0,0,0,.6)}
  .salt-light::before{left:-30%;top:10%;width:130%}
  .salt-light::after{width:110%;right:-50%;top:-8%}
  .salt-crystals{display:none}

  /* consulenze */
  .consult{padding-top:var(--space)}
  .consult-grid{display:flex;flex-direction:column;align-items:stretch}
  .consult-copy{display:contents}
  .consult-copy h2{order:1}
  .types{order:2;margin:20px 0 4px;gap:8px}
  .types li{font-size:15px;padding:7px 14px 7px 11px}
  .consult-media{order:3;margin:28px 0 0 auto;width:86%}
  .consult-copy .lead{order:4;margin-top:30px}
  .method{order:5;margin:20px 0 28px}
  .method p{font-size:15.5px}
  .consult-copy > .button{order:6;align-self:stretch}
  .medallion{left:-38px;bottom:21px;width:104px;height:116px;font-size:34px}

  /* trattamenti */
  .treatments{padding:28px 0 var(--space)}
  .treatments-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:26px}
  .treatments-head .button{align-self:stretch}
  .t-card{flex-basis:min(66vw,280px)}
  .t-title{font-size:17px;margin-top:16px}
  .t-meta,.t-cta{font-size:15px}
  .courses{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:44px;border-radius:32px;padding:18px 18px 22px}
  .courses-media{max-width:300px;margin-inline:auto}
  .courses-copy{padding:0 4px}
  .courses-text{font-size:24px}   /* la frase dei corsi (98 caratteri dopo il copy del 04/10 sera) sta in tre righe */
  .courses-copy .button{width:100%;margin-top:24px;white-space:normal;text-wrap:balance;text-align:center;justify-content:center}

  /* prodotti */
  .products-head{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .products-intro p{font-size:16px}
  .p-list{grid-template-columns:1fr;gap:16px}
  .p-card{border-radius:30px;padding:20px 20px 22px}
  .p-media{margin:2px 7% 0 5%}
  .p-body{gap:14px;margin-top:22px}
  .p-body .button{align-self:stretch}

  /* prezzi */
  .prices-grid{grid-template-columns:1fr;gap:6px;padding-top:44px}
  .prices-head{display:flex;align-items:flex-end;justify-content:space-between}
  .prices-head h2{font-size:64px}
  .prices-crystals{width:70px;margin:0 0 4px}
  .price-row{gap:12px;padding:18px 0 16px}
  .price-name{font-size:16px}
  .price-lead{min-width:14px}
  .price-value{font-size:28px}
  .price-note{font-size:15px}

  /* come prenotare: in colonna, la linea scende */
  .booking{padding:28px 0 var(--space)}
  .booking-head{margin-bottom:28px}
  .steps-wrap{--num:58px}
  .steps-line{left:28px;right:auto;top:30px;bottom:52px;width:1.5px;height:auto;transform:scaleY(var(--d,1));transform-origin:center top}
  .steps-line-v{display:none}
  .steps{grid-template-columns:1fr;gap:28px;padding-right:0}
  .steps-cta{margin-top:30px}
  .steps-cta .button{width:100%}
  .step{grid-template-columns:62px minmax(0,1fr);grid-template-areas:"num text";align-items:start;gap:0 16px}
  .step-number{padding:0 0 8px;text-align:center;line-height:1}
  .step-icon{display:none}
  .step-text{font-size:16px;padding-top:10px}

  /* chi siamo */
  .about{padding-block:56px}
  .about-inner{grid-template-columns:110px minmax(0,1fr);column-gap:16px;align-items:end}
  .about-copy{display:contents}
  .about-art{grid-row:1 / span 2;height:150px}
  .about-copy .eyebrow{grid-column:2;align-self:end;margin-bottom:4px}
  .about-copy h2{grid-column:2;align-self:start;margin-bottom:0}
  .about-copy p:not(.eyebrow){grid-column:1 / -1;font-size:16px}
  .about-copy .lead{margin-top:22px}
  .about-number{font-size:170px;margin-left:-.05em}
  .about-leaf{left:62px;top:16px;width:62px}
  .about-copy{border-left:0;padding:0}

  /* domande */
  .faq{padding-top:8px}
  .faq-grid{grid-template-columns:1fr;gap:18px}
  .faq-head{position:static;display:flex;align-items:flex-end;justify-content:space-between}
  .faq-leaf{width:60px;margin:0}
  .faq-item summary{padding:18px 0;min-height:56px;font-size:16.5px;gap:16px}
  .faq-icon{width:36px;height:36px}
  .faq-answer p{padding:0 0 20px;font-size:15.5px}

  /* dove siamo */
  .contact{padding:26px 0 64px}
  .contact-inner{grid-template-columns:1fr}
  .contact-list{gap:12px;margin-top:20px}
  .contact-list li{font-size:16px;gap:12px}
  .contact-list .icon{width:19px;height:19px}
  .contact-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .contact-art{position:absolute;right:-30px;bottom:-30px;width:150px;opacity:.55}

  .footer-note p{font-size:13.5px}
  .footer-bottom{font-size:13px}

  .wa-fixed{display:flex;position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(12px + var(--cookie-h,0px));z-index:55;align-items:center;justify-content:center;gap:12px;min-height:54px;border-radius:999px;background:var(--brand);color:var(--white);font:600 15px/1.2 var(--font-body);text-decoration:none;box-shadow:0 16px 34px -10px rgba(22,35,58,.45);transform:translateY(calc(100% + 40px));transition:transform .45s var(--ease)}
  .wa-fixed .icon{width:18px;height:18px}
  .wa-fixed.is-visible{transform:none}
  .cookie-bar{font-size:13px;padding:6px 12px;gap:12px}
  .cookie-bar__ok{font-size:13px;padding:4px 16px;min-height:40px}
}
@media (max-width:389px){
  /* telefoni da 360 e 375 px: i passi entro tre righe (come nelle pagine interne) */
  .step-text{font-size:15px}
  .step{grid-template-columns:50px minmax(0,1fr);gap:0 12px}
}
@media (max-width:374px){
  .courses-text{font-size:22px}
  .about-copy p:not(.eyebrow),.courses-copy .products-intro p{font-size:15.5px}
}
@media (max-width:360px){
  .hero-title{font-size:36px}
  .salt-title{font-size:44px}
  .salt-metric{font-size:88px}
  .about-inner{grid-template-columns:96px minmax(0,1fr)}
  .about-number{font-size:146px}
  .about-leaf{left:52px;width:54px}
  .price-name{font-size:15px}
  .price-value{font-size:25px}
  .cookie-bar{font-size:12.5px;gap:10px}
}

/* ═════════════════════════ PAGINE INTERNE (step 6-bis, 04/10/2026) ═════════════════════════
   Le pagine interne si fanno SOLO coi pezzi della home: dentro il <body> nessuna classe che la home
   non abbia (lo controlla collauda-sito.py --pagine). La regola per esteso, coi blocchi pronti, è in
   testa a «Sito Web Codice/_modello-pagina.html». In breve:
   1. un pezzo della home si scrive con le classi della home: apertura .hero, titolo di sezione
      .products-head, testo .products-intro, frase grande .courses-text, titolo col decoro + testo
      .prices-grid, testo + foto ad arco .consult-grid, schede .p-list/.p-card, righe-link .faq-item,
      numeri .salt-figures, riquadro chiaro .courses, passi .steps, pillole .types/.hero-points;
   2. le misure proprie delle pagine interne stanno qui sotto, agganciate a body.page-inner (la classe
      del <body> non conta) + la classe della home; quelle di una pagina sola nel suo pagina-<slug>.css;
   3. le varianti si scrivono con attributi data-* neutri, mai con classi nuove:
        data-riga                     la riga sottile sopra il blocco (due sezioni chiare che si toccano)
        data-foto="sinistra"          testo + foto, con la foto a sinistra
        data-colonne="2|3|4|5"        griglia di schede: quante per riga sul computer
        data-telefono="due|riga"      schede sul telefono: due per riga · in riga (icona, testo, freccia)
        data-colore="azzurro|bianco"  colore della scheda (pesca: .p-card · salvia: .p-card--sage)
   4. il resto lo dice la struttura: 4 passi = 4 colonne; l'apertura senza foto ha a destra il riquadro;
      il logo nel «chi siamo»; i numeri e la frase grande fuori dal loro posto nella home. */

/* link «Scopri…» dalla home verso le pagine: il text-link (lo stesso della privacy) */
.more-link{margin-top:4px}
.text-link--light{color:var(--ivory);text-decoration-color:rgba(250,247,242,.5)}
.text-link--light:hover{text-decoration-color:var(--ivory)}
.salt-copy > .more-link,.consult-copy > .more-link{margin-left:26px;vertical-align:middle}
.treatments .more-link{margin-top:clamp(32px,4vw,58px)}
.products-intro .more-link{justify-self:start;margin-top:0}
.about-copy > .more-link{margin-top:16px}

/* ───────── apertura: la .hero della home, più bassa ───────── */
.page-inner .hero{grid-template-columns:var(--side) minmax(0,1fr) minmax(0,.94fr)}
.page-inner .hero-copy{padding:36px clamp(24px,4vw,56px) 80px 0;max-width:640px}
.page-inner .hero-title{font-size:clamp(42px,4.9vw,76px);line-height:1;margin-bottom:26px}
.page-inner .hero-text + .hero-text{margin-top:10px}
.page-inner .hero-media{min-height:clamp(400px,37vw,560px)}
/* una cifra in evidenza nella riga d'apertura (i «70 €» delle consulenze), col blu dei prezzi */
.hero-text strong{font-weight:600;color:var(--brand);white-space:nowrap}
/* apertura senza foto (contatti): a destra il riquadro chiaro dei corsi, con un elenco */
.page-inner .hero:not(:has(> .hero-media)){grid-template-columns:var(--side) minmax(0,1.04fr) minmax(0,.96fr) var(--side)}
.page-inner .hero > .courses{grid-column:3;align-self:center;position:relative;z-index:2;margin:28px 0 72px}

/* ───────── sezioni ───────── */
.page-inner .section:not(.band) + .section:not(.band){padding-top:0}
.band.section{padding-top:clamp(52px,5vw,84px)}
.band + .band{margin-top:0}
/* la riga sottile sopra (quella dei «Prezzi» della home): solo dove c'è data-riga */
.page-inner .prices-grid:not([data-riga]){padding-top:0;border-top:0}
.page-inner [data-riga]{padding-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
/* titolo di sezione: il .products-head della home, col titolo diretto (senza occhiello) */
.page-inner .products-head:has(> h2){gap:20px clamp(32px,6vw,96px);margin-bottom:clamp(40px,4.4vw,64px)}
.page-inner .products-head > h2{max-width:11em;font-size:clamp(40px,4.7vw,68px)}
.page-inner .products-head > :only-child{grid-column:1 / -1}
/* il testo da leggere: le righe di .products-intro; fuori dal titolo di sezione un po' più grandi.
   (:where() tiene bassa la forza della regola: le entrate .reveal della home restano padrone dell'opacità) */
.page-inner :not(.products-head) > .products-intro{padding-bottom:0;max-width:36em}
:where(.page-inner :not(.products-head)) > .products-intro p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.65;opacity:.86}
:where(.page-inner) .products-intro .lead{opacity:1}
.page-inner .products-intro a:not(.button):not(.text-link),.method p a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* righe bilanciate: mai una parola sola sull'ultima riga */
.page-inner [data-colonne] p:not(.t-meta),.page-inner .p-title,.step-text,.hero-points li > span:last-child{text-wrap:balance}
/* la frase grande: la .courses-text della home (la frase dei corsi); fuori dal riquadro dei corsi un po' più piccola */
.page-inner :not(.courses-copy) > .courses-text{font-size:clamp(28px,3.2vw,46px);line-height:1.12;max-width:20em}
.page-inner .courses-text em{font-style:italic;font-weight:300;color:var(--brand)}
.page-inner :not(.courses-copy) > .courses-text + .products-intro{margin-top:clamp(22px,2.4vw,34px)}
/* un link dentro la frase grande (prodotti, stanza del sale) */
.page-inner .courses-text a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color .3s ease}
.page-inner .courses-text a:hover{text-decoration-color:transparent}
/* testo sulle fasce notte e blu */
.page-inner .band--night h2,.page-inner .band--blue h2{color:var(--ivory)}
.page-inner .band--night h2 em{color:var(--salt-pink)}
.page-inner .band--blue h2 em{color:var(--peach)}
:where(.page-inner :is(.band--night,.band--blue)) :is(.products-intro p,.courses-text){color:rgba(250,247,242,.86);opacity:1}
.page-inner :is(.band--night,.band--blue) .products-intro a:not(.button){color:var(--ivory)}
.band--sage .method li,.band--sky .method li{border-color:rgba(64,91,151,.16)}
/* l'elenco con le icone sulla notte: righe sottili rosa sale, come il biglietto dei 30 minuti */
.band--night .method li{border-color:rgba(244,224,210,.18)}
.band--night .method p{color:rgba(250,247,242,.86);opacity:1}
.band--night .method .icon{color:var(--salt-pink)}
/* sulla fascia salvia e nel riquadro dell'apertura le icone dell'elenco sono blu (il salvia non si leggerebbe) */
.page-inner :is(.band--sage,.hero) .method .icon{color:var(--brand)}

/* ───────── titolo a sinistra col decoro, testo a destra: la .prices-grid dei «Prezzi» della home ─────────
   decoro: .faq-leaf (il ramo inclinato delle «Domande») o .prices-crystals (dritto: i cristalli dei «Prezzi») */
.page-inner .prices-head h2{max-width:8em;font-size:clamp(38px,4.2vw,62px);line-height:1.02;letter-spacing:-.016em}
.page-inner .prices-crystals{width:clamp(80px,8vw,120px);pointer-events:none}
.prices-body > .button,.prices-body > .hero-actions{margin-top:32px}
.prices-body > .method{margin:0}
.prices-body > .products-intro + .method,.prices-body > .products-intro + .faq-list,.prices-body > .courses-text + .method{margin-top:28px}

/* ───────── testo + foto ad arco: la .consult-grid delle «Consulenze» della home ───────── */
.page-inner .consult-grid{align-items:center}
.page-inner .consult-copy{padding-top:0}
.page-inner .consult-media{z-index:1;width:100%;max-width:520px;justify-self:center;margin-top:0}
.page-inner .consult-grid[data-foto="sinistra"]{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.page-inner [data-foto="sinistra"] > .consult-copy{grid-column:2}
.page-inner [data-foto="sinistra"] > .consult-media{grid-column:1}
.page-inner .consult-copy h2{margin-bottom:26px}
.page-inner .consult-copy > .button,.page-inner .consult-copy > .hero-actions,.page-inner .consult-copy > .text-link{margin-top:32px}
.page-inner .consult-copy > .types{margin:0 0 26px}
.band--sky .consult-media::before{background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0))}
.band--night .consult-media::before{background:radial-gradient(closest-side,rgba(198,150,130,.4),rgba(198,150,130,0))}
/* l'icona nel cerchio sopra il titolo: il .dot-icon delle pillole, più grande */
.page-inner .consult-copy > .dot-icon{width:48px;height:48px;margin-bottom:22px}
.page-inner .consult-copy > .dot-icon .icon{width:21px;height:21px}
/* l'elenco con le icone accanto alla foto (come nella home) */
.page-inner .consult-copy > .method{margin:0}
.page-inner .consult-copy > .method li:first-child{border-top:0;padding-top:4px}
.method a{white-space:normal}
.method a[href^="tel"]{white-space:nowrap}

/* ───────── riquadro chiaro: il .courses dei corsi della home (con la foto, o con un elenco) ───────── */
.courses > .method{margin:0}
.courses > .method li:first-child{border-top:0;padding-top:4px}
.courses > .method li:last-child{border-bottom:0;padding-bottom:4px}
.page-inner .courses{margin-top:0}
/* senza foto (un elenco, una frase): riquadro leggero a tutta larghezza. :where() lascia l'ultima parola ai pagina-<slug>.css */
:where(.page-inner) .courses:not(:has(> .courses-media)){display:block;background:rgba(255,255,255,.6)}
.courses-copy h2.eyebrow{margin-bottom:22px}
.page-inner .courses-copy > .products-intro{margin-top:18px}
.courses-copy > h2.eyebrow + .products-intro{margin-top:0}   /* senza la frase grande: il testo segue l'occhiello */

/* ───────── schede: la .p-card della home senza foto, in griglia (.p-list con data-colonne) ───────── */
.page-inner [data-colonne]{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.page-inner [data-colonne="2"]{--cols:2}
.page-inner [data-colonne="4"]{--cols:4}
.page-inner [data-colonne="5"]{--cols:5}
.page-inner [data-colonne] > .p-card{--ring:rgba(198,150,130,.16);align-items:flex-start;gap:14px;padding:clamp(22px,2.4vw,32px);border-radius:32px}
.page-inner [data-colonne] > .p-card--sage{--ring:rgba(127,137,116,.16)}
.page-inner [data-colonne] > [data-colore="azzurro"]{--ring:rgba(64,91,151,.12);background:linear-gradient(170deg,rgba(229,236,245,1),rgba(229,236,245,.55));box-shadow:inset 0 0 0 1px var(--ring)}
.page-inner [data-colonne] > [data-colore="bianco"]{--ring:rgba(64,91,151,.1);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--ring)}
.page-inner [data-colonne] > .p-card:hover{box-shadow:inset 0 0 0 1px var(--ring)}   /* la scheda di solo testo non si muove */
.page-inner [data-colonne] > .p-card > .arch{width:100%;margin-bottom:6px}
.page-inner [data-colonne] .step-icon{flex:none}                 /* l'icona nel cerchio bianco dei passi */
.page-inner [data-colonne] .p-title{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
.page-inner [data-colonne] p:not([class]){font-size:16px;line-height:1.55;color:var(--ink);opacity:.88}
.page-inner [data-colonne] .t-meta{margin-top:0}                 /* la pillola bianca dei trattamenti */
.page-inner [data-colonne] .p-card > .button,.page-inner [data-colonne] .p-card > .text-link{margin-top:auto}
.page-inner [data-colonne] .p-card > .text-link{padding-bottom:0}
.page-inner [data-colonne] .p-card:not(:has(> .faq-icon)) p a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* scheda-link: la freccia nel cerchio (.faq-icon) dice che tutta la scheda è il link */
.page-inner [data-colonne] .faq-icon{width:40px;height:40px;margin-top:auto}
.page-inner [data-colonne] .faq-icon .icon{width:16px;height:16px}
.page-inner [data-colonne] .p-card:has(> .faq-icon) a{color:inherit;text-decoration:none}
.page-inner [data-colonne] .p-card:has(> .faq-icon) a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:32px}
.page-inner [data-colonne] .p-card:has(> .faq-icon) a:focus-visible{outline:none}
.page-inner [data-colonne] .p-card:has(> .faq-icon) a:focus-visible::after{outline:2px solid var(--brand);outline-offset:4px}
.page-inner [data-colonne] > .p-card:has(> .faq-icon):hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(64,91,151,.16),var(--shadow-soft)}
.page-inner [data-colonne] > .p-card:has(> .faq-icon):hover .faq-icon{background:var(--brand);color:var(--white);transform:rotate(45deg)}
.page-inner [data-colonne] > .p-card:has(> .faq-icon):hover .arch img{transform:scale(1.05)}
.page-inner [data-colore="bianco"] .t-meta{background:var(--sky)}

/* ───────── righe-link: le righe delle «Domande» della home, col cerchio e la freccia ───────── */
.faq-item > a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;min-height:64px;font:500 clamp(17px,1.45vw,20px)/1.35 var(--font-body);color:var(--ink);text-decoration:none;transition:color .3s ease}
.faq-item > a .faq-question{display:flex;align-items:center;gap:14px}
.faq-item > a .faq-question .icon{width:20px;height:20px;color:var(--brand)}
.faq-item > a .faq-icon .icon{width:17px;height:17px}
.faq-item > a:hover{color:var(--brand)}
.faq-item > a:hover .faq-icon{background:var(--brand);color:var(--white);transform:rotate(45deg)}

/* ───────── numeri in evidenza su fondo chiaro: i «30 minuti · 25 €» della stanza (.salt-figures), fuori dal biglietto ───────── */
.page-inner :is(.consult-copy,.prices-body) > .salt-figures{flex-wrap:wrap;gap:18px clamp(28px,4vw,56px);padding:20px 0 18px;border-block:1px solid var(--line)}
.page-inner :is(.consult-copy,.prices-body) > .salt-figures .salt-figure + .salt-figure{border-left-color:var(--line)}
.page-inner :is(.consult-copy,.prices-body) > .salt-figures .salt-num{color:var(--brand)}
.page-inner :is(.consult-copy,.prices-body) > .salt-figures .salt-unit{color:var(--eyebrow)}
.page-inner .consult-copy > .salt-figures{margin:30px 0 18px;max-width:36em}
.page-inner .prices-body > .salt-figures{margin-bottom:clamp(26px,3vw,40px)}

/* ───────── filtri della vetrina: le pillole .types delle consulenze, coi pulsanti data-filtro ─────────
   Restano nel codice per il pannello (nomi dei filtri, categoria di ogni prodotto), ma si vedono solo
   quando la vetrina ha 4 prodotti o più: con 2 o 3 non servono, e una scheda sola lascerebbe un buco. */
.page-inner .types[data-filtri]{gap:10px;margin:0 0 clamp(26px,3vw,40px)}
.page-inner [data-filtri]:has(+ .p-list > :last-child:nth-child(-n+3)){display:none}
.page-inner h2 + [data-filtri]{margin-top:clamp(22px,2.4vw,32px)}
.page-inner .products-head:has(> h2) + [data-filtri]{margin-top:-12px}
.page-inner .products-head:has(> div) + [data-filtri]{margin-top:calc(-1 * clamp(18px,2vw,32px))}
.page-inner [data-filtri] li{padding:0;background:none;box-shadow:none}
.page-inner [data-filtro]{display:inline-flex;align-items:center;min-height:44px;padding:9px 20px;border:0;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font:500 15px/1.2 var(--font-body);color:var(--ink);transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.page-inner [data-filtro]:hover{box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}
.page-inner [data-filtro][aria-pressed="true"]{background:var(--brand);color:var(--white);box-shadow:none}
[data-categoria][hidden]{display:none!important}
/* la vetrina (.p-list nella sezione .products): 3 per riga sul computer, 2 sul tablet e sul telefono */
.page-inner .products .p-list{grid-template-columns:repeat(3,minmax(0,1fr))}
/* con due prodotti soli (il pannello ne può togliere), due per riga come nella home: niente buco a destra */
@media (min-width:1024px){
  .page-inner .products .p-list:has(> .p-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ───────── la storia: il logo al posto dell'11 (il «Chi siamo» della home) ───────── */
.about-art:has(> .logo){justify-content:center}
.about-art > .logo{width:clamp(190px,20vw,290px);height:auto}
.about-art:has(> .logo) .about-leaf{left:auto;right:2%;top:-8%;width:clamp(80px,9vw,130px)}

/* piccoli accordi fra i pezzi */
.band--sky .dot-icon,.band--sky .t-meta{background:var(--white)}
.page-inner .contact-copy > .products-intro{margin-top:26px}
.page-inner .contact .contact-copy > .products-intro p{font-size:clamp(16px,1.35vw,18.5px);color:var(--white);opacity:.92}

/* i passi della home. 4 passi (un quarto .step) = 4 colonne; sotto i 1180 px i passi delle pagine interne
   vanno in colonna, con la linea che scende (sul telefono identici a quelli della home) */
@media (min-width:1180px){
  .page-inner .steps:has(> .step:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
}
@media (min-width:768px){
  .page-inner .steps:has(> .step:nth-child(4)) .step-text{font-size:16.5px}
}
/* una riga di testo (orari, una nota) accanto al pulsante dei passi */
.steps-cta:has(> p){align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 40px}
.steps-cta p{font-size:16px;color:var(--ink);opacity:.86}

@media (max-width:1179px){
  .page-inner .steps-wrap{--num:66px}
  .page-inner .steps-wrap .steps-line{left:32px;right:auto;top:34px;bottom:56px;width:1.5px;height:auto;transform:scaleY(var(--d,1));transform-origin:center top}
  .page-inner .steps-wrap .steps-line-v{display:none}
  .page-inner .steps-wrap .steps{grid-template-columns:1fr;gap:30px;padding-right:0;max-width:640px}
  .page-inner .steps-wrap .step{grid-template-columns:70px minmax(0,1fr);grid-template-areas:"num text";align-items:start;gap:0 18px}
  .page-inner .steps-wrap .step-number{padding:0 0 8px;text-align:center;line-height:1}
  .page-inner .steps-wrap .step-icon{display:none}
  .page-inner .steps-wrap .step-text{padding-top:12px;max-width:none}
  .page-inner .steps-wrap .steps-cta{justify-content:flex-start;padding-left:88px}
  .page-inner [data-colonne="5"]{--cols:3}
  .page-inner [data-colonne="4"]{--cols:2}
}
@media (max-width:1023px){
  .page-inner .hero-copy .eyebrow{letter-spacing:.2em}   /* l'occhiello della home qui sta su una riga anche largo */
  .page-inner .products-head:has(> h2){grid-template-columns:minmax(0,1fr);gap:18px}
  .page-inner .products-head:has(> h2) > .products-intro{max-width:38em}
  .page-inner .hero-copy{padding:30px 28px 64px 0}
  .page-inner .hero:not(:has(> .hero-media)){grid-template-columns:var(--side) minmax(0,1fr) minmax(0,1fr) var(--side)}
  .page-inner .hero:not(:has(> .hero-media)) .hero-copy{padding-right:32px}
  .page-inner [data-colonne]{--cols:2}
  .page-inner .products .p-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  /* 5 schede su 3 colonne, su tutto il computer: tre sopra e due più larghe sotto, senza il buco a destra */
  .page-inner [data-colonne="5"]{--cols:6}
  .page-inner [data-colonne="5"] > *{grid-column:span 2}
  .page-inner [data-colonne="5"] > :nth-child(4):nth-last-child(2),.page-inner [data-colonne="5"] > :nth-child(5):last-child{grid-column:span 3}
}
@media (min-width:768px) and (max-width:1023px){
  /* due per riga: l'ultima scheda dispari prende tutta la riga, mai sola a metà */
  .page-inner [data-colonne]:not([data-colonne="4"]):not([data-colonne="2"]) > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:767px){
  .salt-copy > .more-link{order:7;align-self:center;margin:10px 0 0}
  .consult-copy > .more-link{order:7;align-self:center;margin:10px 0 0}
  .products-intro .more-link{margin-top:2px}
  .about-copy > .more-link{grid-column:1 / -1;justify-self:start;margin-top:8px}
  .contact-actions .more-link{align-self:center}

  .page-inner .hero-copy .eyebrow{letter-spacing:.18em}
  .page-inner .hero,.page-inner .hero:not(:has(> .hero-media)){grid-template-columns:var(--gutter) minmax(0,1fr)}
  .page-inner .hero-copy,.page-inner .hero:not(:has(> .hero-media)) .hero-copy{grid-column:2;padding:14px var(--gutter) 30px 0;max-width:none}
  .page-inner .hero-title{font-size:clamp(34px,9.6vw,44px);line-height:1.04;margin-bottom:16px}
  .page-inner .hero-media{min-height:0;height:clamp(260px,74vw,360px);margin-top:6px}
  .page-inner .hero > .courses{grid-column:2;margin:0 var(--gutter) 44px 0}
  :where(.page-inner) .courses:not(:has(> .courses-media)){border-radius:30px;padding:8px 20px}
  /* le pillole che vanno su due righe restano morbide, non a capsula */
  .hero-points li{border-radius:22px}

  .page-inner .products-head:has(> h2){margin-bottom:28px}
  :where(.page-inner :not(.products-head)) > .products-intro p{font-size:16px}
  .page-inner :not(.courses-copy) > .courses-text{font-size:28px}

  .page-inner .prices-grid{gap:20px}
  .page-inner .prices-head{gap:16px}
  .page-inner .prices-head h2{line-height:1.04}
  .page-inner .prices-crystals{width:60px;margin:0}
  .prices-body > .button,.prices-body > .hero-actions{display:flex;width:100%;margin-top:26px}
  .prices-body > .button{white-space:normal;text-wrap:balance;text-align:center}

  /* testo + foto: titolo, foto, testo, pulsante (come «Le consulenze» della home) */
  .page-inner .consult-grid{align-items:stretch}
  .page-inner .consult-copy > *{order:3}
  .page-inner .consult-copy > :is(.eyebrow,.dot-icon,h2,.types){order:1}
  .page-inner .consult-copy .products-intro .lead{order:0;margin-top:0}
  .page-inner .consult-copy > .dot-icon{align-self:flex-start;width:42px;height:42px;margin-bottom:16px}
  .page-inner .consult-copy > .types{margin:20px 0 0}
  .page-inner .consult-copy h2{margin-bottom:0}
  .page-inner .consult-media{order:2;width:86%;max-width:420px;margin:26px 0 30px auto}
  .page-inner [data-foto="sinistra"] > .consult-media{margin-left:0;margin-right:auto}
  .page-inner .consult-copy > .button,.page-inner .consult-copy > .hero-actions{margin-top:26px}
  .page-inner .consult-copy > .text-link{align-self:flex-start;margin-top:14px}
  .page-inner .consult-copy > .method li:first-child{border-top:1px solid var(--line);padding-top:18px}
  .page-inner .consult-copy > .salt-figures{margin:24px 0 14px}

  .page-inner .courses-copy > .products-intro{margin-top:14px}

  .page-inner [data-colonne]{--cols:1;gap:12px}
  .page-inner [data-telefono="due"]{--cols:2}
  .page-inner [data-telefono="due"] > :last-child:nth-child(odd){grid-column:1 / -1}
  .page-inner [data-colonne] > .p-card{border-radius:26px;padding:20px;gap:12px}
  .page-inner [data-colonne] .p-card:has(> .faq-icon) a::after{border-radius:26px}
  .page-inner [data-colonne] .p-title{font-size:17px}
  .page-inner [data-colonne] p:not([class]){font-size:15.5px}
  .page-inner [data-colonne] .t-meta{font-size:15px;border-radius:14px}   /* come la .t-meta della home */
  .page-inner [data-colonne] .step-icon{display:grid}                       /* nei passi della home sul telefono non c'è */
  /* sul telefono la scheda con l'icona va in riga: icona, testo, freccia. La freccia resta un cerchio di
     36 px (.faq-icon non si stringe): margini un po' più stretti, così il testo sta in tre righe */
  .page-inner [data-telefono="riga"] > .p-card{flex-direction:row;align-items:center;gap:12px;padding:16px 14px 16px 16px}
  .page-inner [data-telefono="riga"] .faq-icon{margin:0 0 0 auto;width:36px;height:36px}
  .page-inner [data-telefono="riga"] .step-icon{width:38px;height:38px}
  .page-inner [data-telefono="due"] > .p-card{padding:18px 16px}
  .page-inner [data-telefono="due"] .faq-icon{width:34px;height:34px}

  .faq-item > a{padding:16px 0;min-height:56px;font-size:16.5px;gap:16px}

  .page-inner :is(.consult-copy,.prices-body) > .salt-figures{gap:14px 24px}
  .page-inner :is(.consult-copy,.prices-body) > .salt-figures .salt-figure + .salt-figure{padding-left:24px}

  .products .p-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .products .p-card{border-radius:24px;padding:12px 12px 14px}
  .products .p-media{margin:2px 2% 0}
  .products .p-body{gap:10px;margin-top:14px}
  .products .p-title{font-size:16.5px}
  .products .p-tags li{font-size:14px;padding:5px 11px}
  .products .p-body .button{min-height:44px;padding:9px 12px;font-size:15px;line-height:1.25;white-space:normal;text-wrap:balance;text-align:center;gap:6px}
  .products .p-body .button .icon{display:none}

  .about-art:has(> .logo){justify-content:flex-start}
  .about-art > .logo{width:100%}
  .about-art:has(> .logo) .about-leaf{display:none}

  /* passi in colonna: sul telefono le misure dei passi della home */
  .page-inner .steps-wrap{--num:58px}
  .page-inner .steps-wrap .steps-line{left:28px;top:30px;bottom:52px}
  .page-inner .steps-wrap .steps{gap:28px}
  .page-inner .steps-wrap .step{grid-template-columns:62px minmax(0,1fr);gap:0 16px}
  .page-inner .steps-wrap .step-text{padding-top:10px;font-size:16px}
  .page-inner .steps-wrap .steps-cta{padding-left:0}
  /* la riga accanto al pulsante si allinea al testo dei passi: la linea che scende resta alla sua sinistra */
  .steps-cta p{padding-left:78px;font-size:15px}
}

@media (max-width:389px){
  /* schede in riga sui telefoni da 375 px: tre righe di testo al massimo */
  .page-inner [data-telefono="riga"] > .p-card{gap:8px;padding:16px 12px 16px 14px}
  .page-inner [data-telefono="riga"] p:not([class]){font-size:15px}
  /* i passi (anche a 375 px) entro tre righe */
  .page-inner .steps-wrap .step-text{font-size:15px}
  .page-inner .steps-wrap .step{grid-template-columns:50px minmax(0,1fr);gap:0 12px}
}
@media (max-width:374px){
  /* telefoni stretti (360 px): i testi lunghi delle pagine interne restano entro tre righe */
  /* schede a due colonne: un po' meno margine dentro, così pillole e pulsanti a 15 px stanno in due righe */
  .page-inner [data-telefono="due"] > .p-card{padding:16px 12px}
  .page-inner [data-colonne] .t-meta{padding:5px 10px}
  .products .p-card{padding:12px 8px 14px}
  .products .p-body .button{padding:9px 8px}
  .page-inner .products-head:has(> h2) .products-intro p{font-size:15.5px}
  .page-inner [data-telefono="riga"] p:not([class]){font-size:14.5px}
}

/* chi preferisce meno movimento: tutto fermo e visibile */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal,.js .load{opacity:1;transform:none}
  .js .hero-title .line-in{transform:none}
  .js .reveal-photo .arch{clip-path:none}
  .js .reveal-photo .medallion{opacity:1}
  .js .booking .step{opacity:1}
  .marquee-track{flex-wrap:nowrap;justify-content:flex-start;padding-inline:var(--gutter)}
  .steps-line,.steps-line-v{transform:none}
  .salt-portal .arch--portal{transform:none}
  .salt-light{opacity:1}
}