/* Studio K — le schede dei trattamenti
   ────────────────────────────────────────────────────────────────────────────
   Scritte da genera-schede.py. Si appoggiano a legale.css per i token (colori,
   caratteri, spaziature) e lo sostituiscono per tutto il resto.

   L'impianto, dall'alto:
     1. un'immagine a tutto schermo, il titolo in basso, il prezzo di lato;
     2. una frase sola, grande, e i tre fatti sotto un filo;
     3. i passi accanto a una foto verticale che resta ferma;
     4. due foto sfalsate, di misure diverse;
     5. (solo KO·BI·DO) i benefici; poi le domande;
     6. la prenotazione su avorio: il prezzo grande, un bottone, i recapiti.

   Niente riquadri, niente ombre, niente numeri decorativi: le sezioni si
   separano con lo spazio e con un filo. L'avorio compare due volte in tutto il
   sito — il menu e il fondo della prenotazione — e per questo pesa. */

.tr{
  --noce:#6B4428;
  --curva:cubic-bezier(.22,1,.36,1);
  --tenda:cubic-bezier(.76,0,.24,1);
  --filo:rgba(210,180,140,.2);
  --margine:clamp(20px,5vw,64px);
  --colonne:clamp(16px,2vw,32px);
  --stacco:clamp(96px,17vh,210px);
}
.tr-w{width:100%;max-width:92rem;margin-inline:auto;padding-inline:var(--margine)}
.tr main{display:block}
:where(.tr) figure{margin:0;overflow:hidden;background:#17130f}
:where(.tr) figure img{display:block;width:100%;height:100%;object-fit:cover}
/* legale.css e' scritto per leggere documenti: qui le sue misure di colonna
   e le sue sottolineature non servono. `:where` tiene a zero la specificita'
   di .tr, cosi' queste righe battono legale.css ma non le classi qui sotto
   (la frase d'apertura ha una misura sua, e `.tr p` gliela toglieva). */
:where(.tr) :is(p,ul,ol){max-width:none}
:where(.tr) li{margin:0}
:where(.tr) a{border:0;padding:0}

/* etichetta piccola, la stessa del menu: Cormorant maiuscolo, spaziato largo */
.tr-et{display:block;font-family:var(--display);font-weight:400;font-size:.74rem;
  line-height:1.4;letter-spacing:.42em;text-transform:uppercase;color:var(--miele);
  margin:0 0 .9rem}

/* ═══ 1. apertura ═══ */
.tr-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  height:100vh;height:100svh;min-height:560px;max-height:1200px}
/* il fondo e' piu' alto della sezione: lo spazio in piu' e' quello che la
   parallasse consuma scendendo, cosi' il bordo alto non si scopre mai */
.tr-hero__fondo{position:absolute;left:0;right:0;top:-8%;bottom:0;will-change:transform}
.tr-hero__img{display:block;width:100%;height:100%;object-fit:cover}
.tr-hero__velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,11,9,.62) 0%,rgba(13,11,9,.08) 24%,rgba(13,11,9,.12) 52%,
    rgba(13,11,9,.72) 82%,var(--ink) 100%)}
.tr-hero__testo{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--colonne);
  padding-bottom:clamp(44px,9vh,104px)}
.tr-hero__titolo{margin:0;max-width:13ch;color:var(--avorio);
  font-family:var(--display);font-weight:300;
  font-size:clamp(3rem,7.2vw,7.4rem);line-height:.96;letter-spacing:-.028em}
.tr-hero__prezzo{margin:0 0 .55em;font-family:var(--display);font-weight:300;
  font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1;color:var(--miele);white-space:nowrap}

/* ═══ 2. la frase e i fatti ═══ */
.tr-intro{padding-top:var(--stacco);padding-bottom:calc(var(--stacco) * .8)}
.tr-intro__frase{margin:0 0 clamp(64px,11vh,128px);max-width:13em;text-wrap:balance;
  font-family:var(--display);font-weight:300;color:var(--avorio);
  font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:1.06;letter-spacing:-.02em}
.tr-fatti{list-style:none;margin:0;padding:28px 0 0;border-top:1px solid var(--filo);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--colonne) clamp(24px,4vw,72px)}
.tr-fatti p{margin:0;max-width:22em;font-size:1rem;line-height:1.6;color:rgba(222,210,193,.78)}

/* ═══ titoli di sezione e liste a filo ═══ */
.tr-sezione__titolo{margin:0 0 clamp(32px,6vh,64px);color:var(--avorio);
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.04;letter-spacing:-.016em}
.tr-lista{list-style:none;margin:0;padding:0}
.tr-lista li{display:flex;flex-direction:column;gap:.45rem;
  padding:clamp(22px,3.4vh,34px) 0;border-top:1px solid var(--filo)}
.tr-lista li:last-child{border-bottom:1px solid var(--filo)}
.tr-lista strong{font-family:var(--display);font-weight:400;color:var(--avorio);
  font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.15;letter-spacing:-.005em}
.tr-lista span{font-size:.98rem;line-height:1.6;color:rgba(222,210,193,.72);max-width:30em}

/* ═══ 3. i passi accanto alla foto ferma ═══ */
.tr-come{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colonne);align-items:start;padding-bottom:var(--stacco)}
.tr-come__img{grid-column:1 / 7;position:sticky;top:clamp(84px,12vh,120px);
  height:min(calc(100vh - 2 * clamp(84px,12vh,120px)),52vw)}
.tr-come__testo{grid-column:8 / 13;padding-top:clamp(8px,6vh,80px)}

/* ═══ 4. la coppia sfalsata ═══ */
.tr-coppia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colonne);align-items:start;padding-bottom:var(--stacco)}
.tr-coppia__a{grid-column:1 / 8;aspect-ratio:4 / 3}
.tr-coppia__b{grid-column:9 / 13;aspect-ratio:3 / 4;margin-top:clamp(96px,24vh,280px)}

/* ═══ 5. benefici e domande: titolo fermo a sinistra, contenuto a destra ═══ */
.tr-sezione{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colonne);align-items:start;padding-bottom:var(--stacco)}
.tr-sezione > .tr-sezione__titolo{grid-column:1 / 5;position:sticky;
  top:clamp(96px,14vh,140px)}
.tr-sezione > .tr-lista,.tr-sezione > .tr-domande{grid-column:6 / 13}
.tr-lista--due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,4vw,72px)}
.tr-lista--due li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--filo)}

.tr-domande details{border-top:1px solid var(--filo)}
.tr-domande details:last-child{border-bottom:1px solid var(--filo)}
.tr-domande summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:44px;padding:clamp(20px,3vh,30px) 0;color:var(--avorio);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,1.65vw,1.55rem);line-height:1.25;
  transition:color .5s var(--curva)}
.tr-domande summary::-webkit-details-marker{display:none}
/* un piu' disegnato con due fili: aprendo ruota di 45° e diventa una croce */
.tr-domande summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--miele),var(--miele)) center/14px 1px no-repeat,
             linear-gradient(var(--miele),var(--miele)) center/1px 14px no-repeat;
  transition:transform .6s var(--curva)}
.tr-domande details[open] summary::after{transform:rotate(45deg)}
.tr-domande summary:focus-visible{outline:1px solid var(--miele);outline-offset:6px}
@media (hover:hover) and (pointer:fine){.tr-domande summary:hover{color:var(--miele)}}
.tr-domande p{margin:0 0 clamp(22px,3vh,30px);max-width:40em;
  font-size:1rem;line-height:1.72;color:rgba(222,210,193,.76)}

/* ═══ 6. la prenotazione, su avorio ═══ */
.tr-prenota{background:var(--avorio);color:var(--ink);
  padding:var(--stacco) 0 calc(var(--stacco) * .85)}
.tr-prenota__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colonne);align-items:end}
.tr-prenota__prezzo{grid-column:1 / 7}
.tr-prenota .tr-et{color:var(--noce)}
.tr-prenota__prezzo p{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(5rem,13vw,12.5rem);line-height:.82;letter-spacing:-.04em;color:var(--ink)}
.tr-prenota__azione{grid-column:8 / 13}
.tr-prenota__nota{margin:0 0 32px;max-width:22em;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.3;color:var(--ink)}
.tr-bottone{display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 2.6rem;background:var(--noce);color:var(--avorio);
  font-family:var(--ui);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color .5s var(--curva)}
.tr-bottone:focus-visible{outline:1px solid var(--noce);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.tr-bottone:hover{background:var(--ink)}}
.tr-bottone:active{transform:scale(.985)}
.tr-prenota__recapiti{margin:40px 0 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 28px;font-size:.92rem;color:rgba(13,11,9,.74)}
.tr-prenota__recapiti span{display:inline-flex;align-items:center;min-height:44px}
.tr-prenota__recapiti a{display:inline-flex;align-items:center;min-height:44px;color:inherit;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 12px)/0 1px no-repeat;
  transition:background-size .6s var(--curva),color .5s var(--curva)}
.tr-prenota__recapiti a:hover,.tr-prenota__recapiti a:focus-visible{
  background-size:100% 1px;color:var(--ink);outline:none}

/* il pie' prende la stessa misura della pagina */
.tr .sk-doc__pie{max-width:92rem;padding-inline:var(--margine);border-top:0}

/* ═══ tablet e telefono ═══ */
@media (max-width:900px){
  .tr-hero__testo{grid-template-columns:1fr;gap:18px}
  .tr-hero__prezzo{margin:0}
  .tr-fatti{grid-template-columns:1fr;gap:26px}
  .tr-come,.tr-sezione,.tr-prenota__griglia{grid-template-columns:1fr;row-gap:0}
  /* altezza fissata, non aspect-ratio + max-height: insieme, quando il tetto
     scatta, il browser stringe la larghezza per tenere il rapporto e la foto
     non arriva piu' al bordo destro */
  .tr-come__img{grid-column:1;position:relative;top:0;width:100%;
    height:min(78svh,118vw);margin-bottom:clamp(48px,8vh,72px)}
  .tr-come__testo{grid-column:1;padding-top:0}
  .tr-coppia{grid-template-columns:1fr}
  .tr-coppia__a{grid-column:1}
  .tr-coppia__b{grid-column:1;width:64%;margin:clamp(40px,10vw,72px) 0 0 auto}
  .tr-sezione > .tr-sezione__titolo{grid-column:1;position:static}
  .tr-sezione > .tr-lista,.tr-sezione > .tr-domande{grid-column:1}
  .tr-prenota__prezzo,.tr-prenota__azione{grid-column:1}
  .tr-prenota__prezzo{margin-bottom:clamp(40px,7vh,64px)}
}
@media (max-width:640px){
  .tr-lista--due{grid-template-columns:1fr}
  .tr-lista--due li:nth-last-child(2):nth-child(odd){border-bottom:0}
  .tr-bottone{width:100%}
  .tr-prenota__recapiti{flex-direction:column;align-items:flex-start}
}

/* ═══ il movimento ═══
   Tutto dietro la classe .moto, che assets/moto.js mette sulla radice solo se
   puo' davvero animare (niente moto ridotto, IntersectionObserver presente).
   Senza JavaScript la pagina e' ferma e completa, non vuota. */

/* apertura: la foto si assesta, il titolo sale riga per riga, il prezzo arriva */
.moto .tr-hero__img{transform:scale(1.1);transition:transform 2.6s var(--curva)}
.moto .tr-hero.is-in .tr-hero__img{transform:scale(1)}
.tr-riga{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.tr-riga > span{display:block}
.moto .tr-riga > span{transform:translateY(106%);
  transition:transform 1.4s var(--curva);transition-delay:calc(.3s + var(--i,0) * .12s)}
.moto .tr-hero.is-in .tr-riga > span{transform:none}
.moto .tr-hero__prezzo{opacity:0;transform:translateY(14px);
  transition:opacity 1.2s var(--curva) .85s,transform 1.4s var(--curva) .85s}
.moto .tr-hero.is-in .tr-hero__prezzo{opacity:1;transform:none}

/* testo: sale di poco e compare */
.moto [data-moto]{opacity:0;transform:translateY(32px);
  transition:opacity 1.1s var(--curva),transform 1.3s var(--curva)}
.moto [data-moto].is-in{opacity:1;transform:none}

/* immagini: si aprono dal basso come una tenda e intanto si assestano */
.moto [data-moto="img"]{opacity:1;transform:none;clip-path:inset(16% 0 0 0);
  transition:clip-path 1.6s var(--tenda)}
.moto [data-moto="img"].is-in{clip-path:inset(0 0 0 0)}
.moto [data-moto="img"] img{transform:scale(1.14);transition:transform 2.2s var(--curva)}
.moto [data-moto="img"].is-in img{transform:scale(1)}

/* gruppi: gli elementi entrano uno dopo l'altro, 90ms di scarto */
.moto [data-moto="gruppo"]{opacity:1;transform:none}
.moto [data-moto="gruppo"] > *{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--curva),transform 1.2s var(--curva);
  transition-delay:calc(var(--i,0) * 90ms)}
.moto [data-moto="gruppo"].is-in > *{opacity:1;transform:none}

/* ═══ Elementi scontornati ═══
   Pochi e fermi: un ramo per scheda, i teli veri sotto le domande, la goccia
   d'olio accanto al prezzo di Breuss. Decorano e basta (alt vuoto,
   aria-hidden), e nessuno si muove da solo: il ramo scende piu' lento della
   pagina (moto.js, data-parallasse) e basta. Niente oscillazioni in loop.

   Il ramo sta nel vuoto che la coppia sfalsata lascia gia': sopra la foto
   piccola a destra (--dx) o sotto la grande a sinistra (--sx). Esce dal
   margine verso il bordo dello schermo, come una pianta vera nella stanza. */
/* `clip` e non `hidden`: taglia il ramo sul bordo dello schermo senza creare
   un contenitore di scorrimento, e senza far scorrere la pagina di lato */
.tr-coppia{position:relative}
.tr main{overflow-x:clip}
.tr-ramo{position:absolute;z-index:2;height:auto;pointer-events:none;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.tr-ramo--dx{right:calc(var(--margine) * -1);top:clamp(-120px,-8vh,-40px);
  width:clamp(200px,21vw,340px)}
/* a sinistra il ramo si specchia: le foglie devono guardare verso la pagina */
.tr-ramo--sx{left:calc(var(--margine) * -1);bottom:clamp(-40px,-4vh,-16px);
  width:clamp(200px,21vw,340px);scale:-1 1}
.tr-ramo--orchidea{width:clamp(220px,24vw,380px)}
/* palma ed eucalipto nascono piegati a sinistra, l'orchidea a destra: a
   destra dello schermo l'orchidea va specchiata perche' guardi la pagina */
.tr-ramo--dx.tr-ramo--orchidea{scale:-1 1}
.moto [data-moto="ramo"]{opacity:0;transform:none;transition:opacity 1.6s var(--curva)}
.moto [data-moto="ramo"].is-in{opacity:1}

/* i teli, veri, nella colonna del titolo delle domande */
.tr-sezione > .tr-sezione__lato{grid-column:1 / 5;position:sticky;
  top:clamp(96px,14vh,140px);align-self:start}
.tr-sezione__lato .tr-sezione__titolo{position:static}
.tr-oggetto{display:block;width:min(100%,300px);height:auto;
  margin-top:clamp(40px,8vh,96px);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}

/* la goccia d'olio sul prezzo: stessa altezza delle cifre, appoggiata alla riga */
.tr-accento{display:inline-block;height:.62em;width:auto;margin-left:.12em;
  vertical-align:-.02em;filter:drop-shadow(0 10px 14px rgba(107,68,40,.25))}

/* il monogramma in filigrana dietro i passi: riempie senza aggiungere parole */
.tr-come__testo{position:relative;isolation:isolate}
.tr-come__testo::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-8%;top:34%;width:min(72%,420px);aspect-ratio:1;
  -webkit-mask:url("/assets/img/logo-k.svg") no-repeat center/contain;
  mask:url("/assets/img/logo-k.svg") no-repeat center/contain;
  background:var(--miele);opacity:.055}

@media (max-width:900px){
  .tr-sezione > .tr-sezione__lato{grid-column:1;position:static}
  .tr-oggetto{display:none}
  /* sul telefono la foto piccola sta a destra: il ramo occupa il vuoto a
     sinistra, sempre specchiato perche' le foglie guardino verso la foto */
  .tr-ramo,.tr-ramo--dx,.tr-ramo--sx{left:calc(var(--margine) * -1);right:auto;
    top:auto;bottom:clamp(24px,8vw,56px);width:clamp(140px,38vw,240px);scale:-1 1}
  .tr-ramo--orchidea,.tr-ramo--dx.tr-ramo--orchidea{scale:1 1}
  .tr-come__testo::before{right:-10%;width:70%}
}
@media (prefers-reduced-motion:reduce){
  .tr-ramo{translate:none !important}
}