/* ==========================================================================
   Power Up Dance & Fitness — foglio di stile
   Pensato prima per il telefono, poi allargato per il computer.
   ========================================================================== */

:root{
  --nero:#111111;
  --nero-morbido:#1d1d1d;
  --fondo-scuro:#000000;
  --panna:#faf6ef;
  --panna-scura:#efe7da;
  --grigio:#6b6459;
  --oro:#c9a227;
  --oro-scuro:#a8851b;
  --ballo:#2e9fbc;
  --fitness:#5b6be8;
  --bambini:#e8c317;
  --agonismo:#8c6a2f;
  --whatsapp:#25d366;
  --whatsapp-scuro:#1da851;
  --raggio:14px;
  --ombra:0 6px 24px rgba(17,17,17,.10);
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

/* le ancore non devono finire sotto la barra in alto */
section[id],details[id]{scroll-margin-top:78px;}

body{
  margin:0;
  background:var(--panna);
  color:var(--nero);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  padding-bottom:84px; /* spazio per la barra fissa in basso */
}

img{max-width:100%;height:auto;display:block;}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0;}

a{color:inherit;}

/* Link di servizio per chi naviga da tastiera */
.salta{
  position:absolute;left:-9999px;top:0;
  background:var(--nero);color:var(--panna);
  padding:12px 18px;z-index:100;
}
.salta:focus{left:8px;top:8px;}

/* ---------- Barra in alto ---------- */
.barra{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  background:#000;
  border-bottom:1px solid rgba(201,162,39,.35);
}
.barra-logo img{height:42px;width:auto;}
.barra-nav{display:flex;gap:14px;flex-wrap:wrap;}
.barra-nav a{
  color:var(--panna);
  text-decoration:none;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 2px;
}
.barra-nav a:hover,.barra-nav a:focus{color:var(--oro);}

/* ---------- Apertura ---------- */
.apertura{
  background:var(--fondo-scuro);
  color:var(--panna);
  text-align:center;
  padding:44px 20px 52px;
}
.apertura-dentro{max-width:660px;margin:0 auto;}
.apertura-logo{width:210px;margin:0 auto 22px;}
.occhiello{
  margin:0 0 10px;
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);
}
.apertura h1{font-size:44px;margin:0 0 18px;}
.apertura-testo{margin:0 0 26px;font-size:19px;color:#e7e0d5;}
.apertura-testo strong{color:var(--panna);}
.apertura-bottoni{display:flex;flex-direction:column;gap:12px;}
.apertura-nota{
  margin:18px 0 0;font-size:15px;color:#a9a196;font-style:italic;
}

/* ---------- Bottoni ---------- */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;
  padding:14px 26px;
  border:0;border-radius:var(--raggio);
  font-family:var(--sans);font-size:18px;font-weight:600;
  text-decoration:none;text-align:center;
  cursor:pointer;
  transition:transform .12s ease, background-color .18s ease;
}
.bottone:active{transform:scale(.98);}
.bottone-oro{background:var(--oro);color:var(--nero);}
.bottone-oro:hover{background:var(--oro-scuro);}
.bottone-whatsapp{background:var(--whatsapp);color:#fff;}
.bottone-whatsapp:hover{background:var(--whatsapp-scuro);}
.bottone-scuro{background:var(--nero);color:var(--panna);}
.bottone-scuro:hover{background:var(--nero-morbido);}
.bottone-grande{width:100%;font-size:19px;}

.icona-wa{
  width:22px;height:22px;flex:0 0 22px;
  background-color:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;
  mask:var(--wa) center/contain no-repeat;
}
:root{
  --wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- Sezioni ---------- */
.sezione{padding:46px 18px;max-width:860px;margin:0 auto;}
.sezione h2{font-size:34px;margin:0 0 8px;}
.sezione-intro{margin:0 0 26px;color:var(--grigio);}
.sezione-chiara{background:var(--panna-scura);max-width:none;}
.sezione-chiara > *{max-width:860px;margin-left:auto;margin-right:auto;}
.sezione-scura{background:var(--fondo-scuro);color:var(--panna);max-width:none;}
.sezione-scura > *{max-width:860px;margin-left:auto;margin-right:auto;}
.sezione-scura .sezione-intro{color:#a9a196;}
.sezione-oro{background:linear-gradient(180deg,var(--panna) 0%,#f3e8cf 100%);max-width:none;}
.sezione-oro > *{max-width:560px;margin-left:auto;margin-right:auto;}

/* i titoli delle sezioni a tutta larghezza restano allineati al contenuto */
.sezione-chiara > h2,.sezione-scura > h2,.sezione-oro > h2{margin:0 auto 8px;}
.sezione-chiara > h3,.sezione-scura > h3{margin-left:auto;margin-right:auto;}

/* ---------- I tre mondi ---------- */
.mondi{display:grid;gap:14px;}
.mondo{
  position:relative;
  display:block;
  padding:22px 56px 22px 22px;
  border-radius:var(--raggio);
  text-decoration:none;color:#fff;
  box-shadow:var(--ombra);
}
.mondo-ballo{background:var(--ballo);}
.mondo-fitness{background:var(--fitness);}
.mondo-bambini{background:var(--bambini);color:var(--nero);}
.mondo-agonismo{background:var(--agonismo);}
.mondo-titolo{display:block;font-family:var(--serif);font-size:26px;margin-bottom:4px;}
.mondo-testo{display:block;font-size:16px;opacity:.92;}
.mondo-freccia{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:28px;
}

/* ---------- Fisarmoniche: famiglie di corsi ---------- */
.gruppo{
  background:#fff;
  border-radius:var(--raggio);
  box-shadow:var(--ombra);
  margin-bottom:14px;
  overflow:hidden;
}
.gruppo-testa{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;
  padding:16px 20px;
  cursor:pointer;
  list-style:none;
  color:#fff;
}
.gruppo-testa::-webkit-details-marker{display:none;}
.gruppo-nome{font-family:var(--serif);font-size:24px;}
.gruppo-conta{font-size:15px;opacity:.9;white-space:nowrap;}
.gruppo-testa::after{
  content:"+";
  font-size:26px;line-height:1;margin-left:6px;
}
.gruppo[open] > .gruppo-testa::after{content:"\2013";}
.gruppo-ballo{background:var(--ballo);}
.gruppo-fitness{background:var(--fitness);}
.gruppo-bambini{background:var(--bambini);color:var(--nero);}
.gruppo-agonismo{background:var(--agonismo);}
.gruppo-neutro{background:var(--nero);}
.gruppo-neutro .gruppo-nome{color:#fff;}
.gruppo-dentro{padding:8px 14px 16px;}

/* ---------- Fisarmoniche: singolo corso ---------- */
.corso{border-bottom:1px solid var(--panna-scura);}
.corso:last-child{border-bottom:0;}
.corso > summary{
  display:flex;flex-direction:column;gap:2px;
  min-height:60px;
  padding:14px 30px 14px 4px;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.corso > summary::-webkit-details-marker{display:none;}
.corso > summary::after{
  content:"";
  position:absolute;right:8px;top:50%;
  width:9px;height:9px;
  border-right:2px solid var(--grigio);
  border-bottom:2px solid var(--grigio);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
.corso[open] > summary::after{transform:translateY(-30%) rotate(-135deg);}
.corso-nome{font-family:var(--serif);font-size:21px;}
.corso-quando{font-size:15px;color:var(--grigio);}
.corso-dentro{padding:2px 4px 22px;}
.corso-descrizione{margin:0 0 14px;}
.corso-dati{list-style:none;margin:0 0 16px;padding:0;}
.corso-dati li{
  padding:8px 0;
  border-bottom:1px dashed var(--panna-scura);
  font-size:17px;
}
.corso-dati li:last-child{border-bottom:0;}
.corso-media{
  display:flex;align-items:center;justify-content:center;
  min-height:150px;
  margin:0 0 16px;
  border:2px dashed #cfc6b6;
  border-radius:var(--raggio);
  background:var(--panna);
}
.corso-media p{margin:0;color:#a49a88;font-size:15px;font-style:italic;}
.bottone-prenota{width:100%;}

/* ---------- Orari ---------- */
.locandine{display:grid;gap:16px;margin-bottom:26px;}
.locandina{
  display:block;text-decoration:none;
  background:#fff;border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;
}
.locandina img{width:100%;}
.locandina span{
  display:block;padding:12px 16px;
  font-size:16px;font-weight:600;
}
.giorno{margin-bottom:18px;}
.giorno h3{
  font-size:20px;margin:0 0 8px;
  color:var(--oro-scuro);
  border-bottom:2px solid var(--panna-scura);
  padding-bottom:6px;
}
.giorno ul{list-style:none;margin:0;padding:0;}
.giorno li{
  display:flex;flex-wrap:wrap;gap:4px 10px;
  padding:7px 0;font-size:17px;
  border-bottom:1px dashed var(--panna-scura);
}
.giorno li:last-child{border-bottom:0;}
.giorno li span{
  min-width:112px;font-variant-numeric:tabular-nums;color:var(--grigio);
}
.giorno li em{color:var(--grigio);font-size:15px;}

/* ---------- Chi siamo ---------- */
.chi-siamo{display:grid;gap:22px;}
.chi-siamo p{margin:0 0 14px;color:#ddd6ca;}
.chi-siamo .grande{font-size:21px;color:var(--panna);}
.chi-siamo strong{color:var(--oro);}
.chi-siamo-foto{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
  border:2px dashed #4a463f;border-radius:var(--raggio);
}
.chi-siamo-foto p{margin:0;color:#8a8377;font-style:italic;font-size:15px;}

/* ---------- Dove siamo ---------- */
.sedi{display:grid;gap:16px;}
.sede{
  background:#fff;border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:22px;
}
.sede h3{font-size:24px;margin:0 0 8px;}
.sede-indirizzo{margin:0 0 6px;font-size:17px;}
.sede-nota{margin:0 0 16px;color:var(--grigio);font-size:16px;}
.sede .bottone{width:100%;}

/* ---------- Modulo ---------- */
.modulo{display:flex;flex-direction:column;}
.modulo label,.etichetta-gruppo{
  font-weight:600;margin:16px 0 6px;font-size:17px;
}
.modulo input,.modulo select{
  width:100%;
  min-height:54px;
  padding:12px 14px;
  font-family:var(--sans);font-size:18px;
  color:var(--nero);background:#fff;
  border:2px solid #ddd3c0;border-radius:var(--raggio);
}
.modulo input:focus,.modulo select:focus{
  outline:3px solid rgba(201,162,39,.45);
  border-color:var(--oro);
}
.scelte{display:flex;gap:10px;margin-bottom:22px;}
.scelta{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;
  background:#fff;border:2px solid #ddd3c0;border-radius:var(--raggio);
  font-size:17px;cursor:pointer;
}
.scelta input{width:20px;height:20px;accent-color:var(--oro-scuro);}
.scelta:has(input:checked){border-color:var(--oro);background:#fffaeb;}
.modulo-nota{
  margin:12px 0 0;text-align:center;
  font-size:15px;color:var(--grigio);
}
.modulo-errore{
  margin:12px 0 0;padding:12px 14px;
  background:#fde8e8;border-radius:var(--raggio);
  color:#9b1c1c;font-size:16px;
}
.oppure{
  margin:26px 0 12px;text-align:center;
  color:var(--grigio);font-style:italic;
}

/* ---------- Piede ---------- */
.pie{
  background:var(--fondo-scuro);color:#a9a196;
  text-align:center;padding:38px 20px 34px;
}
.pie-logo{width:150px;margin:0 auto 18px;}
.pie p{margin:0 0 8px;font-size:16px;}
.pie strong{color:var(--panna);}
.pie a{color:var(--oro);text-decoration:none;}
.pie-piccolo{margin-top:16px;font-size:14px;}

/* ---------- Barra fissa in basso ---------- */
.barra-bassa{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#000;
  border-top:1px solid rgba(201,162,39,.35);
}
.bassa-prenota{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  min-height:54px;
  background:var(--oro);color:var(--nero);
  border-radius:var(--raggio);
  font-size:18px;font-weight:600;text-decoration:none;
}
.bassa-wa{
  flex:0 0 60px;
  display:flex;align-items:center;justify-content:center;
  min-height:54px;
  background:var(--whatsapp);color:#fff;
  border-radius:var(--raggio);
}
.bassa-wa .icona-wa{width:26px;height:26px;flex-basis:26px;}

/* ==========================================================================
   Computer e tablet
   ========================================================================== */
@media (min-width:760px){
  body{padding-bottom:0;}
  .barra{padding:12px 32px;}
  .barra-logo img{height:52px;}
  .barra-nav{gap:26px;}
  .apertura{padding:76px 24px 88px;}
  .apertura-logo{width:280px;}
  .apertura h1{font-size:64px;}
  .apertura-testo{font-size:21px;}
  .apertura-bottoni{flex-direction:row;justify-content:center;}
  .apertura-bottoni .bottone{min-width:250px;}
  .sezione{padding:70px 24px;}
  .sezione h2{font-size:44px;}
  .mondi{grid-template-columns:1fr 1fr;}
  .locandine{grid-template-columns:repeat(3,1fr);}
  .locandina img{aspect-ratio:4/5;object-fit:cover;object-position:top;}
  .chi-siamo{max-width:720px;}
  .sedi{grid-template-columns:1fr 1fr;}
  .bottone-prenota{width:auto;min-width:280px;}
  .barra-bassa{display:none;}
}

/* Chi preferisce meno movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .bottone,.corso > summary::after{transition:none;}
}

/* ---------- Due numeri di telefono, uno di fianco all'altro ---------- */
.telefoni{display:grid;gap:10px;}
.telefoni .bottone{width:100%;}

/* ---------- Social nel piede ---------- */
.pie-social{display:flex;gap:18px;justify-content:center;margin-top:14px;}
.pie-social a{
  color:var(--panna);text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.6);
  padding-bottom:2px;font-size:16px;
}
.pie-social a:hover{color:var(--oro);}

@media (min-width:760px){
  .telefoni{grid-template-columns:1fr 1fr;}
}

/* ---------- Chi chiamare, con il nome davanti ---------- */
.telefono{
  display:flex;flex-direction:column;gap:2px;
  padding:16px 20px;
  background:var(--nero);color:var(--panna);
  border-radius:var(--raggio);
  text-decoration:none;
  min-height:54px;
}
.telefono:hover{background:var(--nero-morbido);}
.telefono-chi{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);}
.telefono-numero{font-size:22px;font-weight:600;}
.telefono-cosa{font-size:15px;color:#a9a196;}