/* ═══════════════════════════════════════════════════════════════════════════
   Indoor Cycling Italia — foglio di stile condiviso.

   Perche' esiste: le pagine prodotto sono sei. Tenere la grafica dentro ogni
   file voleva dire sei copie da riallineare a mano a ogni ritocco, ed e' cosi'
   che un sito comincia a sembrare fatto a pezzi. Qui sta la lingua comune;
   ogni pagina aggiunge in <style> solo cio' che e' davvero suo.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Oswald'; src:url('fonts/oswald-latin.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/roboto-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  --black:#0a0a0a; --dark:#111; --gray:#1a1a1a;
  --gold:#FFB800; --gold-light:#FFD666; --gold-deep:#E09E00; --gold-sign:#FFC53D;
  --gold-line:rgba(255,184,0,.34); --gold-trace:rgba(255,184,0,.07);
  --line:#2a2a2e; --line-soft:#202024;
  --white:#fff; --text-gray:#b0b0b0; --text-dim:#8c8c8c;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{font-family:'Roboto',sans-serif;background:var(--black);color:var(--white);
  line-height:1.6;overflow-x:clip}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.055em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
a{text-decoration:none;color:inherit;transition:.3s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold-sign);outline-offset:3px;border-radius:2px}
img{max-width:100%}

/* ── Testata ─────────────────────────────────────────────────────────────── */
header{position:fixed;top:0;width:100%;
  background:linear-gradient(180deg,rgba(10,10,10,.93),rgba(10,10,10,.74));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 0 var(--gold-line),0 18px 40px -30px rgba(0,0,0,.9);
  z-index:1000;padding:1rem 5%;display:flex;justify-content:space-between;align-items:center}
/* Il marchio entra come sfondo di uno pseudo-elemento: cosi' compare in
   tutte le pagine senza toccare l'HTML di nessuna. */
.logo{font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:700;color:var(--white);
  display:inline-flex;align-items:center;gap:.55rem}
.logo::before{content:'';flex:0 0 auto;width:1.5em;height:1.5em;
  background:url('logo.svg') center/contain no-repeat}
.logo span{color:var(--gold)}
nav ul{display:flex;gap:2rem;list-style:none}
nav a{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  font-size:.9rem;letter-spacing:1px;position:relative}
nav a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
  background:var(--gold);transition:width .3s}
nav a:hover{color:var(--gold)} nav a:hover::after,nav a[aria-current]::after{width:100%}
nav a[aria-current]{color:var(--gold-sign)}
/* La porta dell'area classi. Si distingue dalle altre voci perche' non e'
   una pagina da leggere: e' un ingresso. Resta comunque un link normale, e
   senza CSS continua a funzionare come tutte le altre voci del menu. */
.voce-area a{border:1px solid var(--gold-line);border-radius:999px;
  padding:.45rem 1.05rem;color:var(--gold);transition:background .25s,color .25s}
.voce-area a::after{display:none}
.voce-area a:hover{background:var(--gold);color:var(--dark)}
.voce-area a[aria-current]{background:var(--gold);color:var(--dark)}
/* Il selettore di lingua. Resta un link vero a una pagina vera: se lo script
   non parte, cambia lingua lo stesso, semplicemente senza ricordarselo. */
.voce-lingua a{font-size:.8rem;letter-spacing:.14em;color:var(--text-dim);
  border:1px solid var(--line);border-radius:6px;padding:.3rem .55rem}
.voce-lingua a::after{display:none}
.voce-lingua a:hover{color:var(--gold);border-color:var(--gold-line)}

.riga-area{margin:2.5rem 0 0;text-align:center;color:var(--grey);font-size:.95rem}
.riga-area a{color:var(--gold);border-bottom:1px solid var(--gold-line);padding-bottom:1px}
.riga-area a:hover{border-bottom-color:var(--gold)}
.menu-toggle{display:none;background:none;border:none;color:var(--white);cursor:pointer;
  padding:.35rem;line-height:0}

/* Sottomenu dei Percorsi. Regola di sopravvivenza: la voce madre resta SEMPRE
   un link vero a percorsi.html. La tendina e' un di piu' del desktop, non
   l'unico modo per arrivarci: se non si apre, non si perde niente. */
.ha-figli{position:relative}
.sottomenu{list-style:none;display:block;position:absolute;top:100%;left:-1.1rem;
  min-width:16rem;padding:.5rem 0;margin-top:.9rem;
  background:rgba(14,14,16,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s}
.ha-figli:hover>.sottomenu,.ha-figli:focus-within>.sottomenu{
  opacity:1;visibility:visible;transform:none}
.sottomenu li{display:block}
.sottomenu a{display:block;padding:.62rem 1.1rem;font-size:.82rem;letter-spacing:.08em;
  color:#d6d6d6;white-space:nowrap}
.sottomenu a::after{display:none}
.sottomenu a:hover{background:rgba(255,184,0,.09);color:var(--gold-sign)}

/* ── Barra d'azione fissa ────────────────────────────────────────────────── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,.97));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--gold-line);
  padding:.75rem 5%;display:flex;align-items:center;justify-content:center;gap:1.4rem;
  flex-wrap:wrap;transform:translateY(110%);transition:transform .35s cubic-bezier(.16,.8,.3,1)}
.barra.su{transform:none}
.barra .info{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--text-gray)}
.barra .info b{color:var(--gold-sign)}

/* ── Impianto ────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto}
section{padding:5rem 5%;position:relative}
.occhiello{display:inline-flex;align-items:center;gap:.85rem;color:var(--gold-sign);
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.32em;font-size:.68rem;margin-bottom:1rem}
.occhiello::before{content:'';width:26px;height:1px;background:var(--gold-line)}
.titolo{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.9rem}
.guida{color:var(--text-gray);max-width:58ch;line-height:1.7}

/* ── Apertura ────────────────────────────────────────────────────────────── */
.apertura{min-height:82svh;display:flex;align-items:center;padding:8rem 5% 4rem;
  background-size:cover;background-position:center 40%}
.apertura-in{max-width:var(--wrap);margin:0 auto;width:100%}
.apertura h1{font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1.02;
  margin-bottom:1.1rem;max-width:17ch;text-shadow:0 2px 26px rgba(0,0,0,.8)}
.apertura h1 em{font-style:normal;
  background:linear-gradient(175deg,#FFE7A6 0%,var(--gold-light) 38%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .apertura h1 em{color:var(--gold);background:none}
}
.apertura .sotto{color:#d4d4d4;max-width:46ch;font-size:clamp(1rem,1.5vw,1.18rem);
  margin-bottom:1.9rem;text-shadow:0 1px 12px rgba(0,0,0,.85)}

/* ── Pulsanti ────────────────────────────────────────────────────────────── */
.azioni{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:1rem 2.4rem;font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;border:1.5px solid var(--gold);
  border-radius:3px;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.btn-primary{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  color:#17110a;border-color:var(--gold-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 26px -14px rgba(255,184,0,.55)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--gold-sign)}
.btn-outline:hover{background:var(--gold);color:var(--black);transform:translateY(-2px)}
.btn-piccolo{padding:.68rem 1.5rem;font-size:.82rem}

/* ── Riga di autorita' ───────────────────────────────────────────────────── */
.autorita{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:1.6rem 5%;background:var(--dark)}
.autorita-in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.4rem 0;row-gap:.5rem}
.autorita span{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.92rem;color:#e2e2e2;padding:0 1.35rem;
  position:relative;white-space:nowrap}
.autorita span+span::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:1.05em;background:rgba(255,255,255,.2)}

/* ── Due colonne: per chi si', per chi no ────────────────────────────────── */
.duefacce{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
.faccia{background:linear-gradient(180deg,#131315,#0e0e10);border:1px solid var(--line);
  border-radius:10px;padding:1.7rem 1.6rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 34px -22px rgba(0,0,0,.9)}
.faccia h3{font-size:1.05rem;margin-bottom:1rem}
.faccia.si h3{color:var(--gold-sign)}
.faccia.no h3{color:#9a9aa2}
.faccia ul{list-style:none}
.faccia li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);color:#c4c4c4;
  font-size:.93rem;display:flex;gap:.75rem;align-items:baseline}
.faccia li:last-child{border-bottom:0}
.faccia li::before{content:'';flex:0 0 10px;height:1px;background:#5a5a60;transform:translateY(-4px)}
.faccia.si li::before{background:var(--gold-line)}

/* ── Riquadri numerati ───────────────────────────────────────────────────── */
.pezzi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;margin-top:2rem}
.pezzo{background:linear-gradient(180deg,#131315,#0e0e10);border:1px solid var(--line);
  border-radius:10px;padding:1.6rem 1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 34px -22px rgba(0,0,0,.9);
  transition:transform .3s,border-color .3s}
.pezzo:hover{transform:translateY(-4px);border-color:#3a3a40}
.pezzo .n{display:block;font-family:'Oswald',sans-serif;font-weight:200;font-size:2.4rem;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,184,0,.5);margin-bottom:1rem}
.pezzo h3{font-size:1.1rem;margin-bottom:.55rem}
.pezzo p{color:var(--text-gray);font-size:.9rem;line-height:1.6}
.pezzo .taglia{display:inline-block;margin-top:.9rem;font-family:'Oswald',sans-serif;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-sign)}

/* ── Fascia scura con tappe ──────────────────────────────────────────────── */
.sessioni{background:radial-gradient(70rem 26rem at 50% 0%,rgba(255,184,0,.07),transparent 70%),var(--dark);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tappe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;margin-top:2rem;border-left:1px solid var(--line-soft)}
.tappa{padding:1.1rem 1.3rem;border-right:1px solid var(--line-soft);border-top:1px solid var(--line-soft)}
.tappa b{display:block;font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.22em;
  color:var(--gold-sign);text-transform:uppercase;margin-bottom:.4rem}
.tappa span{color:var(--text-gray);font-size:.9rem}

/* ── Testo accanto a un ritratto ─────────────────────────────────────────── */
.intro-foto{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:3.2rem;align-items:center}
.ritratto{margin:0 0 0 auto;max-width:380px;position:relative;
  border-radius:10px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(0,0,0,.5),0 30px 60px -30px rgba(0,0,0,.95)}
.ritratto img{display:block;width:100%;height:auto}
.ritratto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(10,10,10,.55) 100%)}

/* ── Prezzo ──────────────────────────────────────────────────────────────── */
.prezzo-box{background:linear-gradient(180deg,#17150f,#0f0e0c);border:1px solid var(--gold-line);
  border-radius:12px;padding:2.2rem 2rem;margin-top:2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 50px -28px rgba(0,0,0,.95)}
.prezzo-cifra{font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--gold-sign);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prezzo-cifra small{font-size:.34em;letter-spacing:.1em;color:var(--text-dim);
  display:block;margin-top:.55rem;font-weight:400}
.prezzo-righe{margin-top:1.5rem;border-top:1px solid var(--line-soft);padding-top:1.2rem}
.prezzo-righe li{list-style:none;padding:.5rem 0;color:#c4c4c4;font-size:.93rem;
  display:flex;gap:.75rem;align-items:baseline;border-bottom:1px solid var(--line-soft)}
.prezzo-righe li:last-child{border-bottom:0}
.prezzo-righe li::before{content:'';flex:0 0 10px;height:1px;background:var(--gold-line);
  transform:translateY(-4px)}
.prezzo-nota{margin-top:1.2rem;color:var(--text-dim);font-size:.85rem;line-height:1.6}

/* ── Domande ─────────────────────────────────────────────────────────────── */
.domande{margin-top:2rem;max-width:78ch}
details{border-bottom:1px solid var(--line-soft)}
summary{list-style:none;cursor:pointer;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-family:'Oswald',sans-serif;font-size:1rem;letter-spacing:.02em;color:var(--white)}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:.3rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{color:var(--text-gray);font-size:.94rem;padding:0 0 1.1rem;max-width:66ch;line-height:1.7}

/* ── Chiusura ────────────────────────────────────────────────────────────── */
.chiusura{text-align:center;
  background:radial-gradient(70rem 26rem at 50% 0%,rgba(255,184,0,.09),transparent 70%),var(--black);
  border-top:1px solid var(--gold-line)}
.chiusura h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:1rem}
.chiusura .guida{margin:0 auto 1.8rem}
.chiusura .azioni{justify-content:center}

/* ── Modulo di contatto ──────────────────────────────────────────────────── */
.modulo{max-width:600px;margin:0 auto;background:var(--black);padding:3rem;
  border-radius:10px;border:1px solid var(--line)}
.campo{margin-bottom:1.5rem}
.campo label{display:block;margin-bottom:.45rem;color:#cfcfcf;font-family:'Oswald',sans-serif;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.16em}
.campo input,.campo select,.campo textarea{width:100%;padding:.9rem 1rem;background:#0d0d0f;
  border:1px solid #4a4a52;color:var(--white);border-radius:5px;font-family:'Roboto',sans-serif;
  /* NON scendere sotto 1rem: sotto i 16px Safari su iPhone ingrandisce la
     pagina a ogni campo toccato e il modulo finisce fuori schermo. */
  font-size:1rem;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.campo input::placeholder,.campo textarea::placeholder{color:#6b6b73}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--gold-sign);box-shadow:0 0 0 3px rgba(255,184,0,.22)}
.consenso{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;
  font-size:.9rem;color:var(--text-gray);line-height:1.5}
.consenso input{width:auto;margin-top:.2rem;flex-shrink:0;accent-color:var(--gold)}
.consenso a{color:var(--gold);text-decoration:underline}
/* Trappola anti-spam: invisibile agli umani, i bot la compilano. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito{display:none;padding:1.25rem;border-radius:5px;margin-top:1.5rem;text-align:center;
  font-size:.95rem;line-height:1.6}
.esito.ok{display:block;background:rgba(255,184,0,.16);border:1px solid var(--gold);color:var(--gold-sign)}
.esito.ko{display:block;background:rgba(220,70,70,.14);border:1px solid #c0504a;color:#f0a9a4}

/* ── Avviso lavori in corso ──────────────────────────────────────────────── */
.cantiere{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1rem;
  border:1px solid var(--gold-line);border-radius:100px;background:rgba(255,184,0,.07);
  font-family:'Oswald',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-sign);margin-bottom:1.2rem}
.cantiere::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(255,184,0,.6);animation:battito 2.4s infinite}
@keyframes battito{
  0%{box-shadow:0 0 0 0 rgba(255,184,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,184,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,184,0,0)}
}

footer{background:var(--black);border-top:2px solid var(--gray);padding:2.4rem 5% 6rem;
  text-align:center;color:var(--text-gray);font-size:.85rem}
footer a{color:var(--gold-sign)}

/* Comparsa allo scroll — mai lasciare contenuto invisibile senza JS */
.js [data-rivela]{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1)}
.js [data-rivela].vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-rivela]{opacity:1;transform:none}}

@media (max-width:900px){
  .menu-toggle{display:block}
  /* Il menu e' figlio di un'intestazione fissa: quello che esce dal fondo
     NON si raggiunge scorrendo la pagina, perche' l'intestazione non scorre.
     Con sette voci piu' i tre percorsi rientrati, su un telefono basso
     (iPhone SE, o qualunque telefono girato) l'ultima voce finisce fuori.
     Quindi: passo fra le voci piu' stretto, e il menu scorre per conto suo. */
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);
    flex-direction:column;gap:1.1rem;padding:1.5rem 2rem 2rem;
    max-height:calc(100vh - 68px);max-height:calc(100svh - 68px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-bottom:1px solid var(--gold-line)}
  nav ul.active{display:flex}
  /* Sul telefono niente tendina: i tre percorsi restano sempre in elenco,
     rientrati sotto la voce madre. Un menu che si apre al passaggio del
     mouse su un dispositivo senza mouse e' un menu che non si apre. */
  .voce-area{margin-top:.6rem;padding-top:1rem;border-top:1px solid var(--gold-line)}
  .voce-area a{display:inline-block;border:0;border-radius:0;padding:0}
  .voce-area a:hover{background:none;color:var(--gold)}
  .voce-lingua a{display:inline-block;padding:.25rem .5rem}
  .sottomenu{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:.6rem 0 .2rem;padding:0 0 0 1rem;background:none;border:0;
    border-left:1px solid var(--gold-line);border-radius:0;box-shadow:none}
  .sottomenu a{padding:.5rem 0}
  .sottomenu a:hover{background:none}
  .duefacce{grid-template-columns:1fr}
  .tappe{grid-template-columns:1fr;border-left:0}
  .tappa{border-right:0}
  .intro-foto{grid-template-columns:1fr;gap:2rem}
  .autorita span{padding:0 .8rem;font-size:.8rem}
  .autorita span+span::before{display:none}
  .apertura{min-height:auto;padding:7rem 5% 3rem}
  .barra{gap:.7rem;padding:.7rem 4%}
  .barra .info{font-size:.7rem}
  .modulo{padding:2rem 1.4rem}
  section{padding:3.6rem 5%}
}
/* consensi facoltativi del modulo (newsletter, misurazione): sotto quello obbligatorio, un filo piu' piccoli */
.consenso.facoltativo{margin-top:-.6rem;margin-bottom:1.1rem;font-size:.92em}
.consenso[hidden]{display:none}