/* Sezione Corsi. Stile: stile/STILE.md, variante C (mix). Il mondo e' inchiostro e retino, il colore e' il suono:
   blu, verde fluo e rosa solo su titoli, evidenziatori, adesivi, blocchi di apertura. Nessun JS per vedere il contenuto. */
@font-face{font-family:"Unb";src:url(fonts/unbounded-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Bric";src:url(fonts/bricolage-800c.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DMM";src:url(fonts/dmmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--paper:#F5F2E7;--white:#fff;--ink:#0E0E10;--blue:#2230FF;--fluo:#C6FF00;--pink:#FF5CA8;--grey:#5C5C61;--err:#B0001E}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{background:var(--paper);color:var(--ink);font-family:"Hanken",system-ui,sans-serif;font-size:1.05rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px}
.wrap{max-width:66rem;margin:0 auto;padding:0 16px}
.mono{font-family:"DMM",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.sr{position:absolute;left:-9999px}

/* barra in alto */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:2px solid var(--ink);font-size:.74rem}
.top a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.top nav{display:flex;gap:18px}
.top a[aria-current]{background:linear-gradient(transparent 55%,var(--fluo) 55%)}

/* titoli */
.tag{display:inline-block;background:var(--pink);color:#fff;font-size:.74rem;line-height:1.35;padding:.45em .9em;transform:rotate(-2.5deg);box-shadow:4px 4px 0 var(--ink);max-width:100%}
h1{font-family:"Unb",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;color:var(--blue);font-size:clamp(1.55rem,7vw,2.6rem);text-shadow:.07em .06em 0 var(--fluo);margin:22px 0 16px;overflow-wrap:break-word;hyphens:auto}
h1.xl{font-size:clamp(1.9rem,9vw,3.6rem)}
h2{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;letter-spacing:-.02em;font-size:clamp(1.8rem,7vw,2.7rem);line-height:1.04;margin-bottom:16px}
h3{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;letter-spacing:-.01em;font-size:1.5rem;line-height:1.1;margin-bottom:6px}
.hl{background:linear-gradient(transparent 8%,var(--fluo) 8% 92%,transparent 92%);padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none;color:var(--ink)}
.lead{font-size:1.18rem;line-height:1.5;max-width:36rem}
.sub{font-weight:700;font-size:1.05rem;max-width:36rem;margin-top:14px}
.per-chi{font-size:.95rem;color:var(--grey);max-width:36rem;margin-top:12px}
section{padding:34px 0}
p+p{margin-top:12px}

/* pulsanti = adesivi */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;text-transform:uppercase;font-size:1.45rem;letter-spacing:-.01em;line-height:1.1;background:var(--fluo);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:12px 20px;min-height:56px;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.full{display:flex;width:100%}
.link-sec{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.azioni{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* hero a due colonne */
.hero{display:grid;gap:28px;padding:26px 0 36px}
.hero-text{min-width:0}

/* vignetta: raggi vettoriali, retino, bordo inchiostro, ombra dura blu */
.vignetta{position:relative;border:5px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--blue);aspect-ratio:4/3;overflow:hidden;min-width:0}
.rays{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:0;right:0;bottom:0;height:36%;background-image:radial-gradient(circle,var(--ink) 1.1px,transparent 1.5px);background-size:7px 7px;opacity:.35;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.ono{position:absolute;background:var(--pink);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--blue);padding:.05em .45em;transform:rotate(-5deg);font-family:"Bric",sans-serif;font-weight:800;font-stretch:76%;text-transform:uppercase;font-size:clamp(1.3rem,6vw,2.1rem);line-height:1.2}
.cast{position:absolute;width:auto}
.postit{position:absolute;background:var(--white);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:.35em .65em;font-size:clamp(.7rem,2.6vw,.95rem);font-weight:600;line-height:1.2;white-space:nowrap}
.postit b{font-family:"Unb",sans-serif;font-weight:900;color:var(--blue);margin-right:.4em;font-size:1.05em}
.postit.v{background:var(--fluo)}.postit.r{background:var(--pink);color:#fff}.postit.r b{color:#fff}

/* moduli di raccolta email */
.riga2{display:block}
.riga2>div{display:flex;flex-direction:column;justify-content:flex-end}
@media(min-width:760px){.riga2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}}
.modulo{background:var(--white);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--pink);padding:22px 18px;margin-top:26px;max-width:34rem}
.modulo label.l{display:block;font-size:.76rem;margin-bottom:6px}
.modulo input[type=email],.modulo input[type=text]{width:100%;font:inherit;font-size:1.1rem;padding:12px;border:3px solid var(--ink);background:var(--paper);border-radius:0;margin-bottom:16px;min-height:52px}
.modulo input:focus{outline:3px solid var(--blue);outline-offset:2px}
.consenso{display:flex;gap:12px;align-items:flex-start;min-height:48px;margin-bottom:18px;font-size:.98rem;line-height:1.45;cursor:pointer}
.consenso input{flex:none;width:26px;height:26px;margin:2px 0 0;accent-color:var(--blue)}
.msg{margin-top:14px;font-weight:700;font-size:.98rem;min-height:1.4em}
.msg.err{color:var(--err)}.msg.ok{color:var(--ink);background:var(--fluo);padding:.2em .4em}
.piccolo{font-size:.9rem;line-height:1.5;color:var(--grey);margin-top:14px}
.privacy{font-size:.86rem;line-height:1.5;color:var(--grey);margin-top:16px;max-width:36rem}
.modulo .privacy{margin-top:14px}

/* blocco blu inclinato */
.blocco{background:var(--blue);color:#fff;transform:skewY(-1.6deg);margin:34px 0}
.blocco>.wrap{transform:skewY(1.6deg);padding:40px 16px}
.blocco h2{color:#fff}.blocco .hl{color:var(--ink)}
.blocco .chiusa{margin-top:22px;max-width:38rem;font-weight:700}
.blocco .chiusa .hl{padding:.05em .2em}

/* schede */
.griglia{display:grid;gap:18px;margin-top:20px}
.scheda{background:var(--white);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--pink);padding:18px;min-width:0}
.scheda:nth-child(2){box-shadow:6px 6px 0 var(--blue)}
.scheda:nth-child(3){box-shadow:6px 6px 0 var(--ink)}
.scheda h3{margin-bottom:8px}
.scheda p{font-size:1rem}
.scheda .dom{margin-top:10px;font-size:.95rem;color:var(--grey);font-style:italic}

/* elenchi */
.no-lista{list-style:none;max-width:44rem;margin-top:14px}
.no-lista li{display:grid;grid-template-columns:2.2rem 1fr;gap:6px;padding:12px 0;border-bottom:2px solid var(--ink)}
.no-lista li:first-child{border-top:2px solid var(--ink)}
.no-lista li::before{content:"\00D7";font-family:"Unb",sans-serif;font-weight:900;color:var(--pink);font-size:1.5rem;line-height:1;-webkit-text-stroke:1.5px var(--ink)}
.sai{list-style:none;margin-top:18px;display:grid;gap:12px;max-width:44rem}
.sai li{display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:start}
.sai li::before{content:"";width:1.4rem;height:1.4rem;margin-top:.15rem;border:3px solid var(--ink);background:var(--fluo);box-shadow:3px 3px 0 var(--ink)}
.moduli{list-style:none;display:grid;gap:14px;margin-top:20px;counter-reset:m}
.moduli li{background:var(--white);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px 16px 16px 4.2rem;position:relative;counter-increment:m;min-width:0}
.moduli li::before{content:counter(m);position:absolute;left:14px;top:10px;font-family:"Unb",sans-serif;font-weight:900;font-size:2.2rem;line-height:1;color:var(--blue);text-shadow:.06em .05em 0 var(--fluo)}
.moduli b{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;font-size:1.3rem;line-height:1.1;display:block;margin-bottom:4px}

/* chi e' Matteo */
.chi{display:grid;gap:24px;align-items:start}
.chi .testo{max-width:40rem}
.chi .firma{margin-top:16px}

/* domande */
.faq{max-width:46rem;margin-top:10px}
.faq dt{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;font-size:1.4rem;line-height:1.15;margin-top:22px}
.faq dd{margin-top:6px}

/* CTA doppia e riquadro kit */
.doppia{display:grid;gap:22px;margin-top:20px}
.doppia .lato{background:var(--white);border:4px solid var(--ink);padding:22px 18px;min-width:0}
.doppia .lato.g{box-shadow:8px 8px 0 var(--blue)}
.doppia .lato.l{box-shadow:8px 8px 0 var(--pink)}
.doppia .lato .modulo{border:0;box-shadow:none;padding:0;margin-top:14px;max-width:none}
.kit{border:4px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--ink);padding:22px 18px;margin-top:36px;max-width:46rem}

/* hub */
.hub{display:grid;gap:26px;margin-top:22px}
.card{display:flex;flex-direction:column;align-items:flex-start;background:var(--white);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--blue);padding:24px 20px}
.card.k{box-shadow:8px 8px 0 var(--pink)}
.card p{margin:6px 0 20px}

/* anteprime */
.anteprime{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 18px;margin:18px -16px 0;padding-inline:16px;-webkit-overflow-scrolling:touch}
.anteprime figure{flex:none;width:min(72vw,250px);scroll-snap-align:start}
.anteprime img{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff}
.anteprime figcaption{font-size:.88rem;line-height:1.4;margin-top:12px}
.cit{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;font-size:clamp(1.9rem,8vw,3rem);line-height:1.05;margin:26px 0 10px;padding-left:16px;border-left:8px solid var(--ink);max-width:40rem}

/* copertina */
.copertina{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--blue);background:#fff;transform:rotate(1.5deg);width:min(100%,19rem);margin:0 auto}

footer{border-top:2px solid var(--ink);padding:12px 0 34px;font-size:.84rem;color:var(--grey);margin-top:20px}
footer .wrap{display:flex;flex-wrap:wrap;gap:0 18px}
footer a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}

@media(min-width:760px){
  body{font-size:1.12rem}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;padding:48px 0 56px}
  .azioni{flex-direction:row;align-items:center;gap:26px}
  .griglia{grid-template-columns:repeat(3,1fr)}
  .moduli{grid-template-columns:1fr 1fr}
  .moduli li:last-child{grid-column:1/-1}
  .chi{grid-template-columns:20rem 1fr;gap:44px}
  .doppia{grid-template-columns:1fr 1fr;align-items:start}
  .hub{grid-template-columns:1fr 1fr}
  .anteprime{overflow:visible;padding-inline:0;margin-inline:0;display:grid;grid-template-columns:repeat(4,1fr)}
  .anteprime figure{width:auto}
  .copertina{width:100%;max-width:23rem}
  .hero.guida{grid-template-columns:1.12fr .88fr;align-items:start}
  .hero.guida .modulo{margin-top:22px}
  section{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* link nel testo: area di tocco da 44 px senza cambiare l'interlinea */
main p a:not(.btn),main li a,main dd a,.privacy a,.piccolo a{display:inline-block;padding-block:11px;margin-block:-11px}
.azioni .btn{max-width:100%}
.hero .azioni{flex-direction:column;align-items:flex-start;gap:6px;margin-top:20px}
.hero .sub{margin-top:18px}
.chi.una{grid-template-columns:1fr}

/* prova: domanda giocabile e schermate vere */
.prova{display:grid;gap:26px;margin-top:20px}
.scatti{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;min-width:0}
.telefono{min-width:0}
.telefono img{width:100%;aspect-ratio:1/2;object-fit:cover;object-position:top;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--white)}
.telefono figcaption{font-size:.88rem;line-height:1.4;margin-top:12px}
.demo{min-width:0}
.etichetta-demo{font-size:.74rem;margin-bottom:6px}
.demo .opzioni{display:grid}
.demo button.opzione{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-weight:600;background:var(--white);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 12px;min-height:56px;margin-top:10px;cursor:pointer;transition:transform .12s}
.demo button.opzione:hover{transform:translate(-2px,-2px)}
.demo button.opzione:active{transform:translate(1px,1px)}
.demo .lettera{flex:none;width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--paper);font-family:"Unb",sans-serif;font-weight:900;font-size:.85rem}
.demo .opz-testo{flex:1;min-width:0;overflow-wrap:anywhere}
.demo .segno,.demo .spunta{flex:none;width:28px;height:28px;display:block}
.demo button.opzione.giusta{border-color:#1a8a3a;background:#e8f7ec;color:#0d4d20}
.demo button.opzione.sbagliata{border-color:var(--err);background:#ffe4ef;color:#7c0028}
.demo.chiuso button.opzione{cursor:default}.demo.chiuso button.opzione:hover{transform:none}
.demo .correzione:empty{display:none}
.demo .correzione{padding:14px;margin-top:14px;border:2px solid var(--ink);line-height:1.5}
.demo .correzione p{margin-top:6px}
.demo .correzione.giusto{background:#e8f7ec;border-color:#1a8a3a}
.demo .correzione.sbagliato{background:#ffe4ef;border-color:var(--err);color:#7c0028}
.btn-demo{font:inherit;font-weight:700;background:var(--white);border:2px solid var(--ink);padding:8px 16px;min-height:44px;margin-top:10px;cursor:pointer}
.coriandoli{position:fixed;left:0;top:0;pointer-events:none;z-index:100}
.scelta{border:0;margin:14px 0 8px;min-width:0}
.scelta legend{font-family:"Bric",sans-serif;font-weight:800;font-stretch:80%;font-size:1.2rem;margin-bottom:6px}
.carta-scelta{display:flex;align-items:center;gap:12px;min-height:56px;border:3px solid var(--ink);background:var(--white);padding:10px 12px;margin-top:10px;cursor:pointer}
.carta-scelta input{flex:none;width:26px;height:26px;accent-color:var(--blue)}
.carta-scelta:has(input:checked){background:var(--fluo);box-shadow:4px 4px 0 var(--ink)}
@media(min-width:760px){.prova{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}

/* movimento: solo dove e' consentito. Il contenuto c'e' comunque: nessun elemento nasce nascosto e le animazioni finiscono sullo stato normale. */
@media (prefers-reduced-motion:no-preference){
  .tag{animation:entra .5s cubic-bezier(.2,.9,.3,1.2) both}
  .hero h1{animation:entra .55s .08s cubic-bezier(.2,.9,.3,1.1) both}
  .hero .lead{animation:entra .55s .18s ease-out both}
  .hero .azioni{animation:entra .55s .28s ease-out both}
  .vignetta .postit{animation:cade .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0)*80ms + 150ms)}
  #cta-hero{animation:respira 3.6s 1.4s ease-in-out infinite}
  #cta-hero:hover{animation:none}
  .sai li::before{animation:spunta-box .45s cubic-bezier(.2,.9,.3,1.4) both}
  @keyframes entra{from{transform:translateY(18px);opacity:.25}}
  @keyframes cade{from{transform:translateY(-18px) rotate(-7deg);opacity:0}}
  @keyframes respira{0%,100%{box-shadow:6px 6px 0 var(--ink)}50%{box-shadow:9px 9px 0 var(--ink)}}
  @keyframes spunta-box{from{transform:scale(0) rotate(-20deg)}}
  @supports (animation-timeline:view()){
    .scheda,.moduli li,.faq dt,.doppia .lato,.sai li{animation:sale linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .sai li::before{animation:spunta-box linear both;animation-timeline:view();animation-range:entry 15% entry 75%}
    @keyframes sale{from{transform:translateY(26px);opacity:.3}}
  }
}

/* Scelte di disegno non ovvie (una riga ciascuna)
   - Nessun personaggio su hub e corso: la pagina e' vicina a quelle a pagamento e la licenza resta decisione di Bruce (ARCHITETTURA, decisione 3). Su guida: Marta e Luca, cast v2 retinato.
   - Sul corso al posto dei personaggi c'e' una vignetta di post-it con i sette moduli: la pagina fa vedere l'indice prima di dirlo.
   - Raggi in SVG vettoriale e non conic-gradient (STILE.md): netti a ogni dimensione.
   - Caratteri in casa (woff2 con sottoinsieme latino, 4 file, circa 95 kB): niente foglio di Google Fonts che blocca il rendering.
   - Nessun reveal e nessun opacity:0: il contenuto esiste senza JS. Il JS fa solo i moduli e il contatore.
   - Elementi che gridano sopra la piega: titolo Unbounded blu, adesivo rosa, pulsante fluo. Tre, non di piu'.
   - Anteprime del PDF: carosello a scorrimento con snap su telefono, quattro in riga da 760 px. */

/* Target legali anche con testo piccolo. */
p a,li a{min-height:44px}