/* scuola.heiwit.com — presentazione navigabile per l'aula. Palette e regole: skill heiwit-brand. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --brand:#F08227;--brand-soft:#F0B580;--ocean:#034D66;--ocean-2:#2F4858;--sky:#84ADBA;--ink:#403C4E;--paper:#FFFFFF;--sand:#F5F0E8;
  --muted:rgba(64,60,78,.68);--line:rgba(64,60,78,.18);
  --nav:64px;--fs:clamp(17px,1.4vw,27px);
}
*{box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;line-height:1.35;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body.scuro{background:var(--ocean);color:#fff}
a{color:var(--ocean)} body.scuro a{color:#fff}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}

/* barra di navigazione fissa */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);background:var(--ocean);color:#fff;display:flex;align-items:center;gap:.8rem;padding:0 .9rem;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav .logo{height:32px;width:auto;flex:0 0 auto}
.nav .caps{display:flex;gap:.25rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:.2rem 0}
.nav .caps::-webkit-scrollbar{display:none}
.nav .cap{flex:0 0 auto;display:flex;align-items:center;gap:.45em;padding:.32em .7em .32em .4em;border-radius:8px;color:rgba(255,255,255,.8);text-decoration:none;font-size:.6rem;font-weight:500;white-space:nowrap;transition:background .15s}
.nav .cap b{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:rgba(255,255,255,.16);font-weight:600;font-size:.95em}
.nav .cap:hover{background:rgba(255,255,255,.1)}
.nav .cap.fatto{color:rgba(255,255,255,.6)} .nav .cap.fatto b{background:var(--sky);color:var(--ocean)}
.nav .cap.attuale{background:var(--brand);color:#fff} .nav .cap.attuale b{background:#fff;color:var(--brand)}
.nav .tempo{display:flex;align-items:center;gap:.5em;flex:0 0 auto;font-size:.7rem;font-weight:600;cursor:pointer;user-select:none}
.nav .tempo .delta{font-size:.75em;font-weight:500;padding:.18em .55em;border-radius:6px;background:rgba(255,255,255,.14);white-space:nowrap}
.nav .tempo .delta.tardi{background:var(--brand);color:#fff}
.nav .tempo .delta.presto{background:var(--sky);color:var(--ocean)}
.nav .btn-nav{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:.3em .6em;font-size:.58rem;cursor:pointer;white-space:nowrap}
.nav .btn-nav:hover{background:rgba(255,255,255,.1)}

/* barra dei passi in basso */
.stepbar{position:fixed;left:0;right:0;bottom:0;height:5px;background:rgba(64,60,78,.12);z-index:40}
body.scuro .stepbar{background:rgba(255,255,255,.15)}
.stepbar i{display:block;height:100%;background:var(--brand);width:0;transition:width .2s}
.controlli{position:fixed;right:1rem;bottom:1rem;display:flex;gap:.5rem;z-index:46;transition:right .2s}
.controlli .btn{font-size:.95rem;padding:.6em 1.3em;box-shadow:0 2px 0 rgba(3,77,102,.25)}
.controlli .btn.sec{background:#fff}
body.note-aperte .controlli{right:calc(min(34rem,46vw) + 1rem)}

/* pagina */
main.cap{min-height:100vh;padding:calc(var(--nav) + 1.8rem) 4vw 6rem;max-width:1700px;margin:0 auto}
h1{font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:2.5rem;margin:0 0 1rem}
h1 .t1{display:block;color:var(--brand)} h1 .t2{display:block;color:var(--ink)}
body.scuro h1 .t2{color:#fff}
h2{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem;line-height:1.1}
h2 .t1{color:var(--brand)}
h3{font-size:1rem;font-weight:600;margin:0 0 .35rem;letter-spacing:-.01em}
p{margin:0 0 .6em}
.muted{color:var(--muted)} body.scuro .muted{color:rgba(255,255,255,.72)}
.small{font-size:.72rem} .grande{font-size:1.25rem} .enorme{font-size:3.2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.sotto{font-size:1.05rem;color:var(--muted);max-width:40em}
body.scuro .sotto{color:rgba(255,255,255,.78)}
.pre{white-space:pre-wrap}

/* passi rivelati uno alla volta */
.step{transition:opacity .2s,transform .2s}
.step:not(.on){opacity:0;visibility:hidden;transform:translateY(10px)}
.step.spazio:not(.on){display:none}

/* griglie e card */
.griglia{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g32{grid-template-columns:3fr 2fr}
.g23{grid-template-columns:2fr 3fr}
.card{border:1px solid var(--brand);border-radius:12px;background:#fff;padding:1rem 1.1rem;color:var(--ink)}
.card.scura{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.card.sabbia{background:var(--sand);border-color:transparent}
.card.neutra{border-color:var(--line)}
.card .icona{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ocean);display:grid;place-items:center;margin-bottom:.6rem;flex:0 0 auto}
.card .icona svg{width:1.2rem;height:1.2rem;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card.scura .icona{background:var(--brand)}
.kpi{display:flex;flex-direction:column;gap:.15em}
.kpi b{font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ocean)}
.kpi > span{color:var(--muted);font-size:.72rem}
.card.scura .kpi b{color:#fff} .card.scura .kpi > span{color:rgba(255,255,255,.75)}
.etichetta{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);margin-bottom:.3rem}

/* bottoni */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:.55em 1.1em;font-weight:600;font-size:.82rem;cursor:pointer;text-decoration:none;transition:filter .15s;line-height:1.2}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:#fff;color:var(--ocean);border:1px solid var(--ocean)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
body.scuro .btn.ghost{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.piccolo{font-size:.65rem;padding:.4em .8em}
.azioni{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}

/* quiz con cartoncini */
.quiz{margin:1rem 0 1.4rem}
.quiz .domanda{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 .8rem}
.vote{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.vote .opt{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem;font-size:1.05rem;font-weight:500;transition:opacity .2s;background:#fff;color:var(--ink)}
.vote .opt b{flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;color:#fff;font-weight:700}
.opt[data-l=A] b{background:var(--brand)} .opt[data-l=B] b{background:var(--ocean)} .opt[data-l=C] b{background:var(--sky);color:var(--ocean)} .opt[data-l=D] b{background:var(--ink)}
.quiz.svelato .opt{opacity:.35}
.quiz.svelato .opt.giusta{opacity:1;border:2px solid var(--brand);background:var(--sand)}
.quiz .spiega{display:none;background:var(--sand);color:var(--ink);border-radius:12px;padding:.8rem 1rem;margin-top:.7rem;font-size:.95rem}
.quiz.svelato .spiega{display:block}
.quiz.svelato .svela{display:none}
.quiz .svela{margin-top:.7rem}
.legenda{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.legenda span{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem}
.legenda i{display:inline-block;width:1.2em;height:1.2em;border-radius:4px}
.legenda .A{background:var(--brand)} .legenda .B{background:var(--ocean)} .legenda .C{background:var(--sky)} .legenda .D{background:var(--ink)}
body.scuro .legenda i{box-shadow:0 0 0 2px rgba(255,255,255,.75)}

/* linea del tempo */
.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;position:relative;margin:1.2rem 0}
.timeline:before{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:var(--sky)}
.tappa{position:relative;padding-top:1.3rem}
.tappa:before{content:"";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 2px var(--brand)}
.tappa .anno{font-size:.65rem;font-weight:600;color:var(--brand);letter-spacing:.04em;text-transform:uppercase}
.tappa h3{font-size:.95rem;margin:.15rem 0 .25rem}
.tappa p{font-size:.72rem;color:var(--muted);margin:0}

/* tabelle */
table{width:100%;border-collapse:collapse;font-size:.8rem}
th,td{padding:.45em .6em;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right}

/* conto alla rovescia */
.conto{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.conto .cifre{font-size:5rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ocean)}
.conto.finito .cifre{color:var(--brand)}
body.scuro .conto .cifre,.card.scura .conto .cifre{color:#fff}
.card.scura .btn.ghost{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35)}

/* chat (latin lover) */
.chat{display:flex;flex-direction:column;gap:.55rem;min-height:14rem;max-height:46vh;overflow-y:auto;padding:1rem;background:var(--sand);border-radius:12px}
.bolla{max-width:78%;padding:.55em .9em;border-radius:14px;font-size:1rem;line-height:1.3;white-space:pre-wrap}
.bolla.io{align-self:flex-end;background:var(--ocean);color:#fff;border-bottom-right-radius:4px}
.bolla.ai{align-self:flex-start;background:#fff;border:1px solid var(--brand);border-bottom-left-radius:4px}
.bolla.sistema{align-self:center;background:transparent;color:var(--muted);font-size:.72rem;max-width:100%;text-align:center}
.bolla.scrive{color:var(--muted);font-style:italic}
.riga-input{display:flex;gap:.5rem;margin-top:.7rem}
.riga-input input,.riga-input textarea{flex:1;padding:.55em .8em;border:1px solid var(--line);border-radius:8px;font-size:1rem;color:var(--ink);background:#fff}
.riga-input input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px}
.termo{height:1.1rem;border-radius:999px;background:rgba(64,60,78,.12);overflow:hidden}
.termo i{display:block;height:100%;background:var(--brand);width:35%;transition:width .3s}
.mic.attivo{background:var(--ocean);color:#fff}
.esito{display:none;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;padding:.6em 1em;border-radius:12px;margin-top:.8rem;text-align:center}
.esito.si{display:block;background:var(--brand);color:#fff}
.esito.no{display:block;background:var(--ocean-2);color:#fff}

/* carte della startup */
.carta{border:1px solid var(--brand);border-radius:12px;padding:.9rem 1rem;background:#fff;cursor:pointer;position:relative;transition:background .15s}
.carta:hover{background:var(--sand)}
.carta .num{position:absolute;top:.6rem;right:.8rem;font-size:.65rem;color:var(--brand);font-weight:600}
.carta h3{padding-right:2rem}
.carta p{font-size:.78rem;color:var(--muted);margin:0}
.carta .squadra{display:inline-block;margin-top:.5rem;font-size:.68rem;font-weight:600;background:var(--ocean);color:#fff;padding:.2em .6em;border-radius:6px}
textarea{width:100%;min-height:7rem;padding:.6em .8em;border:1px solid var(--line);border-radius:8px;font-size:.95rem;color:var(--ink);resize:vertical}
select{padding:.45em .7em;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.verdetto .voto{font-size:4rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--brand)}
.verdetto .voto small{font-size:.35em;color:var(--muted);font-weight:500;letter-spacing:0}
.domande li{margin:.3em 0}

/* tetto */
.mappa{position:relative;border:1px solid var(--brand);border-radius:12px;overflow:hidden;background:#000}
.mappa img{width:100%;height:auto}
.mappa .sole{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s;mix-blend-mode:normal}
.mappa.acceso .sole{opacity:.85}
.scala{display:flex;align-items:center;gap:.5rem;font-size:.65rem;color:var(--muted)}
.scala i{display:block;flex:1;height:.7rem;border-radius:4px;background:linear-gradient(90deg,#30123b,#2a5bf5,#1fb4e5,#4af0ad,#afF05b,#e2dc3c,#f9aa29,#e5560f,#7a0403)}
input[type=range]{width:100%;accent-color:var(--brand)}
.equiv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.equiv .kpi b{font-size:1.9rem}

/* note del relatore */
.note{position:fixed;top:var(--nav);right:0;bottom:0;width:min(34rem,46vw);background:var(--sand);color:var(--ink);border-left:1px solid var(--line);padding:1rem 1.2rem 2rem;overflow-y:auto;font-size:.72rem;transform:translateX(100%);transition:transform .2s;z-index:45}
body.note-aperte .note{transform:none}
.note h4{margin:0 0 .5rem;font-size:.8rem;color:var(--ocean)}
.note ul{padding-left:1.1em;margin:0 0 .8em}
.note li{margin:.25em 0}
.note .scorciatoie{margin-top:1rem;border-top:1px solid var(--line);padding-top:.7rem;color:var(--muted)}
.note kbd{font-family:inherit;background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 .4em;font-size:.9em}
.note .strumenti{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}

/* dialog */
dialog{border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;max-width:32rem;color:var(--ink);background:#fff}
dialog::backdrop{background:rgba(3,77,102,.55)}
dialog input{width:100%;padding:.5em .7em;border:1px solid var(--line);border-radius:8px;font-size:1rem;margin:.5rem 0}

/* sezione divisoria (max una per pagina) */
.divisoria{background:linear-gradient(90deg,var(--ocean),var(--brand));color:#fff;border-radius:12px;padding:1.2rem 1.4rem;margin:1rem 0}
.divisoria h2{color:#fff;margin:0}

/* gioco della batteria */
.gb{margin-top:1rem}
.gb .testa{text-align:center;margin-bottom:.8rem}
.gb .domanda{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0}
.gb .sub{color:var(--muted);font-size:.85rem;margin:.3rem 0 0;min-height:1.2em}
.gb .cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.gb .cardb{position:relative;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:#fff;display:flex;flex-direction:column;gap:.5rem;transition:border-color .2s}
.gb .cardb h3{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem;margin:0}
.gb .cardb h3 small{color:var(--muted);font-weight:500;font-size:.7em}
.gb .prezzo{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.gb .righe{display:flex;flex-direction:column;gap:.35rem}
.gb .riga{display:flex;justify-content:space-between;gap:.6rem;padding:.4em .7em;border-radius:8px;background:var(--sand);font-size:.78rem}
.gb .riga b{white-space:nowrap}
.gb .riga.diff{background:rgba(240,130,39,.14);border:1px solid var(--brand)}
.gb .riga .old{color:var(--muted);text-decoration:line-through;margin-right:.5em;font-weight:400}
.gb .costo{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.55em .8em;border-radius:8px;background:var(--ocean);color:#fff;font-size:.78rem;margin-top:auto}
.gb .costo b{font-size:1.3rem;white-space:nowrap}
.gb .costo .old{color:rgba(255,255,255,.65);text-decoration:line-through;margin-right:.4em;font-size:.7em;font-weight:400}
.gb .cardb.win{border:2px solid var(--ocean)} .gb .cardb.lose{border:2px solid var(--sky)}
.gb .badge{position:absolute;top:-.7rem;right:1rem;padding:.15em .7em;border-radius:999px;font-size:.62rem;font-weight:700;display:none;letter-spacing:.03em}
.gb .cardb.win .badge{display:block;background:var(--ocean);color:#fff}
.gb .cardb.lose .badge{display:block;background:#fff;color:var(--ink);border:1px solid var(--sky)}
.gb .verdetto{display:none;margin-top:.9rem;background:var(--sand);border-radius:12px;padding:.8rem 1rem;font-size:.95rem;text-align:center}
.gb .verdetto.show{display:block}
.gb .verdetto .big{display:block;font-size:1.3rem;font-weight:700;margin-top:.3em}
.gb .verdetto .ok{color:var(--ocean)}
.gb .finale{display:none;grid-template-columns:1fr 1.3fr;gap:1rem}
.gb .finale.show{display:grid}
.gb .finale table td.win{color:var(--ocean);font-weight:700}
.gb .piede{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}

/* stampa dei cartoncini */
@media print{.nav,.stepbar,.controlli,.note,.no-stampa{display:none !important}main.cap{padding:0}}

@media (max-width:900px){
  .g2,.g3,.g4,.g32,.g23,.equiv,.gb .cards,.gb .finale{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline:before{display:none}
  .nav .caps{display:none}
  .note{width:100%}
  h1{font-size:2rem}
}