/* Suonala — identità decisa da Kaira: Nero Palco, Bianco Caldo, Lime Frequenza (il colore dell'azione,
   sempre con testo nero sopra), Blu Profondo secondario. Sora per i titoli, Inter per i testi. */
:root {
  --nero: #141414; --crema: #FFF8F0; --lime: #D7FF2F; --blu: #2638C4; --arancio: #D9480F;
  --tenue: #6B665E; --tenue-scuro: #A8A39A; --linea: #E8E0D4; --carta: #FFFFFF;
  --titoli: "Sora", system-ui, sans-serif; --testo: "Inter", system-ui, sans-serif;
  --r: 16px; --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--nero); font: 17px/1.55 var(--testo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titoli); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 8vw, 76px); font-weight: 700; }
h2 { font-size: clamp(28px, 4.6vw, 44px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section { padding: 72px 0; }
.kicker { font: 600 13px/1 var(--titoli); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); margin-bottom: 14px; display: block; }

/* testata */
.testata { position: sticky; top: 0; z-index: 10; background: rgba(255, 248, 240, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.testata .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.testata .logo { height: 30px; width: auto; }
.testata nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 15px; }
.testata nav a.link { text-decoration: none; color: var(--tenue); }
.testata nav a.link:hover { color: var(--nero); }
@media (max-width: 720px) { .testata nav a.link { display: none; } }

/* pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 16px/1 var(--titoli); text-decoration: none; border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.btn:active { transform: scale(.98); }
.btn-lime { background: var(--lime); color: var(--nero); }
.btn-lime:hover { box-shadow: 0 0 0 4px rgba(215, 255, 47, .35); }
.btn-nero { background: var(--nero); color: var(--crema); }
.btn-bordo { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn-piccolo { min-height: 40px; padding: 0 16px; font-size: 14px; }
.micro { font-size: 14px; color: var(--tenue); margin-top: 12px; }

/* hero scuro */
.scuro { background: var(--nero); color: var(--crema); }
.scuro .kicker, .scuro .micro { color: var(--tenue-scuro); }
.hero { padding: 64px 0 80px; overflow: hidden; }
.hero .wrap { display: grid; gap: 48px; grid-template-columns: 1.2fr 1fr; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero h1 .o { color: var(--lime); }
.hero .sotto { font-size: clamp(18px, 2.4vw, 22px); color: #E9E2D8; max-width: 34ch; }

/* il «pacchetto» disegnato nell'hero: i file veri che si ricevono */
.pacco { background: #1D1D1D; border: 1px solid #2C2C2C; border-radius: 22px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.pacco .riga { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #242424; margin-bottom: 8px; font-size: 15px; }
.pacco .riga:last-child { margin-bottom: 0; }
.pacco .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 12px var(--titoli); background: var(--lime); color: var(--nero); flex: none; }
.pacco .ico.b { background: var(--blu); color: var(--crema); }
.pacco .ico.c { background: var(--crema); color: var(--nero); }
.pacco small { display: block; color: var(--tenue-scuro); font-size: 13px; }
.pacco .testa-pacco { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 14px; font: 600 14px var(--titoli); color: var(--tenue-scuro); }
.pacco .pronto { color: var(--lime); }

/* griglie di schede */
.griglia { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .griglia { grid-template-columns: 1fr; } }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); padding: 24px; }
.scheda .n { font: 700 14px var(--titoli); color: var(--blu); margin-bottom: 10px; display: block; }
.scheda p { color: #3A3733; margin: 0; }
.scuro .scheda { background: #1D1D1D; border-color: #2C2C2C; }
.scuro .scheda p { color: #D8D1C6; }

/* il controllo automatico, mostrato */
.controllo .wrap { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .controllo .wrap { grid-template-columns: 1fr; } }
.tab-demo { background: #0E0E0E; border: 1px solid #2C2C2C; border-radius: var(--r); padding: 18px; font: 14px/1.35 ui-monospace, Menlo, monospace; color: #D8D1C6; overflow-x: auto; white-space: pre; }
.tab-demo .acc { color: var(--lime); }
.tab-demo .dub { color: #FF8A4C; font-weight: 700; }
.elenco-check { list-style: none; padding: 0; margin: 0 0 1em; }
.elenco-check li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.elenco-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--lime); }

/* prezzi */
.prezzi { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .prezzi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prezzi { grid-template-columns: 1fr; } }
.prezzo { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; }
.prezzo .cifra { font: 700 36px/1 var(--titoli); margin: 8px 0 6px; }
.prezzo .cifra small { font-size: 15px; font-weight: 500; color: var(--tenue); }
.prezzo p { color: var(--tenue); font-size: 15px; flex: 1; }
.prezzo.primo { background: var(--nero); color: var(--crema); border-color: var(--nero); }
.prezzo.primo p { color: var(--tenue-scuro); }
.garanzia { margin-top: 20px; padding: 18px 20px; border-radius: var(--r); background: #F1EADF; font-size: 16px; }

/* domande */
details { border-bottom: 1px solid var(--linea); padding: 18px 0; }
summary { cursor: pointer; font: 600 18px var(--titoli); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--blu); }
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 0; color: #3A3733; }

/* modulo lista d'attesa */
.attesa-box { max-width: 560px; }
.campo { display: flex; gap: 10px; flex-wrap: wrap; }
.campo input[type=email] { flex: 1 1 240px; min-height: 52px; border-radius: 999px; border: 1.5px solid #3A3A3A; background: #1D1D1D; color: var(--crema); padding: 0 20px; font: 16px var(--testo); }
.avviso { padding: 14px 18px; border-radius: 12px; margin: 16px 0; }
.avviso.ok { background: rgba(215, 255, 47, .14); color: var(--lime); }
.avviso.err { background: rgba(217, 72, 15, .12); color: #B53C0C; }
.scuro .avviso.err { color: #FF8A4C; }

/* piede */
.piede { background: var(--nero); color: var(--tenue-scuro); padding: 40px 0; font-size: 14px; }
.piede .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.piede a { color: var(--tenue-scuro); }
.piede .logo { height: 24px; width: auto; }

/* app */
.app-main { padding: 36px 0 80px; }
.carica { background: var(--carta); border: 2px dashed #CFC6B8; border-radius: 22px; padding: 32px 22px; text-align: center; transition: border-color .15s, background .15s; }
.carica.sopra { border-color: var(--blu); background: #F4F2FF; }
.carica input[type=file] { display: none; }
.carica .scegli { margin: 14px 0; }
.carica .nome-file { font-weight: 600; margin: 8px 0; min-height: 1.5em; }
.diritti { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; color: var(--tenue); max-width: 520px; margin: 14px auto; }
.diritti input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--nero); }
.crediti { display: inline-flex; gap: 8px; align-items: center; background: var(--nero); color: var(--crema); border-radius: 999px; padding: 8px 16px; font: 600 14px var(--titoli); }
.crediti b { color: var(--lime); }
.lista-brani { list-style: none; padding: 0; margin: 0; }
.lista-brani li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.lista-brani a { font-weight: 600; text-decoration: none; }
.stato { font-size: 13px; color: var(--tenue); }
.stato.pronto { color: #2E7D32; }
.stato.errore { color: var(--arancio); }

/* pagina del brano */
.barra { height: 12px; border-radius: 99px; background: #2A2A2A; overflow: hidden; margin: 20px 0 10px; }
.barra i { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 99px; transition: width .6s ease; }
.fase { font: 600 18px var(--titoli); }
.anello { width: 64px; height: 64px; animation: gira 2.4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.file-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.file { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 14px; background: var(--carta); border: 1px solid var(--linea); text-decoration: none; }
.file:hover { border-color: var(--nero); }
.file .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--nero); color: var(--lime); font: 700 12px var(--titoli); flex: none; }
.file small { display: block; color: var(--tenue); font-size: 13px; }
.mixer { background: var(--nero); color: var(--crema); border-radius: 22px; padding: 20px; }
.mixer .controlli { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.mixer input[type=range] { accent-color: var(--lime); }
.mixer .seek { flex: 1; }
.traccia { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #2A2A2A; }
.traccia button { background: #242424; color: var(--crema); border: 0; border-radius: 10px; min-height: 40px; font: 600 14px var(--titoli); cursor: pointer; }
.traccia button.muto { opacity: .4; text-decoration: line-through; }
.traccia button.solo { background: var(--lime); color: var(--nero); }
.nota-arancio { color: var(--arancio); font-weight: 600; }
audio { width: 100%; }
.legale { max-width: 760px; padding: 48px 20px 80px; margin: 0 auto; }
.legale .bozza { background: #FFF0E6; border: 1px solid #F4C7AB; color: #8A3A10; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

/* il leggio: velocità, ripeti, tonalità, accordi */
.leggio { border-top: 1px solid #2A2A2A; margin-top: 12px; padding-top: 14px; display: grid; gap: 12px; }
.gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etichetta { font: 600 13px var(--titoli); color: var(--tenue-scuro); min-width: 76px; }
.chip { background: #242424; color: var(--crema); border: 1px solid #333; border-radius: 999px; min-height: 36px; padding: 0 14px; font: 600 14px var(--titoli); cursor: pointer; }
.chip.on { background: var(--lime); color: var(--nero); border-color: var(--lime); }
#tono { font: 700 18px var(--titoli); min-width: 64px; text-align: center; }
.accordi { display: flex; flex-wrap: wrap; gap: 6px; }
.accordi .acc { background: #1D1D1D; border: 1px solid #333; border-radius: 10px; padding: 6px 10px; font: 700 15px var(--titoli); color: var(--lime); }
.mixer .controlli .btn { white-space: nowrap; flex: none; }

/* IMPARA: il tutorial animato (static/impara.js) */
.impara { border-top: 1px solid #2A2A2A; margin-top: 4px; padding-top: 14px; display: grid; gap: 12px; }
.imp-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.imp-schede { display: flex; gap: 6px; flex-wrap: wrap; }
.imp-dove { font: 600 13px var(--titoli); color: var(--tenue-scuro); }
.imp-accordo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 84px; }
.imp-accordo .ora { display: flex; align-items: center; gap: 14px; }
.imp-accordo .ora b { font: 700 44px/1 var(--titoli); color: var(--lime); min-width: 1.6em; }
.imp-accordo .poi { display: grid; justify-items: end; gap: 2px; background: #1D1D1D; border: 1px solid #333; border-radius: 14px; padding: 8px 14px;
  transition: border-color .15s, background .15s; }
.imp-accordo .poi b { font: 700 24px/1 var(--titoli); color: var(--crema); }
.imp-accordo .poi small { font: 500 12px var(--testo); color: var(--tenue-scuro); }
.imp-accordo .poi.vicino { border-color: var(--lime); background: #242A10; }
.imp-karaoke { min-height: 92px; }
.imp-karaoke .riga { margin: 0; font: 600 21px/2.25 var(--titoli); color: var(--tenue-scuro); }
.imp-karaoke .riga .w { position: relative; display: inline-block; padding: 0 2px; border-radius: 6px; transition: color .08s; }
.imp-karaoke .riga .w i { position: absolute; left: 2px; top: -1.05em; font: 700 14px/1 var(--titoli); font-style: normal; color: var(--lime); white-space: nowrap; }
.imp-karaoke .riga .w.fatta { color: var(--crema); }
.imp-karaoke .riga .w.ora { color: var(--nero); background: var(--lime); }
.imp-karaoke .riga .strum { color: var(--tenue-scuro); font-style: italic; font-weight: 500; }
.imp-karaoke .dopo { font: 500 15px/1.4 var(--testo); color: #6F6A62; }
.impara canvas { width: 100%; display: block; }
.impara[data-vista="accordi"] .solo-strumento, .impara:not([data-vista="accordi"]) .solo-accordi { display: none; }
.impara[data-vista="basso"] #imp-diag, .impara[data-vista="batteria"] #imp-diag { display: none; }
.impara:not([data-vista="batteria"]) .solo-batteria, .impara[data-vista="batteria"] .solo-corde { display: none; }
.impara:not([data-vista="accordi"]) .imp-karaoke { min-height: 0; }
.impara:not([data-vista="accordi"]) .imp-karaoke .dopo { display: none; }
.imp-piede { display: flex; gap: 8px; flex-wrap: wrap; }
.imp-piede .chip[hidden] { display: none; }
.imp-sezioni { display: contents; }
.tracce-titolo { font-size: 15px; color: var(--tenue-scuro); margin: 18px 0 0; }
@media (max-width: 520px) {
  .imp-accordo .ora b { font-size: 36px; }
  .imp-karaoke .riga { font-size: 18px; }
}