/* Pagina del pugilato (dal 20/10/2026, sistema della proposta B). Tutta nera: html.scuro con il nero di Black Corner
   e l'ambra, come la sezione del pugilato della home. Basi comuni in sito.css; qui solo le parti di questa pagina.
   Le entrate seguono quelle della home: righe dei titoli dalla maschera, foto che si svelano dal basso,
   filetti che si disegnano da sinistra. */

/* caratteri: gli stessi della home in tutte le pagine (titoli, sottotitoli e numeri a peso 400, con le misure di
   sito.css; il peso pieno solo per pulsanti, link ed etichette). Lorenzo 20/10: "i font non sono tutti uguali come
   nella homepage che ha i font migliori" */

/* ---------- testata ---------- */
.testata__sotto strong { font-weight: 500; color: var(--testo); }
/* tre dati affiancati: valori e didascalie restano allineati anche quando un valore va a capo (subgrid) */
.cifre { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto auto; justify-content: start; column-gap: clamp(32px, 3.6vw, 60px); margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--riga); }
.cifre > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.cifre dt { align-self: end; font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.cifre dd { margin-top: 4px; font-size: 13.5px; color: var(--muto); }
[data-conta] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* galleria: stessa misura della foto della testata in home, meno la riga del tempo e la didascalia sotto */
.galleria { align-self: end; display: flex; flex-direction: column; min-width: 0; }
.galleria__quadro { position: relative; height: min(calc(100svh - var(--alto-testa) - 32px - clamp(40px, 4.5vw, 72px) - 52px), 808px, 49vw); min-height: 468px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.scatto { position: absolute; inset: 0; visibility: hidden; }
.scatto img { width: 100%; height: 100%; object-fit: cover; }
.scatto.attivo { z-index: 1; visibility: visible; }
/* la foto nuova scende dall'alto sopra la vecchia e si assesta */
.scatto.entra { z-index: 2; visibility: visible; clip-path: inset(0 0 100% 0); }
.scatto.entra.via { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease); }
.scatto.entra img { transform: scale(1.1); }
.scatto.entra.via img { transform: none; transition: transform 2.2s var(--out); }
.galleria__piede { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 18px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
/* la riga del tempo si riempie da sinistra; al cambio esce a destra */
.galleria__tempo { grid-column: 1 / -1; position: relative; height: 2px; margin-bottom: 12px; overflow: hidden; background: var(--riga); }
.galleria__tempo i { position: absolute; inset: 0; background: var(--accento); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.galleria__tempo i.corre { transform: scaleX(1); transform-origin: left; transition: transform var(--durata, 4.6s) linear; }
.galleria__conta { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--muto); font-variant-numeric: tabular-nums; }
.galleria__conta b { font-weight: 600; color: var(--accento); }
.galleria__nomi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muto); transition: opacity .35s var(--out); }
.galleria__nomi b { margin-right: 6px; font-weight: 500; color: var(--testo); }
.galleria__nomi.cambia { opacity: 0; }

/* ---------- 01 il metodo ---------- */
.metodo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.metodo__testo { grid-column: 1 / span 6; }
.principi { margin-top: 48px; border-top: 1px solid var(--riga-forte); }
.principi li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 24px 0 26px; }
.principi li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--riga); transform-origin: left; }
.principi__n { padding-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--accento); font-variant-numeric: tabular-nums; }
.principi h3 { font-size: clamp(21px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.018em; line-height: 1.22; }
.principi p { margin-top: 8px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--muto); }

/* l'analisi resta in vista mentre si leggono i principi */
.analisi { grid-column: 8 / -1; position: sticky; top: calc(var(--alto-testa) + 28px); }
.analisi__barra { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muto); }
.analisi__barra i { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--accento); vertical-align: 1px; }
.analisi__tempo { padding-left: 12px; white-space: nowrap; color: var(--testo); font-variant-numeric: tabular-nums; }
.analisi__quadro { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.analisi__quadro video { width: 100%; height: 100%; object-fit: cover; }
.analisi__quadro svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.analisi figcaption { margin-top: 14px; max-width: 36em; font-size: 14px; line-height: 1.55; color: var(--muto); }
/* la catena: dalla gamba dietro al guantone, anello sul bacino e sul contatto */
.a-linea, .a-ombra, .a-anello, .a-bacino { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-linea { stroke: var(--accento); stroke-width: 3.2; }
.a-ombra { stroke: rgba(0, 0, 0, .5); stroke-width: 8; }
.a-anello { stroke: var(--accento); stroke-width: 3.2; }
.a-bacino { stroke: var(--accento); stroke-width: 3; opacity: .9; }
.a-punto { fill: var(--accento); stroke: #111; stroke-width: 2; }
.a-etichetta rect { fill: rgba(10, 10, 10, .88); }
.a-etichetta text { fill: #f3efe9; font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 17px; }
.a-etichetta tspan { fill: var(--accento); font-weight: 600; }
/* con il JS la catena compare solo quando il video si ferma sul contatto (senza JS resta disegnata sul fermo) */
.js .a-linea, .js .a-ombra, .js .a-anello, .js .a-bacino { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .a-punto, .js .a-etichetta { opacity: 0; }
.js .analisi.fermo .a-linea, .js .analisi.fermo .a-ombra, .js .analisi.fermo .a-anello, .js .analisi.fermo .a-bacino { stroke-dashoffset: 0; }
.js .analisi.fermo .a-punto, .js .analisi.fermo .a-etichetta { opacity: 1; }

/* ---------- 02 cosa facciamo: titolo a sinistra, due percorsi con le righe allineate ---------- */
.percorsi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 32px; }
.percorsi__testa { grid-column: 1 / span 4; grid-row: 1 / span 5; padding-right: 16px; }
.servizio { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; align-content: start; }
.servizio:nth-of-type(1) { grid-column: 5 / span 4; }
.servizio:nth-of-type(2) { grid-column: 9 / span 4; }
.servizio__n { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
.servizio__n::after { content: ''; flex: 1; height: 1px; background: var(--riga-forte); transform-origin: left; }
.servizio h3 { margin-top: 22px; font-size: clamp(24px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.servizio__durata { margin-top: 8px; font-size: 15px; font-weight: 500; }
.servizio__testo { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--muto); }
.servizio__video { margin-top: 32px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.servizio__video video { width: 100%; height: 100%; object-fit: cover; }
.terapia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: baseline; margin-top: clamp(88px, 9vw, 144px); }
.terapia__titolo { grid-column: 1 / span 4; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muto); }
.terapia__testo { grid-column: 5 / -1; max-width: 26em; font-size: clamp(21px, 1.7vw, 27px); font-weight: 400; line-height: 1.32; letter-spacing: -.015em; }

/* la porta: link grande a tutta riga, come quella della home; al passaggio la riga si accende d'ambra da sinistra */
.porta { margin-top: clamp(44px, 4.5vw, 64px); }
.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); }
.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); }
.porta .freccia { width: clamp(30px, 3vw, 50px); height: auto; aspect-ratio: 20 / 12; transition: transform .6s var(--out); }
.porta a:hover { color: var(--accento); }
.porta a:hover::after { transform: scaleX(1); transform-origin: left; }
.porta a:hover .freccia { transform: translateX(10px); }

/* ---------- 03 come funziona: fascia appena più chiara, numero grande che cambia con la fase ---------- */
.fasi-sez { background-color: var(--fondo-2); }
.fasi-blocco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.fasi-blocco__testa { grid-column: 1 / span 5; position: sticky; top: calc(var(--alto-testa) + 48px); }
/* il numero grande ha senso solo da computer e quando le fasi si accendono una alla volta */
.fasi-grande { display: none; align-items: flex-end; gap: 22px; margin-top: clamp(56px, 6vw, 104px); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .js .fasi-grande { display: flex; } }
/* il numero sale dalla maschera come le righe dei titoli; a destra un po' di spazio per l'interlinea stretta */
.fasi-grande__n { position: relative; display: block; overflow: hidden; padding-right: .08em; font-size: clamp(120px, 11vw, 188px); font-weight: 400; line-height: .84; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.cifra { display: block; }
.cifra:not(.attuale) { position: absolute; left: 0; top: 0; transform: translateY(var(--da, 100%)); }
.cifra.esce { transform: translateY(var(--a, -100%)); }
.fasi-grande__nome { padding-bottom: .55em; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
/* la linea parte dal primo pallino e finisce sull'ultimo; l'ambra arriva alla fase accesa (misure da pugilato.js) */
.fasi { grid-column: 7 / -1; position: relative; padding-left: 44px; }
.fasi::before, .fasi::after { content: ''; position: absolute; left: 0; top: var(--inizio, 10px); width: 1px; }
.fasi::before { height: calc(var(--fine, 100%) - var(--inizio, 10px)); background: var(--riga-forte); }
.fasi::after { height: calc(var(--riempito, var(--inizio, 10px)) - var(--inizio, 10px)); background: var(--accento); transition: height .8s var(--out); }
.fase { --sopra: 0px; position: relative; padding-top: var(--sopra); padding-bottom: clamp(44px, 4.4vw, 64px); }
.fase + .fase { --sopra: clamp(34px, 3.4vw, 50px); border-top: 1px solid var(--riga); }
.fase:last-child { padding-bottom: 0; }
.fase::before { content: ''; position: absolute; left: -48.5px; top: calc(var(--sopra) + 5px); width: 9px; height: 9px; border: 1px solid var(--riga-forte); border-radius: 50%; background-color: var(--fondo-2); transition: background-color .4s, border-color .4s; }
.fase.attiva::before { border-color: var(--accento); background-color: var(--accento); }
.fase__en { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
.fase h3 { margin-top: 10px; font-size: clamp(26px, 2.2vw, 34px); font-weight: 400; letter-spacing: -.024em; line-height: 1.12; }
.fase__testo { margin-top: 12px; max-width: 30em; font-size: 17px; color: var(--muto); }
/* con il JS le fasi spente restano in secondo piano (i pallini e le righe no) */
.js .fase > * { opacity: .28; transition: opacity .6s var(--out); }
.js .fase.attiva > * { opacity: 1; }

/* ---------- dal ring ---------- */
.ring { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.ring__video { grid-column: 1 / span 5; grid-row: 1; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.ring__video video { width: 100%; height: 100%; object-fit: cover; }
.ring__testo { grid-column: 7 / -1; grid-row: 1; }
.ring__corpo { margin-top: 16px; max-width: 36em; color: var(--muto); }
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 48px 0 40px; }
.numeri > div { position: relative; padding-top: 22px; }
.numeri > div::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--riga-forte); transform-origin: left; }
.numeri dt { font-size: clamp(56px, 5.4vw, 92px); font-weight: 400; line-height: .92; letter-spacing: -.05em; white-space: nowrap; }
.numeri dd { margin-top: 12px; max-width: 14em; font-size: 14px; line-height: 1.45; color: var(--muto); }

/* ---------- 04 biomeccanica di un KO: striscia che esce dal bordo destro ---------- */
.ko-testa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; margin-bottom: clamp(48px, 5vw, 80px); }
.ko-testa > div { grid-column: 1 / span 6; }
.ko-testa > .sez__testo { grid-column: 8 / -1; margin-top: 0; }
/* il margine sinistro segue il contenitore; lo stesso valore va nello scroll-padding, se no la prima copertina
   si aggancia al bordo dello schermo */
.ko { --bordo: max(var(--g), calc((100% - var(--max)) / 2 + var(--g))); position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 25vw, 400px); column-gap: 24px; padding-left: var(--bordo); padding-right: var(--g); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-left: var(--bordo); scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.ko::-webkit-scrollbar { display: none; }
.ko.trascina { cursor: grabbing; scroll-snap-type: none; }
.ko.trascina a { pointer-events: none; }
.ko li { scroll-snap-align: start; }
.ko a { display: block; }
.ko__foto { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.ko__foto img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ko__nome { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--riga); font-size: 15.5px; font-weight: 500; line-height: 1.4; transition: color .3s; }
.ko a:hover .ko__nome { color: var(--accento); }
/* sotto la striscia: la riga dice quanto ne resta, il pulsante porta al profilo */
.ko-piede { display: flex; align-items: center; gap: 40px; margin-top: 40px; }
.ko-piede__binario { position: relative; flex: 1; height: 1px; background: var(--riga-forte); }
.ko-piede__binario i { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--accento); }
.ko-piede__binario.nascosto { visibility: hidden; }

/* ---------- dove ci alleniamo ---------- */
.dove-sez { padding-top: clamp(72px, 7vw, 112px); }
/* testo e foto centrati fra loro: la foto non sale sopra il testo verso la striscia dei KO (20/10, sbordava) */
.dove { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.dove__testo { grid-column: 1 / span 6; }
/* il logo riempie la foto invece di restare piccolo in mezzo al muro grigio */
.dove__foto { grid-column: 8 / -1; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.dove__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- entrate (solo con JS e senza riduzione del movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* la prima foto della galleria entra al caricamento, come la foto della testata in home */
  .js .galleria:not(.visibile) .scatto img { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  /* inset(0) e non "none": fra inset() e none il ritaglio non si anima */
  .js .galleria.visibile .scatto.attivo img { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease) .15s, transform 2.6s var(--out) .15s; }
  .js .galleria__piede { transition: opacity 1s var(--out) .9s; }
  .js .galleria:not(.visibile) .galleria__piede { opacity: 0; }
  /* filetti che si disegnano da sinistra */
  .js .principi li::after { transform: scaleX(0); transition: transform 1.3s var(--ease); transition-delay: calc(var(--r, 0) * 90ms + 200ms); }
  .js .principi li.visibile::after { transform: none; }
  .js .servizio__n::after { transform: scaleX(0); transition: transform 1.4s var(--ease); transition-delay: calc(var(--r, 0) * 180ms + 250ms); }
  .js .servizio.visibile .servizio__n::after { transform: none; }
  .js .numeri > div::before { transform: scaleX(0); transition: transform 1.3s var(--ease); transition-delay: calc(var(--r, 0) * 120ms + 150ms); }
  .js .numeri > div.visibile::before { transform: none; }
  /* analisi: niente zoom sul video (la catena deve combaciare), solo il ritaglio */
  .js .analisi__quadro[data-foto] > video { transform: none; }
  .analisi__barra i { animation: pulsa 1.6s ease-in-out infinite; }
  .analisi.fermo .analisi__barra i { animation: none; }
  .js .analisi.fermo .a-linea, .js .analisi.fermo .a-ombra { transition: stroke-dashoffset 1.1s linear .15s; }
  .js .analisi.fermo .a-bacino { transition: stroke-dashoffset .8s var(--out) .45s; }
  .js .analisi.fermo .a-anello { transition: stroke-dashoffset .6s var(--out) 1.2s; }
  .js .analisi.fermo .a-punto { transition: opacity .25s linear; transition-delay: calc(.15s + var(--f) * 1.1s); }
  .js .analisi.fermo .a-etichetta { transition: opacity .5s linear; transition-delay: calc(.35s + var(--f) * 1.1s); }
  /* numero grande delle fasi */
  .cifra { transition: transform .8s var(--out); }
  /* KO: le copertine si svelano insieme quando arriva la striscia (pugilato.js), anche quelle fuori schermo */
  .js .ko__foto > img { --d: calc(var(--r, 0) * 110ms); clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.3s var(--ease) var(--d), transform 1.9s var(--out) var(--d), scale 1.2s var(--out); }
  .js .ko.visibile .ko__foto > img { clip-path: inset(0 0 0 0); transform: none; }
  .js .ko__nome { opacity: 0; transition: opacity 1s var(--out), color .3s; transition-delay: calc(var(--r, 0) * 110ms + 350ms), 0s; }
  .js .ko.visibile .ko__nome { opacity: 1; }
  .ko__foto img { transition: scale 1.2s var(--out); }
  .ko a:hover .ko__foto img { scale: 1.03; }
}
@keyframes pulsa { 50% { opacity: .25; } }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .galleria { justify-self: end; width: min(100%, 560px); margin-top: 56px; }
  .galleria__quadro { width: 100%; height: auto; min-height: 0; }
  .metodo__testo, .analisi { grid-column: 1 / -1; }
  .metodo__testo { max-width: 680px; }
  .analisi { position: relative; top: 0; max-width: 560px; margin-top: 64px; }
  .percorsi { grid-template-rows: auto repeat(5, auto); }
  .percorsi__testa { grid-column: 1 / -1; grid-row: 1; margin-bottom: 56px; padding-right: 0; }
  .servizio { grid-row: 2 / span 5; }
  .servizio:nth-of-type(1) { grid-column: 1 / span 6; }
  .servizio:nth-of-type(2) { grid-column: 7 / span 6; }
  .terapia__titolo, .terapia__testo { grid-column: 1 / -1; }
  .terapia__testo { margin-top: 14px; }
  .fasi-blocco__testa { grid-column: 1 / -1; position: relative; top: 0; }
  .fasi { grid-column: 1 / -1; margin-top: 56px; }
  .ring__video { grid-column: 1 / span 5; }
  .ring__testo { grid-column: 7 / -1; }
  .ko-testa > div, .ko-testa > .sez__testo { grid-column: 1 / -1; }
  .ko-testa > .sez__testo { margin-top: 24px; }
  .dove__testo { grid-column: 1 / span 7; }
  .dove__foto { grid-column: 8 / -1; }
}

/* ---------- telefono: foto e video sotto il testo ---------- */
@media (max-width: 759px) {
  /* da telefono i tre dati diventano righe, come l'elenco dei dati della home: valore a sinistra, didascalia a destra */
  .cifre { display: block; margin-top: 40px; padding-top: 0; border-top: 1px solid var(--riga-forte); }
  .cifre > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 15px; border-bottom: 1px solid var(--riga); }
  .cifre dt { font-size: 19px; }
  .cifre dd { margin-top: 0; font-size: 14px; text-align: right; }
  .galleria { width: 100%; margin-top: 40px; }

  .metodo { display: block; }
  .principi { margin-top: 40px; }
  .principi li { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0 22px; }
  .principi__n { padding-top: 4px; }
  .principi h3 { font-size: 19px; }
  .principi p { font-size: 15.5px; }
  .analisi { margin-top: 56px; }

  .percorsi { display: block; }
  .percorsi__testa { margin-bottom: 0; }
  .servizio { display: block; margin-top: 56px; }
  .servizio h3 { margin-top: 18px; font-size: 25px; }
  .servizio__video { margin-top: 24px; }
  .terapia { display: block; margin-top: 64px; }
  .terapia__testo { font-size: 21px; }
  .porta { margin-top: 32px; }
  .porta a { padding: 24px 0 26px; font-size: 25px; letter-spacing: -.025em; }
  .porta .freccia { width: 26px; }

  .fasi-blocco { display: block; }
  .fasi { margin-top: 48px; padding-left: 32px; }
  .fase::before { left: -36.5px; }
  .fase h3 { font-size: 26px; }
  .fase__testo { font-size: 16px; }

  .ring { display: block; }
  .ring__video { margin-top: 48px; aspect-ratio: 4 / 5; }
  .numeri { column-gap: 14px; margin: 40px 0 32px; }
  .numeri dt { font-size: clamp(44px, 13vw, 56px); }
  .numeri dd { font-size: 12.5px; }

  .ko { grid-auto-columns: 72vw; column-gap: 14px; scroll-snap-type: x mandatory; }
  .ko__nome { font-size: 15px; }
  .ko-piede { flex-direction: column; align-items: stretch; gap: 28px; margin-top: 32px; }
  .ko-piede__binario { flex: none; }

  .dove { display: block; }
  /* da telefono anche la testa della striscia dei KO va su una colonna: con la griglia a 12 colonne e gli spazi da
     32 px restava più larga dello schermo (13 px a 360) e tutta la pagina si poteva trascinare di lato (20/10) */
  .ko-testa { display: block; }
  .ko-testa > .sez__testo { margin-top: 20px; }
  .dove__foto { width: 72%; margin: 40px 0 0 auto; }
}