/* =====================================================================
   PALESTRA FIGHTING CENTER — Design System
   Combat / fitness · dark premium · red accent
   Palette & type from brand identity (D61F26 / 0E0E0E / Oswald-Bebas-Inter)
   ===================================================================== */

/* Font serviti dal nostro dominio (25 set 2026): prima arrivavano da Google
   Fonts, che riceveva l'IP di ogni visitatore e bloccava il disegno della
   pagina finche' il suo CSS non era arrivato. Solo caratteri latini, gli
   stessi file che dava Google (Oswald, Inter e JetBrains Mono sono variabili:
   un file per tutti i pesi). Licenza SIL Open Font License. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-v16-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/oswald-v57-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-v20-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/jetbrains-mono-v24-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#0E0E0E;
  --bg-2:#0B0B0B;
  --bg-3:#080808;
  --panel:#121212;
  --panel-2:#161616;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --red:#D61F26;
  --red-dark:#b3171d;
  --red-soft:rgba(214,31,38,.45);
  --white:#F5F5F5;
  --txt:#F5F5F5;
  --txt-2:#C4C4C4;
  --txt-3:#9a9a9a;
  --txt-4:#6a6a6a;
  --wa:#25D366;
  --maxw:1280px;
  --radius:12px;
  --radius-lg:18px;
  --font-head:'Oswald',sans-serif;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px);}
.section{padding:clamp(64px,8vw,118px) 0;}
.section--alt{background:var(--bg-2);}
.section--tight{padding:clamp(26px,3.2vw,44px) 0;}
/* sezione che segue una copertina gia' sfumata: niente stacco in alto */
.section--flush{padding-top:clamp(26px,3.4vw,44px);}
.eyebrow{font-family:var(--font-head);font-weight:600;letter-spacing:.3em;font-size:13px;text-transform:uppercase;color:var(--red);margin:0;}
.rule{height:4px;width:60px;background:var(--red);margin:22px 0 0;border:0;}
.h-sec{font-family:var(--font-head);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.02;text-transform:uppercase;color:var(--white);margin:12px 0 0;}
.lead{font-family:var(--font-body);font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--txt-2);}
.muted{color:var(--txt-3);}
.center{text-align:center;}
.mt-s{margin-top:18px;}.mt-m{margin-top:26px;}.mt-l{margin-top:40px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-head);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:15px;padding:15px 28px;border-radius:6px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .15s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{background:var(--red-dark);}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);}
.btn--ghost:hover{border-color:var(--red);}
.btn--wa{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);}
.btn--wa:hover{border-color:var(--wa);color:var(--wa);}
.btn--sm{font-size:13px;padding:11px 20px;}
.btn--block{width:100%;}

/* ---------- Header ---------- */
/* Barra di 76px fissi: 60px di marchio piu' 8+8 di padding. Non cambia altezza
   fra pagina ferma e pagina scorsa, cosi' il contenuto sotto non si sposta.
   Niente border-bottom: la riga di chiusura tagliava la barra proprio sotto il
   marchio. Al suo posto, quando si scorre, un'ombra morbida: la barra resta
   staccata dal contenuto senza una linea netta. E' l'unica cosa che .is-scrolled
   cambia ancora - sfondo piu' pieno e ombra, non piu' la misura. */
.site-header{position:sticky;top:0;z-index:80;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s var(--ease),box-shadow .3s var(--ease);}
.site-header.is-scrolled{background:rgba(8,8,8,.94);box-shadow:0 12px 34px rgba(0,0,0,.55);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.brand svg{display:block;flex-shrink:0;}
.brand-text{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:.02em;line-height:1;text-transform:uppercase;color:#fff;white-space:nowrap;}
.brand-text span{color:var(--red);}
.nav{display:flex;align-items:center;gap:clamp(12px,1.1vw,20px);}
/* white-space:nowrap su voci e bottone: e' la regola che impedisce il difetto
   visto in produzione, cioe' "LA PALESTRA" e "RICHIEDI INFORMAZIONI" spezzati
   su due righe quando lo spazio si stringe. Senza nowrap il flex restringe le
   voci e il testo va a capo in silenzio, alzando la barra; con nowrap la barra
   resta di un'altezza sola e, se lo spazio non basta, si passa al menu
   hamburger (breakpoint qui sotto) invece di impaginare male. */
.nav a.navlink{font-family:var(--font-head);font-weight:500;letter-spacing:.09em;text-transform:uppercase;font-size:13.5px;color:#cfcfcf;text-decoration:none;padding:6px 2px;position:relative;white-space:nowrap;transition:color .2s var(--ease);}
.nav a.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);transition:right .25s var(--ease);}
.nav a.navlink:hover{color:#fff;}
.nav a.navlink:hover::after{right:0;}
.nav a.navlink.is-active{color:#fff;}
.nav a.navlink.is-active::after{right:0;}
.nav-cta{margin-left:6px;white-space:nowrap;}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.burger span{width:26px;height:2px;background:#fff;display:block;transition:.25s var(--ease);}
.burger span:last-child{background:var(--red);}

/* mobile drawer */
.mobile-nav{display:none;border-top:1px solid var(--line-soft);background:#0B0B0B;padding:14px clamp(18px,4vw,48px) 22px;}
.mobile-nav.is-open{display:block;}
.mobile-nav a{display:block;font-family:var(--font-head);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:17px;color:#e2e2e2;text-decoration:none;padding:13px 4px;border-bottom:1px solid var(--line-soft);}
.mobile-nav a.is-active{color:var(--red);}
.mobile-nav .btn{margin-top:16px;}
.mobile-nav .mnav-social{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);}
.mobile-nav .mnav-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#cfcfcf;}
.mobile-nav .mnav-social a svg{width:19px;height:19px;fill:currentColor;}

/* Soglia del menu hamburger: 1200px, non 1080px.
   Il menu esteso e' fatto di nove voci piu' il bottone "Richiedi informazioni":
   misurato, il contenuto a riga singola chiede ~1090px, mentre .wrap a 1081px
   ne offre 980 (1081 meno i 2x48 di padding laterale). Erano 187px di troppo, e
   il flex li assorbiva mandando a capo "LA PALESTRA" e il bottone: il difetto
   segnalato. Sotto i 1200px quindi si passa all'hamburger, che a quelle
   larghezze e' anche la scelta giusta di navigazione.
   Con marchio a 60px e gap min 12px, a 1201px avanzano ~16px di margine; da
   1280px in su .wrap si ferma a --maxw (1280) e il margine sale a ~90px. */
@media(max-width:1200px){
  .nav{display:none;}
  .burger{display:flex;}
}

/* ---------- Hero (home) ---------- */
/* The ring photo is the protagonist: full opacity, no overlay veil in front
   of it. Legibility is handled by a directional scrim anchored to the text
   side (left) + a soft base fade, leaving the ring itself clear. */
.hero{position:relative;overflow:hidden;background:var(--bg-2);min-height:clamp(540px,86vh,860px);display:flex;align-items:center;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:1;}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,8,.90) 0%,rgba(8,8,8,.74) 26%,rgba(8,8,8,.34) 52%,rgba(8,8,8,.04) 74%,rgba(8,8,8,0) 100%),
  linear-gradient(180deg,rgba(8,8,8,.30) 0%,rgba(8,8,8,0) 30%,rgba(8,8,8,0) 62%,rgba(11,11,11,.92) 100%);}
/* Il blocco di testo dell'hero parte piu' a sinistra degli altri contenuti
   (container piu' largo del solito .wrap), mantenendo il respiro laterale. */
.hero-inner{position:relative;z-index:2;width:100%;max-width:1440px;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);}
.hero-kicker{font-family:var(--font-head);font-weight:600;letter-spacing:.28em;font-size:14px;text-transform:uppercase;color:var(--red);}
/* line-height 1: sotto lo 0.95 la virgola di "Dal 1992," finisce sopra la riga
   successiva ("un riferimento"), perche' il suo tratto scende sotto la baseline. */
.hero h1{font-family:var(--font-head);font-weight:700;font-size:clamp(50px,9vw,116px);line-height:1;letter-spacing:.005em;text-transform:uppercase;color:#fff;margin:18px 0 0;}
.hero h1 .red{color:var(--red);}
.hero-sub{font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--txt-2);margin:26px 0 0;max-width:34em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,52px);margin-top:48px;}
.stat .num{font-family:var(--font-display);font-size:54px;line-height:.86;color:#fff;}
.stat .num .red{color:var(--red);}
.stat .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--txt-3);margin-top:6px;text-transform:uppercase;}
/* On narrow screens the text stacks full-width, so use a vertical scrim for
   legibility while still keeping the ring visible. */
@media(max-width:760px){
  .hero{min-height:0;}
  .hero-media img{object-position:center 32%;}
  .hero-media::after{background:linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.50) 36%,rgba(8,8,8,.74) 72%,rgba(11,11,11,.96) 100%);}
}

/* page hero (interior pages) ------------------------------------------------
   Stessa regola dell'hero di home: la foto e' il protagonista (opacita' piena,
   nessun velo davanti) e la leggibilita' arriva da uno scrim direzionale
   ancorato al lato del testo. In basso la sfumatura chiude ESATTAMENTE su
   var(--bg), lo stesso fondo della sezione successiva: fra copertina e primo
   paragrafo non si vede nessuna linea di stacco. */
.page-hero{position:relative;overflow:hidden;background:var(--bg);display:flex;align-items:flex-end;
  min-height:clamp(400px,54vh,600px);}
.page-hero-media{position:absolute;inset:0;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:1;}
.page-hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.70) 28%,rgba(8,8,8,.30) 55%,rgba(8,8,8,.05) 78%,rgba(8,8,8,0) 100%),
  linear-gradient(180deg,rgba(8,8,8,.46) 0%,rgba(8,8,8,.06) 24%,rgba(8,8,8,.10) 50%,rgba(11,11,11,.80) 84%,var(--bg) 100%);}
.page-hero-inner{position:relative;z-index:2;width:100%;padding-top:clamp(56px,9vw,108px);padding-bottom:clamp(34px,4.5vw,56px);}
/* variante piu' alta, dove la foto e' un elemento forte della pagina */
.page-hero--tall{min-height:clamp(470px,66vh,720px);}
/* su schermi stretti il testo occupa tutta la larghezza: scrim verticale */
@media(max-width:760px){
  .page-hero{min-height:clamp(340px,48vh,460px);}
  .page-hero--tall{min-height:clamp(400px,58vh,540px);}
  .page-hero-media img{object-position:center 32%;}
  .page-hero-media::after{background:linear-gradient(180deg,rgba(8,8,8,.58) 0%,rgba(8,8,8,.34) 34%,rgba(8,8,8,.70) 74%,var(--bg) 100%);}
}
/* variante "immagine intera" ------------------------------------------------
   Il taglio "cover" della fascia panoramica ritaglia la foto in modo diverso a
   ogni larghezza di schermo: su una foto di gruppo o su uno scatto quasi
   quadrato spariscono le persone ai lati o meta' inquadratura. Qui la foto sta
   dentro il riquadro PER INTERO (contain) e non viene mai tagliata; lo spazio
   che avanza non resta vuoto: lo riempie la stessa foto sfocata e scurita.
   Le proporzioni del riquadro cambiano con il dispositivo (panoramico sul
   desktop, quadrato sul telefono) proprio per lasciare alla foto piu' spazio
   possibile senza mai ritagliarla. Stessa idea gia' usata per le copertine di
   news ed eventi (.article-cover). */
/* height espressa in vw/vh anziche' con aspect-ratio: la proprieta' aspect-ratio,
   combinata con max-height, fa scattare l'algoritmo CSS di "size transfer" che
   RIDUCE ANCHE LA LARGHEZZA del box per rispettare il rapporto quando l'altezza
   viene tagliata dal cap. Su un normale schermo 16:9 questo lascia una fascia
   vuota a destra della foto (misurato: box largo 1312px su un main di 1425px).
   width:100% + height calcolata a mano evita del tutto il problema: la
   larghezza resta sempre piena, punto. */
.page-hero--fit{min-height:0;width:100%;height:min(56.25vw,82vh);}
.page-hero--fit .page-hero-media img{position:absolute;inset:0;display:block;}
.page-hero--fit .hero-bg{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:blur(30px) saturate(.65) brightness(.4);transform:scale(1.12);}
.page-hero--fit .hero-fg{width:100%;height:100%;object-fit:contain;object-position:center center;}
@media(max-width:900px){.page-hero--fit{height:min(75vw,82vh);}}
@media(max-width:560px){.page-hero--fit{height:min(100vw,82vh);}}
/* lo scrim laterale scurirebbe meta' della foto ora che si vede tutta:
   qui basta quello verticale, che serve solo a reggere titolo e briciole. */
.page-hero--fit .page-hero-media::after{background:
  linear-gradient(180deg,rgba(8,8,8,.52) 0%,rgba(8,8,8,.10) 26%,rgba(8,8,8,.16) 52%,rgba(11,11,11,.82) 84%,var(--bg) 100%);}

.page-hero h1{font-family:var(--font-head);font-weight:700;font-size:clamp(40px,6.4vw,82px);line-height:.94;text-transform:uppercase;color:#fff;margin:14px 0 0;}
.breadcrumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-4);margin-top:18px;}
.breadcrumb a{color:var(--txt-3);text-decoration:none;}
.breadcrumb a:hover{color:#fff;}

/* ---------- Value strip ---------- */
.value-strip{background:var(--red);}
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.value-grid > div{padding:22px clamp(18px,3vw,34px);border-right:1px solid rgba(0,0,0,.18);}
.value-grid > div:last-child{border-right:0;}
.value-grid h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:17px;color:#fff;}
.value-grid p{font-size:13px;color:rgba(255,255,255,.84);margin:4px 0 0;}

/* ---------- Generic grid ----------
   cols-3 e' una griglia a 3 colonne VERE: con auto-fit le colonne diventavano
   4 sopra i ~1180px e i gruppi da 5/6 badge lasciavano un orfano in fondo
   (4+1). Colonne esplicite = sempre 3 sopra e 2 sotto, 2+2+1 sul tablet. */
.grid{display:grid;gap:18px;}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1000px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.cols-4{grid-template-columns:1fr;}}
@media(max-width:1000px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.cols-3{grid-template-columns:1fr;}}
.split{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center;}

/* ---------- Cards ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:border-color .25s var(--ease),transform .25s var(--ease);}
.card:hover{border-color:var(--red-soft);transform:translateY(-3px);}
.card-media{position:relative;overflow:hidden;background:var(--panel-2);}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.card:hover .card-media img{transform:scale(1.05);}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));}
.ratio-1{aspect-ratio:1/1;}
.ratio-43{aspect-ratio:4/3;}
.ratio-34{aspect-ratio:3/4;}
.ratio-169{aspect-ratio:16/9;}

/* discipline card */
.disc-card .card-body{padding:20px 20px 22px;border-top:3px solid var(--red);}
.disc-card .name{font-family:var(--font-head);font-weight:700;font-size:23px;text-transform:uppercase;line-height:1;color:#fff;}
.disc-card .meta{font-size:13.5px;line-height:1.5;color:var(--txt-3);margin-top:10px;}
.disc-card .coach{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--red);margin-top:14px;text-transform:uppercase;}
/* Fascia CTA in coda alla griglia delle discipline. Le schede sono in numero
   dispari: lasciata come card normale, questa resterebbe da sola in mezza riga
   e - senza foto - alta e stretta accanto al vuoto. Occupa la riga intera e si
   sviluppa in orizzontale, cosi' e' piu' larga che alta come chiedeva il
   disegno. Va DOPO .disc-card .card-body: stessa specificita', vince l'ordine. */
.disc-cta{grid-column:1/-1;background:linear-gradient(120deg,#160d0d,var(--panel));border-color:var(--red-soft);}
.disc-cta .card-body{border-top:0;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,32px) clamp(20px,3vw,34px);}
.disc-cta .name{color:var(--red);}
.disc-cta p{font-size:15px;max-width:56ch;}
.disc-cta .btn{flex-shrink:0;}
@media(max-width:720px){
  .disc-cta .card-body{flex-direction:column;align-items:flex-start;}
}
.tag-float{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 11px;border-radius:4px;}

/* world / feature card */
.feature-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--panel);transition:border-color .25s var(--ease),transform .25s var(--ease);}
.feature-card:hover{border-color:var(--red-soft);transform:translateY(-3px);}
.feature-card h3{font-family:var(--font-head);font-weight:700;font-size:21px;text-transform:uppercase;color:#fff;}
.feature-card .bar{height:2px;width:34px;background:var(--red);margin:14px 0;}
.feature-card p{font-size:14px;line-height:1.55;color:var(--txt-3);margin:0;}

/* stat tiles — fixed 2×2 so the 4 tiles never leave an orphan/empty cell
   on wide screens (collapses to a single column only on small phones). */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.tiles > div{background:var(--panel);padding:30px 26px;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:420px){.tiles{grid-template-columns:1fr;}}
.tiles .big{font-family:var(--font-display);font-size:48px;line-height:.9;color:#fff;}
.tiles .big.red{color:var(--red);}
.tiles .cap{font-size:14px;color:var(--txt-3);margin-top:8px;}

/* ---------- Membership block ---------- */
.membership{position:relative;border:1px solid var(--red-soft);border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(120deg,#160d0d 0%,var(--bg) 60%);}
.membership-inner{position:relative;display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));padding:clamp(34px,5vw,64px);}
.membership h2{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:.98;text-transform:uppercase;color:#fff;margin:14px 0 0;}
.membership h2 .red{color:var(--red);}
.incl{display:flex;flex-direction:column;gap:0;align-self:center;}
.incl-row{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line-soft);}
.incl-row .dot{width:9px;height:9px;background:var(--red);transform:rotate(45deg);flex-shrink:0;}
.incl-row span.t{font-family:var(--font-head);font-weight:500;font-size:clamp(15px,1.7vw,19px);text-transform:uppercase;letter-spacing:.02em;color:var(--white);}
.octa-watermark{position:absolute;right:-90px;top:50%;transform:translateY(-50%);opacity:.10;pointer-events:none;}

/* ---------- Schedule ---------- */
.sched-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:22px 24px;transition:border-color .25s var(--ease);}
.sched-card:hover{border-color:var(--red-soft);}
.sched-card .d{font-family:var(--font-head);font-weight:700;font-size:22px;text-transform:uppercase;color:#fff;line-height:1;}
.sched-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin-top:18px;}
.sched-grid .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--txt-4);text-transform:uppercase;}
.sched-grid .v{font-size:14px;color:#d6d6d6;}
.sched-grid .v.coach{color:var(--red);}

/* full timetable table ----------------------------------------------------
   table-layout:fixed + larghezze esplicite: le tre tabelle degli orari hanno
   le stesse 5 colonne, cosi' restano incolonnate fra loro invece di adattarsi
   ognuna al proprio contenuto. */
.timetable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
table.timetable{width:100%;border-collapse:collapse;min-width:680px;table-layout:fixed;}
table.timetable th,table.timetable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);font-size:14px;overflow-wrap:anywhere;}
table.timetable th:nth-child(1),table.timetable td:nth-child(1){width:23%;}
table.timetable th:nth-child(2),table.timetable td:nth-child(2){width:19%;}
table.timetable th:nth-child(3),table.timetable td:nth-child(3){width:17%;}
table.timetable th:nth-child(4),table.timetable td:nth-child(4){width:26%;}
table.timetable th:nth-child(5),table.timetable td:nth-child(5){width:15%;}
table.timetable thead th{font-family:var(--font-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--txt-3);background:var(--bg-2);}
table.timetable td.disc{font-family:var(--font-head);font-weight:600;text-transform:uppercase;color:#fff;letter-spacing:.02em;}
table.timetable td.coach{color:var(--red);font-family:var(--font-mono);font-size:12px;}
table.timetable tr:hover td{background:rgba(255,255,255,.02);}

/* ---------- Trainers ---------- */
.coach-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:border-color .25s var(--ease),transform .25s var(--ease);}
.coach-card:hover{border-color:var(--red-soft);transform:translateY(-3px);}
.coach-photo{position:relative;aspect-ratio:3/4;background:
  radial-gradient(120% 90% at 50% 0,rgba(214,31,38,.16),transparent 55%),
  repeating-linear-gradient(135deg,#1c1c1c 0 14px,#161616 14px 28px);
  display:flex;align-items:center;justify-content:center;}
.coach-photo .mono{font-family:var(--font-display);font-size:64px;color:rgba(255,255,255,.16);letter-spacing:.04em;}
.coach-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));}
.coach-card .card-body{padding:16px 18px 18px;}
.coach-card .cn{font-family:var(--font-head);font-weight:600;font-size:18px;text-transform:uppercase;color:#fff;line-height:1.05;}
.coach-card .cr{font-size:12.5px;color:var(--red);margin-top:6px;}

/* ---------- Testimonials ---------- */
.quote{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:30px 28px;display:flex;flex-direction:column;}
.quote .mark{font-family:var(--font-display);font-size:46px;line-height:.6;color:var(--red);}
.quote p{font-size:16px;line-height:1.6;color:#d8d8d8;margin:8px 0 0;}
.quote-foot{margin-top:auto;padding-top:22px;}
.quote .stars{font-size:15px;letter-spacing:.12em;color:var(--red);line-height:1;}
.quote .stars .off{color:rgba(255,255,255,.16);}
.quote .who{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-top:12px;}
.quote .who .src{color:var(--txt-4);font-weight:500;}

/* ---------- News ---------- */
.news-card{display:flex;flex-direction:column;text-decoration:none;}
.news-card .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.news-card .date{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-4);}
.news-card .title{font-family:var(--font-head);font-weight:600;font-size:21px;line-height:1.1;text-transform:uppercase;color:#fff;margin-top:10px;}
.news-card p{font-size:14px;line-height:1.55;color:var(--txt-3);margin:12px 0 0;}
/* Copertina della news: MAI tagliata ------------------------------------
   Le foto caricate dal pannello hanno formati qualsiasi (16:9, quadrate, un
   verticale 9:16 fatto col telefono). In un riquadro fisso 16:9 con "cover"
   ne restava visibile solo una fascia centrale, diversa a ogni larghezza di
   schermo: e' il taglio segnalato dalla palestra.

   Qui il riquadro prende LE PROPORZIONI DELLA SUA foto (--nw-ar, misurata da
   FC.initCoverFit su naturalWidth/naturalHeight): l'immagine riempie il badge
   esattamente e non perde niente. Nei rari casi fuori dalla forbice 0.75-1.8
   (foto lunghissime, che sfonderebbero la griglia) il riquadro si ferma al
   limite e la foto ci sta DENTRO INTERA (object-fit:contain), con lo spazio
   che avanza riempito dalla stessa foto sfocata: tagliata mai, comunque.
   Il 3/4 e' solo il valore di partenza finche' la foto non e' stata misurata
   (o se il JS e' disattivato: anche li' resta intera, mai ritagliata). */
.news-card .card-media.ratio-169{aspect-ratio:var(--nw-ar,3/4);background:var(--bg-2);}
.news-card .card-media img{object-fit:contain;object-position:center;}
/* niente zoom all'hover: ingrandire una foto dentro il suo riquadro esatto
   vuol dire ritagliarla, cioe' riportare il problema. */
.news-card:hover .card-media img{transform:none;}
/* sfondo sfocato: si vede solo quando la foto non riempie il riquadro */
.news-card .card-media::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nw-img,none);background-size:cover;background-position:center;
  filter:blur(30px) saturate(.65) brightness(.4);transform:scale(1.15);}
.news-card .card-media img{position:relative;z-index:1;}
/* z-index 1 come la foto (e dopo di lei nell'ordine di disegno): la sfumatura
   sta sopra l'immagine, il badge della categoria (z-index 2) sopra entrambe. */
.news-card .card-media::after{background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.45));z-index:1;}
/* "leggi / scopri" affordance on clickable cards */
.card-link{margin-top:auto;padding-top:18px;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);transition:gap .2s var(--ease);}
.card.news-card:hover .card-link,.card.event-card:hover .card-link{color:#fff;}

/* ---------- Events ---------- */
.events-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.events-head-cta{flex-shrink:0;}
.event-card{display:flex;flex-direction:column;text-decoration:none;}
.event-card .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.event-card .title{font-family:var(--font-head);font-weight:600;font-size:21px;line-height:1.1;text-transform:uppercase;color:#fff;}
.event-card .ev-meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--red);margin-top:10px;line-height:1.5;}
.event-card p{font-size:14px;line-height:1.55;color:var(--txt-3);margin:12px 0 0;}
/* date badge over the cover */
.ev-date{position:absolute;left:14px;top:14px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;background:rgba(8,8,8,.78);border:1px solid var(--red-soft);border-radius:10px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.ev-date .d{font-family:var(--font-display);font-size:28px;line-height:.82;color:#fff;}
.ev-date .m{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--red);margin-top:2px;}
.event-card .tag-float{left:auto;right:14px;}

/* tabs (events page) */
.ev-tabs{display:inline-flex;gap:6px;margin-top:clamp(34px,5vw,52px);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px;}
.ev-tab{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);background:transparent;border:0;border-radius:999px;padding:11px 22px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.ev-tab:hover{color:#fff;}
.ev-tab.is-active{background:var(--red);color:#fff;}
.ev-panel{margin-top:34px;}
.ev-panel.is-hidden{display:none;}

/* category filter pills (news / eventi / galleria) */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,4vw,38px);}
.f-pill{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
.f-pill:hover{color:#fff;border-color:var(--red);}
.f-pill.is-active{background:var(--red);border-color:var(--red);color:#fff;}
.is-filtered-out{display:none!important;}
.filter-empty{grid-column:1/-1;padding:26px 0;}

/* event detail — info card + state badge */
.ev-state{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle;}
.ev-state.is-future{background:var(--red);color:#fff;}
.ev-state.is-past{background:rgba(255,255,255,.08);color:var(--txt-3);border:1px solid var(--line);}
.ev-info-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:760px;}
.ev-info-row{background:var(--panel);padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.ev-info-row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-4);}
.ev-info-row .v{font-size:15px;color:#e6e6e6;line-height:1.4;}

/* ---------- Article / single page (news & event) ---------- */
.article-wrap{max-width:860px;}
.article-body.prose{max-width:none;}
.article-lead{font-size:clamp(17px,1.9vw,21px)!important;line-height:1.6;color:var(--txt-2)!important;font-weight:500;}
.article-body.prose p{font-size:16px;}
.article-gallery{margin-top:clamp(36px,5vw,56px);}
.article-galh{font-family:var(--font-head);font-weight:700;font-size:22px;text-transform:uppercase;color:#fff;}

/* ---------- Gallery (masonry) ----------
   CSS multi-column masonry: each photo keeps its natural aspect ratio and
   tiles flow into balanced columns with NO holes between them, at any width.
   Robust for mixed portrait/landscape images. */
.gallery{column-count:3;column-gap:12px;}
.gallery .gitem{position:relative;display:block;width:100%;margin:0 0 12px;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);cursor:pointer;break-inside:avoid;-webkit-column-break-inside:avoid;}
.gallery .gitem img{width:100%;height:auto;display:block;transition:transform .6s var(--ease);}
.gallery .gitem:hover img{transform:scale(1.06);}
.gallery .gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6));opacity:.7;transition:opacity .25s var(--ease);}
.gallery .gitem:hover::after{opacity:.35;}
.gallery .gitem .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;}
@media(max-width:900px){.gallery{column-count:2;}}
@media(max-width:520px){.gallery{column-count:1;}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(5,5,5,.92);display:none;align-items:center;justify-content:center;padding:24px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.lightbox .lb-close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;font-family:var(--font-head);}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:1px solid var(--line);color:#fff;width:50px;height:50px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lightbox .lb-prev{left:18px;}.lightbox .lb-next{right:18px;}

/* ---------- Forms ---------- */
.form-panel{border:1px solid rgba(255,255,255,.12);border-radius:14px;background:var(--panel);padding:clamp(26px,3vw,38px);}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.field label{font-family:var(--font-head);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--txt-3);}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:13px 14px;color:#fff;font-family:var(--font-body);font-size:15px;outline:none;transition:border-color .2s var(--ease);width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);}
.field textarea{resize:vertical;min-height:96px;}
.form-note{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:var(--panel);}
.form-note .dot{width:10px;height:10px;background:var(--red);transform:rotate(45deg);flex-shrink:0;}
.form-note span{font-size:14px;line-height:1.5;color:var(--txt-3);}
.field-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;}
.field-check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--red);}
.field-check label{font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.5;color:var(--txt-3);}
.field-check label a{color:#cfcfcf;text-decoration:underline;}
.field-check label a:hover{color:#fff;}
.form-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:24px 8px;}
.form-success.is-on{display:flex;}
.form-success h3{font-family:var(--font-head);font-weight:700;font-size:26px;text-transform:uppercase;color:#fff;margin-top:16px;}
.form-success p{font-size:15px;line-height:1.6;color:var(--txt-3);margin:12px 0 0;max-width:26em;}

/* ---------- Contact ---------- */
.contact-item{margin-bottom:0;}
.contact-item .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-4);}
.contact-item .v{font-size:17px;color:#e6e6e6;margin-top:6px;}
.contact-item a.v:hover{color:var(--red);}
.contact-list{display:flex;flex-direction:column;gap:20px;}
.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-row a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cfcfcf;border:1px solid rgba(255,255,255,.16);padding:10px 16px;border-radius:6px;text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);}
.social-row a:hover{border-color:var(--red);color:#fff;background:var(--red);}
.social-row a svg{width:16px;height:16px;flex-shrink:0;fill:currentColor;}

/* ---------- Social icons (compact, icon-only circles) ---------- */
.social-icons{display:flex;gap:10px;flex-wrap:wrap;}
.social-icons a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#cfcfcf;text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);}
.social-icons a:hover{border-color:var(--red);color:#fff;background:var(--red);}
.social-icons a svg{width:18px;height:18px;fill:currentColor;}
.map-embed{position:relative;min-height:340px;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
/* Attribuzione dovuta per l'anteprima, che e' ricavata dalle tessere OpenStreetMap */
.osm-attr{position:absolute;right:0;bottom:0;z-index:2;padding:3px 8px;font-size:11px;line-height:1.5;background:rgba(255,255,255,.88);color:#222;text-decoration:none;border-top-left-radius:6px;}
.osm-attr:hover{text-decoration:underline;}
/* Tutto il riquadro apre la scheda Google (i pulsanti restano sopra, per tastiera e lettori) */
.map-clic{position:absolute;inset:0;z-index:1;cursor:pointer;}
.map-pin{display:block;width:34px;height:44px;color:var(--red);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));pointer-events:none;}
.map-pin svg{display:block;}
.map-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px 22px;background:linear-gradient(160deg,#151515,#0c0c0c);}
.map-facade p{margin:0;max-width:420px;font-size:13px;line-height:1.6;color:var(--txt-3);}
.map-facade .map-addr{font-family:var(--font-head);font-weight:600;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--white);}
.map-facade .hero-actions{justify-content:center;margin:0;}
/* Anteprima sfocata della mappa (mappa.py): un'immagine del sito, nessuna richiesta a
   servizi esterni. Al clic si apre Google Maps in una nuova scheda. */
.map-anteprima{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.06);pointer-events:none;}
.map-facade::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(10,10,10,.7) 0%,rgba(10,10,10,.5) 50%,rgba(10,10,10,.22) 100%);}
.map-facade > :not(.map-anteprima):not(.osm-attr):not(.map-clic){position:relative;z-index:2;}
.map-facade .map-addr,.map-facade p{text-shadow:0 1px 3px rgba(0,0,0,.85);}
.map-facade p{color:#d6d6d6;}
/* Pagina "Annulla la richiesta" (link dell'email di conferma, annulla.js) */
.annulla-wrap{max-width:760px;}
.annulla-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,36px);}
.annulla-box > p{margin:0 0 18px;line-height:1.7;color:var(--txt-2);}
.annulla-titolo{margin:0 0 12px;font-size:clamp(24px,3.4vw,32px);}
.annulla-info{margin:6px 0 4px;}
.annulla-azioni{margin-top:24px;}
.annulla-box.is-fatto{border-color:var(--red-soft);}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.cta-band-media{position:absolute;inset:0;}
.cta-band-media img{width:100%;height:100%;object-fit:cover;opacity:.22;}
.cta-band-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.9),rgba(11,11,11,.55)),radial-gradient(80% 90% at 90% 50%,rgba(214,31,38,.25),transparent 60%);}
.cta-band-inner{position:relative;z-index:2;padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(48px,7vw,86px);text-align:center;}
.cta-band h2{font-family:var(--font-head);font-weight:700;font-size:clamp(30px,5vw,58px);line-height:1;text-transform:uppercase;color:#fff;}
.cta-band p{margin:18px auto 0;max-width:40em;}
.cta-band .hero-actions{justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-3);border-top:1px solid var(--line-soft);padding:clamp(48px,6vw,72px) 0 34px;}
.footer-grid{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr 1fr;}
.footer-brand{max-width:340px;}
.footer-brand p{font-size:14px;line-height:1.6;color:var(--txt-3);margin:16px 0 0;}
.footer-col h4{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;}
.footer-col .links{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.footer-col a,.footer-col span.fi{font-size:14px;color:var(--txt-3);text-decoration:none;transition:color .2s var(--ease);}
.footer-col a:hover{color:#fff;}
.footer-col .links a.social-link{display:flex;align-items:center;gap:10px;}
.footer-col .links a.social-link svg{width:16px;height:16px;flex-shrink:0;fill:currentColor;}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);}
.footer-bottom span,.footer-bottom a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#5a5a5a;text-decoration:none;}
.footer-bottom a:hover{color:#9a9a9a;}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:90;display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:13px 18px;border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.55);text-decoration:none;transition:background .25s var(--ease);}
.wa-float:hover{background:var(--red-dark);}
.wa-float .pulse{width:9px;height:9px;border-radius:50%;background:#fff;display:block;box-shadow:0 0 0 0 rgba(255,255,255,.45);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);}70%{box-shadow:0 0 0 9px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
@media(max-width:600px){.wa-float span.lbl{display:none;}.wa-float{padding:14px;}}

/* ---------- Cookie banner ---------- */

/* ---------- Reveal animation (progressive enhancement) ----------
   Only hidden when JS is active (.js on <html>); without JS everything
   is fully visible, so the site never depends on scripts to show content. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js [data-reveal].is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
  .wa-float .pulse{animation:none;}
  *{scroll-behavior:auto;}
}

/* ---------- Prose (legal pages) ---------- */
.prose{max-width:760px;}
.prose h2{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;color:#fff;margin:38px 0 0;}
.prose h3{font-family:var(--font-head);font-weight:600;font-size:18px;text-transform:uppercase;color:#fff;margin:26px 0 0;letter-spacing:.02em;}
.prose p,.prose li{font-size:15px;line-height:1.7;color:var(--txt-2);}
.prose ul{padding-left:20px;list-style:disc;}
.prose ol{padding-left:22px;list-style:decimal;}
/* Titoli, paragrafi ed elenchi scritti dal pannello passano tutti da qui: le
   grandezze sono queste, uguali su ogni schermo. Il pannello sceglie il
   FORMATO della riga, mai il corpo del carattere. */
.prose ul,.prose ol{margin:14px 0;}
.prose li{margin:6px 0;}
.prose li::marker{color:var(--red);}
.prose a{color:var(--red);}

/* utility */
.notice{border:1px solid var(--red-soft);background:linear-gradient(120deg,#160d0d,transparent);border-radius:12px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start;}
.notice .dot{width:10px;height:10px;background:var(--red);transform:rotate(45deg);flex-shrink:0;margin-top:5px;}
.notice p{margin:0;font-size:14.5px;line-height:1.6;color:var(--txt-2);}
.target-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.target-pills span{font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#d6d6d6;border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--panel);}

/* =====================================================================
   BRAND LAYER 2026 — elementi grafici dal Catalogo Palestra 2026
   (logo reale, X ripetute, fasce diagonali, timeline, staff, PRO)
   ===================================================================== */

/* ---------- Logo reale (header / footer) ----------
   Il marchio e' gia' un tondo con bordo bianco: niente maschera ne' anello
   aggiunto, solo object-fit:contain per non tagliarlo mai.
   Misura FISSA a 60px, non piu' fluida da 80 a 104px. Il marchio grande
   (104px) faceva due danni: portava la barra a ~116px, e soprattutto rubava
   allo spazio del menu, che si stringeva fino a mandare a capo "LA PALESTRA" e
   "RICHIEDI INFORMAZIONI". A 60px il marchio, il wordmark e le nove voci
   stanno su una riga sola: logo 60 + 8+8 di padding = barra di 76px esatti,
   uguale a pagina ferma e a pagina scorsa.
   Niente piu' rimpicciolimento su .is-scrolled: cambiare misura mentre si
   scorre sposta il contenuto sotto, e con 76px la barra e' gia' sottile.
   .is-scrolled resta per il solo cambio di sfondo/ombra (vedi Header).
   Le ancore in corsi.html usano scroll-margin-top:88px, cioe' i 76 della
   barra piu' un po' di respiro. */
.brand-logo{height:60px;width:60px;object-fit:contain;flex-shrink:0;}
/* Telefoni molto stretti (320-400px): marchio, wordmark e hamburger sulla
   stessa riga. Misurato a 320px: 52px di marchio e wordmark a 18px lasciano
   ~40px liberi. */
@media(max-width:400px){
  .site-header .brand-logo{height:52px;width:52px;}
  .site-header .brand-text{font-size:18px;}
}
.brand-logo--lg{height:clamp(56px,6vw,74px);width:clamp(56px,6vw,74px);}
.footer-slogan{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-top:12px!important;}

/* ---------- Motivo "X" del catalogo (overlay decorativo) ---------- */
.deco-x{position:relative;}
.deco-x::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M36 36 L84 84 M84 36 L36 84' stroke='%23ffffff' stroke-width='14' fill='none'/%3E%3C/svg%3E");
  background-size:120px 120px;background-position:right -20px top -20px;background-repeat:repeat;}
.page-hero.deco-x::before,.cta-band.deco-x::before{z-index:1;}

/* ---------- Fascia slogan (diagonali rosso/nero come il catalogo) ---------- */
.slogan-band{position:relative;overflow:hidden;background:var(--bg-3);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:clamp(52px,7vw,92px) 0;}
.slogan-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 90px,rgba(214,31,38,.10) 90px 170px,rgba(214,31,38,.04) 170px 210px);}
.slogan-band .wrap{position:relative;z-index:2;text-align:center;}
.slogan-big{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,6vw,72px);line-height:1;text-transform:uppercase;color:#fff;margin:0;}
.slogan-big span{color:var(--red);}
.slogan-sub{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt-3);margin:22px 0 0;}

/* ---------- Timeline (Fighting Center Story) ---------- */
.timeline{position:relative;}
.timeline::before{content:"";position:absolute;left:128px;top:12px;bottom:12px;width:2px;background:var(--line);}
.tl-item{display:grid;grid-template-columns:100px 1fr;gap:56px;position:relative;padding:22px 0;}
.tl-item::before{content:"";position:absolute;left:122px;top:32px;width:14px;height:14px;background:var(--red);transform:rotate(45deg);box-shadow:0 0 0 5px rgba(214,31,38,.15);}
.tl-year{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);line-height:1;color:var(--red);text-align:right;}
.tl-body h3{font-family:var(--font-head);font-weight:700;font-size:20px;text-transform:uppercase;color:#fff;margin:0;}
.tl-body p{font-size:15px;line-height:1.65;color:var(--txt-3);margin:10px 0 0;max-width:56em;}
@media(max-width:640px){
  .timeline::before{left:76px;}
  .tl-item{grid-template-columns:56px 1fr;gap:36px;}
  .tl-item::before{left:70px;top:28px;width:12px;height:12px;}
  .tl-year{font-size:26px;}
}

/* ---------- Tabelle orari (v2 — solo calendario) ---------- */
.tt-head{display:flex;align-items:center;gap:16px;}
.tt-badge{font-family:var(--font-display);font-size:16px;letter-spacing:.12em;color:var(--red);border:1px solid var(--red-soft);border-radius:8px;padding:9px 13px;background:linear-gradient(120deg,#160d0d,transparent);flex-shrink:0;}
/* Fasce della giornata (mattina / pomeriggio / sera): sotto al titolo della
   fascia sta l'orario che la definisce, cosi' "Pomeriggio" non e' una parola
   da interpretare ma un intervallo preciso. */
.tt-head-txt{display:flex;flex-direction:column;gap:5px;min-width:0;}
.tt-hint{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);}
/* L'area di appartenenza (combattimento, funzionale, light...) resta leggibile
   riga per riga adesso che le tabelle non sono piu' divise per categoria. */
.tt-area{display:block;font-family:var(--font-mono);font-weight:400;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-4);margin-top:6px;}
table.timetable thead th{background:linear-gradient(90deg,var(--red),var(--red-dark));color:#fff;border-bottom:0;}
table.timetable tbody tr:nth-child(even) td{background:rgba(255,255,255,.025);}
table.timetable td{vertical-align:middle;}
.timetable .day{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(214,31,38,.16);border:1px solid var(--red-soft);border-radius:5px;padding:3px 8px;margin:2px 5px 2px 0;white-space:nowrap;}

/* Orari dal gestionale (Fase 6) --------------------------------------------
   Una riga per corso: a sinistra la disciplina, sotto la variante del corso;
   nella colonna centrale i turni, uno per riga, perche' "Lun 16:30-17:30 ·
   Mer 16:30-17:30" tutto di seguito su telefono diventa illeggibile. */
.tt-slot{display:block;font-size:13.5px;line-height:1.5;margin:3px 0;}
.tt-slot + .tt-slot{padding-top:3px;border-top:1px dashed var(--line-soft);}
.tt-corso-var{display:block;font-family:var(--font-body,inherit);font-weight:400;
  text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--txt-3);margin-top:3px;}
/* La colonna della validita' e' l'informazione nuova di questa pagina: deve
   leggersi sempre, anche quando dice "Sempre valido". Una data di fine vera
   e' l'unica cosa che va evidenziata, perche' e' l'unica che scade. */
.tt-val{display:inline-block;font-family:var(--font-mono);font-size:11.5px;line-height:1.4;
  letter-spacing:.02em;color:var(--txt-3);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;background:rgba(255,255,255,.03);}
.tt-val.is-scad{color:#ffd08a;border-color:rgba(240,169,59,.45);background:rgba(240,169,59,.1);}
.tt-val.is-var{color:var(--txt-3);border-style:dashed;}
.tt-slot-val{display:block;font-family:var(--font-mono);font-size:11px;color:var(--txt-4);margin-top:2px;}
.tt-slot-nota{display:block;font-size:12px;color:var(--txt-3);font-style:italic;margin-top:2px;}
@media(max-width:760px){
  table.timetable{min-width:600px;}
}

/* ---------- Staff con foto reali + PRO ---------- */
.coach-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.pro-card .coach-photo{aspect-ratio:3/4;}
.pro-card .cn{font-size:21px;}
.pro-card .cr{letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);font-size:11.5px;}

/* ---------- Affiliazioni / partner ---------- */
.partner-strip{display:flex;flex-wrap:wrap;gap:10px;}
.partner-strip span{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#d6d6d6;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:6px;padding:12px 18px;background:var(--panel);}

/* ---------- Descrizione nelle card discipline ---------- */
.disc-desc{font-size:14px;line-height:1.6;color:var(--txt-3);margin:12px 0 6px;}

/* ---------- FAQ (domande frequenti, accordion nativo <details>) ----------
   Il testo resta nel DOM anche da chiuso: indicizzabile dai motori di
   ricerca e allineato al blocco JSON-LD FAQPage di ogni pagina. */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:880px;}
/* La sezione FAQ e' centrata nella pagina a ogni risoluzione: intestazione
   (eyebrow + titolo + filetto) e lista delle domande sullo stesso asse. */
#faq .faq-list{margin-left:auto;margin-right:auto;}
#faq .wrap > [data-reveal]:first-child{text-align:center;}
#faq .wrap > [data-reveal]:first-child .rule{margin-left:auto;margin-right:auto;}
#faq .faq-item summary,#faq .faq-a{text-align:left;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;transition:border-color .25s var(--ease);}
.faq-item:hover,.faq-item[open]{border-color:var(--red-soft);}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;padding:19px 22px;font-family:var(--font-head);font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:#fff;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{position:relative;width:22px;height:22px;flex-shrink:0;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--red);transition:transform .25s var(--ease);}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-a{padding:2px 22px 22px;border-top:1px solid var(--line-soft);}
.faq-a p{font-size:15px;line-height:1.7;color:var(--txt-2);margin:16px 0 0;}
.faq-a a{color:var(--red);}

/* =====================================================================
   Eventi: griglia più compatta + due CTA (Scopri / Prenota)
   ===================================================================== */
/* auto-fill (non auto-fit): una singola card NON si allarga a tutta la riga,
   resta della larghezza di una colonna (~1/3) invece di riempire la pagina. */
/* badge piu' grandi (prima 290px): con la locandina intera dentro, a 290px
   nomi e date stampate sopra diventavano illeggibili. align-items:start perche'
   le card non devono piu' stirarsi all'altezza della vicina: ognuna e' alta
   quanto la sua locandina. */
/* Flex con justify-content:center al posto della griglia a colonne fisse:
   con UN solo evento (o con 2, o con 4) l'ultima riga e' incompleta e la
   griglia lasciava le schede appese a sinistra, con mezza pagina vuota di
   fianco. E' lo stesso schema di .people-grid e .svc-grid, dove il problema
   era identico. flex-shrink 1 / flex-grow 0: una scheda sola resta larga
   quanto una colonna, non si stira su tutta la riga. */
.events-home{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px;}
.events-home > *{flex:0 1 calc((100% - 36px)/3);}
/* il messaggio "nessun evento" e quello dei filtri prendono tutta la riga */
.events-home > .notice,.events-home > .muted,.events-home > .filter-empty{flex:1 1 100%;}
@media(max-width:1000px){.events-home > *{flex-basis:calc((100% - 18px)/2);}}
@media(max-width:640px){.events-home > *{flex-basis:100%;}}
/* Tablet in orizzontale (touch oltre i 1000px): due per fila come in verticale,
   non tre. Stessa regola e stesso tetto di larghezza della home (.events-slider). */
@media(min-width:1001px) and (hover:none) and (pointer:coarse){
  .events-home > *{flex-basis:calc((100% - 18px)/2);max-width:480px;}
  .events-home > .notice,.events-home > .muted,.events-home > .filter-empty{max-width:none;}
}
.event-card .card-media{display:block;}
.ev-title-link{text-decoration:none;display:block;}
.ev-title-link:hover .title{color:var(--red);}
.card-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:18px;}
.card-cta .btn{flex:1 1 auto;white-space:nowrap;}

/* La copertina di un evento e' una locandina, e le locandine hanno formati
   diversissimi fra loro (dal verticale 2:3 all'orizzontale 3:2). Con un
   riquadro a proporzioni fisse una qualsiasi scelta e' sbagliata per meta'
   delle foto: "contain" lascia bande vuote, "cover" taglia.
   Qui il riquadro prende le proporzioni DELLA SUA foto (--ev-ar, impostata da
   FC.initCoverFit leggendo naturalWidth/naturalHeight): l'immagine riempie il
   badge esattamente, non resta un pixel vuoto e non viene tagliato niente, a
   qualsiasi risoluzione. Il 3/4 e' solo il valore di partenza finche' la foto
   non e' stata misurata. Niente zoom all'hover, che ritaglierebbe. */
.event-card .card-media.ratio-169{aspect-ratio:var(--ev-ar,3/4);background:var(--bg-2);}
.event-card .card-media img{object-fit:cover;object-position:center;}
.event-card:hover .card-media img{transform:none;}
.event-card .card-media::after{background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.45));}

/* =====================================================================
   I NOSTRI ATLETI — badge home + pagina atleta
   ===================================================================== */
.athlete-card{text-decoration:none;display:flex;flex-direction:column;}
.athlete-card .athlete-more{display:inline-block;margin-top:12px;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);transition:color .2s var(--ease);}
.athlete-card:hover .athlete-more{color:#fff;}

.ath-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.ath-pill{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#d6d6d6;border:1px solid var(--red-soft);border-radius:999px;padding:7px 14px;background:linear-gradient(120deg,#160d0d,transparent);}

.record-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.rec-cell{flex:1 1 120px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:20px 18px;text-align:center;}
.rec-n{font-family:var(--font-display);font-size:46px;line-height:.9;color:#fff;}
.rec-n.win{color:var(--red);}
.rec-n.draw{color:var(--txt-2);}
.rec-l{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-top:8px;}
.record-note{font-size:13px;margin-top:14px;}

.fight-h{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;color:#fff;margin-top:clamp(30px,4vw,44px);}
.fight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;margin-top:20px;}
.fight-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:18px 18px 16px;border-left:3px solid var(--txt-4);}
.fight-card.fight--win{border-left-color:var(--red);}
.fight-card.fight--loss{border-left-color:rgba(255,255,255,.28);}
.fight-card.fight--next{border-left-color:var(--wa);}
.fight-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fight-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);}
.fight-res{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:5px;white-space:nowrap;}
.fight-res.win{background:var(--red);color:#fff;}
.fight-res.loss,.fight-res.draw{background:rgba(255,255,255,.10);color:#d6d6d6;}
.fight-res.next{background:rgba(37,211,102,.16);color:var(--wa);border:1px solid rgba(37,211,102,.4);}
.fight-vs{font-family:var(--font-head);font-weight:500;font-size:18px;text-transform:uppercase;color:#fff;margin-top:12px;}
.fight-vs strong{font-weight:700;}
.fight-meta{font-size:13px;color:var(--txt-3);margin-top:6px;}
.fight-tags{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--red);margin-top:10px;}
.athlete-sources{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.athlete-sources .src-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-4);}

/* =====================================================================
   Prenotazione posto — CTA dettaglio evento + modale
   ===================================================================== */
.ev-book-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:24px;}

/* =====================================================================
   COPERTINA INTEGRALE — news, eventi, atleti  (.cover-hero)
   =====================================================================
   Problema risolto: l'immagine caricata dal pannello ha un formato qualsiasi
   (verticale da telefono, locandina 3:4, foto 16:9...) e in un hero "cover"
   veniva sempre tagliata.

   Qui la foto NON viene mai ritagliata: sta dentro una cornice a misura
   variabile con object-fit:contain, e lo spazio che avanza e' riempito da una
   copia sfocata e scurita della stessa immagine. Funziona con QUALSIASI
   proporzione e su qualsiasi schermo — nessuna "misura obbligata" da
   rispettare quando si carica una foto nel gestionale.

   La cornice sfuma in basso esattamente su var(--bg), lo stesso fondo del
   testo che segue: fra copertina e descrizione non c'e' nessuno stacco. */
.cover-hero{display:block;min-height:0;background:var(--bg);}
.cover-frame{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--bg-2);}
/* sfondo: la stessa foto, sfocata — riempie le fasce laterali/alte */
.cover-frame .cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(42px) saturate(.7) brightness(.42);transform:scale(1.18);}
/* primo piano: la foto intera, mai tagliata */
.cover-frame .cover-img{position:relative;z-index:2;width:auto;max-width:100%;
  max-height:min(74vh,780px);object-fit:contain;}
/* La sfumatura serve solo a saldare il bordo basso della cornice al fondo
   pagina: parte tardi (78%) per non coprire quello che c'e' nella foto —
   una locandina ha spesso data e luogo proprio in fondo. Il titolo non ci
   passa sopra: sta nel blocco successivo, gia' su var(--bg). */
.cover-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,8,8,0) 78%,rgba(11,11,11,.55) 92%,var(--bg) 100%);}
.cover-hero .page-hero-inner{padding-top:clamp(20px,2.6vw,32px);padding-bottom:clamp(24px,3.4vw,44px);}
@media(max-width:760px){
  .cover-frame .cover-img{max-height:min(62vh,560px);}
  .cover-frame .cover-bg{filter:blur(26px) saturate(.7) brightness(.42);}
}

/* =====================================================================
   Slider orizzontale eventi (home) — oltre 3 eventi si scorre a destra
   ===================================================================== */
.events-slider-wrap{position:relative;}
.events-slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--red) transparent;}
.events-slider::-webkit-scrollbar{height:6px;}
.events-slider::-webkit-scrollbar-thumb{background:var(--red);border-radius:99px;}
.events-slider::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:99px;}
.events-slider > *{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;}
.events-slider > .notice,.events-slider > .muted{flex:1 1 100%;}
/* Con uno, due o tre eventi non c'e' niente da scorrere: le schede si
   centrano invece di restare tutte a sinistra. Il centraggio e' legato a
   .has-overflow (la calcola main.js, la stessa che accende le frecce)
   perche' su un contenitore che scorre davvero justify-content:center
   renderebbe IRRAGGIUNGIBILI le prime schede: scrollLeft non va sotto zero. */
.events-slider-wrap:not(.has-overflow) .events-slider{justify-content:center;}
/* Smartphone e tablet: niente scorrimento laterale, gli eventi vanno uno
   sotto l'altro. Tetto di larghezza perche' la copertina segue le proporzioni
   della locandina (spesso verticale): a tutta larghezza su un tablet in
   verticale una scheda sola sarebbe piu' alta dello schermo. Senza overflow
   main.js non accende .has-overflow, quindi le frecce restano spente. */
@media(max-width:1000px){
  .events-slider{flex-direction:column;align-items:center;overflow-x:visible;scroll-snap-type:none;padding-bottom:0;}
  .events-slider > *{flex:0 0 auto;width:100%;max-width:480px;}
  .events-slider > .notice,.events-slider > .muted{max-width:none;}
}
/* Tablet in orizzontale: due eventi per fila, senza scorrimento laterale, cosi'
   nessuna scheda resta tagliata sul bordo. Il tablet si riconosce dal tocco
   (hover/pointer), non dalla larghezza: in orizzontale un iPad e' largo come un
   portatile (1024-1366px), e sul portatile lo slider con le frecce resta. */
@media(min-width:1001px) and (hover:none) and (pointer:coarse){
  .events-slider{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;padding-bottom:0;}
  .events-slider > *{flex:0 0 calc((100% - 18px)/2);max-width:480px;}
  .events-slider > .notice,.events-slider > .muted{max-width:none;}
}
/* Frecce: visibili solo quando c'e' davvero qualcosa da scorrere (classe
   aggiunta da main.js) e non su touch, dove si scorre col dito. */
.ev-arrow{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);z-index:4;display:none;
  align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(8,8,8,.82);border:1px solid var(--red-soft);color:#fff;font-size:24px;line-height:1;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s var(--ease),opacity .2s var(--ease);}
.ev-arrow:hover{background:var(--red);}
.ev-arrow[disabled]{opacity:.3;cursor:default;}
.ev-arrow[disabled]:hover{background:rgba(8,8,8,.82);}
.ev-prev{left:-10px;}
.ev-next{right:-10px;}
.events-slider-wrap.has-overflow .ev-arrow{display:flex;}
@media(hover:none){.events-slider-wrap.has-overflow .ev-arrow{display:none;}}

/* =====================================================================
   Carosello immagini (sala pesi) — autoplay + pallini + frecce all'hover
   ===================================================================== */
.carousel{position:relative;overflow:hidden;background:var(--bg-2);}
.carousel-track{position:relative;width:100%;height:100%;}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);}
.carousel-slide.is-on{opacity:1;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;}
.card:hover .carousel-slide img{transform:none;}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;background:rgba(8,8,8,.7);border:1px solid var(--red-soft);
  color:#fff;font-size:24px;line-height:1;padding:0 0 3px;opacity:0;transition:opacity .25s var(--ease),background .2s var(--ease);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.carousel-nav:hover{background:var(--red);}
.carousel-prev{left:12px;}
.carousel-next{right:12px;}
.carousel:hover .carousel-nav,.carousel-nav:focus-visible{opacity:1;}
/* su touch non c'e' hover: le frecce restano sempre visibili, ma discrete */
@media(hover:none){.carousel-nav{opacity:.75;}}
.carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:14px;}
.carousel-dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.22);
  border:1px solid transparent;transition:background .2s var(--ease),transform .2s var(--ease);}
.carousel-dot:hover{background:rgba(255,255,255,.45);}
.carousel-dot.is-on{background:var(--red);transform:scale(1.25);}
@media(prefers-reduced-motion:reduce){.carousel-slide{transition:none;}}

/* =====================================================================
   Griglia staff / atleti — nessun badge "orfano"
   =====================================================================
   Con una griglia a colonne fisse l'ultima riga resta allineata a sinistra e
   un solo badge lascia mezza riga vuota. Qui i badge sono in flex con
   justify-content:center: la riga incompleta si centra e lo spazio residuo
   si distribuisce ai due lati, a QUALSIASI numero di persone e risoluzione.

   Il flex-basis vale ESATTAMENTE una colonna (niente flex-grow): cosi' per
   riga entra sempre il numero di badge previsto e l'eventuale ultima riga
   incompleta resta centrata, con le card della stessa misura delle altre.
   L'1px sottratto assorbe gli arrotondamenti sub-pixel, che altrimenti
   manderebbero a capo l'ultima card della riga. */
.people-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.people-grid > *{flex:0 1 calc((100% - 55px)/4);}
.people-grid--3 > *{flex-basis:calc((100% - 37px)/3);}
@media(max-width:1080px){.people-grid > *,.people-grid--3 > *{flex-basis:calc((100% - 37px)/3);}}
@media(max-width:820px){.people-grid > *,.people-grid--3 > *{flex-basis:calc((100% - 19px)/2);}}
@media(max-width:460px){.people-grid > *,.people-grid--3 > *{flex-basis:100%;}}

/* =====================================================================
   Servizi per gli atleti (home, sotto le schede atleta)
   =====================================================================
   Cinque voci: qualunque griglia a colonne fisse lascia l'ultima riga
   incompleta e allineata a sinistra (5 in 3 colonne = 3 + 2 appesi). Stessa
   soluzione della griglia atleti: flex + justify-content:center, flex-basis
   pari a UNA colonna e niente flex-grow, cosi' le card della riga incompleta
   restano larghe come le altre e lo spazio residuo si divide ai due lati.
   L'1px sottratto assorbe gli arrotondamenti sub-pixel.
   Nessun <table>: una tabella a 5 righe su telefono e' una tabella che si
   scrolla di lato, ed e' esattamente cio' che qui non deve succedere. */
.svc-block{border-top:1px solid var(--line-soft);padding-top:clamp(30px,3.6vw,48px);}
.svc-title{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2.2vw,27px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--white);}
.svc-intro{max-width:56em;margin:10px 0 0;}
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.svc-card{flex:0 1 calc((100% - 65px)/5);min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:22px 20px;transition:border-color .25s var(--ease),transform .25s var(--ease);}
.svc-card:hover{border-color:var(--red-soft);transform:translateY(-3px);}
.svc-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
  background:rgba(214,31,38,.12);border:1px solid rgba(214,31,38,.28);color:var(--red);}
.svc-ic svg{width:23px;height:23px;}
.svc-card h4{font-family:var(--font-head);font-weight:600;font-size:17px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;margin:16px 0 0;}
.svc-card p{font-size:13.5px;line-height:1.55;color:var(--txt-3);margin:8px 0 0;}
@media(max-width:1180px){.svc-card{flex-basis:calc((100% - 33px)/3);}}
@media(max-width:820px){.svc-card{flex-basis:calc((100% - 17px)/2);}}
@media(max-width:520px){.svc-card{flex-basis:100%;}}

/* =====================================================================
   Piastra logo del partner in evidenza (pagina La Palestra)
   =====================================================================
   Il file Padovaring e' bianco su fondo nero OPACO: sulla chip bianca degli
   altri loghi si vedrebbe il rettangolo nero del PNG. Qui il fondo della
   piastra e' lo stesso nero del file, quindi il marchio ci si appoggia
   senza bordi visibili, e il riquadro lo definisce la cornice. */
.partner-plate{display:flex;align-items:center;justify-content:center;background:#000;
  border:1px solid var(--line);border-radius:14px;padding:clamp(26px,4vw,56px);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);}
.partner-plate:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.partner-plate img{width:100%;max-width:430px;height:auto;}

/* =====================================================================
   Affiliazioni — loghi dei partner (link ai siti ufficiali)
   =====================================================================
   I marchi arrivano con fondi diversi (bianco, nero, trasparente): la
   "chip" chiara li normalizza e li rende leggibili tutti allo stesso modo
   sul fondo scuro del sito. */
.partner-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,18px);}
.partner-logo{flex:1 1 150px;max-width:200px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-height:104px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
.partner-logo:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.partner-logo img{width:100%;height:auto;max-height:64px;object-fit:contain;}
@media(max-width:520px){.partner-logo{min-height:88px;padding:12px 14px;}.partner-logo img{max-height:52px;}}

/* =====================================================================
   Form — coppia di campi affiancati (Nome / Cognome, Telefono / Email)
   ===================================================================== */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}
.req{color:var(--red);font-weight:700;}
.field input:required:invalid:not(:placeholder-shown){border-color:rgba(214,31,38,.55);}

.book-modal{position:fixed;inset:0;z-index:120;display:none;}
.book-modal.is-open{display:block;}
.book-backdrop{position:absolute;inset:0;background:rgba(4,4,4,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.book-dialog{position:relative;z-index:2;max-width:560px;margin:6vh auto;max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--red-soft);border-radius:16px;padding:clamp(24px,3vw,38px);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.book-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--txt-3);font-size:30px;line-height:1;cursor:pointer;transition:color .2s var(--ease);}
.book-x:hover{color:#fff;}
.book-dialog h3{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,3vw,28px);text-transform:uppercase;color:#fff;margin:8px 0 0;}
.book-ev{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--red);text-transform:uppercase;letter-spacing:.02em;margin:12px 0 0;}
.book-note{font-size:13.5px;line-height:1.6;color:var(--txt-3);margin:12px 0 20px;}
.book-names,.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.book-err{color:#ff6a6a;font-size:13px;margin:0 0 12px;}
.book-note{font-size:13px;line-height:1.5;margin:0 0 12px;}
.form-hint{font-size:13px;line-height:1.5;margin:12px 0 0;}
.book-success{text-align:center;padding:16px 6px 8px;display:flex;flex-direction:column;align-items:center;}
.book-success h3{margin-top:14px;}
.book-success p{font-size:14.5px;line-height:1.6;color:var(--txt-3);margin:12px 0 0;max-width:30em;}
.book-success-actions{justify-content:center;margin-top:20px;}
@media(max-width:520px){
  .book-names,.book-grid{grid-template-columns:1fr;}
  .book-dialog{margin:0;min-height:100%;max-height:100vh;border-radius:0;}
}

/* =====================================================================
   PARTNER (home) — giostra di 11 loghi, in due gruppi da sei e cinque
   =====================================================================
   Le pagine sono impilate nella STESSA cella di griglia (grid-area 1/1):
   la dissolvenza e' solo opacita', quindi niente salti di altezza quando
   cambia il gruppo e nessun logo viene tolto dal documento. L'altezza del
   riquadro e' quella della pagina piu' alta, decisa una volta sola. */
.sponsor-head{text-align:center;max-width:52em;margin-left:auto;margin-right:auto;}
.sponsor-head .rule{margin-left:auto;margin-right:auto;}
.sponsor-head .lead{margin-left:auto;margin-right:auto;}
.sponsor-wrap{position:relative;}
.sponsor-stage{display:grid;}
.sponsor-page{grid-area:1/1;list-style:none;margin:0;padding:0;
  --cols:6;--sp-gap:clamp(12px,1.6vw,18px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:var(--sp-gap);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);}
.sponsor-page.is-on{opacity:1;visibility:visible;pointer-events:auto;}
/* La chip chiara e' la stessa dei loghi delle affiliazioni: i marchi
   arrivano con fondi diversi (bianco, nero, trasparente) e su fondo scuro
   meta' sarebbero illeggibili.
   Le colonne sono SEI per tutti e due i gruppi, anche per quello da cinque:
   cosi' le chip hanno la stessa misura in entrambi e il gruppo da cinque si
   centra da solo (justify-content:center), invece di allargarsi. Passando da
   un gruppo all'altro non cambia niente di dimensione. */
.sponsor-page .partner-logo{flex:0 1 calc((100% - (var(--cols) - 1) * var(--sp-gap)) / var(--cols));max-width:220px;min-height:120px;}
.sponsor-page .partner-logo img{max-height:76px;}
@media(max-width:900px){
  .sponsor-page{--cols:3;}
}
@media(max-width:560px){
  .sponsor-page{--cols:2;}
  .sponsor-page .partner-logo{min-height:96px;}
  .sponsor-page .partner-logo img{max-height:56px;}
}
.sponsor-dots{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.sponsor-dots button{width:34px;height:4px;padding:0;border:0;border-radius:99px;
  background:var(--line);cursor:pointer;transition:background .3s var(--ease);}
.sponsor-dots button:hover{background:var(--txt-3);}
.sponsor-dots button[aria-selected="true"]{background:var(--red);}
.sponsor-dots button:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
/* Meno animazioni: i due gruppi si vedono tutti e due, fermi, uno sotto
   l'altro. main.js in questo caso non fa partire nessuna rotazione. */
@media(prefers-reduced-motion:reduce){
  .sponsor-stage{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);}
  .sponsor-page{opacity:1;visibility:visible;pointer-events:auto;transition:none;}
  .sponsor-dots{display:none;}
}

/* =====================================================================
   Modale prenotazione: barra di scorrimento e frecce in tinta
   =====================================================================
   Sul fondo scuro della modale la barra di scorrimento del browser e le
   frecce su/giu' del campo numerico arrivavano bianche: due strisce chiare
   in mezzo al nero. color-scheme:dark le fa disegnare al browser nella
   versione scura (frecce comprese), e per la barra ci sono i colori
   espliciti: fondo trasparente, cursore appena accennato. */
.book-dialog{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
.book-dialog::-webkit-scrollbar{width:8px;}
.book-dialog::-webkit-scrollbar-track{background:transparent;}
.book-dialog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;}
.book-dialog::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
.book-dialog,.book-dialog input,.book-dialog textarea,.book-dialog select{color-scheme:dark;}

/* =====================================================================
   "Richiesta inviata!" si vede SOLO dopo l'invio
   =====================================================================
   Il pannello di conferma nasce con l'attributo hidden e main.js lo toglie
   solo quando il salvataggio e' andato a buon fine. Ma "hidden" arriva dal
   foglio di stile del browser, mentre ".book-success{display:flex}" e'
   nostro: fra i due vince sempre il nostro, quindi l'attributo non contava
   niente e il rettangolo verde stava li' fin dall'apertura del modulo, sotto
   il bottone di invio. Chi lo leggeva credeva di aver gia' mandato la
   richiesta senza aver toccato niente.
   Queste due righe ridanno all'attributo il potere di nascondere. */
.book-success[hidden],.book-body[hidden]{display:none !important;}