/* ==========================================================================
   JOY FITNESS GIULIANOVA — LANDING AUTUNNO 2026
   Direzione B4 "DARK CRO": nero profondo, un solo rosso, Barlow Condensed.
   La conversione comanda: consulenza in vista, CTA dominanti,
   form = card bianca che spacca il nero. Mobile-first, font self-hosted.
   ========================================================================== */

/* ---------- FONT ---------- */
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlowcond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlowcond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlowcond-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- TOKEN ---------- */
:root{
    /* dark */
    --bg:#0C0B0D;               /* nero base */
    --s1:#121114;               /* superficie 1 */
    --s2:#17161A;               /* superficie 2 */
    --line-d:#26242A;           /* bordo su dark */
    --line-dim:rgba(255,255,255,.12);
    --txt:#FFFFFF;
    --grey:#B7B3AD;             /* testo secondario su dark (9.4:1) */
    --grey-2:#8A867F;           /* testo terziario su dark (5.4:1) */
    /* accento — UNO solo */
    --red:#E31E24;
    --red-press:#B01622;        /* hover + testo rosso su fondi chiari (6.5:1) */
    --red-tint:#FDECEC;         /* tinta chiara per superfici light */
    --red-dim:rgba(227,30,36,.12);
    /* light (form card + sezione respiro) */
    --paper:#F6F4F0;
    --card:#FFFFFF;
    --ink:#141317;
    --muted:#5B5850;            /* testo secondario su light (6.6:1) */
    --line-l:#E4E0D8;
    /* tipografia */
    --fd:'Barlow Condensed',system-ui,sans-serif;
    --fb:'Barlow',system-ui,sans-serif;
    /* geometria — scala 8px */
    --radius:12px;
    --radius-s:8px;
    --pad:20px;
    --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none!important;transition:none!important;}
}
body{
    font-family:var(--fb);
    font-size:17px;line-height:1.55;
    color:var(--txt);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--txt);}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* numeri sempre tabulari */
.num,.stat-num,.price-num{font-variant-numeric:tabular-nums;}

/* ---------- SCROLL REVEAL (una tantum, leggero) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;}}
.noanim .rv{opacity:1;transform:none;}
.flat .hero{min-height:0;height:780px;}
/* override del banner condiviso: font coerente col resto della pagina */
.cookie-banner .btn-cookie,.cookie-modal .btn-cookie{font-family:var(--fb)!important;}

/* ---------- COMPONENTI CONDIVISI ---------- */

/* kicker di sezione: trattino rosso + maiuscolo largo */
.kicker{
    font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--red);margin-bottom:12px;
}
.kicker::before{content:"";display:inline-block;width:24px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px;}

/* titoli di sezione: condensed, maiuscolo, corpo grande */
.section h2,.form-head h2,.stats .stats-head h2{
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(38px,9.6vw,46px);line-height:.96;letter-spacing:.005em;
    margin-bottom:12px;
}
.section-intro{font-size:16.5px;color:var(--grey);max-width:520px;margin-bottom:28px;}

/* CTA: rettangolo rosso pieno, maiuscolo, mai timido */
.btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;min-height:58px;
    background:var(--red);color:#fff;
    font-family:var(--fb);font-size:15.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    border:none;border-radius:var(--radius-s);cursor:pointer;
    text-decoration:none;text-align:center;
    transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--red-press);}
.btn:active{background:var(--red-press);transform:scale(.99);}
.btn svg{width:18px;height:18px;}
.btn-micro{
    display:block;text-align:center;
    font-size:13px;color:var(--grey);
    margin-top:10px;
}

/* chip scura bordata (stile residuo, non piu' usato in pagina) */
.price-lockup{
    display:inline-block;
    background:var(--s1);color:var(--txt);
    border:1px solid var(--line-dim);
    border-radius:var(--radius);
    padding:16px 22px 14px;
    margin-bottom:8px;
}
.price-lockup .price-lead{
    display:block;
    font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--grey);
}
.price-lockup .price-num{
    display:block;
    font-family:var(--fd);font-weight:700;
    font-size:64px;line-height:.95;color:var(--red);
    letter-spacing:.01em;
    margin-top:4px;
}
.price-lockup .price-note{
    display:block;max-width:300px;
    font-size:13px;line-height:1.45;color:var(--grey);
    margin-top:8px;
}

/* trust Google: sempre a ridosso delle CTA */
.badge-google{
    display:inline-flex;align-items:center;gap:9px;
    font-size:13.5px;font-weight:600;color:var(--txt);
    margin:6px 0 16px;
}
.badge-google .g{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border-radius:6px;background:#fff;color:var(--ink);
    font-weight:700;font-size:13px;font-family:var(--fb);
}
.badge-google .stars{color:var(--red);letter-spacing:1.5px;font-size:12.5px;}

/* ==========================================================================
   1. HERO — nero, foto e CTA dominante. Watermark JOY dietro.
   ========================================================================== */
.hero{
    position:relative;
    min-height:100svh;
    display:flex;flex-direction:column;
    color:#fff;
    background:var(--bg);
    overflow:hidden;
}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,13,.62) 0%,rgba(12,11,13,.18) 32%,rgba(12,11,13,.66) 60%,rgba(12,11,13,.94) 100%);}

/* firma dai riferimenti: wordmark tipografico gigante dietro il soggetto */
.hero-wm{
    position:absolute;left:0;right:0;top:16%;z-index:1;
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(150px,46vw,420px);line-height:.8;letter-spacing:.02em;
    text-align:center;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.14);
    pointer-events:none;user-select:none;
}
@supports not (-webkit-text-stroke:1px #fff){.hero-wm{color:rgba(255,255,255,.05);}}

.hero-top{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px var(--pad);
    min-height:56px;
}
.hero-top img{height:30px;width:auto;filter:drop-shadow(0 1px 6px rgba(12,11,13,.5));}
.hero-tel{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--line-dim);border-radius:var(--radius-s);color:#fff;
    background:rgba(12,11,13,.5);
    transition:border-color .18s ease,background .18s ease;
}
.hero-tel:hover{border-color:rgba(255,255,255,.4);background:rgba(12,11,13,.7);}
.hero-tel svg{width:19px;height:19px;}

.hero-main{
    position:relative;z-index:2;
    margin-top:auto;
    padding:0 var(--pad) 28px;
    max-width:640px;
}
.hero-eyebrow{
    font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;margin-bottom:12px;
}
.hero-eyebrow::before{content:"";display:inline-block;width:24px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px;}
.hero h1{
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(46px,13vw,54px);line-height:.94;letter-spacing:.005em;
    margin-bottom:14px;
}
.hero h1 em{font-style:normal;color:var(--red);}
.hero-worlds{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-bottom:18px;
}
.hero-worlds span{
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    padding:7px 12px;border:1px solid var(--line-dim);border-radius:var(--radius-s);
    background:rgba(12,11,13,.55);
}
.hero .price-lockup{background:rgba(18,17,20,.82);backdrop-filter:blur(4px);}
.hero .badge-google{margin:8px 0 16px;}
/* l'unico glow concesso: la CTA primaria dell'hero */
.hero .btn{box-shadow:0 8px 28px rgba(227,30,36,.35);}

/* hero varianti (?v=) */
.hero[data-v="palestra"] .hero-bg img{object-position:center 45%;}
.hero[data-v="hyrox"] .hero-bg img{object-position:center 25%;}

/* ==========================================================================
   2. FORM — il momento di massimo contrasto: card BIANCA sul nero.
   ========================================================================== */
.section-form{
    background:var(--bg);
    padding:64px 0 72px;
    position:relative;
}
.form-head{max-width:560px;margin:0 auto 24px;text-align:center;padding:0 var(--pad);}
.form-head .kicker{justify-content:center;}
.form-head .price-lockup{margin-top:4px;}
.form-head .form-sub{font-size:16.5px;color:var(--grey);margin-top:8px;}

.form-panel{
    max-width:560px;margin:0 auto;
    background:var(--card);color:var(--ink);
    border-radius:16px;
    padding:28px 20px 26px;
    box-shadow:0 24px 80px rgba(0,0,0,.55);
}
@media(min-width:600px){.form-panel{padding:36px 36px 32px;}}

.step-tag{
    font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--red-press);margin-bottom:8px;
}
.step-tag::before{content:"";display:inline-block;width:18px;height:2px;background:var(--red);vertical-align:middle;margin-right:10px;}
.form-panel fieldset{border:none;}
.form-panel legend,.step2-title{
    font-family:var(--fd);font-weight:600;text-transform:uppercase;
    font-size:26px;line-height:1.05;color:var(--ink);
    margin-bottom:4px;
}
.step2-title:focus{outline:none;}
.pick-hint{font-size:13.5px;color:var(--muted);margin-bottom:16px;}

.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pick{position:relative;}
.pick input{position:absolute;opacity:0;inset:0;}
.pick label{
    display:flex;flex-direction:column;justify-content:center;
    min-height:54px;padding:10px 14px;
    border:1.5px solid var(--line-l);border-radius:var(--radius-s);
    font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink);
    background:#FBFAF8;cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}
.pick label:hover{border-color:#C9C3B8;}
.pick label small{font-weight:400;font-size:12px;color:var(--muted);margin-top:2px;}
.pick input:checked + label{
    border-color:var(--red);background:var(--red-tint);
    box-shadow:inset 0 0 0 1px var(--red);
}
.pick input:focus-visible + label{outline:2px solid var(--red);outline-offset:2px;}
.pick--full{grid-column:1 / -1;}
.pick--full label{border-width:2px;border-color:#D8D3C9;background:#F3F1EC;}
.pick-error{display:none;font-size:14px;color:var(--red-press);font-weight:600;margin-top:10px;}
.pick-error.show{display:block;}

.btn-step{margin-top:18px;}

/* step 2 */
.step2{display:none;}
.form-panel.at-step2 .step1{display:none;}
.form-panel.at-step2 .step2{display:block;}
.back-link{
    display:inline-block;background:none;border:none;cursor:pointer;
    font-family:var(--fb);font-size:14px;font-weight:600;color:var(--muted);
    margin:-6px 0 4px;padding:12px 12px 12px 0;
    transition:color .15s ease;
}
.back-link:hover{color:var(--ink);}
.chosen-pill{
    display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--red-press);
    background:var(--red-tint);border-radius:var(--radius-s);padding:6px 12px;margin-bottom:16px;
}

.fg{margin-bottom:16px;}
.fg label{
    display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
    margin-bottom:6px;
}
.fg input{
    width:100%;min-height:54px;
    font-family:var(--fb);font-size:16.5px;color:var(--ink);
    background:#fff;
    border:1.5px solid var(--line-l);border-radius:var(--radius-s);
    padding:12px 15px;
    transition:border-color .15s ease;
}
.fg input::placeholder{color:#A9A398;}
.fg input:focus{outline:none;border-color:var(--ink);}
.fg.err input{border-color:var(--red);}
.fg .field-hint{font-size:13px;color:var(--muted);margin-top:6px;}
.fg .field-error{display:none;font-size:13.5px;font-weight:600;color:var(--red-press);margin-top:6px;}
.fg.err .field-error{display:block;}

/* checkbox privacy: visibilissima */
.privacy-row{
    display:flex;gap:12px;align-items:flex-start;
    padding:8px 0 2px;cursor:pointer;
}
.privacy-row input{position:absolute;opacity:0;width:1px;height:1px;}
.privacy-box{
    flex:0 0 26px;width:26px;height:26px;margin-top:1px;
    border:2px solid var(--muted);border-radius:7px;background:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s ease,border-color .15s ease;
}
.privacy-box svg{width:15px;height:15px;color:#fff;opacity:0;}
.privacy-row:hover .privacy-box{border-color:var(--ink);}
.privacy-row input:checked ~ .privacy-box{background:var(--red);border-color:var(--red);}
.privacy-row input:checked ~ .privacy-box svg{opacity:1;}
.privacy-row input:focus-visible ~ .privacy-box{outline:2px solid var(--red);outline-offset:2px;}
.privacy-text{font-size:13.5px;line-height:1.45;color:var(--muted);}
.privacy-text a{color:var(--red-press);font-weight:600;}
.privacy-err .privacy-box{border-color:var(--red);}
.privacy-error{display:none;font-size:13.5px;font-weight:600;color:var(--red-press);margin:4px 0 0 38px;}
.privacy-err .privacy-error{display:block;}

.btn-submit{margin-top:18px;}
.btn-submit[disabled]{opacity:.7;cursor:default;}
.trust-row{
    text-align:center;
    font-size:12.5px;font-weight:600;color:var(--muted);
    margin-top:14px;
}
.form-fallback{display:none;text-align:center;font-size:15px;color:var(--ink);background:var(--red-tint);border-radius:var(--radius-s);padding:14px;margin-top:14px;}
.form-fallback.show{display:block;}
.form-fallback a{font-weight:700;white-space:nowrap;color:var(--red-press);}

/* thank you */
.thanks{display:none;text-align:center;padding:8px 2px;}
.form-panel.done .step1,.form-panel.done .step2{display:none;}
.form-panel.done .thanks{display:block;}
.thanks h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:30px;line-height:1;margin-bottom:10px;}
.thanks .thanks-check{
    width:56px;height:56px;margin:0 auto 16px;border-radius:999px;
    background:var(--ink);display:flex;align-items:center;justify-content:center;
}
.thanks .thanks-check svg{width:26px;height:26px;color:#fff;}
.thanks p{font-size:16px;color:var(--muted);margin-bottom:8px;}
.thanks p strong{color:var(--ink);white-space:nowrap;}
.thanks h4{font-family:var(--fd);font-weight:600;text-transform:uppercase;font-size:20px;margin:20px 0 10px;color:var(--ink);}
.thanks .btn{margin-bottom:10px;}
.btn-ghost{
    background:#fff;color:var(--ink);
    border:1.5px solid var(--ink);
}
.btn-ghost:hover,.btn-ghost:active{background:var(--paper);}
.btn-wa{background:#fff;color:var(--ink);border:1.5px solid var(--line-l);}
.btn-wa:hover,.btn-wa:active{background:var(--paper);border-color:var(--ink);}
.thanks-meta{font-size:13px;color:var(--muted);margin-top:8px;}

/* ==========================================================================
   3. STAT BAND — scura, celle bordate come i chip dei riferimenti
   ========================================================================== */
.stats{
    background:var(--bg);
    border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
    padding:40px 0;
}
.stats .container{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.stat{
    background:var(--s1);
    border:1px solid var(--line-d);border-radius:var(--radius);
    padding:20px 18px 16px;
}
.stat-num{
    font-family:var(--fd);font-weight:700;
    font-size:clamp(40px,11vw,48px);line-height:.95;color:var(--txt);
    letter-spacing:.01em;
}
.stat-num::after{content:"";display:block;width:26px;height:3px;background:var(--red);margin-top:10px;}
.stat-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);margin-top:8px;}

/* ==========================================================================
   4. I 4 MONDI — card fotografiche scure con CTA evidente
   ========================================================================== */
.section{padding:64px 0;}

.worlds{display:grid;gap:16px;}
@media(min-width:760px){.worlds{grid-template-columns:1fr 1fr;}}
.world{
    background:var(--s1);
    border:1px solid var(--line-d);border-radius:14px;
    overflow:hidden;
    display:flex;flex-direction:column;
    transition:border-color .2s ease,transform .2s ease;
}
.world:hover{border-color:#3A3740;}
.world-photo{position:relative;aspect-ratio:16/10;overflow:hidden;}
.world-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.world:hover .world-photo img{transform:scale(1.03);}
.world-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,13,.18) 0%,transparent 40%,rgba(18,17,20,.55) 100%);}
.worlds .world:nth-child(1) .world-photo img{object-position:center 62%;}
.worlds .world:nth-child(3) .world-photo img{object-position:center 30%;}
.world-num{
    position:absolute;top:12px;left:12px;z-index:1;
    font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:.1em;
    background:rgba(12,11,13,.72);color:#fff;
    border:1px solid var(--line-dim);
    border-radius:var(--radius-s);padding:4px 10px;
}
.world-badge{
    position:absolute;top:12px;right:12px;z-index:1;
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    background:var(--red);color:#fff;border-radius:var(--radius-s);padding:6px 11px;
}
.world-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1;}
.world-body h3{
    font-family:var(--fd);font-weight:600;text-transform:uppercase;
    font-size:27px;line-height:1;letter-spacing:.01em;margin-bottom:8px;
}
.world-body p{font-size:15px;color:var(--grey);flex:1;}
.world-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    align-self:flex-start;
    margin-top:16px;min-height:44px;padding:10px 18px;
    font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;text-decoration:none;
    background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-s);
    cursor:pointer;font-family:var(--fb);
    transition:background .18s ease,border-color .18s ease;
}
.world-cta:hover{background:var(--red);border-color:var(--red);}
.world-cta svg{width:15px;height:15px;}
.world--dark{border-color:rgba(227,30,36,.45);}
.world--dark:hover{border-color:var(--red);}
.world--dark .world-cta{border-color:rgba(227,30,36,.6);}
.world--dark .world-cta:hover{border-color:var(--red);}

.worlds-close{
    margin-top:24px;
    background:var(--s1);
    border:1px solid var(--line-d);border-radius:14px;
    padding:24px 20px;
    text-align:center;
}
.worlds-close .shield{
    font-family:var(--fd);font-weight:600;text-transform:uppercase;
    font-size:clamp(26px,6.4vw,32px);line-height:1;
    margin-bottom:16px;
}
.worlds-close .price-lockup{background:var(--bg);margin-bottom:0;}

/* ==========================================================================
   5. ATHLETICS / HYROX — il mondo scuro, griglia HUD e watermark
   ========================================================================== */
.athletics{
    background:var(--s2);color:#fff;
    border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
    position:relative;overflow:hidden;
}
.athletics::before{
    content:"";position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:44px 44px;
}
.ath-wm{
    position:absolute;left:0;right:0;top:6px;
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(72px,19vw,230px);line-height:.85;letter-spacing:.02em;
    text-align:center;white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.09);
    pointer-events:none;user-select:none;
}
@supports not (-webkit-text-stroke:1px #fff){.ath-wm{color:rgba(255,255,255,.04);}}
.athletics .container{position:relative;display:grid;gap:28px;}
@media(min-width:860px){.athletics .container{grid-template-columns:1.05fr .95fr;align-items:center;}}
.ath-eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--grey);margin-bottom:16px;
}
.ath-eyebrow .dot{color:var(--red);}
.athletics h2{
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(44px,11vw,56px);line-height:.92;letter-spacing:.005em;
    margin-bottom:8px;
}
.athletics h2 span{color:var(--red);display:block;}
.ath-claim{
    font-family:var(--fd);font-weight:600;text-transform:uppercase;
    font-size:clamp(22px,5.6vw,28px);line-height:1;
    margin-bottom:12px;
}
.ath-format{font-size:15.5px;color:var(--grey);margin-bottom:20px;max-width:430px;}
.ath-stack{
    display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-d);
    margin-bottom:20px;max-width:430px;
}
.ath-stack li{
    list-style:none;
    display:flex;align-items:center;gap:12px;
    font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:12px 0;border-bottom:1px solid var(--line-d);
}
.ath-stack li::before{content:"";width:8px;height:8px;background:var(--red);flex:0 0 8px;}
.ath-fear{font-size:15px;color:var(--grey);margin-bottom:22px;max-width:430px;}
.athletics .btn{max-width:340px;}
.athletics .btn-micro{text-align:left;}
.ath-photo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;max-height:520px;border:1px solid var(--line-d);}
.ath-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.08);}
.ath-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,11,13,.55));}

/* ==========================================================================
   6. RECENSIONI — l'unico respiro chiaro della pagina
   ========================================================================== */
.reviews{background:var(--paper);color:var(--ink);}
.reviews .kicker{color:var(--red-press);}
.reviews .kicker::before{background:var(--red);}
.reviews .section-intro{color:var(--muted);}
.reviews-grid{display:grid;gap:14px;}
@media(min-width:760px){.reviews-grid{grid-template-columns:repeat(3,1fr);}}
.review{
    background:var(--card);
    border:1px solid var(--line-l);border-radius:14px;
    padding:20px;
    display:flex;flex-direction:column;gap:10px;
}
.review-head{display:flex;align-items:center;gap:10px;}
.review-avatar{
    width:38px;height:38px;border-radius:999px;flex:0 0 38px;
    background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:16px;
}
.review-head strong{font-size:15px;display:block;line-height:1.2;color:var(--ink);}
.review-head span{font-size:12.5px;color:var(--muted);}
.review-g{margin-left:auto;font-weight:700;font-size:15px;color:var(--muted);border:1px solid var(--line-l);border-radius:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:#fff;}
.review-stars{color:var(--red);font-size:13px;letter-spacing:2px;}
.review p{font-size:14.5px;line-height:1.5;color:var(--ink);}
.reviews-link{
    display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--red-press);margin-top:12px;padding:12px 0;
}
.reviews-link:hover{text-decoration:underline;}

/* ==========================================================================
   7. VIDEO
   ========================================================================== */
.videos-scroll{
    display:flex;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
}
.video-card{
    flex:0 0 72%;max-width:300px;scroll-snap-align:start;
}
@media(min-width:760px){.videos-scroll{justify-content:center;}.video-card{flex:0 0 31%;}}
.video-frame{
    position:relative;border-radius:14px;overflow:hidden;
    aspect-ratio:9/16;background:var(--s1);
    border:1px solid var(--line-d);
}
.video-frame video{width:100%;height:100%;object-fit:cover;}
.video-play{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,transparent 55%,rgba(12,11,13,.5));
    border:none;cursor:pointer;width:100%;
}
.video-play span{
    width:62px;height:62px;border-radius:999px;
    background:rgba(255,255,255,.94);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 26px rgba(12,11,13,.4);
    transition:transform .18s ease;
}
.video-play:hover span{transform:scale(1.06);}
.video-play svg{width:22px;height:22px;color:var(--ink);margin-left:3px;}
.video-card figcaption{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--grey-2);margin-top:10px;
}

/* ==========================================================================
   8. COME FUNZIONA + banda rossa finale
   ========================================================================== */
.how{background:var(--bg);border-top:1px solid var(--line-d);}
.how-grid{display:grid;gap:0;max-width:560px;}
.how-step{
    display:flex;gap:16px;
    padding:20px 0;border-bottom:1px solid var(--line-d);
}
.how-num{
    flex:0 0 44px;width:44px;height:44px;border-radius:var(--radius-s);
    background:var(--s1);border:1px solid var(--line-d);color:var(--red);
    font-family:var(--fd);font-weight:700;font-size:20px;
    display:flex;align-items:center;justify-content:center;
}
.how-step h3{font-size:17px;font-weight:700;margin-bottom:3px;font-family:var(--fb);color:var(--txt);}
.how-step p{font-size:15px;color:var(--grey);}
.how-photo{border-radius:14px;overflow:hidden;margin-top:28px;aspect-ratio:16/9;border:1px solid var(--line-d);}
.how-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}

/* banda rossa finale: l'ultima spinta prima delle FAQ */
.how-final{
    margin-top:32px;
    background:linear-gradient(180deg,var(--red),var(--red-press));
    border-radius:14px;
    padding:28px 22px;
}
.fresh-line{
    font-family:var(--fd);font-weight:600;text-transform:uppercase;
    font-size:clamp(24px,6vw,30px);line-height:1.02;
    color:#fff;
    margin:0 0 18px;
}
.how-final .btn{background:#fff;color:var(--red-press);}
.how-final .btn:hover{background:var(--red-tint);}
.how-final .btn-micro{color:rgba(255,255,255,.9);}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq{background:var(--bg);border-top:1px solid var(--line-d);}
.faq-list{max-width:640px;}
.faq details{border-bottom:1px solid var(--line-d);}
.faq summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    font-size:16.5px;font-weight:600;color:var(--txt);
    padding:18px 0;
    transition:color .15s ease;
}
.faq summary:hover{color:var(--grey);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
    content:"+";flex:0 0 auto;
    font-family:var(--fd);font-weight:500;font-size:26px;color:var(--red);
    line-height:1;
}
.faq details[open] summary::after{content:"−";}
.faq details p{font-size:15.5px;color:var(--grey);padding:0 0 18px;max-width:560px;}
.faq .btn{max-width:420px;margin-top:32px;}
.faq .btn-micro{text-align:left;}

/* ==========================================================================
   10. FOOTER — nero, wordmark gigante in coda
   ========================================================================== */
footer{background:var(--bg);color:var(--grey);padding:48px 0 110px;border-top:3px solid var(--red);position:relative;overflow:hidden;}
@media(min-width:900px){footer{padding-bottom:0;}}
footer .container{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;}
footer .container img{height:44px;width:auto;margin-bottom:12px;align-self:flex-start;}
footer p{font-size:14px;}
footer strong{color:#fff;}
footer a{color:#fff;font-weight:600;}
.footer-legal{font-size:12.5px;margin-top:14px;color:var(--grey-2);}
.footer-legal a{color:var(--grey);font-weight:400;}
.foot-wm{
    display:block;
    margin-top:24px;
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(64px,17vw,250px);line-height:.78;letter-spacing:.01em;
    text-align:center;white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.10);
    pointer-events:none;user-select:none;
    transform:translateY(12%);
}
@supports not (-webkit-text-stroke:1px #fff){.foot-wm{color:rgba(255,255,255,.04);}}

/* ==========================================================================
   11. STICKY BAR (solo mobile)
   ========================================================================== */
.sticky-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;gap:10px;align-items:center;
    background:rgba(12,11,13,.92);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line-d);
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    transition:transform .22s ease;
}
.sticky-bar.show{transform:none;}
.sticky-bar .btn{min-height:52px;font-size:14px;flex:1;}
.sticky-tel{
    flex:0 0 52px;width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line-dim);border-radius:var(--radius-s);color:#fff;
    background:var(--s1);
}
.sticky-tel svg{width:20px;height:20px;}
@media(min-width:900px){.sticky-bar{display:none;}}

/* ==========================================================================
   DESKTOP ≥900 — hero split, form a due colonne, rail editoriali
   ========================================================================== */
@media(min-width:900px){

    /* ---------- fondamenta ---------- */
    .container{max-width:1280px;padding-left:48px;padding-right:48px;}
    .section{padding:96px 0;}
    .section h2,.form-head h2,.stats .stats-head h2{font-size:60px;}
    .section-intro{font-size:17.5px;margin-bottom:0;}
    .btn{width:auto;display:inline-flex;padding:0 40px;}
    .btn.btn-step,.btn.btn-submit,.thanks .btn{display:flex;width:100%;}

    /* rail editoriale sticky */
    .rail{
        grid-column:1;grid-row:1;
        align-self:start;position:sticky;top:56px;
        border-top:1px solid var(--line-d);padding-top:24px;
    }
    .rail h2{margin-bottom:12px;}
    .rail .section-intro{margin-top:4px;}

    /* ---------- 1. HERO: pannello nero a sinistra, foto a destra ---------- */
    .hero{min-height:92vh;}
    .hero::before{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:var(--bg);z-index:1;}
    .hero-bg{left:50%;}
    .hero-bg img{object-position:center 35%;}
    .hero-scrim{left:50%;background:linear-gradient(90deg,rgba(12,11,13,.92) 0%,rgba(12,11,13,.25) 45%,rgba(12,11,13,.05) 100%);z-index:1;}
    .hero-wm{top:auto;bottom:2%;left:34%;right:auto;z-index:1;font-size:min(24vw,340px);text-align:left;-webkit-text-stroke:1px rgba(255,255,255,.12);}
    .hero-top{position:absolute;top:0;left:0;right:0;z-index:3;padding:24px 48px;min-height:0;}
    .hero-top img{height:34px;}
    .hero-main{margin:auto 0;padding:96px 48px 48px;max-width:660px;z-index:2;}
    .hero-eyebrow{font-size:13px;margin-bottom:12px;}
    .hero h1{font-size:68px;margin-bottom:16px;max-width:620px;}
    .hero-worlds{gap:8px;margin-bottom:18px;max-width:560px;}
    .hero-worlds span{font-size:12px;padding:7px 13px;}
    .hero .price-lockup .price-num{font-size:64px;}
    .hero .badge-google{margin:8px 0 16px;display:flex;}
    .hero .btn{min-width:360px;}
    .hero .btn-micro{text-align:left;}

    /* ---------- 2. FORM: testata sticky a sinistra, card bianca a destra ---------- */
    .section-form{
        display:grid;
        grid-template-columns:minmax(320px,440px) minmax(400px,620px);
        column-gap:clamp(48px,7vw,104px);
        justify-content:center;align-items:start;
        padding:104px 48px 112px;
    }
    .form-head{
        grid-column:1;grid-row:1;
        position:sticky;top:56px;
        max-width:none;margin:0;padding:24px 0 0;text-align:left;
        border-top:1px solid var(--line-d);
    }
    .form-head h2{margin-bottom:20px;}
    .form-head .price-lockup{padding:18px 26px 16px;}
    .form-head .price-lockup .price-num{font-size:72px;}
    .form-head .form-sub{margin-top:12px;font-size:17px;}
    .section-form .container{grid-column:2;grid-row:1;max-width:none;width:100%;margin:0;padding:0;}
    .form-panel{max-width:none;margin:0;padding:40px 44px 36px;}

    /* ---------- 3. STAT BAND: 4 celle bordate in fila ---------- */
    .stats{padding:56px 0;}
    .stats .container{grid-template-columns:repeat(4,1fr);gap:16px;}
    .stat{padding:28px 28px 24px;}
    .stat-num{font-size:64px;}
    .stat-num::after{margin-top:14px;}
    .stat-label{font-size:11.5px;margin-top:10px;}

    /* ---------- 4. MONDI: rail + griglia 2×2 ---------- */
    #mondi .container{
        display:grid;
        grid-template-columns:minmax(250px,330px) minmax(0,1fr);
        column-gap:clamp(48px,6vw,88px);
    }
    #mondi .rail .section-intro{max-width:300px;}
    .worlds{grid-column:2;grid-row:1;grid-template-columns:1fr 1fr;gap:24px;}
    .worlds-close{
        grid-column:1 / -1;grid-row:2;
        display:flex;align-items:center;justify-content:space-between;gap:48px;
        margin-top:56px;padding:36px 44px;text-align:left;
    }
    .worlds-close .shield{margin-bottom:0;font-size:38px;max-width:460px;}

    /* ---------- 5. ATHLETICS ---------- */
    .athletics .container{grid-template-columns:1.05fr .95fr;column-gap:clamp(48px,6vw,88px);}
    .athletics h2{font-size:76px;}
    .athletics h2 span{display:inline;}
    .ath-photo{max-height:600px;}
    .athletics .btn{min-width:320px;max-width:none;}

    /* ---------- 6. RECENSIONI (chiara) ---------- */
    .reviews .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);column-gap:88px;}
    .reviews .kicker{grid-column:1;grid-row:1;}
    .reviews h2{grid-column:1;grid-row:2;margin-bottom:0;}
    .reviews .section-intro{grid-column:2;grid-row:1 / 3;align-self:end;justify-self:end;margin:0 0 6px;max-width:340px;}
    .reviews-grid{grid-column:1 / -1;grid-row:3;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
    .review{padding:24px;gap:12px;}
    .reviews-link{grid-column:1 / -1;grid-row:4;margin-top:40px;padding:22px 0 0;border-top:1px solid var(--line-l);}

    /* ---------- 7. VIDEO: rail + due card ---------- */
    #video .container{
        display:grid;
        grid-template-columns:minmax(250px,330px) minmax(0,1fr);
        column-gap:clamp(48px,6vw,88px);
        align-items:center;
    }
    #video .rail{position:static;align-self:center;}
    #video .rail .section-intro{max-width:300px;}
    .videos-scroll{
        grid-column:2;grid-row:1;
        overflow:visible;justify-content:flex-start;gap:24px;padding-bottom:0;
        counter-reset:vid;
    }
    .video-card{flex:0 0 calc(50% - 12px);max-width:330px;}
    .video-card figcaption{margin-top:12px;}
    .video-card figcaption::before{
        counter-increment:vid;
        content:counter(vid,decimal-leading-zero) " — ";
        color:var(--red);letter-spacing:.08em;
    }

    /* ---------- 8. COME FUNZIONA: rail + passi | foto, banda rossa in coda ---------- */
    .how .container{
        display:grid;
        grid-template-columns:minmax(240px,310px) minmax(0,1fr) minmax(0,1fr);
        column-gap:clamp(40px,5vw,72px);
        grid-template-rows:auto auto;
    }
    .how .rail{grid-row:1;}
    .how-grid{grid-column:2;grid-row:1;max-width:none;border-top:1px solid var(--line-d);}
    .how-step{padding:22px 0;gap:18px;}
    .how-step h3{font-size:18px;}
    .how-photo{grid-column:3;grid-row:1;margin-top:0;aspect-ratio:auto;align-self:stretch;}
    .how-final{
        grid-column:1 / -1;grid-row:2;
        margin-top:64px;padding:48px 56px;
        display:grid;grid-template-columns:minmax(0,1fr) auto;
        column-gap:56px;align-items:center;
    }
    .how-final .fresh-line{grid-column:1;grid-row:1 / span 2;margin:0;max-width:620px;font-size:40px;}
    .how-final .btn{grid-column:2;grid-row:1;margin:0;min-width:320px;justify-self:end;align-self:end;}
    .how-final .btn-micro{grid-column:2;grid-row:2;margin-top:10px;text-align:center;justify-self:end;}

    /* ---------- 9. FAQ: rail con CTA, lista numerata ---------- */
    .faq .container{
        display:grid;
        grid-template-columns:minmax(250px,330px) minmax(0,1fr);
        column-gap:clamp(48px,6vw,88px);
        grid-template-rows:auto auto 1fr;
    }
    .faq .rail{grid-row:1;}
    .faq-list{grid-column:2;grid-row:1 / span 3;max-width:none;border-top:1px solid var(--line-d);counter-reset:faq;}
    .faq summary{justify-content:flex-start;gap:18px;padding:20px 0;font-size:17.5px;}
    .faq summary::before{
        counter-increment:faq;
        content:counter(faq,decimal-leading-zero);
        flex:0 0 30px;margin-top:3px;
        font-family:var(--fd);
        font-variant-numeric:tabular-nums;
        font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--grey-2);
    }
    .faq summary::after{margin-left:auto;}
    .faq details p{padding:0 0 22px 48px;max-width:600px;}
    .faq .btn{grid-column:1;grid-row:2;align-self:start;justify-self:stretch;display:flex;width:100%;min-width:0;max-width:none;margin-top:32px;padding:0 24px;}
    .faq .btn-micro{grid-column:1;grid-row:3;text-align:center;margin-top:10px;}

    /* ---------- 10. FOOTER: brand | contatti | legale + wordmark ---------- */
    footer{padding-top:72px;}
    footer .container{
        display:grid;
        grid-template-columns:1.1fr .9fr 1.1fr;
        column-gap:64px;row-gap:10px;align-items:start;
    }
    footer .container img{grid-column:1;grid-row:1;height:52px;margin-bottom:10px;}
    footer .container > p:nth-of-type(1){grid-column:1;grid-row:2;max-width:300px;}
    footer .container > p:nth-of-type(2){grid-column:2;grid-row:2;}
    footer .container > p:nth-of-type(3){grid-column:2;grid-row:3;}
    .footer-legal{grid-column:3;grid-row:2 / span 2;margin-top:0;padding-top:0;font-size:13px;line-height:1.85;}
    .foot-wm{grid-column:1 / -1;grid-row:4;margin-top:56px;}
}

/* honeypot anti-spam: fuori dallo schermo, mai display:none (alcuni bot lo saltano) */
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;opacity:0;}

/* alias variabili per gli stili del cookie banner condiviso (arrivano dalla vecchia landing) */
:root{
    --color-white:#ffffff;
    --color-primary:#E31E24;
    --color-primary-light:#ff3a42;
    --color-primary-dark:#B01622;
    --color-gray:#2a2a2a;
    --color-dark-2:#141414;
    --color-dark-3:#1f1f1f;
    --shadow-lg:0 16px 40px rgba(0,0,0,.35);
    --radius-md:12px;
    --radius-lg:20px;
    --radius-full:999px;
}

/* ==========================================================================
   COOKIE BANNER
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: var(--color-dark-2);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    z-index: 9998;
    max-width: 520px;
    margin: 0 auto;
    animation: slideUpBanner 0.5s ease;
}

@keyframes slideUpBanner {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-content h3 {
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cookie-banner-content h3 i {
    color: var(--color-primary-light);
}

.cookie-banner-content p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.cookie-banner-content p a {
    color: var(--color-primary-light);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-cookie {
    padding: 12px 18px;
    font-size: 13px;
    letter-spacing: 0.3px;
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

/* Conforme Garante Privacy: "Accetta" e "Rifiuta" devono avere lo stesso peso visivo.
   Stessa size, stesso padding, stesso bordo. Solo i colori differenziano l'azione. */
.btn-cookie-primary,
.btn-cookie-secondary {
    border: 1px solid transparent;
    color: var(--color-white);
    font-weight: 700;
}

.btn-cookie-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-cookie-primary:hover,
.btn-cookie-primary:active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-cookie-secondary {
    background: var(--color-gray);
    border-color: var(--color-gray);
}

.btn-cookie-secondary:hover,
.btn-cookie-secondary:active {
    background: var(--color-dark-3);
    border-color: var(--color-dark-3);
}

/* "Personalizza" leggermente meno prominente (è un'azione neutra, non scelta finale) */
[data-cookie-action="settings"] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
}
[data-cookie-action="settings"]:hover,
[data-cookie-action="settings"]:active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.4);
}

/* COOKIE MODAL */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.3s ease;
}

.cookie-modal[hidden] {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cookie-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cookie-modal-box {
    position: relative;
    background: var(--color-dark-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.cookie-modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.cookie-modal-close {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.cookie-modal-close:hover {
    opacity: 1;
}

.cookie-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.cookie-category {
    padding: 14px;
    background: var(--color-dark-3);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.cookie-category:last-child {
    margin-bottom: 0;
}

.cookie-category-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.cookie-category-head h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.cookie-category p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

.cookie-badge {
    display: inline-block;
    background: rgba(227, 30, 36, 0.15);
    color: var(--color-primary-light);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-gray);
    border-radius: 24px;
    transition: 0.3s;
}

.cookie-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--color-white);
    border-radius: 50%;
    transition: 0.3s;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: var(--color-primary);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(20px);
}

.cookie-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 600px) {
    .cookie-banner-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .btn-cookie {
        width: auto;
        min-width: 130px;
    }

    .cookie-modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

@media (min-width: 768px) {
    .cookie-banner {
        bottom: 24px;
        left: 24px;
        right: auto;
        padding: 24px;
    }
}

/* ==========================================================================
   MERGE FIX post-giuria (append: la cascata vince)
   ========================================================================== */
:root{--red-hi:#FF3A42;}

/* hero: foto trattata + scrim deciso in alto — eyebrow e DESIDERATO sempre su zona scura */
.hero-bg img{filter:brightness(.8) contrast(1.08) saturate(.85);}
.hero-scrim{background:linear-gradient(180deg,rgba(12,11,13,.8) 0%,rgba(12,11,13,.42) 30%,rgba(12,11,13,.7) 58%,rgba(12,11,13,.96) 100%);}

/* watermark: mai in collisione col claim su mobile; discreto su desktop */
.hero-wm{display:none;}
@media(min-width:900px){
    .hero-wm{display:block;opacity:.55;}
}

/* WhatsApp: verde riconoscibile (funzionale, non secondo accento) */
.btn-wa{background:#128C46;color:#fff;border:none;}
.btn-wa:hover{background:#0E7038;}
.btn-wa:active{background:#0E7038;}

/* banda finale: rosso pieno, niente gradiente */
.how-final{background:var(--red);}

/* FAQ: icona + attaccata alla domanda, riga unica cliccabile */
.faq summary{justify-content:flex-start;gap:14px;}
.faq summary::after{margin-left:0;flex:0 0 auto;}

/* checkbox privacy: bordo piu' evidente sulla card bianca */
.privacy-box{border-color:#47443E;}

/* rosso piccolo su dark: tinta chiara per l'AA reale (i corpi grandi restano --red) */
.kicker,.step-tag,.hero-eyebrow::before{color:var(--red-hi);}
.hero-eyebrow::before{background:var(--red-hi);}

/* ==========================================================================
   FIX cliente: hero full-bleed (via lo spacco sx/dx) + logo Google reale
   ========================================================================== */
@media(min-width:900px){
    .hero::before{display:none;}
    .hero-bg{left:0;}
    .hero-bg img{object-position:center 42%;}
    .hero-scrim{left:0;z-index:1;background:
        linear-gradient(90deg,rgba(12,11,13,.97) 0%,rgba(12,11,13,.9) 30%,rgba(12,11,13,.58) 60%,rgba(12,11,13,.32) 100%),
        linear-gradient(180deg,rgba(12,11,13,.5) 0%,rgba(12,11,13,0) 28%,rgba(12,11,13,0) 68%,rgba(12,11,13,.55) 100%);}
    .hero-wm{left:auto;right:2%;bottom:3%;text-align:right;-webkit-text-stroke:1px rgba(255,255,255,.09);}
}
.badge-google .g svg,.review-g svg{width:14px;height:14px;display:block;}
.review-g{font-size:0;}

/* ==========================================================================
   FIX cliente 2: FAB WhatsApp + chip hero singola
   ========================================================================== */
.wa-fab{
    position:fixed;right:16px;bottom:96px;z-index:70;
    width:56px;height:56px;border-radius:999px;
    background:linear-gradient(135deg,#3EE07A 0%,#1FAF5A 55%,#128C46 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    transition:transform .15s ease;
}
.wa-fab svg{width:30px;height:30px;}
.wa-fab:hover{transform:scale(1.06);}
.wa-fab:active{transform:scale(.97);}
@media(min-width:900px){.wa-fab{right:28px;bottom:28px;width:60px;height:60px;}.wa-fab svg{width:32px;height:32px;}}

/* ==========================================================================
   RIPOSIZIONAMENTO PREMIUM (richiesta cliente): niente prezzo, storia dal 1985
   ========================================================================== */
.hero-sub{
    font-size:16.5px;line-height:1.6;color:#D8D5CF;
    max-width:560px;margin:0 0 18px;
}
.form-benefit{
    font-size:16.5px;line-height:1.55;color:#EDEAE4;
    max-width:520px;margin:0 auto 10px;
    padding:14px 18px;
    background:rgba(227,30,36,.08);
    border:1px solid rgba(227,30,36,.35);border-left:3px solid var(--red);
    border-radius:10px;text-align:left;
}
.mission-kicker{
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--red-hi);margin-bottom:12px;
}
.worlds-close{display:block;text-align:left;}
.worlds-close .shield{margin-bottom:14px;}
.mission-text{
    font-size:16.5px;line-height:1.7;color:#C9C5BE;
    max-width:760px;margin:0 0 22px;
}
.mission-btn{max-width:420px;}
@media(min-width:900px){
    .hero-sub{font-size:18px;max-width:600px;margin-bottom:22px;}
    .form-benefit{margin:0 0 12px;}
    .worlds-close{padding:44px 48px;}
    .mission-btn{display:inline-flex;width:auto;min-width:380px;padding:0 44px;}
}

/* ==========================================================================
   FIX cliente 3: rail 'Come funziona' mai sticky (anti-sovrapposizione),
   WhatsApp nella sticky bar mobile, FAB solo desktop
   ========================================================================== */
@media(min-width:900px){
    .how .rail{position:static;}
}
.sticky-wa{
    flex:0 0 52px;width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;color:#fff;
    background:linear-gradient(135deg,#3EE07A 0%,#1FAF5A 55%,#128C46 100%);
}
.sticky-wa svg{width:28px;height:28px;}
.wa-fab{display:none;}
@media(min-width:900px){.wa-fab{display:flex;}}

/* ==========================================================================
   HERO v3 — riferimento GreenTheory: centrata, sentence-case + corsivo,
   sottotitolo col barrato, CTA a pillola, badge Google come card
   ========================================================================== */
@font-face{font-family:'Barlow';src:url('fonts/barlow-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}

/* sfondo: foto sfocata e scura, scrim uniforme (niente taglio direzionale) */
.hero-bg img{filter:blur(5px) brightness(.52) saturate(.9);transform:scale(1.07);}
.hero-scrim{background:linear-gradient(180deg,rgba(12,11,13,.6) 0%,rgba(12,11,13,.35) 40%,rgba(12,11,13,.75) 100%);}
.hero-wm{display:none;}

/* composizione centrata */
.hero-main{margin:auto;padding:96px var(--pad) 40px;max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.hero-eyebrow{margin-bottom:14px;}

/* titolo: Barlow sentence-case, corsivo sull'accento */
.hero h1{
    font-family:var(--fb);font-weight:700;text-transform:none;
    font-size:clamp(34px,8.6vw,40px);line-height:1.12;letter-spacing:-.01em;
    margin-bottom:16px;
}
.hero h1 em{font-family:var(--fb);font-style:italic;font-weight:700;}

/* sottotitolo centrato col barrato */
.hero-sub{margin:0 auto 20px;max-width:560px;}
.strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--red-hi);}

/* badge Google come card pillola bordata */
.hero .badge-google{
    border:1px solid rgba(255,255,255,.28);border-radius:999px;
    padding:10px 20px;background:rgba(12,11,13,.45);
    margin:4px 0 22px;
}

/* CTA a pillola, sentence-case, corsivo finale */
.hero .hero-cta{
    border-radius:999px;min-height:62px;width:100%;
    font-size:18px;text-transform:none;letter-spacing:0;font-weight:700;
    padding:0 34px;
    box-shadow:0 10px 30px rgba(227,30,36,.35);
}
.hero .hero-cta em{font-style:italic;font-weight:700;}

@media(min-width:900px){
    .hero-main{margin:auto;padding:120px 48px 64px;max-width:720px;}
    .hero h1{font-size:56px;max-width:none;}
    .hero-sub{font-size:18px;max-width:620px;}
    .hero .hero-cta{width:auto;min-width:420px;display:inline-flex;}
    .hero .btn-micro{text-align:center;}
}
.hero .hero-cta{gap:5px;}

/* ==========================================================================
   FIX cliente 4: logo header piu' grande, WhatsApp nell'header, eyebrow
   centrata a colore, hero mobile piu' compatta, niente barrato
   ========================================================================== */
.hero-top img{height:38px;}
.hero-wa{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:999px;color:#fff;
    background:linear-gradient(135deg,#3EE07A 0%,#1FAF5A 55%,#128C46 100%);
    box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.hero-wa svg{width:26px;height:26px;}

/* eyebrow: centrata, senza barretta, colore evidente */
.hero-eyebrow{color:var(--red-hi);opacity:1;}
.hero-eyebrow::before{display:none;}

/* mobile: contenuto piu' vicino all'header */
@media(max-width:899px){
    .hero{min-height:88svh;}
    .hero-main{margin:12px auto auto;padding-top:16px;}
}
@media(min-width:900px){
    .hero-top img{height:44px;}
    .hero-wa{width:50px;height:50px;}
    .hero-wa svg{width:28px;height:28px;}
}

/* pick "Tutto il fitness" = pacchetto completo, ben riconoscibile */
.pick--pacchetto{position:relative;}
.pick--pacchetto .pick-badge{
    position:absolute;top:-10px;right:14px;z-index:2;
    background:var(--red);color:#fff;
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 12px;border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* da non selezionato il pacchetto è neutro come le altre pill:
   il rosso arriva solo dallo stato :checked generico */
/* mobile: hero alta quanto il contenuto, niente coda vuota */
@media(max-width:899px){
    .hero{min-height:auto;}
    .hero-main{padding-bottom:34px;}
}

/* ==========================================================================
   HARDENING: niente rail sticky da nessuna parte (mai piu' titoli vaganti)
   ========================================================================== */
@media(min-width:900px){
    .rail{position:static;}
}
/* evidenza richiesta: le parole chiave del vantaggio saltano all'occhio */
.form-benefit strong{color:#fff;font-weight:700;}

/* card CONDIZIONI ESCLUSIVE: elemento protagonista della testata form */
.form-benefit{
    position:relative;
    background:rgba(227,30,36,.14);
    border:1.5px solid var(--red);border-left:4px solid var(--red);
    border-radius:12px;
    padding:22px 20px 16px;
    margin:14px auto 12px;max-width:540px;
    text-align:left;font-size:16.5px;line-height:1.55;color:#EDEAE4;
    box-shadow:0 6px 24px rgba(227,30,36,.18);
}
.benefit-tag{
    position:absolute;top:-13px;left:14px;
    background:var(--red);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 14px;border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
    white-space:nowrap;
}
.form-benefit p{margin:0;}
.benefit-price{margin-top:10px!important;padding-top:10px;border-top:1px solid rgba(227,30,36,.35);}
.benefit-price strong{color:#fff;}
@media(min-width:900px){
    .form-benefit{margin-left:0;margin-right:0;}
}

/* ==========================================================================
   FIX cliente 5: titolo form su una riga (mobile), stacco dalla card,
   legend "Scegli le attività" visibile, hint su una riga
   ========================================================================== */
.pick-legend{
    display:block;width:100%;
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:22px;line-height:1.1;color:var(--ink);
    margin-bottom:4px;
}
@media(max-width:899px){
    .form-head h2{font-size:6.4vw;white-space:nowrap;margin-bottom:26px;}
    .form-benefit{margin-top:20px;}
    .pick-hint{font-size:clamp(11px,3.35vw,13.5px);white-space:nowrap;}
}
@media(min-width:900px){
    .pick-legend{font-size:24px;}
}

/* FIX overflow card form: mai nowrap dentro il pannello (rompeva la griglia) */
@media(max-width:899px){
    .form-head h2{font-size:6vw;white-space:normal;}
    .pick-hint{font-size:13px;white-space:normal;}
}

/* banda rossa finale: testi piu' compatti su mobile */
@media(max-width:899px){
    .how-final .fresh-line{font-size:19px;line-height:1.35;}
    .how-final .btn{font-size:13px;min-height:52px;letter-spacing:.06em;padding:0 18px;}
    .how-final .btn-micro{font-size:12px;}
}
@media(max-width:899px){
    .how-final .btn{font-size:12.5px;letter-spacing:.04em;padding:0 12px;}
}

/* etichetta email facoltativa */
.lbl-optional{
    display:inline-block;vertical-align:middle;
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);background:var(--paper);
    border:1px solid var(--line-l);border-radius:999px;
    padding:2px 10px;margin-left:8px;
}

/* ==========================================================================
   PALINSESTO — schede per giorno (radio+CSS, zero dipendenze)
   ========================================================================== */
.sched-widget{
    background:var(--s1);border:1px solid var(--line-d);border-radius:16px;
    padding:18px 16px 14px;max-width:640px;
}
.sday-radio{position:absolute;opacity:0;pointer-events:none;}
.sday-tab{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:48px;min-height:40px;padding:0 12px;margin:0 6px 12px 0;
    border:1px solid var(--line-d);border-radius:999px;
    font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--grey);cursor:pointer;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.sday-tab:hover{color:#fff;border-color:var(--grey-2);}
#sd-lun:checked ~ .sday-tab[for="sd-lun"],
#sd-mar:checked ~ .sday-tab[for="sd-mar"],
#sd-mer:checked ~ .sday-tab[for="sd-mer"],
#sd-gio:checked ~ .sday-tab[for="sd-gio"],
#sd-ven:checked ~ .sday-tab[for="sd-ven"],
#sd-sab:checked ~ .sday-tab[for="sd-sab"]{
    background:var(--red);border-color:var(--red);color:#fff;
}
.sday-radio:focus-visible ~ .sday-tab{outline:2px solid var(--red);outline-offset:2px;}
.sched-days ul{list-style:none;margin:6px 0 0;padding:0;display:none;}
#sd-lun:checked ~ .sched-days .sched-day-lun,
#sd-mar:checked ~ .sched-days .sched-day-mar,
#sd-mer:checked ~ .sched-days .sched-day-mer,
#sd-gio:checked ~ .sched-days .sched-day-gio,
#sd-ven:checked ~ .sched-days .sched-day-ven,
#sd-sab:checked ~ .sched-days .sched-day-sab{display:block;}
.sched-days li{
    display:flex;align-items:flex-start;gap:14px;
    padding:10px 2px;border-top:1px solid var(--line-d);
}
.sched-days li:first-child{border-top:none;}
.sched-time{
    flex:0 0 52px;
    font-family:var(--fd);font-weight:700;font-size:17px;color:#fff;
    padding-top:2px;
}
.sched-courses{display:flex;flex-wrap:wrap;gap:6px;}
.sched-chip{
    display:inline-flex;align-items:center;
    font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#EDEAE4;
    border:1px solid var(--line-d);border-radius:999px;
    padding:4px 11px;
}
.sched-chip::before{content:"";width:7px;height:7px;border-radius:99px;margin-right:7px;}
.sched-acq::before{background:#55C2E8;}
.sched-crs::before{background:#F5B301;}
.sched-box::before{background:var(--red-hi);}
.sched-legend{
    margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d);
    font-size:12px;color:var(--grey-2);
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.sched-dot{width:8px;height:8px;border-radius:99px;display:inline-block;margin-left:10px;}
.sched-dot:first-child{margin-left:0;}
.sched-dot.sched-acq{background:#55C2E8;}
.sched-dot.sched-crs{background:#F5B301;}
.sched-dot.sched-box{background:var(--red-hi);}
.sched-cta{max-width:420px;margin-top:26px;}
@media(min-width:900px){
    .sched .container{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);column-gap:clamp(48px,6vw,88px);}
    .sched .rv:not(.sched-widget){grid-column:1;}
    .sched .kicker{grid-row:1;}
    .sched h2{grid-row:2;}
    .sched .section-intro{grid-row:3;max-width:300px;}
    .sched-cta{grid-column:1;grid-row:4;display:inline-flex;width:100%;max-width:none;min-width:0;}
    .sched .btn-micro{grid-column:1;grid-row:5;text-align:center;}
    .sched-widget{grid-column:2;grid-row:1 / span 6;max-width:none;padding:24px 26px 18px;}
}

/* tab giorni palinsesto: bianche con testo nero, una sola riga su mobile */
.sday-tab{background:#fff;color:var(--ink);border-color:#fff;}
.sday-tab:hover{background:#F2EFE9;color:var(--ink);border-color:#F2EFE9;}
@media(max-width:899px){
    .sday-tab{
        width:calc((100% - 25px)/6);min-width:0;
        padding:0;margin:0 5px 12px 0;
        min-height:34px;font-size:11.5px;letter-spacing:.03em;
    }
    .sday-tab[for="sd-sab"]{margin-right:0;}
}

/* ---- Titolo sopra la strip dei numeri ---- */
.stats .stats-head{display:block;margin-bottom:34px;}
.stats .stats-head .kicker{margin-bottom:6px;}
.stats .stats-head h2{margin:0;}
@media (max-width:640px){.stats .stats-head{margin-bottom:22px;}}

/* badge CONDIZIONI ESCLUSIVE: sotto la card e centrato */
.benefit-tag{top:auto;bottom:-14px;left:50%;transform:translateX(-50%);}
.form-benefit{padding:20px 20px 22px;margin-bottom:28px;}

/* badge: in mezzo alla card, tra i due blocchi di testo */
.benefit-tag{position:static;display:block;width:fit-content;margin:14px auto 0;transform:none;}
.form-benefit{padding:20px;margin-bottom:14px;}
.benefit-price{border-top:0;padding-top:0;margin-top:12px!important;}

/* palinsesto: fasce Mattina/Pomeriggio (segmented control, diverso dalle pill dei giorni) */
.speriod-radio{position:absolute;opacity:0;pointer-events:none;}
.speriod-tabs{display:flex;margin:14px 0 0;border:1px solid var(--line-d);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04);}
.speriod-tabs label{
    flex:1;text-align:center;padding:10px 6px;cursor:pointer;
    font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
    font-size:13.5px;line-height:1;color:var(--grey);transition:background .15s,color .15s;
}
.speriod-tabs label+label{border-left:1px solid var(--line-d);}
#sp-am:checked ~ .speriod-tabs label[for="sp-am"],
#sp-pm:checked ~ .speriod-tabs label[for="sp-pm"]{background:#fff;color:var(--ink);}
#sp-am:checked ~ .sched-days li.sp-pm{display:none;}
#sp-pm:checked ~ .sched-days li.sp-am{display:none;}
.sched-empty{color:var(--grey);font-size:14.5px;padding:14px 2px;}

/* icone sole/luna nelle fasce orarie */
.speriod-tabs label{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.speriod-tabs label svg{width:15px;height:15px;flex:0 0 auto;}

/* "Non so ancora": X nel pulsante, azzera le scelte sopra */
.pick-x{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--red);font-weight:800;font-size:15px;line-height:1;pointer-events:none;}

/* ---- Galleria sala attrezzi (foto del cliente, verticali 3:4) ---- */
.salagal{margin-top:46px;}
.salagal .kicker{margin-bottom:6px;}
.salagal-title{
    font-family:var(--fd);font-weight:700;text-transform:uppercase;
    font-size:clamp(26px,5.4vw,34px);line-height:1;letter-spacing:.005em;
    margin:0 0 18px;color:var(--txt);
}
.salagal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.salagal-grid img{
    width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
    border-radius:12px;border:1px solid var(--line-d);
}
@media(max-width:899px){
    .salagal{margin-top:34px;}
    .salagal-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}

@media(min-width:900px){
    /* il container di #mondi e' una griglia rail|worlds: la galleria va a tutta larghezza */
    .salagal{grid-column:1 / -1;grid-row:2;margin-top:56px;}
    .worlds-close{grid-row:3;}
    .salagal-grid{gap:18px;}
}

/* la foto dello staff vive nella card "La nostra storia" */
.mission-photo{margin:22px 0 0;}
.mission-photo img{
    /* niente crop: e' una foto di gruppo, nessuno deve restare tagliato fuori */
    width:100%;height:auto;display:block;
    border-radius:12px;border:1px solid var(--line-d);
}
.mission-photo figcaption{
    margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--grey-2);
}
@media(min-width:900px){
    .worlds-close{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;column-gap:48px;}
    .mission-photo{margin:0;}
}

/* ---- "il cuore pulsante": batte, con la traccia dell'elettrocardiogramma ---- */
.hero h1 em.beat{
    position:relative;display:inline-block;
    transform-origin:50% 62%;
    animation:joyBeat 2.4s ease-in-out infinite;
}
@keyframes joyBeat{
    0%,100%{transform:scale(1);}
    5%{transform:scale(1.055);}
    11%{transform:scale(1);}
    17%{transform:scale(1.032);}
    25%{transform:scale(1);}
}
.hero h1 em.beat .ecg{
    position:absolute;left:0;right:0;bottom:-.28em;
    width:100%;height:.5em;overflow:visible;pointer-events:none;
}
.hero h1 em.beat .ecg path{
    fill:none;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}
.ecg .ecg-base{stroke:rgba(255,58,66,.26);stroke-width:2;}
.ecg .ecg-run{
    stroke:var(--red-hi);stroke-width:2.6;
    stroke-dasharray:52 470;stroke-dashoffset:52;
    filter:drop-shadow(0 0 6px rgba(255,58,66,.8));
    animation:joyEcg 2.4s linear infinite;
}
@keyframes joyEcg{to{stroke-dashoffset:-470;}}
@media (prefers-reduced-motion: reduce){
    .hero h1 em.beat{animation:none;}
    .ecg .ecg-run{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.85;}
}

/* i render di QA (?noanim=1) devono congelare anche battito e tracciato */
.noanim .hero h1 em.beat{animation:none;}
.noanim .ecg .ecg-run{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}

/* =======================================================================
   ▓▓▓  SFONDO ANIMATO — BLOCCO DA COPIARE NEL SITO VERO  ▓▓▓
   Va dentro <div class="hero-bg"> al posto della foto.
   Solo HTML+CSS. Animati solo transform/opacity. 9 elementi animati.
   Blur STATICO sul contenitore di ogni cubo (mai animato).
   ======================================================================= */



/* --- scena: fondo nero con bordi appena piu' aperti, centro il piu' scuro --- */
.jf-scene{
  position:absolute; inset:0;
  background:
    radial-gradient(105% 82% at 50% 52%, #0b0a0d 0%, #0C0B0D 44%, #17151a 100%);
}

/* --- contenitore cubo: posizione + SFOCATURA FISSA (mai animata).
       Il blur sta QUI, sopra la prospettiva, cosi' preserve-3d resta intatto
       (filter su un elemento ne appiattisce il transform-style: mai metterlo
       sul .jf-box). Raggi tenuti bassi (9-16px) proprio per non pesare. --- */
.jf-cube{
  position:absolute;
  width:var(--s); height:var(--s);
  filter:blur(var(--b));
  opacity:var(--o,1);
}

/* --- stage: prospettiva + fluttuazione lenta (transform) --- */
.jf-stage{
  position:absolute; inset:0;
  perspective:var(--p,800px);
  perspective-origin:var(--po,50% 50%);
  will-change:transform;
}

/* --- il cubo vero: volume 3D che ruota (transform) --- */
.jf-box{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

/* --- le 6 facce: nessuna animazione, solo volume.
       ATTENZIONE ai valori: queste facce stanno SOTTO .hero-scrim (nero .6/.35/.75),
       quindi sono volutamente piu' chiare del grafite di palette: a schermo,
       dopo lo scrim, atterrano esattamente su #1b1920 / #17151a. --- */
.jf-f{
  position:absolute; left:0; top:0;
  width:var(--s); height:var(--s);
  border-radius:3px;
}
.jf-f--fr{transform:translateZ(var(--h));
  background:linear-gradient(158deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.01) 62%),rgba(43,39,52,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.19), inset 0 0 40px rgba(12,11,13,.5);}
.jf-f--bk{transform:rotateY(180deg) translateZ(var(--h));
  background:linear-gradient(200deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 58%),rgba(34,31,41,.93);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10), inset 0 0 40px rgba(12,11,13,.55);}
.jf-f--rt{transform:rotateY(90deg) translateZ(var(--h));
  background:linear-gradient(196deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 64%),rgba(37,34,44,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), inset 0 0 40px rgba(12,11,13,.5);}
.jf-f--lf{transform:rotateY(-90deg) translateZ(var(--h));
  background:linear-gradient(20deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 60%),rgba(29,26,35,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.09), inset 0 0 40px rgba(12,11,13,.55);}
.jf-f--tp{transform:rotateX(90deg) translateZ(var(--h));
  background:linear-gradient(142deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.03) 66%),rgba(54,50,65,.95);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.27), inset 0 0 46px rgba(12,11,13,.34);}
.jf-f--bt{transform:rotateX(-90deg) translateZ(var(--h));
  background:linear-gradient(340deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%),rgba(23,21,27,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07), inset 0 0 40px rgba(12,11,13,.55);}

/* --- spigoli appena illuminati di rosso Joy (statici, sfumano nel blur) --- */
.jf-f--edgeT::after,
.jf-f--edgeL::after,
.jf-f--edgeR::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
}
.jf-f--edgeT::after{background:linear-gradient(180deg,rgba(255,58,66,.62) 0%,rgba(227,30,36,.20) 12%,rgba(227,30,36,0) 34%);}
.jf-f--edgeL::after{background:linear-gradient(90deg,rgba(227,30,36,.52) 0%,rgba(227,30,36,.16) 13%,rgba(227,30,36,0) 36%);}
.jf-f--edgeR::after{background:linear-gradient(270deg,rgba(255,58,66,.50) 0%,rgba(227,30,36,.15) 13%,rgba(227,30,36,0) 36%);}

/* --- alone rosso molto sfocato, in basso a sinistra: unica deriva lenta --- */
.jf-glow{
  position:absolute;
  width:78vmax; height:78vmax;
  left:-30vmax; bottom:-40vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(227,30,36,.34) 0%, rgba(227,30,36,.13) 38%, rgba(227,30,36,0) 68%);
  filter:blur(46px);
  will-change:transform;
  animation:jf-drift 45s ease-in-out infinite;
}

/* --- foschia grafite statica in alto a destra (profondita', costo zero) --- */
.jf-haze{
  position:absolute;
  width:70vmax; height:70vmax;
  right:-26vmax; top:-32vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(44,40,53,.85) 0%, rgba(27,25,32,.40) 45%, rgba(12,11,13,0) 72%);
  filter:blur(30px);
}

/* --- protezione del centro: il titolo passa sempre su nero pieno --- */
.jf-guard{
  position:absolute; inset:0;
  background:radial-gradient(50% 40% at 50% 48%,
    rgba(12,11,13,.34) 0%, rgba(12,11,13,.20) 45%, rgba(12,11,13,.06) 78%, rgba(12,11,13,0) 100%);
}
/* --- vignettatura finale --- */
.jf-vig{
  position:absolute; inset:0;
  background:radial-gradient(135% 110% at 50% 50%,
    rgba(12,11,13,0) 62%, rgba(12,11,13,.18) 100%);
}

/* ---------------- i 4 cubi: taglia, sfocatura, posizione, tempi --------------- */
.jf-c1{--s:360px; --h:180px; --b:15px; --p:950px; --po:34% 30%; --o:.85;
       left:-2%; top:-4%;}
.jf-c2{--s:380px; --h:190px; --b:16px; --p:1150px; --po:68% 66%; --o:.68;
       right:-2%; bottom:-6%;}
.jf-c3{--s:250px; --h:125px; --b:11px; --p:720px; --po:40% 62%; --o:.85;
       left:5%; bottom:-2%;}
.jf-c4{--s:230px; --h:115px; --b:9px; --p:640px; --po:60% 38%; --o:.8;
       right:8%; top:6%;}

.jf-c1 .jf-stage{animation:jf-float1 38s ease-in-out -6s infinite}
.jf-c2 .jf-stage{animation:jf-float2 45s ease-in-out -19s infinite}
.jf-c3 .jf-stage{animation:jf-float3 27s ease-in-out -9s infinite}
.jf-c4 .jf-stage{animation:jf-float4 33s ease-in-out -3s infinite}

.jf-c1 .jf-box{animation:jf-spin1 44s linear -11s infinite}
.jf-c2 .jf-box{animation:jf-spin2 40s linear -25s infinite}
.jf-c3 .jf-box{animation:jf-spin3 31s linear -7s infinite}
.jf-c4 .jf-box{animation:jf-spin4 24s linear -14s infinite}

/* ---------------- keyframes: giri interi = loop perfetto ---------------- */
@keyframes jf-spin1{  /* asse inclinato: non e' mai frontale, si vedono sempre 3 facce */
  from{transform:rotateZ(11deg) rotateX(-24deg) rotateY(0deg)}
  to  {transform:rotateZ(11deg) rotateX(-24deg) rotateY(360deg)}
}
@keyframes jf-spin2{
  from{transform:rotateZ(-9deg) rotateY(-28deg) rotateX(0deg)}
  to  {transform:rotateZ(-9deg) rotateY(-28deg) rotateX(-360deg)}
}
@keyframes jf-spin3{
  from{transform:rotateZ(-14deg) rotateX(19deg) rotateY(0deg)}
  to  {transform:rotateZ(-14deg) rotateX(19deg) rotateY(360deg)}
}
@keyframes jf-spin4{
  from{transform:rotateZ(20deg) rotateX(-17deg) rotateY(0deg)}
  to  {transform:rotateZ(20deg) rotateX(-17deg) rotateY(-360deg)}
}
/* fluttuazioni: 0% e 100% identici + ease-in-out = nessuno scatto al loop */
@keyframes jf-float1{
  0%{transform:translate3d(0,0,0)}
  29%{transform:translate3d(5%,-7%,0)}
  63%{transform:translate3d(-4%,3%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes jf-float2{
  0%{transform:translate3d(0,0,0)}
  34%{transform:translate3d(-4%,4%,0)}
  70%{transform:translate3d(3%,-5%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes jf-float3{
  0%{transform:translate3d(0,0,0)}
  26%{transform:translate3d(6%,4%,0)}
  58%{transform:translate3d(-5%,-6%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes jf-float4{
  0%{transform:translate3d(0,0,0)}
  31%{transform:translate3d(-7%,5%,0)}
  67%{transform:translate3d(5%,-4%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes jf-drift{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(4%,-3%,0)}
  68%{transform:translate3d(-3%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---------------- mobile: meno carico, stessa composizione ----------------
   un cubo in meno, volumi piu' piccoli, blur piu' corti: 7 elementi animati. */
@media (max-width:640px){
  .jf-c4{display:none}                 /* un cubo in meno: 7 elementi animati */
  .jf-c1{--s:280px; --h:140px; --b:11px; left:-10%; top:-5%}
  .jf-c2{--s:300px; --h:150px; --b:12px; right:-11%; bottom:-7%}
  .jf-c3{--s:175px; --h:87.5px; --b:8px; left:2%; bottom:-3%}
  .jf-glow{filter:blur(34px)}
  .jf-haze{filter:blur(24px)}
}

/* ---------------- accessibilita': tutto fermo, ma composto ---------------- */
@media (prefers-reduced-motion:reduce){
  .jf-stage,.jf-box,.jf-glow{animation:none !important}
  .jf-c1 .jf-stage{transform:translate3d(3%,-4%,0)}
  .jf-c2 .jf-stage{transform:translate3d(-3%,3%,0)}
  .jf-c3 .jf-stage{transform:translate3d(4%,2%,0)}
  .jf-c4 .jf-stage{transform:translate3d(-4%,3%,0)}
  .jf-c1 .jf-box{transform:rotateZ(11deg) rotateX(-24deg) rotateY(38deg)}
  .jf-c2 .jf-box{transform:rotateZ(-9deg) rotateY(-28deg) rotateX(-42deg)}
  .jf-c3 .jf-box{transform:rotateZ(-14deg) rotateX(19deg) rotateY(-34deg)}
  .jf-c4 .jf-box{transform:rotateZ(20deg) rotateX(-17deg) rotateY(46deg)}
}

/* =======================================================================
/* la hero-bg ora ospita la scena animata */
.hero-bg{overflow:hidden;background:#0C0B0D;}
/* la foto resta solo per le varianti di campagna ?v=palestra|hyrox|pilates */
.hero-bg img{display:none;}
.hero[data-v="palestra"] .hero-bg img,
.hero[data-v="hyrox"] .hero-bg img,
.hero[data-v="pilates"] .hero-bg img{display:block;}
.hero[data-v="palestra"] .jf-scene,
.hero[data-v="hyrox"] .jf-scene,
.hero[data-v="pilates"] .jf-scene{display:none;}
/* render di QA: scena ferma */
.noanim .jf-stage,.noanim .jf-box,.noanim .jf-glow{animation:none;}

/* card 04 box funzionale: inquadratura sul movimento, non sul corpo */
.worlds .world:nth-child(4) .world-photo img{object-position:center top;}

/* la card storia ora e' una sezione a se', sopra i numeri */
.storia{padding-bottom:0;}
.storia .worlds-close{margin-top:0;}
/* inquadrature delle nuove foto card (sorgenti verticali, box 16:10) */
.worlds .world:nth-child(2) .world-photo img{object-position:center 62%;}
.worlds .world:nth-child(3) .world-photo img{object-position:center 53%;}
.worlds .world:nth-child(4) .world-photo img{object-position:center 48%;}

/* "senza impegno": la rassicurazione deve saltare all'occhio nel form */
.no-bind{
    margin:12px 0 16px;padding:11px 14px;
    background:rgba(227,30,36,.07);
    border:1px solid rgba(227,30,36,.28);border-radius:10px;
    font-size:14.5px;line-height:1.45;color:var(--ink);text-align:center;
}
.no-bind strong{
    color:var(--red);font-weight:800;
    text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}

/* ---- indicatori: quadratino (piu' scelte) sulle attivita', tondo sulle due esclusive ---- */
.pick label{position:relative;padding-left:44px;}
.pick label::before{
    content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;box-sizing:border-box;
    border:2px solid #C9C3B8;border-radius:6px;background:#fff;
    transition:background .15s ease,border-color .15s ease;
}
.pick input:checked + label::before{background:var(--red);border-color:var(--red);}
/* spunta del quadratino */
.pick input:checked + label::after{
    content:"";position:absolute;left:21px;top:calc(50% - 1px);
    width:6px;height:11px;box-sizing:border-box;
    border:solid #fff;border-width:0 2.5px 2.5px 0;
    transform:translateY(-50%) rotate(45deg);
}
/* le due scelte esclusive (Tutto il fitness / Non so ancora): tondo da radio */
.pick--full label::before{border-radius:50%;}
.pick--full input:checked + label::after{
    left:19px;top:50%;width:10px;height:10px;
    border:0;border-radius:50%;background:#fff;
    transform:translateY(-50%);
}
@media(max-width:899px){
    .pick label{padding-left:38px;}
    .pick label::before{left:11px;width:18px;height:18px;}
    .pick input:checked + label::after{left:17px;width:5px;height:10px;}
    .pick--full input:checked + label::after{left:15px;width:9px;height:9px;}
}

/* tutte le scelte alte uguali, comunque vada a capo il testo */
.pick-grid{grid-auto-rows:1fr;}
.pick label{height:100%;}

/* la rassicurazione va su due righe: la seconda e' quella che deve saltare all'occhio */
.no-bind strong{display:block;margin-top:4px;}

/* pulsante preferenze cookie: su mobile sopra la sticky bar, che e' alta ~76px */
@media(max-width:899px){:root{--cookie-fab-bottom:88px;}}

/* Pulsante preferenze cookie: sempre raggiungibile dopo la scelta.
   Sta qui e non nel JS perche' la CSP del sito blocca gli stili inline. */
.cookie-fab{
    position:fixed;left:16px;bottom:var(--cookie-fab-bottom,16px);z-index:55;
    width:48px;height:48px;border-radius:50%;padding:0;cursor:pointer;
    display:none;align-items:center;justify-content:center;
    background:#141311;color:#F3EFE4;border:1px solid rgba(255,255,255,.28);
    box-shadow:0 10px 24px rgba(0,0,0,.4);transition:transform .15s ease;
}
.cookie-fab.is-visible{display:flex;}
.cookie-fab:hover{transform:translateY(-2px);}
.cookie-fab svg{width:26px;height:26px;}

/* stava come attributo style= nell'HTML, bloccato dalla CSP */
.btn-micro--sched{color:var(--grey);text-align:left;}