/* Sito nuovo: intestazione, Apertura, Chi sono, Trattamenti, Dove sono, Domande frequenti.
   Dal canvas «Trattamenti — 4 prototipi», pagina «Sito nuovo» (tavole D1, D, Transizione 2B), tema «originale».
   Colori e carattere in css/tokens.css (--night, --butter, --stone, --peach, --cocoa, --paper, --grotesk). */
@property --hc { syntax: "<color>"; inherits: false; initial-value: #eacc84; }

html { scroll-padding-top: 110px; }
.hd-bar, .hd-dock, .hd, .cd {
  --ink: color-mix(in srgb, var(--cocoa) 80%, var(--night));
  --glow: color-mix(in srgb, var(--peach) 45%, var(--stone));
  --rule: color-mix(in srgb, var(--cocoa) 40%, transparent);
  color: var(--ink);
  font-family: var(--grotesk);
  letter-spacing: -0.02em;
}
.hd, .cd {
  position: relative;
  /* clip (non hidden): hidden creerebbe un contenitore di scorrimento e gli ingressi legati allo scroll non partirebbero */
  overflow: clip;
  background: radial-gradient(ellipse 95% 85% at 100% 100%, var(--glow) 0%, color-mix(in srgb, var(--glow) 45%, transparent) 40%, transparent 72%), var(--paper);
  /* Sfumatura legata allo schermo: resta ferma in basso a destra mentre le sezioni scorrono.
     ponytail: Safari su iPhone ignora fixed e la sfumatura torna a scorrere con ogni sezione; per averla ferma anche lì servirebbe un livello fisso dietro la pagina. */
  background-attachment: fixed;
}
.hd-bar :focus-visible, .hd-dock :focus-visible, .hd :focus-visible, .cd :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hd p, .cd p { max-width: none; }

/* INTESTAZIONE: capsula unica, fissa in alto sopra la pagina ------------------------------ */
.hd-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 20px 48px 0; padding: 6px 6px 6px 14px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--paper) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: hd-soft 0.666s var(--ease-quint) both; }
.hd-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; font: 700 22px/1 var(--grotesk); letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.hd-brand:hover { color: var(--ink); }
/* Monogramma: darken toglie il fondo chiaro del ritaglio */
.hd-brand img { display: block; height: 34px; width: auto; mix-blend-mode: darken; }
.hd-brand i { width: 1px; height: 24px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.hd-nav { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hd-nav li { animation: hd-soft 0.5s var(--ease-quint) calc(0.1s + var(--i, 0) * 0.06s) both; }
/* Al passaggio una pillola burro si gonfia sotto la voce; all'arrivo le voci si accendono una volta */
.hd-nav a { position: relative; isolation: isolate; display: inline-flex; white-space: nowrap; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 100px; font: 400 18px/1 var(--grotesk); color: var(--ink); text-decoration: none; }
.hd-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--butter); opacity: 0; transform: scale(0.6); transition: transform 0.45s var(--ease-pop), opacity 0.25s ease; animation: hd-hint 1s var(--ease-quint) calc(1.5s + var(--i, 0) * 0.14s) 1; }
.hd-nav a:hover::before, .hd-nav a:focus-visible::before { opacity: 1; transform: scale(1); }
.hd-nav a:active::before { transform: scale(0.94); }
.hd-menu { display: none; }
@keyframes hd-hint { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }

/* Testi e bottoni comuni ------------------------------------------------------------------ */
.hd-title { margin: 0; font: 700 clamp(52px, 5.6vw + 12px, 108px)/0.92 var(--grotesk); letter-spacing: -0.05em; }
.hd-title em, .cd-title em { white-space: nowrap; font-style: normal; color: color-mix(in srgb, var(--cocoa) 70%, var(--peach)); }
.hd-title .row, .cd-title .row { display: block; overflow: clip; padding-bottom: 0.06em; }
.hd-title .row > span, .cd-title .row > span { display: inline-block; animation: hd-row 1.1s var(--ease-quint) var(--d, 0s) both; }
.hd-key { margin: 0; max-width: 34ch; font: 400 clamp(19px, 0.8vw + 13px, 24px)/1.35 var(--grotesk); color: var(--cocoa); }
.hd-key strong { font-weight: 500; color: var(--ink); }
.hd-cta, .cd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hd-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 100px; background: var(--butter); color: var(--ink); text-decoration: none; font: 600 18px/1 var(--grotesk); transition: transform 0.35s var(--ease-pop), background-color 0.25s ease; }
.hd-pill:hover { transform: scale(1.03); background: var(--peach); color: var(--ink); }
.hd-pill .arrow, .tr-book .arrow { display: inline-block; transition: transform 0.35s var(--ease-quint); }
.hd-pill:hover .arrow, .tr-book:hover .arrow { transform: translateX(4px); }
.hd-link { display: inline-flex; align-items: center; min-height: 52px; color: var(--ink); font: 400 18px/1 var(--grotesk); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 6px; transition: text-decoration-color 0.25s ease; }
.hd-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.hd-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 400 16px/1.3 var(--grotesk); color: var(--cocoa); }
.hd-zone svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.hd-zone i { font-style: normal; opacity: 0.5; }

/* Alone che respira e cambia colore dietro alle foto */
.hd-halo { position: absolute; display: grid; place-items: center; pointer-events: none; filter: blur(40px); }
.hd-halo span { grid-area: 1 / 1; width: 100%; aspect-ratio: 1; border-radius: 50%; --hc: var(--c1); background: radial-gradient(closest-side, var(--hc) 25%, transparent 100%); opacity: 0.75; animation: hd-in 1.6s var(--ease-quint) var(--rd, 0s) both, hd-breathe 7s ease-in-out calc(var(--rd, 0s) + 1.6s) infinite, hd-tint 21s ease-in-out calc(var(--rd, 0s) + 1.6s) infinite; }
.hd-halo span:nth-child(1) { --c1: var(--butter); --c2: var(--peach); --c3: var(--stone); }
.hd-halo span:nth-child(2) { width: 76%; --c1: var(--peach); --c2: var(--stone); --c3: var(--butter); --rd: 0.3s; }
/* «Ferma animazioni»: casella nascosta dentro l'etichetta, niente JavaScript */
body:has(#pausa:checked) .hd-halo span { animation-play-state: paused; }

@keyframes hd-row { from { transform: translateY(105%); } }
@keyframes hd-soft { from { opacity: 0; transform: translateY(14px); } }
@keyframes hd-unveil { from { clip-path: inset(100% 0 0 0 round var(--r, 24px)); transform: translateY(40px) scale(1.04); } to { clip-path: inset(0 round var(--r, 24px)); } }
@keyframes hd-in { from { opacity: 0; transform: scale(0.9); } }
@keyframes hd-breathe { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } }
@keyframes hd-tint { 0%, 100% { --hc: var(--c1); } 33% { --hc: var(--c2); } 66% { --hc: var(--c3); } }
.hd-soft, .cd-in { animation: hd-soft 0.666s var(--ease-quint) var(--d, 0s) both; }
.hd-unveil { animation: hd-unveil 1.2s var(--ease-quint) var(--d, 0s) both; }

/* APERTURA: testo a sinistra, foto del trattamento a destra; la barra fissa occupa i primi 78px */
.hd { box-sizing: border-box; min-height: 820px; display: grid; grid-template-rows: 1fr auto; padding-top: 78px; }
.p1-main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: 0 48px; }
.p1-text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.p1-media { position: relative; display: grid; place-items: center; min-height: 560px; }
.p1-media .hd-halo { inset: -18%; }
.hd-photo { position: relative; display: block; width: 100%; height: auto; max-width: 440px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 45%; border-radius: 24px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
.hd-foot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 48px; padding: 14px 0 24px; border-top: 1px solid var(--rule); font: 400 16px/1.3 var(--grotesk); }
.hd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); gap: 8px 0; margin: 0; }
.hd-facts > div { display: flex; flex-direction: column; gap: 4px; padding-right: 24px; animation: hd-soft 0.6s var(--ease-quint) calc(1s + var(--i, 0) * 0.08s) both; }
.hd-facts dt { font-size: 15px; color: var(--cocoa); }
.hd-facts dd { margin: 0; color: var(--ink); }
.hd-pause { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 6%, transparent); font: 400 16px/1 var(--grotesk); color: var(--ink); cursor: pointer; transition: background-color 0.25s ease; }
.hd-pause:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.hd-pause:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.hd-pause input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hd-pause input:checked ~ .off, .hd-pause input:not(:checked) ~ .on { display: none; }

/* SEZIONI: testata con filetto e nome --------------------------------------------- */
.cd { box-sizing: border-box; padding: 0 48px 96px; }
.cd-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 0; margin-bottom: 72px; border-top: 1px solid var(--rule); font: 400 16px/1.3 var(--grotesk); animation: cd-line 1s var(--ease-quint) both; }
.cd-title { margin: 0; font: 700 clamp(44px, 4vw + 10px, 84px)/0.94 var(--grotesk); letter-spacing: -0.05em; color: var(--ink); }
.cd-p { margin: 0; max-width: 46ch; font: 400 clamp(18px, 0.5vw + 14px, 21px)/1.5 var(--grotesk); letter-spacing: -0.01em; color: var(--cocoa); }
.cd .cd-p { max-width: 46ch; }
.cd-p strong { font-weight: 500; color: var(--ink); }
@keyframes cd-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* CHI SONO: ritratto a sinistra, presentazione e metodo a destra */
.cd1-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.cd1-media { position: relative; width: 100%; max-width: 440px; }
.cd1-media .hd-halo { inset: -16%; }
.cd-photo { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 24px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
.cd1-text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cd1-method { align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
.cd1-label { margin: 0; font: 500 15px/1 var(--grotesk); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cocoa); }
/* Il metodo come righello: numero grande, una linea unica che attraversa le tre colonne con un punto a ogni passo.
   La linea si disegna da sinistra; al passaggio il tratto del passo si ispessisce in burro. */
.cd1-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cd1-step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 24px; animation: hd-soft 0.6s var(--ease-quint) calc(0.95s + var(--s) * 0.15s) both; }
.cd1-num { font: 600 40px/1 var(--grotesk); letter-spacing: -0.04em; color: var(--ink); animation: hd-soft 0.5s var(--ease-quint) calc(1.05s + var(--s) * 0.15s) both; }
.cd1-line { position: relative; display: block; width: calc(100% + 24px); height: 1.5px; margin: 6px 0 8px; background: var(--rule); }
.cd1-step:last-child .cd1-line { width: 100%; }
.cd1-line::before { content: ""; position: absolute; left: 0; top: -4px; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: cd1-pop 0.4s var(--ease-pop) calc(1.1s + var(--s) * 0.18s) both; }
.cd1-line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: m-draw 0.9s var(--ease-quint) calc(1.1s + var(--s) * 0.18s) both; transition: transform 0.35s var(--ease-quint), background-color 0.25s ease; }
.cd1-step:hover .cd1-line::after { background: var(--butter); transform: scaleY(4); }
@keyframes cd1-pop { from { transform: scale(0); } }
@keyframes m-draw { from { transform: scaleX(0); } }
.cd1-step strong { font: 600 clamp(21px, 0.6vw + 14px, 25px)/1.1 var(--grotesk); letter-spacing: -0.035em; color: var(--ink); }
.cd1-desc { font: 400 15px/1.45 var(--grotesk); letter-spacing: -0.01em; color: var(--cocoa); }

/* TRATTAMENTI: tre schede solo testo (Massaggi, Terapie, Pilates e ginnastica) -------------------------------------- */
.tr-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.tr-intro .cd-p { justify-self: end; }
.tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.tr-grid > li { display: flex; animation: hd-soft 0.6s var(--ease-quint) calc(0.4s + var(--s) * 0.08s) both; }
.tr-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 10px; border-radius: 24px; background: color-mix(in srgb, var(--paper) 55%, #fff); border: 1px solid var(--rule); transition: translate 0.45s var(--ease-pop), border-color 0.25s ease, box-shadow 0.45s var(--ease-quint); }
.tr-card:hover, .tr-card:focus-within { translate: 0 -4px; border-color: var(--ink); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--ink) 50%, transparent); }
.tr-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; padding: 18px 16px 12px; }
.tr-name { margin: 0; font: 600 clamp(22px, 0.8vw + 14px, 27px)/1.1 var(--grotesk); letter-spacing: -0.035em; color: var(--ink); }
.tr-hint { margin: 0; font: 400 16px/1.45 var(--grotesk); letter-spacing: -0.01em; color: var(--cocoa); }
.tr-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.tr-types li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 100px; background: color-mix(in srgb, var(--glow) 45%, transparent); font: 400 14px/1 var(--grotesk); color: var(--ink); }
/* Prenota a contorno; si riempie di burro quando la scheda è attiva */
.tr-book { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 8px 2px 2px; border-radius: 100px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; font: 600 16px/1 var(--grotesk); transition: background-color 0.25s ease, border-color 0.25s ease; }
.tr-book:hover, .tr-card:hover .tr-book { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.tr-book.is-solid { background: var(--butter); border-color: var(--butter); }
.tr-book.is-solid:hover { background: var(--peach); border-color: var(--peach); }
.tr-help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); animation: hd-soft 0.6s var(--ease-quint) 1s both; }
.tr-help p { margin: 0; font: 500 clamp(20px, 0.6vw + 14px, 24px)/1.3 var(--grotesk); letter-spacing: -0.03em; color: var(--ink); }
.tr-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 100px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font: 600 17px/1 var(--grotesk); transition: background-color 0.25s ease, color 0.25s ease; }
.tr-ghost:hover { background: var(--ink); color: var(--paper); }

/* DOVE SONO: mappa e due schede ----------------------------------------------------------- */
.dv-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.dv-map { position: relative; overflow: hidden; min-height: 520px; border-radius: 24px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--glow) 40%, var(--paper)); animation: hd-soft 0.8s var(--ease-quint) 0.3s both; }
.dv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.55) sepia(0.25) contrast(0.95) brightness(1.02); transition: filter 0.4s ease; }
.dv-map:hover .dv-frame, .dv-map:focus-within .dv-frame { filter: none; }
.dv-legend { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; margin: 0; padding: 0 16px; border-radius: 100px; background: color-mix(in srgb, var(--paper) 55%, #fff); border: 1px solid var(--rule); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 50%, transparent); font: 600 15px/1 var(--grotesk); color: var(--ink); pointer-events: none; }
.dv-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--butter) 70%, transparent); }
.dv-cards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.dv-cards > li { display: flex; animation: hd-soft 0.6s var(--ease-quint) calc(0.45s + var(--s) * 0.12s) both; }
.dv-card { padding: 26px 26px 22px; gap: 14px; }
.dv-addr { margin: 0; font: 500 19px/1.4 var(--grotesk); letter-spacing: -0.02em; color: var(--ink); font-style: normal; }
.dv-list { display: grid; margin: 0; }
.dv-list > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font: 400 16px/1.4 var(--grotesk); }
.dv-list dt { color: var(--cocoa); }
.dv-list dd { margin: 0; color: var(--ink); }
.dv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dv-actions .tr-book { margin: 0; padding: 0 22px; }

/* DOMANDE FREQUENTI: fisarmonica (details/summary) ---------------------------------------- */
.fq-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.fq-side { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.fq-ask { padding: 24px; gap: 14px; animation: hd-soft 0.6s var(--ease-quint) 0.5s both; }
.fq-ask .tr-name { font-size: 24px; }
.fq-ask .tr-book { margin: 4px 0 0; }
.fq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.fq-list > li { border-bottom: 1px solid var(--rule); animation: hd-soft 0.5s var(--ease-quint) calc(0.35s + var(--s) * 0.07s) both; }
.fq-item summary { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; align-items: center; gap: 12px; padding: 22px 8px; cursor: pointer; list-style: none; border-radius: 12px; isolation: isolate; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary::before { content: ""; position: absolute; inset: 4px -8px; z-index: -1; border-radius: 14px; background: color-mix(in srgb, var(--glow) 45%, transparent); opacity: 0; transition: opacity 0.25s ease; }
.fq-item summary:hover::before { opacity: 1; }
.fq-item b { font: 400 15px/1 var(--grotesk); color: var(--cocoa); font-variant-numeric: tabular-nums; }
.fq-q { font: 600 clamp(20px, 0.7vw + 14px, 25px)/1.2 var(--grotesk); letter-spacing: -0.035em; color: var(--ink); }
.fq-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background-color 0.25s ease; }
.fq-icon::before, .fq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: var(--ink); transition: transform 0.4s var(--ease-pop), background-color 0.25s ease; }
.fq-icon::after { transform: rotate(90deg); }
.fq-item[open] .fq-icon { background: var(--ink); }
.fq-item[open] .fq-icon::before, .fq-item[open] .fq-icon::after { background: var(--paper); }
.fq-item[open] .fq-icon::after { transform: rotate(0deg); }
.fq-a { margin: 0; padding: 0 56px 26px 60px; max-width: 62ch; font: 400 17px/1.55 var(--grotesk); letter-spacing: -0.01em; color: var(--cocoa); }
.cd .fq-a { max-width: 62ch; }
.fq-item[open] .fq-a { animation: hd-soft 0.45s var(--ease-quint) both; }
.fq-a strong { font-weight: 600; color: var(--ink); }

/* RECENSIONI E CONTATTI (canvas, pagina «Recensioni e Contatti · stile D», nuova/fine-d.css) --------------- */
/* Una riga che si scorre di lato, su ogni schermo: così la sezione non si allunga quando le recensioni aumentano */
.rv-list { display: flex; gap: 32px; margin: 0 -48px; padding: 16px 48px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 48px; scrollbar-width: none; list-style: none; }
.rv-list::-webkit-scrollbar { display: none; }
.rv-list > li { flex: 0 0 min(400px, 84%); scroll-snap-align: start; }
.rv-list > li { display: flex; animation: hd-soft 0.6s var(--ease-quint) calc(0.4s + var(--s) * 0.1s) both; }
.rv-card { gap: 18px; margin: 0; padding: 28px 26px 24px; }
.rv-card blockquote { flex: 1; margin: 0; font: 500 clamp(19px, 0.5vw + 14px, 21px)/1.45 var(--grotesk); letter-spacing: -0.02em; color: var(--ink); }
.rv-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); font: 400 15px/1.3 var(--grotesk); color: var(--cocoa); }
.rv-who i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--glow) 60%, transparent); font: normal 600 15px/1 var(--grotesk); color: var(--ink); }
/* Su desktop tre recensioni stanno in riga: l'invito a scorrere serve solo su telefono */
.rv-hint { display: none; margin: 14px 0 0; font: 400 14px/1 var(--grotesk); color: var(--cocoa); }

.ct-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.ct-side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ct-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-list > li { animation: hd-soft 0.6s var(--ease-quint) calc(0.45s + var(--s) * 0.1s) both; }
/* Ogni contatto è una riga grande e toccabile: icona, etichetta, valore, freccia */
.ct-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 92px; padding: 16px 24px 16px 18px; border-radius: 24px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 55%, #fff); color: var(--ink); text-decoration: none; transition: translate 0.45s var(--ease-pop), border-color 0.25s ease, box-shadow 0.45s var(--ease-quint); }
.ct-row:hover, .ct-row:focus-visible { translate: 0 -3px; border-color: var(--ink); color: var(--ink); box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--ink) 50%, transparent); }
.ct-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--glow) 60%, transparent); transition: background-color 0.25s ease; }
.ct-ico svg { width: 22px; height: 22px; }
.ct-row:hover .ct-ico, .ct-row:focus-visible .ct-ico { background: color-mix(in srgb, var(--glow) 90%, transparent); }
.ct-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-txt b { font: 600 clamp(21px, 0.8vw + 14px, 26px)/1.1 var(--grotesk); letter-spacing: -0.03em; }
.ct-txt small { font: 400 15px/1.3 var(--grotesk); color: var(--cocoa); overflow-wrap: anywhere; }
.ct-row .arrow { font: 500 22px/1 var(--grotesk); transition: transform 0.35s var(--ease-quint); }
.ct-row:hover .arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .rv-list { gap: 14px; margin: 0 -20px; padding: 16px 20px 12px; scroll-padding: 0 20px; }
  .rv-card { padding: 22px 20px 20px; }
  .rv-hint { display: block; }
  .ct-main { grid-template-columns: 1fr; gap: 28px; }
  .ct-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; min-height: 80px; padding: 14px 18px 14px 14px; border-radius: 20px; }
  .ct-ico { width: 44px; height: 44px; }
  .ct-txt b { font-size: 21px; }
}

/* Barra contatti fissa in basso (solo telefono): WhatsApp e Chiamami sempre a portata di pollice */
.hd-dock { display: none; }
@keyframes hd-dock-in { from { transform: translateY(120%); } }
@keyframes cd1-line { from { transform: scaleY(0); } }

/* TELEFONO (e tablet: stesso punto di rottura di css/responsive.css) ----------------------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .hd-bar { margin: 16px 16px 0; padding: 4px 4px 4px 10px; }
  .hd-brand { gap: 10px; font-size: 18px; }
  .hd-brand img { height: 28px; }
  .hd-brand i { height: 20px; }
  /* Menu senza JavaScript: «Menu» porta a #menu e :target apre l'elenco; una voce o «Chiudi» lo richiude */
  .hd-nav { display: none; }
  #menu:target .hd-nav { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--paper); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--ink) 50%, transparent); }
  .hd-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 6%, transparent); font: 400 18px/1 var(--grotesk); color: var(--ink); text-decoration: none; transition: background-color 0.25s ease; }
  .hd-menu:active { background: var(--butter); }
  .hd-menu--close, #menu:target ~ .hd-menu--open { display: none; }
  #menu:target ~ .hd-menu--close { display: inline-flex; }
  /* Apertura: la foto diventa sfondo della metà bassa, sfumata nella carta sopra e sotto;
     il testo resta su fondo chiaro. Riga dei tre dati e «Ferma animazioni» nascoste. */
  .hd { isolation: isolate; min-height: 844px; padding-top: 70px; }
  .hd-foot { display: none; }
  .hd-title { font-size: 48px; }
  .hd-zone { display: block; }
  .hd-zone svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }
  .hd-cta, .cd-cta { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  .hd-pill { justify-content: center; }
  .p1-main { position: static; grid-template-columns: 1fr; gap: 32px; align-content: start; padding: 136px 20px 0; }
  .p1-text { gap: 24px; }
  .p1-media { position: absolute; left: 0; right: 0; bottom: 50px; z-index: -1; display: block; height: 62%; min-height: 0; }
  .p1-media .hd-halo { display: none; }
  .hd-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; --r: 0px; box-shadow: none; object-position: center 40%; opacity: 0.55; filter: saturate(0.85); }
  .p1-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 30%, color-mix(in srgb, var(--paper) 15%, transparent) 55%, color-mix(in srgb, var(--paper) 80%, transparent) 82%, var(--paper) 100%); }
  .hd-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ink) 55%, transparent); animation: hd-dock-in 0.7s var(--ease-quint) 1.2s both; }
  .hd-dock a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 100px; font: 600 16px/1 var(--grotesk); color: var(--ink); text-decoration: none; }
  .hd-dock svg { width: 18px; height: 18px; }
  .hd-dock-wa { background: color-mix(in srgb, var(--paper) 40%, #fff); }
  .hd-dock-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #25d366; color: #fff; }
  .hd-dock-call { background: var(--butter); }
  .hd-dock a:active { transform: scale(0.97); }
  .cd { padding: 0 20px 64px; }
  /* Niente filetto tra le sezioni: resta solo l'etichetta, la pagina scorre continua */
  .cd-head { margin-bottom: 20px; padding-top: 48px; border-top: 0; animation: none; }
  .cd1-main { grid-template-columns: 1fr; gap: 40px; }
  .cd1-media { max-width: none; }
  /* Il metodo come percorso verticale (al posto del righello): numero nel cerchio, titolo accanto,
     descrizione sotto; una linea scende da un cerchio al successivo */
  .cd1-steps { grid-template-columns: 1fr; }
  .cd1-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 18px; padding: 0 0 26px; }
  .cd1-step:last-child { padding-bottom: 0; }
  .cd1-step:not(:last-child)::before { content: ""; position: absolute; left: 19.25px; top: 48px; bottom: 8px; width: 1.5px; background: var(--ink); opacity: 0.35; transform-origin: top; animation: cd1-line 0.8s var(--ease-quint) calc(1.15s + var(--s) * 0.15s) both; }
  .cd1-line { display: none; }
  .cd1-num { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--paper) 55%, #fff); font: 600 15px/1 var(--grotesk); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .cd1-step strong { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 40px; }
  .cd1-desc { grid-column: 2; grid-row: 2; }
  .tr-intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .tr-intro .cd-p { justify-self: start; }
  /* Tre schede: una per riga, con le voci visibili (i nomi delle terapie stanno solo lì) */
  .tr-grid { grid-template-columns: 1fr; gap: 24px; }
  .tr-card { padding: 8px; border-radius: 20px; }
  .tr-body { gap: 10px; padding: 14px 12px 8px; }
  .tr-name { font-size: 22px; }
  .tr-hint { font-size: 15px; }
  .tr-types li { min-height: 28px; font-size: 13px; }
  .tr-book { min-height: 44px; margin: 6px 0 0; font-size: 15px; }
  .tr-help { flex-direction: column; align-items: stretch; }
  .tr-ghost { justify-content: center; }
  .dv-main { grid-template-columns: 1fr; gap: 12px; }
  .dv-map { min-height: 0; aspect-ratio: 1 / 1; }
  .dv-frame { filter: none; }
  .dv-legend { left: 12px; top: 12px; font-size: 13px; }
  .dv-cards { gap: 12px; }
  .dv-card { padding: 20px 18px 18px; }
  .dv-addr { font-size: 17px; }
  .dv-list > div { grid-template-columns: 84px minmax(0, 1fr); font-size: 15px; }
  .dv-actions { flex-direction: column; }
  .dv-actions .tr-book { width: 100%; }
  .fq-main { grid-template-columns: 1fr; gap: 32px; }
  .fq-side { display: contents; }
  .fq-list { order: 2; }
  .fq-ask { order: 3; padding: 20px 18px; }
  .fq-ask .tr-book { width: 100%; }
  .fq-item summary { grid-template-columns: 28px minmax(0, 1fr) 32px; gap: 10px; padding: 18px 4px; }
  .fq-icon { width: 32px; height: 32px; }
  .fq-a { padding: 0 8px 22px 42px; font-size: 16px; }
}

/* TRANSIZIONE APERTURA → CHI SONO (2B · Arco con tuffo) -----------------------------------
   Su schermi grandi la pagina si ferma (sticky) mentre si scorre: la foto del massaggio scende ad arco,
   si gira e risale a sinistra come ritratto; l'apertura sale e Chi sono arriva dal basso.
   La scena è disegnata a 1280 × 820 px (coordinate del percorso comprese) e centrata nello schermo.
   Su schermi più piccoli la scena si rimpicciolisce per starci tutta: tan(atan2(a, b)) è il rapporto a / b senza unità.
   Sotto 1024 × 640 (i testi scenderebbero sotto i 12px), senza supporto o con «riduci movimento»
   le due sezioni restano una sotto l'altra. */
.tx-card { display: none; }
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (offset-path: path("M 0 0")) {
    .tx { height: calc(100vh + 1780px); view-timeline: --tx block; }
    .tx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse 95% 85% at 100% 100%, color-mix(in srgb, var(--peach) 45%, var(--stone)) 0%, transparent 72%), var(--paper); }
    .tx-scene { position: absolute; left: 50%; top: 50%; width: 1280px; height: 820px; translate: -50% -50%; scale: min(1, tan(atan2(100vw, 1280px)), tan(atan2(100vh, 820px))); perspective: 1800px; }
    /* Le due sezioni diventano strati trasparenti della scena */
    .tx .hd, .tx .cd { position: absolute; inset: 0; z-index: 2; min-height: 0; padding: 0; background: none; overflow: visible; }
    .tx .p1-main { position: absolute; left: 48px; top: 98px; bottom: 96px; width: 680px; display: flex; align-items: center; padding: 0; }
    .tx .hd-foot { position: absolute; left: 0; right: 0; bottom: 0; }
    .tx .p1-media, .tx .cd-head, .tx .cd1-media, .tx .cd-cta { display: none; }
    .tx .cd1-main { position: absolute; left: 584px; right: 48px; top: 132px; display: block; }
    .tx .cd1-text { gap: 22px; }
    /* Chi sono compare tutta insieme con tx-in: niente ingressi dei singoli elementi */
    .tx .cd-title .row > span, .tx .cd-in, .tx .cd1-step, .tx .cd1-num, .tx .cd1-line::before, .tx .cd1-line::after { animation: none; }

    /* La carta: fronte = massaggio, retro = ritratto; un alone per lato, sempre dietro */
    .tx-card { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 440px; height: 550px; transform-style: preserve-3d; offset-path: path("M 999 407 C 1010 760, 280 760, 268 407"); offset-anchor: center; offset-rotate: 0deg; }
    .tx-card .hd-halo { inset: -18%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(-2px); }
    .tx-card .tx-halo-back { transform: rotateY(180deg) translateZ(-2px); }
    .tx-face { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--night) 40%, transparent); }
    .tx-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .tx-front img { object-position: center 45%; }
    .tx-back { transform: rotateY(180deg); }
    .tx-back img { object-position: center 22%; }

    /* Collegamento allo scroll (animation-timeline dopo lo shorthand) */
    .tx .p1-main, .tx .hd-foot { animation: tx-out linear both; animation-timeline: --tx; animation-range: contain 0% contain 30%; }
    .tx .cd1-main { animation: tx-in linear both; animation-timeline: --tx; animation-range: contain 48% contain 82%; }
    .tx-card { animation: tx-dive 1ms linear both; animation-timeline: --tx; animation-range: contain 6% contain 78%; }
    @keyframes tx-out { to { opacity: 0; transform: translateY(-260px); } }
    @keyframes tx-in { from { opacity: 0; transform: translateY(300px); } }
    @keyframes tx-dive {
      0% { offset-distance: 0%; transform: scale(1) rotateZ(0deg) rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
      50% { transform: scale(0.5) rotateZ(10deg) rotateY(-90deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
      100% { offset-distance: 100%; transform: scale(1) rotateZ(0deg) rotateY(-180deg); }
    }
  }
}

/* INGRESSI DELLE SEZIONI: sotto l'apertura ogni elemento entra quando arriva nello schermo, seguendo lo scroll
   (come css/motion.css), non al caricamento della pagina, quando nessuno lo vede.
   Senza supporto del browser gli ingressi restano a tempo: lo stato finale è comunque la pagina completa. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cd-head, .cd-title .row > span, .cd-in, .cd .hd-unveil, .cd1-step, .cd1-num, .cd1-step::before, .cd1-line::before, .cd1-line::after,
    .tr-grid > li, .tr-help, .dv-map, .dv-cards > li, .fq-ask, .fq-list > li, .rv-list > li, .ct-list > li {
      animation-duration: auto;
      animation-delay: 0s;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
      /* Chi arriva con la tastiera su un link appena entrato nello schermo lo vede subito per intero */
      &:has(:focus-visible) { animation: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-bar, .hd-dock, .hd *, .hd *::before, .hd *::after, .cd *, .cd *::before, .cd *::after { animation: none !important; transition: none !important; }
}