/* passaggio morbido tra le pagine (Chrome/Edge/Safari recenti): dissolvenza al posto del salto */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.15s }
@font-face{font-family:'Good Times Rg';src:url('good-times.otf') format('opentype'),url('good-times.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Good Times';src:url('good-times.otf') format('opentype'),url('good-times.ttf') format('truetype');font-display:swap}
@import url('https://fonts.cdnfonts.com/css/good-times-2');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
:root{
  --night:#0B0E1A; --panel:#12162A; --panel2:#1A1F38; --line:rgba(255,255,255,.08);
  --txt:#F5F6FF; --mut:#8A90B0; --pink:#FF1AA8; --pink2:#FF6ED8;
}
*{box-sizing:border-box; margin:0; padding:0}
html{overflow-y:scroll; overflow-x:hidden; scrollbar-gutter:stable; background:var(--night); overscroll-behavior-x:none}
html,body{overscroll-behavior-x:none; overflow-x:hidden}
html{overflow-y:scroll!important; scrollbar-gutter:stable} /* barra sempre presente: topbar ferma in ogni sezione */ main,#zona{overscroll-behavior-x:none}
@media (max-width:1080px){ html,body{overflow-x:auto} } /* finestre strette: si può scorrere, niente tagli */ /* niente "indietro" col gesto di scorrimento laterale del trackpad */ /* niente scatti orizzontali tra pagine con e senza barra di scorrimento */
body{background:var(--night); color:var(--txt); font-family:'Helvetica Neue',Arial,sans-serif; min-height:100vh; display:flex; flex-direction:column}
a{color:inherit; text-decoration:none}
.brand-font{font-family:'Good Times Rg','Good Times',Arial,sans-serif}
.btn-utente{font-family:'Good Times Rg','Good Times',Arial,sans-serif}
.subtab, .sqtab{font-family:'Good Times Rg','Good Times',Arial,sans-serif!important;font-weight:400!important;letter-spacing:.05em}
/* barre di scorrimento uguali in tutto il sito: cursore rosa su traccia scura */
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;transition:background .9s ease}
html.scorre *::-webkit-scrollbar-thumb{background:#4a5379}
*::-webkit-scrollbar-thumb:hover{background:#6a76a8}

body.tec .cta{font-family:'Good Times Rg','Good Times',Arial,sans-serif;font-weight:400;letter-spacing:.04em}
/* ---------- header ---------- */
.topbar{display:flex; align-items:center; gap:12px; padding:4px 14px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; flex-wrap:wrap}
.topbar .logo svg{height:54px; width:auto; display:block; filter:drop-shadow(0 0 8px #FF1AA885)}
nav.main{display:flex; gap:48px; flex-wrap:nowrap; min-width:0; flex:1; justify-content:center}
html.p-king body.mkt nav.main{gap:34px} /* col KING (voce Amministrazione) spazi uniformi più stretti */
/* la barra nasce già filtrata per piano: niente voci che compaiono/spariscono dopo il primo disegno */
html.p-ospite nav.main a[href="esercizi.html"],html.p-ospite nav.main a[href="ebook.html"],html.p-ospite nav.main a[href="app.html"],html.p-ospite nav.main a[href="squadra.html"],html.p-ospite nav.main a[href="libreria.html"],html.p-ospite nav.main a[href="allenamenti.html"],html.p-ospite nav.main a[href="archivio.html"],html.p-ospite nav.main a[href="partita.html"],html.p-ospite nav.main a[href="stats.html"]{display:none}
html.p-base nav.main a[href="app.html"],html.p-base nav.main a[href="squadra.html"],html.p-base nav.main a[href="libreria.html"],html.p-base nav.main a[href="allenamenti.html"],html.p-base nav.main a[href="archivio.html"],html.p-base nav.main a[href="partita.html"],html.p-base nav.main a[href="stats.html"]{display:none}
html.p-king #navAdmins{display:inline-block!important}
.planbox{min-width:250px; justify-content:flex-end} /* spazio riservato: il pulsante login non sposta la barra quando compare */
nav.main a{padding:5px 4px; border-radius:8px; font-size:15px; color:var(--mut); font-weight:400; font-family:'Good Times Rg','Good Times',Arial,sans-serif; letter-spacing:.02em; white-space:nowrap}
nav.main a:hover{color:var(--txt); background:var(--panel2)}
nav.main a.on{color:#fff; background:var(--pink)}
.spacer{margin-left:auto}
.planbox{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mut)}
.planbox select{background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:13px}
.chip{padding:3px 12px; border-radius:99px; font-size:15px; font-weight:400; font-family:'Good Times Rg','Good Times',Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; min-width:104px; text-align:center; box-sizing:border-box; display:inline-block}
.chip.ospite{display:none}
.chip.base{background:#ffffff; color:#0B0E1A}
.chip.pro{background:var(--pink); color:#fff}
.chip.team{background:#8a3ffc; color:#fff}
.chip.staff{background:#00E5FF; color:#04303a}
.chip.admin{background:#39FF14; color:#0a2400}
.chip.king{background:linear-gradient(90deg,#FFE27A,#D4A017); color:#3a2a00; border:1px solid #b8860b}
/* ---------- layout ---------- */
main{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:34px 22px 60px}
h1{font-size:30px; margin-bottom:8px}
h2{font-size:21px; margin:34px 0 14px}
p.sub{color:var(--mut); font-size:15.5px; max-width:640px; line-height:1.55}
.hero{padding:22px 0 30px; text-align:center}
.hero h1{font-family:'Good Times Rg','Good Times',Arial; font-size:24px; letter-spacing:.1em; line-height:1.35; max-width:545px; margin:26px auto 0; display:flex; justify-content:space-between}
.hero h1 em{color:var(--pink); font-style:normal}
.hero p{color:var(--mut); max-width:620px; margin:14px auto 26px; font-size:16.5px; line-height:1.6}
.cta{display:inline-block; background:var(--pink); color:#fff; font-weight:700; padding:13px 30px; border-radius:12px; font-size:15.5px; box-shadow:0 0 24px #FF1AA855; cursor:pointer}

.cta.ghost{background:none; border:1px solid var(--line); box-shadow:none; color:var(--txt); margin-left:10px}
/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; justify-content:center}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}

.card .thumb{aspect-ratio:16/10; background:#0e1120; position:relative}
.card .thumb svg{width:100%; height:100%; display:block}
.badge{position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.badge.free{background:#1db95422; color:#4be08a; border:1px solid #1db95466}
.badge.abb{background:#FF1AA822; color:var(--pink2); border:1px solid #FF1AA866}
.lockov{position:absolute; inset:0; background:rgba(11,14,26,.55); display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; font-size:30px; backdrop-filter:blur(5px)}
.lockov .solo{font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--pink2)}
.card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-size:16px; line-height:1.3}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; color:var(--mut); background:var(--panel2); padding:3px 9px; border-radius:99px}
.card .open{margin-top:auto; align-self:flex-start; font-size:13.5px; font-weight:700; color:var(--pink2)}
/* ---------- filtri ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 22px}
.filters select,.filters input{background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:9px 12px; font-size:14px}
.filters input{flex:1; min-width:180px}
/* ---------- piani ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:26px}
.plan{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 22px; display:flex; flex-direction:column; gap:14px; position:relative}
.plan.hot{border:2px solid var(--pink); box-shadow:0 0 34px #FF1AA833}
.plan .pop{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--pink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; padding:3px 14px; border-radius:99px; text-transform:uppercase}
.plan h3{font-family:'Good Times Rg','Good Times',Arial; font-size:17px; letter-spacing:.14em}
.plan .price{font-size:30px; font-weight:700}
.plan .price small{font-size:13px; color:var(--mut); font-weight:400}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--mut); flex:1}
.plan ul li.si::before{content:"✓  "; color:var(--pink2); font-weight:700}
.plan ul li.no{opacity:.42}
.plan ul li.no::before{content:"✕  "}
.plan .cta{text-align:center}
/* ---------- app / avvisi ---------- */
.notice{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--pink); border-radius:0 12px 12px 0; padding:13px 16px; font-size:14px; color:var(--mut); margin:14px 0}
.appframe{width:100%; height:calc(100vh - 150px); min-height:560px; border:1px solid var(--line); border-radius:14px; background:#000}
.lockpanel{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:54px 30px; text-align:center; margin-top:24px}
.lockpanel .big{font-size:44px}
/* ---------- modale ---------- */
.modal{position:fixed; inset:0; background:rgba(5,7,15,.75); display:none; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--panel); border:1px solid var(--line); border-radius:18px; max-width:660px; width:100%; max-height:88vh; overflow-y:auto; padding:26px; position:relative}
.modal .box h3{margin-bottom:6px}
.modal .close{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--mut); font-size:22px; cursor:pointer}
.field{margin:10px 0}
.field label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin-bottom:4px}
.field input,.field select,.field textarea{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:9px 11px; font-size:14px; font-family:inherit}
/* suggerimenti nei campi: stesso blu/grigio del sito ovunque */
::placeholder{color:var(--mut); opacity:1}
/* autocompilazione di Chrome: i campi restano del colore del sito */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--panel2) inset !important;
  -webkit-text-fill-color:var(--txt) !important;
  caret-color:var(--txt);
  transition:background-color 99999s ease-in-out 0s;
}
footer{border-top:1px solid var(--line); background:var(--panel); padding:18px 22px; font-size:12.5px; color:var(--mut); text-align:center}
.pricecut{color:var(--mut); text-decoration:line-through; font-size:13px; margin-right:6px}
.disc{color:#4be08a; font-size:12px; font-weight:700}
/* allineamento centrato dei contenuti */
.card .body{text-align:center; align-items:center}
.card .open{align-self:center}
.tags{justify-content:center}
.plan{text-align:center}
.plan ul{align-items:center}

main h2{text-align:center}
.grid{justify-content:center; justify-items:stretch}

/* pagina App: iframe a tutta larghezza */
main.full{max-width:none; padding:0; flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
main.full #zona{flex:1; display:flex; min-height:0}
main.full .appframe{flex:1; height:auto; min-height:0; border-radius:0; border:none; display:block; background:var(--night)}

/* frasi descrittive: una sola riga a piena larghezza, centrate */
main > p.sub, .hero p, .lockpanel p.sub{max-width:none; text-align:center}

/* logo grande in home */
.herologo{width:min(700px,94%); height:auto; display:block; margin:0 auto; transform:translateX(-1.87%); filter:drop-shadow(0 0 26px #FF1AA855)}

/* allineamento centrale globale */
main h1, main h3, main p, main label{text-align:center}
.filters{justify-content:center}
.modal .box h3, .modal .box p{text-align:center}
.notice{text-align:center}
.faq details summary{text-align:center}

/* sottosezioni Squadra */
.subtab{box-shadow:none; background:var(--panel2); border:1px solid var(--line); color:var(--mut); padding:8px 22px; border-radius:99px; cursor:pointer; font-weight:700; letter-spacing:.08em; font-size:13px}
.subtab.on{border-color:var(--pink); color:#fff}

/* pannello Squadra/INFO: tutto a sinistra */
.body.sinistra{align-items:stretch}
.body.sinistra, .body.sinistra *{text-align:left}

.body.sinistra .field label{justify-content:flex-start}

/* Squadra: pulsanti più compatti (non le pillole delle sottosezioni) */
body.pg-squadra .cta:not(.subtab){background:var(--panel); border:1px solid var(--line); box-shadow:none; color:var(--txt); padding:7px 16px; font-size:13px}


/* pulsanti piani: bagliore al passaggio */
.plan .cta{transition:box-shadow .18s, filter .18s}


.sqtab.on{border-color:var(--pink)!important}

/* menu a tendina: sempre nei toni blu del sito */
select, select option{background-color:var(--panel2); color:var(--txt)}
select:focus{outline:1px solid var(--pink)}

/* tendina personalizzata (sempre blu, in ogni browser) */
.dd{position:relative}
.ddbtn{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:9px 11px; font-size:14px; text-align:left; cursor:pointer; font-family:inherit}
.ddbtn:after{content:"▾"; float:right; color:var(--mut)}
.dd.open .ddlist{display:grid}
.ddlist{display:none; position:fixed; background:var(--panel2); border:1px solid var(--line); border-radius:9px; z-index:200; box-shadow:0 10px 24px rgba(0,0,0,.45); grid-template-columns:repeat(2,max-content); padding:4px}
.ddlist div{padding:6px 14px; cursor:pointer; font-size:13.5px; border-radius:6px; white-space:nowrap; color:var(--txt)}
.ddlist div:hover{background:var(--panel); color:#fff}

/* pulsante Rimuovi (pagina amministratori): bordo rosa al passaggio */
.btnrim:hover{border-color:var(--pink); color:var(--pink)}

/* pagina Squadra: niente sollevamento delle card al passaggio,
   altrimenti le tendine fisse (categoria) vengono ritagliate */
body.pg-squadra .card, body.pg-admin .card{transition:none}
body.pg-squadra .card:hover, body.pg-admin .card:hover{transform:none}

/* effetto sollevamento card solo dove piace: home, piani, esercizi, ebook */
body.pg-lift .card{transition:transform .15s}
body.pg-lift .card:hover{transform:translateY(-3px); border-color:#FF1AA855}

body.pg-lift .plan{transition:transform .15s}
body.pg-lift .plan:hover{transform:translateY(-3px); border-color:#FF1AA855}

/* selettore piano in topbar: tendina personalizzata, si apre verso il basso */
.plmenu-btn{background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer; font-family:inherit}
.plmenu-list{display:none; position:absolute; top:calc(100% + 6px); right:0; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:4px; z-index:300; box-shadow:0 10px 24px rgba(0,0,0,.45); min-width:110px}
.plmenu-list div{padding:7px 14px; cursor:pointer; font-size:13px; border-radius:6px; color:var(--txt); white-space:nowrap}
.plmenu-list div:hover{background:var(--pink); color:#fff}

/* pulsante utente/login: contorno rosa, stesso pulsante da ospite (Accedi) e da loggato (nome) */
.btn-utente{background:var(--panel2); border:1.5px solid var(--pink); color:#fff; border-radius:10px; padding:7px 18px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit}
.btn-utente:hover{background:var(--pink)}

/* effetto pressione sui pulsanti */
.cta:active, .btn-utente:active, .subtab:active{transform:scale(.94); filter:brightness(1.15)}

/* ===== STILE UNICO DEI PULSANTI DEL SITO =====
   blu del pannello, scritta bianca, bordo rosa al passaggio.
   (restano esclusi i comandi tondi sulle miniature della Libreria) */
.cta, .cta.ghost, .subtab, .btn-conf, .plmenu-btn{
  background:var(--panel2)!important; color:#fff!important;
  border:1.5px solid var(--line)!important; box-shadow:none!important; font-weight:600;
}
.btn-conf{border-radius:99px; padding:8px 22px; cursor:pointer; font-size:13.5px; font-family:inherit}
.cta:hover, .cta.ghost:hover, .subtab:hover, .btn-conf:hover, .plmenu-btn:hover{
  border-color:var(--pink)!important;
}
.subtab.on{border-color:var(--pink)!important}

/* selezione attiva (es. toggle Mensile/Annuale): riempita di rosa */
.cta.attivo{background:var(--pink)!important; border-color:var(--pink)!important}

/* le spunte dentro le tendine dei filtri non devono ereditare la larghezza dei campi di ricerca */
.filters .ddlist input{flex:none!important; min-width:0!important; width:15px; height:15px}

.bordo-rosa{border-color:var(--pink)!important}

/* sito marketing: lettere più grandi in barra e logo (area tecnica resta a 12px) */
body.mkt nav.main a{font-size:15px}
body.mkt .topbar .logo svg{height:54px} /* 84/300*54 ≈ 15px di altezza lettere */