/* «Palestra Ritmo» — sito d'esempio (attivita' di fantasia). La cosa che si
   ricorda: l'orario della settimana a tutta pagina, con la riga dell'ora che
   scende fino a adesso. Hanken Grotesk dal sottile al nero; il gesso, il nero,
   il verde del campo, l'arancio. */
@font-face{font-family:"Hanken Grotesk";src:url(../font/hanken-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../font/hanken-grotesk-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../font/hanken-grotesk-900.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --gesso:#F5F5F2;
  --nero:#161616;           /* 17,3:1 sul gesso */
  --campo:#2F7D4F;          /* bianco sopra 5,2:1 */
  --arancio:#F06A2A;        /* il nero sopra 6,4:1 */
  --grigio:#5B5F5C;
  --linea:#DADAD3;
  --testo:"Hanken Grotesk",system-ui,sans-serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:var(--gesso);color:var(--nero);font:400 1.0625rem/1.6 var(--testo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--nero)}
:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}
h1,.h1,h2{font-weight:900;letter-spacing:-.035em;line-height:.95}
h2{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);margin-bottom:1rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}

.fascia-esempio{background:var(--nero);color:var(--gesso);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(--linea)}
.marchio{font-weight:900;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;margin-right:auto;padding:.3rem 0}
.testata nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.testata nav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:.3rem 0}
.t-tel{font-weight:900;text-decoration:none;padding:.3rem 0}

/* ── l'orario ─────────────────────────────────────────────────────────────── */
.apertura{padding-top:clamp(1.5rem,4vw,3rem)}
.ap-testa{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:.8rem 3rem;align-items:end;margin-bottom:1.6rem}
.h1{font-size:clamp(2.6rem,1.4rem + 4.4vw,5.6rem);grid-row:span 2}
.sotto{font-size:1.1rem;max-width:40ch}
.adesso{font-weight:900;font-size:1.2rem;color:var(--campo)}
.orario-scorri{overflow-x:auto;margin:0 calc(var(--bordo) * -1);padding:0 var(--bordo) .6rem}
.orario{position:relative;display:grid;min-width:46rem;grid-template-columns:3.6rem repeat(6,minmax(0,1fr));
  grid-template-rows:auto repeat(28,1.12rem);column-gap:.4rem;
  background:repeating-linear-gradient(180deg,transparent 0 calc(2.24rem - 1px),var(--linea) calc(2.24rem - 1px) 2.24rem) 0 2.6rem/100% calc(100% - 2.6rem) no-repeat}
.or-vuoto{grid-row:1;grid-column:1}
.or-giorno{grid-row:1;font-weight:900;font-size:1.1rem;padding:.3rem .4rem .8rem;height:2.6rem}
.or-giorno span{font-weight:400;color:var(--grigio)}
.or-ora{grid-column:1;font-size:.8rem;color:var(--grigio);transform:translateY(-.55rem)}
.lezione{position:relative;z-index:1;margin:2px 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
  padding:.1rem .55rem;border:0;border-radius:6px;background:var(--nero);color:var(--gesso);font:400 .74rem/1.1 var(--testo);
  text-align:left;cursor:pointer;transition:transform .15s,background .15s}
.lezione b{font-weight:900;font-size:.86rem}
.lezione:hover{background:var(--campo)}
.lezione.l-pilates,.lezione.l-yoga,.lezione.l-ginnastica-dolce{background:#E2E2DA;color:var(--nero)}
.lezione.l-pilates:hover,.lezione.l-yoga:hover,.lezione.l-ginnastica-dolce:hover{background:#cfd8cf}
.lezione.accesa{background:var(--arancio);color:var(--nero);box-shadow:0 0 0 3px var(--gesso),0 0 0 5px var(--arancio);animation:accendi .7s ease 1.7s both}
@keyframes accendi{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.riga-ora{display:none;position:absolute;z-index:2;left:-.2rem;right:-.2rem;top:0;height:3px;background:var(--arancio);
  grid-row:2/-1;pointer-events:none;transition:top 1.6s cubic-bezier(.45,0,.2,1) .2s}
.riga-ora.si{display:block}
.riga-ora::before{content:"";position:absolute;left:-.35rem;top:-.35rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--arancio)}
.orario [data-r="1"]{grid-row:2/span 2}.orario [data-r="2"]{grid-row:3/span 2}.orario [data-r="3"]{grid-row:4/span 2}.orario [data-r="4"]{grid-row:5/span 2}.orario [data-r="5"]{grid-row:6/span 2}.orario [data-r="6"]{grid-row:7/span 2}.orario [data-r="7"]{grid-row:8/span 2}.orario [data-r="8"]{grid-row:9/span 2}.orario [data-r="9"]{grid-row:10/span 2}.orario [data-r="10"]{grid-row:11/span 2}.orario [data-r="11"]{grid-row:12/span 2}.orario [data-r="12"]{grid-row:13/span 2}.orario [data-r="13"]{grid-row:14/span 2}.orario [data-r="14"]{grid-row:15/span 2}.orario [data-r="15"]{grid-row:16/span 2}.orario [data-r="16"]{grid-row:17/span 2}.orario [data-r="17"]{grid-row:18/span 2}.orario [data-r="18"]{grid-row:19/span 2}.orario [data-r="19"]{grid-row:20/span 2}.orario [data-r="20"]{grid-row:21/span 2}.orario [data-r="21"]{grid-row:22/span 2}.orario [data-r="22"]{grid-row:23/span 2}.orario [data-r="23"]{grid-row:24/span 2}.orario [data-r="24"]{grid-row:25/span 2}.orario [data-r="25"]{grid-row:26/span 2}.orario [data-r="26"]{grid-row:27/span 2}.orario [data-r="27"]{grid-row:28/span 2}.orario [data-r="28"]{grid-row:29/span 2}.orario [data-g="0"]{grid-column:2}.orario [data-g="1"]{grid-column:3}.orario [data-g="2"]{grid-column:4}.orario [data-g="3"]{grid-column:5}.orario [data-g="4"]{grid-column:6}.orario [data-g="5"]{grid-column:7}

/* ── la prova gratuita ────────────────────────────────────────────────────── */
.prova{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem 5rem;background:var(--campo);color:#fff}
.prova p{max-width:40ch}
.prova form{display:grid;gap:1.1rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.1rem}
.prova label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.prova input,.prova select{font:400 1rem var(--testo);padding:.75rem .85rem;border:0;border-radius:6px;color:var(--nero);min-height:3rem;background:#fff}
.prova .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.prova .spunta input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.prova button{justify-self:start;font:900 1rem var(--testo);background:var(--arancio);color:var(--nero);border:0;border-radius:99px;padding:.95rem 1.6rem;cursor:pointer}
.esito{min-height:1.6em;font-weight:600}

/* ── la sala ──────────────────────────────────────────────────────────────── */
.sl-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-rows:auto auto;gap:1rem}
.sl-alta{grid-row:span 2}
.sl-griglia img,.sl-griglia video{width:100%;height:100%;object-fit:cover;border-radius:8px}
.sl-alta img,.sl-alta video{aspect-ratio:2/3}
.sl-griglia figure:not(.sl-alta) img{aspect-ratio:16/9}
.sl-griglia figcaption{font-size:.92rem;color:var(--grigio);margin-top:.4rem}

.abbonamenti{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem 3rem;background:#fff}
.abbonamenti p{color:var(--grigio)}
.ab-lista div,.orari div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--linea)}
.ab-lista dd{font-weight:900;font-size:1.3rem}
.orari dd{font-weight:600}
.ab-dove p{margin-top:1rem}
.piede{padding:2.5rem var(--bordo) 3rem;font-size:.9rem;color:var(--grigio);border-top:1px solid var(--linea)}
.piede p+p{margin-top:.3rem}

@media(max-width:900px){
  .ap-testa,.prova,.sl-griglia{grid-template-columns:1fr}
  .h1{grid-row:auto}
  .sl-alta{grid-row:auto}
  .sl-alta img,.sl-alta video{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){.riga-ora{transition:none}.lezione.accesa{animation:none}.lezione{transition:none}}

/* ── il video in cima: le parole in basso a sinistra, pesanti ────────────── */
.clip{--clip-velo:linear-gradient(0deg,rgba(22,22,22,.92) 0%,rgba(22,22,22,.5) 40%,rgba(22,22,22,.05) 72%);align-items:end}
.clip{--velo-parole:rgba(22,22,22,.5)}   /* il velo sotto le parole (clip.css) */
.clip-nome{font-weight:900;font-size:clamp(3.4rem,1.4rem + 7.4vw,9rem);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.clip-frase{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.4}
.clip-btn{background:var(--arancio);color:var(--nero)}
/* a 320 il blocco del modulo usciva di 17 px (controllo totale del 23/10) */
.pv-testo,.prova form,.prova label,.riga>*{min-width:0}
.prova input,.prova select{width:100%;max-width:100%;min-width:0}
.prova .spunta input{width:1.2rem}