/* Nania Therapy & Performance, stile del sito dal 20/10/2026 (proposta B "bicolore 70/30", scelta da Lorenzo:
   "mi piace la b, puoi fare e sistemare tutto").
   Lo studio (home e osteopatia) è chiaro, accento bordeaux come la divisa. Il pugilato ha il nero di Black Corner
   con l'ambra: in home vale per la sua sezione (quando la attraversi tutta la pagina passa al nero, poi torna chiara),
   su pugilato.html per tutta la pagina (html.scuro fisso). Il tono lo cambia sito.js sulla radice; i colori
   passano in modo morbido. Le parti di una sola pagina stanno in fondo, divise per pagina. */

/* variabili del tono registrate: così si possono animare e i figli ereditano il passaggio */
@property --fondo { syntax: '<color>'; inherits: true; initial-value: #f3efe9; }
@property --fondo-2 { syntax: '<color>'; inherits: true; initial-value: #e8e3db; }
@property --testo { syntax: '<color>'; inherits: true; initial-value: #151413; }
@property --muto { syntax: '<color>'; inherits: true; initial-value: #615d56; }
@property --riga { syntax: '<color>'; inherits: true; initial-value: rgba(21, 20, 19, .14); }
@property --riga-forte { syntax: '<color>'; inherits: true; initial-value: rgba(21, 20, 19, .34); }
@property --accento { syntax: '<color>'; inherits: true; initial-value: #7c2d33; }
@property --su-accento { syntax: '<color>'; inherits: true; initial-value: #f3efe9; }

:root {
  /* tono chiaro: lo studio. Accento bordeaux, come la divisa */
  --fondo: #f3efe9;
  --fondo-2: #e8e3db;
  --testo: #151413;
  --muto: #615d56;
  --riga: rgba(21, 20, 19, .14);
  --riga-forte: rgba(21, 20, 19, .34);
  --accento: #7c2d33;
  --su-accento: #f3efe9;
  --g: clamp(20px, 5vw, 80px);
  --max: 1480px;
  --alto-testa: 76px;
  --ease: cubic-bezier(.77, 0, .175, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
/* tono scuro: il nero e l'ambra di Black Corner (come su pugilato.html).
   Sulla sezione del pugilato vale sempre; su tutta la pagina solo mentre la attraversi */
html.scuro, [data-tono="scuro"] {
  --fondo: #0a0a0a;
  --fondo-2: #141413;
  --testo: #f3efe9;
  --muto: #a39d94;
  --riga: rgba(243, 239, 233, .14);
  --riga-forte: rgba(243, 239, 233, .34);
  --accento: #f2a541;
  --su-accento: #0a0a0a;
}
html.scuro { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--fondo); color: var(--testo); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--alto-testa); }
html.menu-aperto { overflow: hidden; }
/* rete di sicurezza da telefono: la pagina non si trascina di lato né si rimpicciolisce anche se qualcosa sbordasse
   (Lorenzo 20/10: "posso draggare verso destra e zoom outtare"). "clip" e non "hidden": non crea un contenitore di
   scorrimento, quindi intestazione fissa ed elementi sticky continuano a funzionare */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; transition: --fondo .9s ease, --fondo-2 .9s ease, --testo .9s ease, --muto .9s ease, --riga .9s ease, --riga-forte .9s ease, --accento .9s ease, --su-accento .9s ease; }
}
body { margin: 0; background-color: var(--fondo); color: var(--testo); font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
::selection { background: var(--accento); color: var(--su-accento); }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--testo); color: var(--fondo); padding: 10px 14px; font-weight: 500; }
.salta:focus { top: 12px; }
.cont { width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--g); padding-right: var(--g); }
[data-tono="scuro"] { background-color: var(--fondo); color: var(--testo); }

/* ---------- tipografia ---------- */
.occhiello { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muto); }
.occhiello .num { display: inline-flex; align-items: center; gap: 14px; color: var(--accento); font-variant-numeric: tabular-nums; }
.occhiello .num::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.titolo { font-weight: 400; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.06; letter-spacing: -.032em; max-width: 14em; text-wrap: balance; }
.sez__testo { margin-top: 24px; font-size: 19px; line-height: 1.55; color: var(--muto); max-width: 31em; }
/* righe dei titoli (le crea il JS): sempre a blocco, così restano su righe separate anche senza animazioni */
.riga, .riga__in { display: block; }

/* ---------- bottoni e link ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 0 22px; border: 1px solid transparent; border-radius: 2px; font-weight: 500; font-size: 15px; line-height: 1.2; transition: background-color .35s var(--out), color .35s var(--out), border-color .35s var(--out); }
.btn--pieno { background-color: var(--testo); color: var(--fondo); }
.btn--pieno:hover { background-color: var(--accento); color: var(--su-accento); }
.btn--bordo { border-color: var(--riga-forte); color: var(--testo); }
.btn--bordo:hover { border-color: var(--testo); }
.btn--piccolo { min-height: 40px; padding: 0 18px; font-size: 14px; }
.freccia { width: 18px; height: 12px; flex: none; transition: transform .45s var(--out); }
.btn:hover .freccia, .link:hover .freccia, .testata__porta a:hover .freccia { transform: translateX(5px); }
.link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--riga-forte); font-weight: 500; font-size: 15px; transition: color .3s, border-color .3s; }
.link:hover { color: var(--accento); border-color: var(--accento); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- intestazione: fissa; il fondo pieno compare appena si scorre ---------- */
.testa { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--alto-testa); display: flex; align-items: center; gap: 40px; padding: 0 var(--g); color: var(--testo); }
.testa::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--fondo); border-bottom: 1px solid var(--riga); opacity: 0; transition: opacity .45s var(--out); }
.testa.scorsa::before { opacity: 1; }
/* il logo come quello vero di Ale (Lorenzo 20/10: "si deve sistemare solo il logo"): la N con le grazie, rifatta
   dall'originale del vecchio sito (_sorgenti/logo.py), poi NANIA in maiuscolo spaziato e THERAPY & PERFORMANCE */
.logo { display: inline-flex; align-items: center; gap: 14px; }
/* la N del marchio prende il colore del testo: cambia insieme al tono */
.logo__n { flex: none; width: 30px; aspect-ratio: 1848 / 1728; background-color: currentColor; -webkit-mask: url(../img/marchio.svg) center / contain no-repeat; mask: url(../img/marchio.svg) center / contain no-repeat; }
.logo__nome { display: flex; flex-direction: column; gap: 4px; }
/* lo spazio fra le lettere lascia un vuoto dopo la A: il margine negativo lo toglie, così NANIA resta centrata */
.logo b { font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; }
.logo small { font-size: 8.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muto); line-height: 1.2; }
.nav { display: flex; gap: 32px; margin-left: auto; font-size: 14.5px; }
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accento); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a.corrente::after { transform: scaleX(1); transform-origin: left; }
/* le due attività (dal 10/11/2026): interruttore sempre in vista. Da computer sta dopo il logo, da tablet e telefono al
   centro dell'intestazione. Nella pagina di un'attività la sua voce è piena del colore di quella pagina (ambra sul
   pugilato, bordeaux sull'osteopatia); in home nessuna è piena */
.aree { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--riga-forte); border-radius: 3px; font-size: 14px; font-weight: 500; line-height: 1; transition: opacity .3s var(--out) .15s, visibility 0s; }
.aree a { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border-radius: 2px; white-space: nowrap; transition: background-color .3s var(--out); }
.aree a:hover { background-color: var(--riga); }
.aree a[aria-current="page"] { color: var(--su-accento); }
.aree a[aria-current="page"]:hover { background-color: transparent; }
.aree a[aria-current="page"]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px; background-color: var(--accento); }
/* col menu aperto l'interruttore si toglie: le due attività sono in grande nel menu */
html.menu-aperto .testa .aree { opacity: 0; visibility: hidden; transition: opacity .2s var(--out), visibility 0s .2s; }
.testa__menu { display: none; align-items: center; gap: 12px; margin-left: auto; height: 44px; font-weight: 500; font-size: 15px; }
.testa__righe { position: relative; width: 22px; height: 8px; }
.testa__righe::before, .testa__righe::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.testa__righe::before { top: 0; }
.testa__righe::after { top: 6.5px; }
[aria-expanded="true"] .testa__righe::before { top: 3.25px; transform: rotate(45deg); }
[aria-expanded="true"] .testa__righe::after { top: 3.25px; transform: rotate(-45deg); }

/* menu da telefono a tutto schermo (dal 10/11/2026): in alto le due attività con la foto, sotto le altre voci, in fondo
   il pulsante per prenotare. Quella della pagina in cui sei ha il nome nel colore della pagina e "Sei qui" */
.menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; padding: calc(var(--alto-testa) + 20px) var(--g) 28px; overflow-y: auto; overscroll-behavior: contain; background-color: var(--fondo); color: var(--testo); }
.menu[hidden] { display: none; }
.menu__aree, .menu__voci, .menu__piede { width: 100%; max-width: 620px; }
.menu__aree { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.area { display: flex; flex-direction: column; }
.area__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.area__foto img { width: 100%; height: 100%; object-fit: cover; }
.area__nome { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 25px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.area__nome .freccia { color: var(--accento); }
.area__cosa { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muto); }
.area[aria-current="page"] .area__nome { color: var(--accento); }
.area[aria-current="page"] .freccia { display: none; }
.menu__voci { margin-top: 32px; }
.menu__voci a { position: relative; display: block; padding: 13px 0 14px; font-size: 22px; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }
.menu__voci a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--riga); transform-origin: left; }
.menu__voci a.corrente { color: var(--accento); }
.menu__piede { display: flex; flex-direction: column; gap: 18px; margin-top: auto; padding-top: 32px; }
.menu__ig { color: var(--muto); font-size: 15px; }

/* ---------- testata ---------- */
.testata { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 6vw, 112px); max-width: var(--max); min-height: max(680px, 100svh); margin: 0 auto; padding: calc(var(--alto-testa) + 32px) var(--g) clamp(40px, 4.5vw, 72px); }
.testata__testo { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
/* niente text-wrap: balance qui: in Chromium spezzava "trattamento" da solo; l'a capo normale dà
   "Osteopatia e / trattamento manuale, / in due studi." (lo spazio unificatore tiene insieme "in due") */
.testata__titolo { font-weight: 400; font-size: clamp(40px, 3.8vw, 66px); line-height: 1.03; letter-spacing: -.036em; max-width: 12em; }
.testata__sotto { margin-top: 28px; font-size: 19px; line-height: 1.55; color: var(--muto); max-width: 30em; }
.testata__sotto strong { font-weight: 500; color: var(--testo); }
.testata__porta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--riga); font-size: 15px; color: var(--muto); }
.testata__porta a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--riga-forte); color: var(--testo); font-weight: 500; transition: border-color .3s; }
.testata__porta a:hover { border-color: var(--testo); }
.testata__foto { align-self: end; height: min(calc(100svh - var(--alto-testa) - 32px - clamp(40px, 4.5vw, 72px)), 860px, 52vw); min-height: 520px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.testata__foto img, .testata__foto video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ---------- sezioni ---------- */
.sez { position: relative; padding-top: clamp(96px, 9.5vw, 152px); padding-bottom: clamp(96px, 9.5vw, 152px); }

/* 02 osteopatia */
.osteo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.osteo__testo { grid-column: 1 / span 5; }
.osteo__foto { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.osteo__foto figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.osteo__foto figure:last-child { margin-top: clamp(72px, 9vw, 150px); }
.osteo__foto img { width: 100%; height: 100%; object-fit: cover; }
.dati { margin-top: 40px; border-top: 1px solid var(--riga-forte); }
.dati li { padding: 15px 0 16px; border-bottom: 1px solid var(--riga); font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.osteo__link { margin-top: 36px; }

/* 03 la seduta: tre colonne allineate (le righe si allineano con subgrid) */
.seduta__testa { margin-bottom: clamp(56px, 6vw, 96px); }
.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 32px; }
.passo { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.passo__n { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--accento); font-variant-numeric: tabular-nums; }
.passo__n::after { content: ''; flex: 1; height: 1px; background: var(--riga-forte); transform-origin: left; }
.passo h3 { margin-top: 22px; font-size: clamp(24px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.passo__testo { margin-top: 10px; color: var(--muto); max-width: 24em; }
.passo__foto { margin-top: 30px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.passo__foto img { width: 100%; height: 100%; object-fit: cover; }

/* 04 gli studi */
.studi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.studi__testo { grid-column: 1 / span 5; }
.sedi { grid-column: 7 / -1; margin-top: 44px; border-top: 1px solid var(--riga-forte); }
.sedi li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 24px; padding: 24px 0 26px; border-bottom: 1px solid var(--riga); }
.sedi__luogo { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
.sedi__via { font-size: clamp(26px, 2.4vw, 40px); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.sedi .link { margin-bottom: 4px; }
.studi__foto { grid-column: 1 / -1; margin-top: clamp(72px, 8vw, 128px); aspect-ratio: 2 / 1; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
/* la foto degli studi (studio-15) ha le mani e il paziente in basso: il taglio largo deve tenerli */
.studi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }

/* 01 pugilato (in home subito dopo la testata dal 9/11/2026): il nero di Black Corner, testo più pieno e ambra.
   Griglia: titolo e blocchi in alto; video grande a sinistra, foto ed esito a destra; la porta a tutta riga */
.pugilato { padding-top: clamp(130px, 14vw, 230px); padding-bottom: clamp(110px, 11vw, 180px); }
.pug { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 32px; }
.pug__testa { grid-column: 1 / span 6; grid-row: 1; }
.pug__titolo { font-weight: 500; letter-spacing: -.038em; max-width: 12em; }
.pug__blocchi { grid-column: 8 / -1; grid-row: 1; align-self: end; border-top: 1px solid var(--riga-forte); }
.pug__blocchi > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; padding: 20px 0 22px; border-bottom: 1px solid var(--riga); }
.pug__blocchi dt { font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.pug__blocchi dd { color: var(--muto); font-size: 16px; line-height: 1.5; }
.pug__video { grid-column: 1 / span 7; grid-row: 2 / span 2; margin-top: clamp(64px, 7vw, 112px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.pug__video video { width: 100%; height: 100%; object-fit: cover; }
.pug__foto { grid-column: 9 / -1; grid-row: 2; margin-top: clamp(64px, 7vw, 112px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.pug__foto img { width: 100%; height: 100%; object-fit: cover; }
.pug__riga { grid-column: 9 / -1; grid-row: 3; align-self: end; padding-top: 48px; font-size: clamp(21px, 1.7vw, 27px); font-weight: 500; line-height: 1.32; letter-spacing: -.015em; }
.pug__riga b { font-weight: 500; color: var(--accento); }
/* la porta: link grande a tutta riga; al passaggio la riga si accende d'ambra da sinistra */
.pug__porta { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(72px, 7vw, 120px); }
.pug__porta a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px 0 36px; border-top: 1px solid var(--riga-forte); border-bottom: 1px solid var(--riga-forte); font-size: clamp(28px, 3.5vw, 58px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; transition: color .45s var(--out); }
.pug__porta a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accento); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.pug__porta .freccia { width: clamp(30px, 3vw, 50px); height: auto; aspect-ratio: 20 / 12; transition: transform .6s var(--out); }
.pug__porta a:hover { color: var(--accento); }
.pug__porta a:hover::after { transform: scaleX(1); transform-origin: left; }
.pug__porta a:hover .freccia { transform: translateX(10px); }

/* 05 chi sono: il ritratto a sinistra da computer, sotto il testo da telefono */
.chi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.chi__ritratto { grid-column: 1 / span 5; grid-row: 1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.chi__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.chi__testo { grid-column: 7 / -1; grid-row: 1; }
.chi__frase { margin-top: 32px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.32; letter-spacing: -.015em; max-width: 21em; }

/* contatti */
.contatti__titolo { font-weight: 400; font-size: clamp(46px, 6.6vw, 112px); line-height: .98; letter-spacing: -.045em; max-width: 11em; }
.contatti__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; margin-top: 40px; }
.contatti__griglia .sez__testo { grid-column: 1 / span 6; margin-top: 0; }
.contatti__griglia .azioni { grid-column: 8 / -1; margin-top: 0; }
.contatti__dati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(64px, 7vw, 110px); padding-top: 24px; border-top: 1px solid var(--riga-forte); }
.contatti__dati dt { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muto); }
.contatti__dati dd { margin-top: 8px; font-size: 18px; line-height: 1.5; }
.contatti__dati a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.contatti__dati a:hover { border-bottom-color: var(--accento); }

/* piede */
.piede { background-color: var(--fondo-2); }
.piede__griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-top: 64px; padding-bottom: 56px; }
.logo--grande .logo__n { width: 44px; }
.logo--grande b { font-size: 21px; }
.logo--grande small { font-size: 10px; }
.piede__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--muto); }
.piede__col a { transition: color .3s; }
.piede__col a:hover, .piede__col a.corrente { color: var(--testo); }
.piede__fondo { padding-bottom: 28px; font-size: 13px; color: var(--muto); }
.piede__fondo p { padding-top: 22px; border-top: 1px solid var(--riga); }

.barra { display: none; }

/* parallasse leggera sulle foto marcate (la variabile la aggiorna il JS) */
[data-parallasse] > img { translate: 0 var(--px, 0px); scale: 1.1; }

/* ---------- entrate (solo con JS e senza riduzione del movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-testo] { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--out), transform 1.1s var(--out); transition-delay: calc(var(--r, 0) * 90ms); }
  .js [data-testo].visibile { opacity: 1; transform: none; }
  /* titoli: ogni riga sale dalla sua maschera (le righe le crea il JS) */
  .js [data-righe]:not(.diviso) { opacity: 0; }
  .js [data-righe] .riga { display: block; overflow: hidden; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
  .js [data-righe] .riga__in { display: block; transform: translateY(108%); transition: transform 1.15s var(--out); transition-delay: calc(var(--n, 0) * 110ms + 80ms); }
  .js [data-righe].visibile .riga__in { transform: none; }
  /* foto: si svelano dal basso e si assestano */
  .js [data-foto] > img, .js [data-foto] > video { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.3s var(--ease), transform 1.9s var(--out); transition-delay: calc(var(--r, 0) * 120ms); }
  .js [data-foto].visibile > img, .js [data-foto].visibile > video { clip-path: inset(0 0 0 0); transform: none; }
  .js [data-foto-testata] img, .js [data-foto-testata] video { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  .js [data-foto-testata].visibile img, .js [data-foto-testata].visibile video { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.5s var(--ease) .15s, transform 2.6s var(--out) .15s; }
  /* la linea dei passi si disegna da sinistra, un passo dopo l'altro */
  .js .passo__n::after { transform: scaleX(0); transition: transform 1.4s var(--ease); transition-delay: calc(var(--r, 0) * 180ms + 250ms); }
  .js .passo.visibile .passo__n::after { transform: none; }
  /* menu da telefono: scende dall'intestazione come una tendina; le foto delle due attività si svelano dal basso come
     quelle della pagina, le righe delle voci si disegnano da sinistra, i testi compaiono in dissolvenza ferma */
  .menu { clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease); }
  .menu.aperto { clip-path: inset(0 0 0 0); }
  .area__foto img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.1s var(--ease), transform 1.6s var(--out); transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
  .menu.aperto .area__foto img { clip-path: inset(0 0 0 0); transform: none; }
  .area__nome, .area__cosa, .menu__voci a, .menu__piede > * { opacity: 0; transition: opacity .6s var(--out); transition-delay: calc(var(--i, 0) * 60ms + 260ms); }
  .menu.aperto .area__nome, .menu.aperto .area__cosa, .menu.aperto .menu__voci a, .menu.aperto .menu__piede > * { opacity: 1; }
  .menu__voci a::after { transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + 220ms); }
  .menu.aperto .menu__voci a::after { transform: none; }
  /* l'attività della pagina si riempie del suo colore arrivando dal lato dell'altra */
  .aree a[aria-current="page"] { animation: area-testo .8s var(--ease) .25s both; }
  .aree a[aria-current="page"]::before { animation: area-piena .8s var(--ease) .25s both; }
  .aree a:first-child[aria-current="page"]::before { transform-origin: right; }
  .aree a:last-child[aria-current="page"]::before { transform-origin: left; }
}
@keyframes area-piena { from { transform: scaleX(0); } }
@keyframes area-testo { from { color: var(--testo); } }
@media (prefers-reduced-motion: reduce) {
  [data-parallasse] > img { translate: none; scale: 1; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .nav { gap: 24px; }
  .testa { gap: 28px; }
}
@media (max-width: 1023px) {
  .nav, .testa__prenota { display: none; }
  .testa__menu { display: inline-flex; }
  /* max-content: messo a metà con left 50% avrebbe solo metà intestazione e si stringerebbe, con voci diverse */
  .aree { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%); }
  .testata { grid-template-columns: 1fr; min-height: 0; padding-bottom: 72px; }
  .testata__testo { gap: 0; }
  .testata__foto { justify-self: end; width: min(100%, 560px); height: auto; min-height: 0; margin-top: 56px; }
  .osteo__testo, .studi__testo, .sedi { grid-column: 1 / -1; }
  .osteo__testo { max-width: 640px; }
  .osteo__foto { grid-column: 1 / -1; margin-top: 64px; gap: 16px; }
  .osteo__foto figure:last-child { margin-top: 72px; }
  .sedi { margin-top: 56px; }
  .pug { grid-template-rows: auto auto auto 1fr auto; }
  .pug__testa { grid-column: 1 / -1; }
  .pug__blocchi { grid-column: 1 / -1; grid-row: 2; margin-top: 44px; }
  .pug__video { grid-column: 1 / span 7; grid-row: 3 / span 2; }
  .pug__foto { grid-column: 8 / -1; grid-row: 3; }
  .pug__riga { grid-column: 8 / -1; grid-row: 4; }
  .pug__porta { grid-row: 5; }
  .chi__ritratto { grid-column: 1 / span 6; }
  .chi__testo { grid-column: 8 / -1; }
  .contatti__griglia .sez__testo, .contatti__griglia .azioni { grid-column: 1 / -1; }
  .contatti__griglia .azioni { margin-top: 32px; }
  .piede__griglia { grid-template-columns: 1fr 1fr 1fr; }
  .piede__griglia .logo { grid-column: 1 / -1; margin-bottom: 8px; }
}

/* ---------- telefono: le foto vanno sotto il testo ---------- */
@media (max-width: 759px) {
  :root { --alto-testa: 64px; }
  body { font-size: 16px; }
  .titolo { font-size: clamp(31px, 8.6vw, 40px); }
  .sez { padding-top: 76px; padding-bottom: 84px; }
  .sez__testo { font-size: 17px; }
  .occhiello { margin-bottom: 20px; }
  .azioni { flex-direction: column; align-items: stretch; }

  .testata { padding-top: calc(var(--alto-testa) + 32px); padding-bottom: 20px; }
  /* corpo scelto perché "trattamento manuale," stia su una riga: titolo su tre righe anche a 360px */
  .testata__titolo { font-size: clamp(34px, 9.4vw, 44px); }
  .testata__sotto { margin-top: 22px; font-size: 17px; }
  .testata__porta { margin-top: 36px; font-size: 14.5px; }
  .testata__foto { width: 100%; margin-top: 40px; }

  .osteo, .studi, .chi { display: block; }
  .osteo__foto { margin-top: 48px; gap: 12px; }
  .osteo__foto figure:last-child { margin-top: 56px; }
  .dati li { font-size: 16px; }

  .passi { display: block; }
  .passo { display: block; }
  .passo + .passo { margin-top: 56px; }
  .passo h3 { margin-top: 16px; font-size: 25px; }
  .passo__foto { margin-top: 22px; }

  .sedi { margin-top: 44px; }
  .sedi li { grid-template-columns: 1fr; }
  .studi__foto { margin-top: 56px; aspect-ratio: 4 / 3; }

  .pugilato { padding-top: 96px; padding-bottom: 88px; }
  .pug { display: block; }
  .pug__blocchi { margin-top: 36px; }
  .pug__blocchi > div { grid-template-columns: 1fr; gap: 6px; }
  .pug__video { margin-top: 44px; aspect-ratio: 4 / 5; }
  .pug__foto { width: 64%; margin: 12px 0 0 auto; }
  .pug__riga { padding-top: 40px; font-size: 21px; }
  .pug__porta { margin-top: 44px; }
  .pug__porta a { padding: 24px 0 26px; font-size: 25px; letter-spacing: -.025em; }
  .pug__porta .freccia { width: 26px; }

  .chi__ritratto { margin-top: 48px; }
  .chi__frase { font-size: 21px; }

  .contatti__titolo { font-size: clamp(42px, 12vw, 56px); }
  .contatti__griglia { display: block; margin-top: 28px; }
  .contatti__dati { grid-template-columns: 1fr; gap: 22px; }

  .piede__griglia { grid-template-columns: 1fr; gap: 26px; padding-top: 48px; padding-bottom: 36px; }
  .piede__fondo { padding-bottom: 100px; }

  .logo small { display: none; }
  .logo--grande small { display: block; }
  /* da telefono nell'intestazione resta solo la N (Lorenzo 20/10: "toglierei il NANIA da mobile"); il nome resta
     nel piede, e il link ha comunque l'aria-label con il nome */
  .testa .logo__nome { display: none; }
  /* interruttore più compatto; il pulsante del menu è solo l'icona, allineata al margine (la scritta Menu/Chiudi resta
     per i lettori di schermo) */
  .aree { font-size: 13.5px; }
  .aree a { height: 30px; padding: 0 12px; }
  .testa__menu { width: 44px; margin-right: -11px; justify-content: center; }
  .testa__menu [data-etichetta-menu] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .area__nome { margin-top: 12px; font-size: 22px; }
  .area__cosa { font-size: 13.5px; }
  .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; min-height: 54px; padding: 0 20px; border-radius: 2px; background-color: var(--testo); color: var(--fondo); font-weight: 500; font-size: 15px; transform: translateY(160%); transition: transform .55s var(--ease); }
  .barra.visibile { transform: none; }
  html.menu-aperto .barra { transform: translateY(160%); }
}
/* telefoni stretti (320-359 px): l'interruttore deve stare fra la N e l'icona del menu */
@media (max-width: 359px) {
  .aree { font-size: 13px; }
  .aree a { padding: 0 9px; }
}
/* telefoni bassi: foto del menu meno alte, così il pulsante per prenotare resta nello schermo */
@media (max-width: 759px) and (max-height: 700px) {
  .area__foto { aspect-ratio: 4 / 3; }
}