/* 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; }
.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 */
.menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--alto-testa) + 24px) var(--g) 28px; overflow-y: auto; background-color: var(--fondo); color: var(--testo); }
.menu[hidden] { display: none; }
.menu__voci a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--riga); font-size: 34px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.menu__voci a span { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--accento); }
.menu__voci a.corrente { color: var(--accento); }
.menu__piede { display: flex; flex-direction: column; gap: 18px; 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__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 { 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); }

/* 01 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; }

/* 02 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; }

/* 03 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%; }

/* 04 pugilato: 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 { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  .js [data-foto-testata].visibile img { 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; }
  /* voci del menu da telefono */
  .menu__voci a, .menu__piede > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--out), transform .7s var(--out); transition-delay: calc(var(--i, 0) * 55ms + 60ms); }
  .menu.aperto .menu__voci a, .menu.aperto .menu__piede > * { opacity: 1; transform: none; }
}
@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; }
  .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; }
  .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%); }
}