/* «Studio Ferrando» — sito d'esempio (attivita' di fantasia). Informazione,
   non promozione (L. 145/2018, c. 525). La cosa che si ricorda: il corpo visto
   da dietro, si tocca dove fa male e sopra compare la striscia di nastro.
   Un solo carattere, Space Grotesk; il blu e' quello del nastro. */

@font-face{font-family:"Space Grotesk";src:url(../font/space-grotesk-300-700.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --inchiostro:#1D2A22;     /* testo: verde quasi nero, 14,6:1 sul lino (era blu notte come il dentista) */
  --ghiaccio:#EFE9DF;       /* il lino del lettino: caldo, non l'azzurro freddo del dentista */
  --sagoma:#D9CDBC;
  --nastro:#1F8DD6;         /* solo forme: il nastro, l'unico azzurro della pagina */
  --nastro-scuro:#0F5E95;   /* link e bottoni: 6,1:1 sul lino */
  --grigio:#5C6058;         /* testo secondario: 5,6:1 sul lino */
  --bianco:#FFFFFF;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:#FAF7F1;color:var(--inchiostro);font:400 1.0625rem/1.6 "Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--nastro-scuro)}
:focus-visible{outline:3px solid var(--nastro);outline-offset:3px}
h1,.h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:1.2rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}

.fascia-esempio{background:var(--inchiostro);color:var(--bianco);font-size:.82rem;text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}
.testata{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;padding:1rem var(--bordo);border-bottom:1px solid var(--ghiaccio)}
.marchio{font-weight:700;font-size:1.3rem;color:var(--inchiostro);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.marchio span{font-weight:400;color:var(--grigio)}
.testata nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.testata nav a{text-decoration:none;color:var(--inchiostro);font-size:.95rem}
.testata nav a:hover{text-decoration:underline}

/* ── dove fa male ─────────────────────────────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(13rem,18rem) minmax(0,1fr);grid-template-areas:"corpo titolo" "corpo schede";grid-template-rows:auto 1fr;
  column-gap:clamp(2rem,6vw,6rem);align-items:start;padding-top:clamp(2rem,5vw,4rem);background:var(--ghiaccio)}
.a-titolo{grid-area:titolo}
.h1{font-size:clamp(3.2rem,1.6rem + 6vw,7.2rem);line-height:.92;letter-spacing:-.045em;margin-bottom:1.2rem}
.sotto{font-size:1.15rem;max-width:44ch;margin-bottom:2rem}
.corpo{grid-area:corpo;position:relative;width:100%;max-width:18rem;justify-self:center}
.sagoma{display:block;width:100%;height:auto}
.pelle{fill:var(--sagoma)}
.arti path{fill:none;stroke:var(--sagoma);stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.nastri rect{fill:var(--nastro);opacity:0;transform-box:fill-box;transform-origin:center;scale:.2 1;transition:opacity .2s,scale .35s cubic-bezier(.3,1.4,.5,1)}
.corpo[data-zona=collo] .n-collo,.corpo[data-zona=spalla] .n-spalla,.corpo[data-zona=dorsale] .n-dorsale,
.corpo[data-zona=lombare] .n-lombare,.corpo[data-zona=polso] .n-polso,.corpo[data-zona=anca] .n-anca,
.corpo[data-zona=ginocchio] .n-ginocchio,.corpo[data-zona=caviglia] .n-caviglia{opacity:.92;scale:1 1}
.vista{text-align:center;font-size:.85rem;color:var(--grigio);margin-top:.4rem}

/* i punti: posizioni in % del corpo (viewBox 200 x 440) */
.punto{position:absolute;width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;border-radius:50%;text-decoration:none;color:var(--inchiostro)}
/* l'anello e il punto sono disegnati, il bottone resta grande da toccare;
   la zona scelta si stringe a un punto scuro e lascia vedere il nastro */
.punto::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bianco);border:2px solid var(--inchiostro);
  box-shadow:0 2px 6px rgba(21,35,58,.25);transition:inset .2s}
.punto::before{content:"";position:absolute;inset:.6rem;border-radius:50%;background:var(--nastro);z-index:1;transition:opacity .2s}
.punto span{position:absolute;z-index:2;left:calc(100% + .5rem);top:50%;translate:0 -50%;white-space:nowrap;background:var(--inchiostro);color:var(--bianco);
  font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
.punto:hover span,.punto:focus-visible span,.punto[aria-current=true] span,.punto.mostra span{opacity:1}
.punto[aria-current=true]::after{inset:.8rem;background:var(--inchiostro);border-color:var(--bianco)}
.punto[aria-current=true]::before{opacity:0}
.p-collo{left:50%;top:14%}.p-spalla{left:67%;top:20%}.p-dorsale{left:50%;top:27%}.p-lombare{left:50%;top:42%}
.p-polso{left:80%;top:50%}.p-anca{left:63%;top:51%}.p-ginocchio{left:42%;top:72%}.p-caviglia{left:41%;top:90%}
/* le etichette a destra escono dal corpo: per i punti a destra, a sinistra */
.p-spalla span,.p-polso span,.p-anca span{left:auto;right:calc(100% + .5rem)}

.schede{grid-area:schede;max-width:40rem}
.zona{display:none;background:var(--bianco);border-radius:6px;padding:1.6rem 1.6rem 1.8rem;border-left:6px solid var(--nastro)}
.zona-vuota{display:block;border-left-color:var(--sagoma)}
.schede.scelta .zona-vuota,.schede:has(.zona:target) .zona-vuota{display:none}
.zona:target,.zona.attiva{display:block}
.zona h2{font-size:2rem;margin-bottom:.6rem}
.z-cosa{font-size:1.15rem;margin-bottom:1.1rem}
.zona h3{font-size:1rem;letter-spacing:0;margin:1rem 0 .2rem}
.zona p{max-width:56ch}
.z-vai{display:inline-block;margin-top:1.4rem;background:var(--nastro-scuro);color:var(--bianco);font-weight:600;text-decoration:none;padding:.8rem 1.2rem;border-radius:6px}
.z-vai:hover{background:var(--inchiostro)}

/* ── il resto ─────────────────────────────────────────────────────────────── */
.passi{list-style:none;padding:0;counter-reset:p;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;margin-bottom:2rem}
.passi li{counter-increment:p;padding-top:1rem;border-top:3px solid var(--inchiostro)}
.passi li::before{content:counter(p);display:block;font-size:3rem;font-weight:300;line-height:1;margin-bottom:.6rem;color:var(--nastro-scuro)}
.passi strong{display:block;font-size:1.2rem}
.porta{max-width:60ch;background:var(--ghiaccio);padding:1rem 1.2rem;border-radius:6px}

.studio-griglia{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.studio-griglia img,.studio-griglia video{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.s-grande{grid-row:span 2}
.s-grande img,.s-grande video{aspect-ratio:4/3}
.s-alta img{aspect-ratio:4/3;object-position:50% 70%}
.studio-griglia figcaption{font-size:.92rem;color:var(--grigio);margin-top:.5rem}

.chi ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem}
.chi li{display:flex;gap:1rem;align-items:flex-start}
.sigla{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--ghiaccio);font-weight:600}
.chi strong{display:block;font-size:1.15rem;margin-bottom:.2rem}

.costi{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem 5rem;background:var(--ghiaccio)}
.tariffe div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid #c6d3df}
.tariffe dd{font-weight:600;white-space:nowrap}
.nota{margin-top:1rem;color:var(--grigio);font-size:.95rem;max-width:40ch}

.prenota>p{max-width:40rem;margin-bottom:1.6rem}
.prenota form{display:grid;gap:1.1rem;max-width:40rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.1rem}
.prenota label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.prenota input,.prenota select{font:400 1rem "Space Grotesk",system-ui,sans-serif;padding:.75rem .8rem;border:1.5px solid #9eb0c2;
  border-radius:6px;background:var(--bianco);color:var(--inchiostro);min-height:3rem}
.prenota .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.prenota .spunta input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.prenota button{justify-self:start;font:600 1rem "Space Grotesk",system-ui,sans-serif;background:var(--nastro-scuro);color:var(--bianco);border:0;
  border-radius:6px;padding:.85rem 1.5rem;cursor:pointer}
.esito{min-height:1.6em;font-weight:600}
.piede{padding:2.5rem var(--bordo) 3rem;font-size:.9rem;color:var(--grigio);border-top:1px solid var(--ghiaccio)}
.piede p+p{margin-top:.3rem}

@media(max-width:820px){
  .apertura{grid-template-columns:1fr;grid-template-areas:"titolo" "corpo" "schede"}
  .corpo{max-width:min(72vw,17rem);margin-bottom:1.5rem}
  .punto{width:2.25rem;height:2.25rem;margin:-1.125rem 0 0 -1.125rem}
  .punto::before{inset:.5rem}
  .punto[aria-current=true]::after{inset:.7rem}
  .studio-griglia{grid-template-columns:1fr}
  .s-grande{grid-row:auto}
}
@media(prefers-reduced-motion:reduce){.nastri rect,.punto span,.punto::before,.punto::after{transition:none}}

/* ── il video in cima: le parole a sinistra, a mezza altezza ─────────────── */
.clip{--clip-velo:linear-gradient(90deg,rgba(21,35,58,.9) 0%,rgba(21,35,58,.55) 42%,rgba(21,35,58,.05) 75%);align-items:center}
.clip{--velo-parole:rgba(21,35,58,.5)}   /* il velo sotto le parole (clip.css) */
.clip-parole{padding-bottom:clamp(1.5rem,5vw,4rem)}
.clip-nome{font-weight:600;font-size:clamp(3rem,1.4rem + 6vw,7rem);line-height:.95;letter-spacing:-.045em}
.clip-frase{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.4;color:#CFE6F7}
.clip-btn{background:#fff;color:var(--nastro-scuro);border-radius:6px}
/* sul telefono l'etichetta di un punto a destra del corpo usciva di 9 px
   (controllo totale del 23/10): lì si apre a sinistra del punto */
@media (max-width:40rem){.p-collo span,.p-spalla span,.p-dorsale span,.p-lombare span,.p-polso span,.p-anca span{left:auto;right:calc(100% + .5rem)}}

/* il secondo video (24/10): l'esercizio sul lettino, nel riquadro grande dello
   studio; in 4:3 l'inquadratura va un po' a destra per tenere la fisioterapista */
.s-grande .secondo{aspect-ratio:4/3}
.s-grande .secondo img,.s-grande .secondo video{object-position:65% 50%}