/* ============================================================================
   LA CLASSE, IN UN MINUTO — la storia a schede di /account (17 ottobre 2026)
   La storia ha SEMPRE il fondo scuro, in entrambi i temi: si guarda come un
   video. Il verde è quello del sito (#10B981 sullo scuro), mai il teal, mai
   viola. La card che la apre usa invece le variabili di /account (--o-*).
   ⚠️ I NOMI (18 ottobre 2026): /scuola usa già sc-logo, sc-sopra, sc-nota, sc-barra, sc-chi, sc-testa
   (scuola.css). Le regole della storia valgono solo dentro .sc-storia, e quelle sei classi qui si chiamano
   scs-*: con gli stessi nomi la storia rovinava il logo della pagina (contrasto 1,03:1) e la pagina
   rovinava la storia. Una classe nuova della storia si controlla contro scuola.css e classe.css.
   ============================================================================ */

/* La card dentro «La classe di tuo figlio» */
.af-storia-card{display:flex;align-items:center;gap:.875rem;width:100%;text-align:left;font:inherit;color:var(--o-testo,#1a1915);background:var(--o-scheda,#E8E6E1);border:1.5px solid var(--o-bordo,#BEBBB4);border-radius:20px;padding:1rem 1.25rem;min-height:72px;cursor:pointer;margin:0 0 1rem}
.af-storia-card.af-storia-respira{border:2px solid var(--o-verde,#047857);animation:afStoriaRespira 3s ease-in-out infinite}
.af-storia-card:focus-visible{outline:3px solid var(--o-verde,#047857);outline-offset:2px}
.af-storia-play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--o-pieno,#1a1915);color:var(--o-pieno-t,#FFFFFF)}
.af-storia-play svg{width:18px;height:18px;margin-left:2px}
.af-storia-testi{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.af-storia-testi b{font-size:1.0625rem;font-weight:700;line-height:1.3}
.af-storia-testi span{font-size:.9375rem;color:var(--o-muto,#4a4945)}
@keyframes afStoriaRespira{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px rgba(16,185,129,.16)}}

/* La storia, a tutto schermo sopra la vista della classe */
body.sc-aperta{overflow:hidden}
/* A tutto schermo niente si appoggia sopra la storia: la linguetta «Trovi un difetto?» (z-index 1390) copriva il bordo
   sinistro dei testi. Torna appena la storia si chiude. */
body.sc-aperta #difetti-linguetta{display:none!important}
.sc-storia{position:fixed;inset:0;z-index:1300;background:#0f0e0c;color:#F8F7F5;display:flex;align-items:center;justify-content:center;font-family:inherit;-webkit-font-smoothing:antialiased;outline:none}
/* Le misure del lettore in variabili (18 ottobre 2026): UN margine per barre, logo e testi (prima 14, 16 e 24 px),
   e la zona del contenuto fra la testata (--sc-su) e il lettore in basso (--sc-giu): niente ci passa sotto. */
.sc-storia .sc-tel{--sc-g:20px;--sc-su:calc(72px + env(safe-area-inset-top,0px));--sc-giu:calc(88px + env(safe-area-inset-bottom,0px));--sc-fondo-tel:#0f0e0c;position:relative;width:100%;max-width:440px;height:100%;max-height:860px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer;background:var(--sc-fondo-tel)}
@media (min-width:600px){.sc-storia .sc-tel{--sc-fondo-tel:#141412;height:calc(100% - 48px);border-radius:28px;border:1px solid #3a3934}}
.sc-storia .sc-barre{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:var(--sc-g);right:var(--sc-g);display:flex;gap:4px;z-index:3}
.sc-storia .sc-barre i{flex:1;height:3px;border-radius:2px;background:rgba(248,247,245,.24);overflow:hidden;position:relative}
.sc-storia .sc-barre i b{position:absolute;inset:0;background:#F8F7F5;transform-origin:left;transform:scaleX(0)}
.sc-storia .scs-testa-barra{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:var(--sc-g);right:calc(var(--sc-g) - 12px);display:flex;align-items:center;justify-content:space-between;z-index:3}
.sc-storia .scs-logo{font-weight:700;font-size:.875rem;color:#F8F7F5}
.sc-storia .scs-logo span{color:#10B981}
.sc-storia .sc-comandi{display:flex;align-items:center;gap:4px}
.sc-storia .sc-chiudi{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#F8F7F5;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.sc-storia .sc-chiudi:hover{background:rgba(248,247,245,.10)}
.sc-storia .sc-chiudi svg{width:22px;height:22px}
.sc-storia .sc-pausa:focus-visible,.sc-storia .sc-chiudi:focus-visible,.sc-storia .sc-freccia:focus-visible,.sc-storia .sc-btn:focus-visible{outline:3px solid #10B981;outline-offset:2px}

/* Il lettore in basso (Marco, 18 ottobre 2026: «un utente come torna indietro?»): indietro, pausa, avanti.
   Tondi, sul fondo appena più chiaro, grandi da prendere col pollice (56 px) ma senza colore: il verde resta
   al contenuto. Alla prima e all'ultima scheda la freccia resta al suo posto, spenta. */
.sc-storia .sc-guida{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:20px;z-index:3;pointer-events:none}
.sc-storia .sc-guida button{pointer-events:auto}
.sc-storia .sc-freccia,.sc-storia .sc-pausa{font:inherit;color:#F8F7F5;background:rgba(248,247,245,.08);border:1px solid rgba(248,247,245,.16);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .15s,transform .12s,opacity .2s}
.sc-storia .sc-freccia{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;padding:0}
.sc-storia .sc-freccia svg{width:26px;height:26px}
.sc-storia .sc-indietro svg{margin-left:-2px}.sc-storia .sc-avanti svg{margin-right:-2px}
.sc-storia .sc-pausa{height:48px;min-width:116px;border-radius:999px;padding:0 20px 0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.9375rem;font-weight:600;letter-spacing:.01em}
/* L'icona sta nel CSS: ferma() cambia solo la parola («Pausa» / «Avvia»), e la sonda legge quella. */
.sc-storia .sc-pausa::before{content:"";flex:none;width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px);border-radius:1px}
.sc-storia .sc-pausa.sc-ferma::before{width:13px;height:14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:2px}
@media (hover:hover){.sc-storia .sc-freccia:hover,.sc-storia .sc-pausa:hover{background:rgba(248,247,245,.16)}}
.sc-storia .sc-freccia:active,.sc-storia .sc-pausa:active{transform:scale(.94)}
.sc-storia .sc-freccia[aria-disabled="true"]{opacity:.3;cursor:default;transform:none}
.sc-storia .sc-freccia[aria-disabled="true"]:hover{background:rgba(248,247,245,.08)}
.sc-storia .sc-palco{position:absolute;left:0;right:0;top:var(--sc-su);bottom:var(--sc-giu)}
/* Il contenuto sta al CENTRO dello spazio libero (safe: se è più alto, parte dall'alto e scorre, mai tagliato sopra). */
.sc-storia .sc-scena{position:absolute;inset:0;padding:8px var(--sc-g) 12px;display:flex;flex-direction:column;justify-content:safe center;gap:18px;overflow-y:auto;overscroll-behavior:contain}
.sc-storia .scs-sopra{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#10B981}
.sc-storia .sc-tit{margin:0;font-size:1.875rem;line-height:1.12;font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:#F8F7F5}
.sc-storia .sc-tit em{font-style:normal;color:#999791}
.sc-storia .sc-tit u{text-decoration:none;box-shadow:inset 0 -3px 0 #10B981}
/* I testi descrittivi si leggono bene (Marco, 18 ottobre 2026: «devono vedersi di più»): più grandi e più chiari, sempre sotto il bianco del titolo. */
.sc-storia .sc-txt{margin:0;font-size:1.125rem;line-height:1.5;color:#dcdad4}
.sc-storia .scs-nota{margin:0;font-size:.9375rem;color:#b5b3ad}
.sc-storia .sc-fondo{display:flex;flex-direction:column;gap:10px}
/* Il «Sì» e «Prima leggo tutto» (Marco, 18 ottobre 2026: «a volte non si vedono su certi telefoni»): stanno in fondo,
   vicino al pollice, e restano FISSI anche quando la scheda deve scorrere; il testo scorre dietro, sfumato. */
.sc-storia .sc-azioni{margin-top:auto;position:sticky;bottom:-12px;padding:20px 0 12px;margin-bottom:-12px;background:linear-gradient(to bottom,transparent,var(--sc-fondo-tel) 20px);z-index:1}
.sc-storia .sc-scena:has(.sc-azioni)>.scs-sopra{margin-top:auto}

/* Le entrate: visibili a riposo, l'animazione parte solo sulla scena attiva */
.sc-storia .sc-scena.va .sc-ent,.sc-storia .sc-scena.va .sc-tit{animation:scEntra .6s cubic-bezier(.2,.7,.2,1) both}
.sc-storia .sc-scena.va>:nth-child(2){animation-delay:.1s}.sc-storia .sc-scena.va>:nth-child(3){animation-delay:.22s}.sc-storia .sc-scena.va>:nth-child(4){animation-delay:.34s}.sc-storia .sc-scena.va>:nth-child(5){animation-delay:.46s}.sc-storia .sc-scena.va>:nth-child(6){animation-delay:.58s}.sc-storia .sc-scena.va>:nth-child(7){animation-delay:.7s}
@keyframes scEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Le teste in fila e il pidocchio che passa dall'una all'altra */
.sc-storia .sc-fila{position:relative;display:flex;justify-content:space-between;padding:26px 4px 14px}
.sc-storia .scs-testa{display:block;width:38px;height:38px;border-radius:50%;background:#2d2c28;position:relative}
.sc-storia .scs-testa::after{content:"";position:absolute;left:8px;right:8px;bottom:-12px;height:14px;border-radius:12px 12px 4px 4px;background:#2d2c28}
/* Il puntino è rosso: è il problema che passa (Marco, 17 ottobre 2026: «così un padre capisce meglio») */
.sc-storia .sc-salto{position:absolute;top:14px;left:18px;width:12px;height:12px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 5px rgba(239,68,68,.22)}
/* Le teste partono verdi e diventano rosse quando il puntino (il pidocchio) le tocca (Marco, 18 ottobre 2026). */
/* Chi li ha li passa: ogni testa toccata diventa rossa e resta rossa (Marco: «far capire che chi li ha li passa agli altri»).
   A riposo (e con «riduci movimento») la fila è già tutta rossa: è la fine del racconto. */
.sc-storia .sc-contagio .scs-testa{background:#5a2a24;box-shadow:inset 0 0 0 3px #EF4444}
.sc-storia .sc-scena.va .sc-contagio .scs-testa{animation:scPrende .35s both}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(1){animation-delay:.3s}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(2){animation-delay:1s}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(3){animation-delay:1.7s}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(4){animation-delay:2.4s}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(5){animation-delay:3.1s}
.sc-storia .sc-scena.va .sc-contagio .scs-testa:nth-child(6){animation-delay:3.8s}
@keyframes scPrende{from{background:#2d2c28;box-shadow:inset 0 0 0 3px #10B981}to{background:#5a2a24;box-shadow:inset 0 0 0 3px #EF4444}}
.sc-storia .sc-salto{left:calc(100% - 28px)}
.sc-storia .sc-scena.va .sc-salto{animation:scSalta 3.5s linear .3s both}
@keyframes scSalta{from{left:18px}to{left:calc(100% - 28px)}}

/* Lo stesso giorno: le teste rosse tornano grigie, settimana dopo settimana. Il cerchio verde vuol dire
   «controllata», mai «pulita» (regola 16). A riposo la fila è già tutta controllata: la fine del racconto. */
.sc-storia .sc-giorno .scs-testa{background:#2d2c28;box-shadow:inset 0 0 0 3px #10B981}
.sc-storia .sc-scena.va .sc-giorno .scs-testa{animation:scLibera .5s both}
.sc-storia .sc-scena.va .sc-giorno .scs-testa.w1{animation-delay:1s}
.sc-storia .sc-scena.va .sc-giorno .scs-testa.w2{animation-delay:2.1s}
.sc-storia .sc-scena.va .sc-giorno .scs-testa.w3{animation-delay:3.2s}
.sc-storia .sc-scena.va .sc-giorno .scs-testa.w4{animation-delay:4.3s}
@keyframes scLibera{from{background:#5a2a24;box-shadow:inset 0 0 0 3px #EF4444}to{background:#2d2c28;box-shadow:inset 0 0 0 3px #10B981}}
.sc-storia .sc-settimane{display:flex;gap:6px}
.sc-storia .sc-settimane span{flex:1;text-align:center;padding:6px 0;border-radius:999px;font-size:.75rem;font-weight:600;color:#F8F7F5;border:1px solid #10B981;background:rgba(16,185,129,.15)}
.sc-storia .sc-scena.va .sc-settimane span{animation:scSettimana .3s both}
.sc-storia .sc-scena.va .sc-settimane span:nth-child(1){animation-delay:.9s}
.sc-storia .sc-scena.va .sc-settimane span:nth-child(2){animation-delay:2s}
.sc-storia .sc-scena.va .sc-settimane span:nth-child(3){animation-delay:3.1s}
.sc-storia .sc-scena.va .sc-settimane span:nth-child(4){animation-delay:4.2s}
@keyframes scSettimana{from{color:#999791;border-color:#3a3934;background:transparent}}

/* I quattro passi */
.sc-storia .sc-passi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sc-storia .sc-passo{background:#1d1c1a;border:1px solid #3a3934;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:.9375rem;color:#cfcdc7;min-width:0}
.sc-storia .sc-passo svg{width:26px;height:26px;color:#10B981}
.sc-storia .sc-passo b{color:#F8F7F5;font-size:1rem}

/* Il numero della classe: la card che si vedrà in «Oggi» */
.sc-storia .sc-num{background:#1d1c1a;border:1px solid #3a3934;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.sc-storia .sc-num-et{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999791}
.sc-storia .sc-num-grande{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sc-storia .sc-num-grande b{font-size:3rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:#F8F7F5}
.sc-storia .sc-num-grande span{font-size:.9375rem;color:#cfcdc7}
.sc-storia .scs-barra{position:relative;height:10px;border-radius:6px;background:#2d2c28}
.sc-storia .scs-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:#10B981;width:62%}
.sc-storia .sc-scena.va .scs-barra i{animation:scRiempi 1.6s cubic-bezier(.2,.7,.2,1) both .3s}
@keyframes scRiempi{from{width:0}}
.sc-storia .scs-barra s{position:absolute;top:-3px;bottom:-3px;width:2px;background:#F8F7F5;opacity:.55}
.sc-storia .sc-scala{position:relative;height:14px;font-size:.75rem;color:#999791}
.sc-storia .sc-scala span{position:absolute;transform:translateX(-50%)}
.sc-storia .sc-scala span:last-child{transform:translateX(-100%)}

/* I cerchi senza nome */
.sc-storia .sc-puntini{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:4px 6px}
/* Quando la griglia è più stretta della colonna (telefoni bassi, computer) sta al centro, non attaccata a sinistra */
.sc-storia .sc-puntini{box-sizing:border-box;width:100%;margin-left:auto;margin-right:auto}
.sc-storia .sc-puntini i{display:block;aspect-ratio:1;border-radius:50%;background:#2d2c28}
.sc-storia .sc-puntini i.si{background:#10B981}
.sc-storia .sc-scena.va .sc-puntini i.si{animation:scAccendi .4s both}
@keyframes scAccendi{from{background:#2d2c28;transform:scale(.6)}to{transform:none}}
.sc-storia .sc-mai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:1.0625rem;color:#dcdad4}
.sc-storia .sc-mai li{display:flex;gap:8px;align-items:center}
.sc-storia .sc-mai li::before{content:"";width:14px;height:2px;background:#999791;flex:none}

/* Il compagno di banco */
.sc-storia .sc-banco{display:flex;justify-content:center;align-items:flex-end;gap:16px;padding:22px 0 14px}
.sc-storia .sc-banco .scs-testa{width:54px;height:54px;background:#10B981}
.sc-storia .sc-banco .scs-testa::after{left:10px;right:10px;bottom:-16px;height:20px;background:#10B981}
.sc-storia .sc-scena.va .sc-banco .v2{animation:scAccendi .6s both 1.1s}

/* Come si parte */
.sc-storia .sc-via{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Scheda 9 (Marco, 18 ottobre 2026: «anima i passaggi e dai aria»): passi più distanziati, che entrano uno alla volta */
.sc-storia .sc-via li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding-bottom:26px;position:relative}
.sc-storia .sc-via li::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:#3a3934;transform-origin:top}
.sc-storia .sc-via li:last-child::before{display:none}
.sc-storia .sc-n{width:40px;height:40px;border-radius:50%;border:2px solid #10B981;display:grid;place-items:center;font-weight:700;font-size:1rem;color:#10B981}
.sc-storia .sc-scena.va .sc-via li{animation:scEntra .5s cubic-bezier(.2,.7,.2,1) both}
.sc-storia .sc-scena.va .sc-via li:nth-child(1){animation-delay:.5s}
.sc-storia .sc-scena.va .sc-via li:nth-child(2){animation-delay:1.3s}
.sc-storia .sc-scena.va .sc-via li:nth-child(3){animation-delay:2.1s}
.sc-storia .sc-scena.va .sc-via li::before{animation:scLinea .5s both}
.sc-storia .sc-scena.va .sc-via li:nth-child(1)::before{animation-delay:.9s}
.sc-storia .sc-scena.va .sc-via li:nth-child(2)::before{animation-delay:1.7s}
@keyframes scLinea{from{transform:scaleY(0)}}
.sc-storia .sc-via b{display:block;font-size:1.0625rem;color:#F8F7F5;margin-bottom:2px}
.sc-storia .sc-via span span{font-size:.9375rem;color:#cfcdc7}

/* Il sì */
.sc-storia .sc-btn{font:inherit;font-weight:700;font-size:1rem;min-height:52px;border-radius:14px;border:0;cursor:pointer;width:100%}
.sc-storia .sc-pieno{background:#F8F7F5;color:#0f0e0c}
.sc-storia .sc-scena.va .sc-pieno{animation:scRespira 3s ease-in-out infinite}
@keyframes scRespira{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px rgba(16,185,129,.28)}}
.sc-storia .sc-vuoto{background:transparent;color:#F8F7F5;border:1.5px solid #4a4945}

/* «Leggi tutto con calma» */
.sc-storia .sc-testo{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;outline:none;padding:calc(72px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-left,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-right,0px))}
.sc-storia .sc-testo-dentro{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.sc-storia .sc-testo-tit{margin:0;font-size:1.5rem;font-weight:800;color:#F8F7F5}
.sc-storia .sc-testo section{display:flex;flex-direction:column;gap:6px}
.sc-storia .sc-testo h3.sc-tit{font-size:1.25rem}
.sc-storia .sc-testo p,.sc-storia .sc-testo li{margin:0;font-size:1rem;line-height:1.55;color:#b5b3ad}
.sc-storia .sc-testo ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}

@media (prefers-reduced-motion:reduce){
  .af-storia-card.af-storia-respira{animation:none}
  .sc-storia .sc-freccia,.sc-storia .sc-pausa{transition:none}
  .sc-storia .sc-scena.va *,.sc-storia .sc-scena.va .sc-tit{animation:none!important}
}

/* Il video per il gruppo (17 ottobre 2026): niente pulsanti, il tempo lo guida chi registra */
.sc-storia.sc-video .sc-comandi,.sc-storia.sc-video .sc-guida{display:none}
.sc-storia.sc-video .sc-tel{--sc-giu:calc(24px + env(safe-area-inset-bottom,0px))}
.sc-storia.sc-video .sc-tel{cursor:default}

/* La card di /classe (chi riceve l'invito): i colori sono quelli di classe.css, nei due temi */
.sc-card-classe{display:flex;align-items:center;gap:.875rem;width:100%;text-align:left;font:inherit;color:var(--text-main,#1a1915);background:var(--bg-card,#F7F5F2);border:2px solid var(--verde,#047857);border-radius:14px;padding:1rem 1.25rem;min-height:72px;cursor:pointer;animation:afStoriaRespira 3s ease-in-out infinite}
.sc-card-classe:focus-visible{outline:3px solid var(--verde,#047857);outline-offset:2px}
.sc-card-play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--text-main,#1a1915);color:var(--bg-main,#F5F4F1)}
.sc-card-play svg{width:18px;height:18px;margin-left:2px}
.sc-card-testi{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.sc-card-testi b{font-size:1.0625rem;font-weight:700;line-height:1.3}
.sc-card-testi span{font-size:.9375rem;color:var(--text-muted,#4a4945)}
#cl-storia{margin:0 0 1rem}
@media (prefers-reduced-motion:reduce){.sc-card-classe{animation:none}}

/* Scheda 7 «Si vede quante. Mai chi.» (18 ottobre 2026): cerchi tutti uguali, nessuno acceso, e il numero sotto */
/* Marco, 18 ottobre 2026: «sono spariti i cerchi verdi, falli animati». Si accendono 15 cerchi (--d), poi a 2,6 s
   tutti e 24 prendono lo STESSO verde («scVela»): la fine (e «riduci movimento») e' un verde uguale per tutti. */
.sc-storia .sc-uguali i{background:#2d2c28;box-shadow:inset 0 0 0 2px #4a4945}
/* I numeri dentro i cerchi: si vedono mentre si conta, spariscono quando i cerchi diventano uguali (a riposo non ci sono). */
.sc-storia .sc-uguali i{display:grid;place-items:center}
.sc-storia .sc-uguali i span{font-style:normal;font-size:.8125rem;font-weight:700;color:#999791;opacity:0;font-variant-numeric:tabular-nums;line-height:1}
.sc-storia .sc-scena.va .sc-uguali i span{animation:scNumeroVia .5s both 2.6s}
.sc-storia .sc-scena.va .sc-uguali i.si span{animation:scNumeroAcceso .35s both var(--d,0s),scNumeroVia .5s both 2.6s}
@keyframes scNumeroVia{from{opacity:1}to{opacity:0}}
@keyframes scNumeroAcceso{from{color:#999791}to{color:#0f0e0c}}
.sc-storia .sc-scena.va .sc-uguali i{animation:scVela .7s forwards 2.6s}
.sc-storia .sc-scena.va .sc-uguali i.si{animation:scAccendi7 .35s both var(--d,0s),scVela .7s forwards 2.6s}
@keyframes scAccendi7{to{background:#10B981;box-shadow:inset 0 0 0 2px #10B981}}
@keyframes scVela{to{background:rgba(16,185,129,.38);box-shadow:inset 0 0 0 2px #10B981}}
.sc-storia .sc-chip b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.sc-storia .sc-uguali i{background:rgba(16,185,129,.38);box-shadow:inset 0 0 0 2px #10B981}}
.sc-storia .sc-chip{margin:0;align-self:flex-start;font-size:.9375rem;font-weight:700;color:#F8F7F5;background:rgba(16,185,129,.15);border:1px solid #10B981;border-radius:999px;padding:6px 14px}

/* Scheda 1 (Marco, 18 ottobre 2026: «deve far capire che facendolo la classe è controllata»): una spunta in ogni
   cerchio acceso, e alla fine la cornice verde attorno alla classe. La spunta dice «controllato», mai «pulito». */
.sc-storia .sc-spunte{padding:10px;border-radius:18px;box-shadow:0 0 0 2px #10B981}
.sc-storia .sc-scena.va .sc-spunte{animation:scEntra .6s cubic-bezier(.2,.7,.2,1) both,scCornice .5s both 2.9s}
@keyframes scCornice{from{box-shadow:0 0 0 0 transparent}}
.sc-storia .sc-spunte i{position:relative}
.sc-storia .sc-spunte i.si::after{content:"";position:absolute;left:37%;top:20%;width:22%;height:42%;border:solid #0f0e0c;border-width:0 3px 3px 0;transform:rotate(45deg)}
.sc-storia .sc-scena.va .sc-spunte i.si::after{animation:scSpunta .3s both;animation-delay:inherit}
@keyframes scSpunta{from{opacity:0;transform:rotate(45deg) scale(.4)}}

/* Schermi bassi (telefoni piccoli, 18 ottobre 2026): misurate tutte le schede a 320×568, alcune andavano scorse
   fino a 117 px. Titoli, spazi e cerchi più compatti; il testo resta leggibile (mai sotto 15 px). */
@media (max-height:700px){
  .sc-storia .sc-tel{--sc-g:18px;--sc-su:calc(60px + env(safe-area-inset-top,0px));--sc-giu:calc(70px + env(safe-area-inset-bottom,0px))}
  .sc-storia .sc-scena{gap:12px}
  .sc-storia .sc-tit{font-size:1.5rem}
  .sc-storia .sc-txt{font-size:1rem}
  .sc-storia .scs-nota{font-size:.875rem}
  .sc-storia .sc-puntini{gap:7px;padding:2px 4px}
  .sc-storia .sc-spunte{padding:7px}
  .sc-storia .sc-puntini:not(.sc-uguali):not(.sc-spunte) i,.sc-storia .sc-uguali i{max-width:34px}
  .sc-storia .sc-uguali,.sc-storia .sc-spunte{max-width:300px}
  .sc-storia .sc-num{padding:12px;gap:8px}
  .sc-storia .sc-num-grande b{font-size:2.25rem}
  .sc-storia .sc-passi{gap:8px}
  .sc-storia .sc-passo{padding:10px;gap:5px;font-size:.875rem}
  .sc-storia .sc-passo svg{width:22px;height:22px}
  .sc-storia .sc-via li{padding-bottom:16px}
  .sc-storia .sc-fila{padding:16px 4px 8px}
  .sc-storia .sc-banco{padding:12px 0 8px}
  .sc-storia .sc-btn{min-height:48px}
  .sc-storia .sc-guida{bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:16px}
  .sc-storia .sc-freccia{width:48px;height:48px}
  .sc-storia .sc-freccia svg{width:22px;height:22px}
  .sc-storia .sc-pausa{height:44px}
}

/* Schermi grandi (Marco, 18 ottobre 2026: «sul computer, vedi proporzioni»): la cornice era 440×852, più stretta di
   una storia. Ora è 9:16 come le storie e il video, alta quanto lo schermo, e i testi crescono un poco. */
@media (min-width:600px) and (min-height:760px){
  .sc-storia .sc-tel{max-width:none;width:auto;height:calc(100% - 48px);max-height:1000px;aspect-ratio:9/16}
  .sc-storia .sc-tit{font-size:2.125rem}
  .sc-storia .sc-txt{font-size:1.1875rem}
  .sc-storia .sc-tel{--sc-g:32px}
}

/* «Il controllo finale» (18 ottobre 2026): chi può controllare dal vivo, uno alla volta, ognuno con la sua spunta */
.sc-storia .scs-chi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sc-storia .scs-chi li{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;color:#F8F7F5;background:#1d1c1a;border:1px solid #3a3934;border-radius:14px;padding:10px 14px}
.sc-storia .scs-chi li::before{content:"";flex:none;width:9px;height:15px;margin:0 4px 3px 4px;border:solid #10B981;border-width:0 3px 3px 0;transform:rotate(45deg)}
.sc-storia .sc-scena.va .scs-chi li{animation:scEntra .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@media (max-height:700px){.sc-storia .scs-chi{gap:5px}.sc-storia .scs-chi li{padding:7px 12px;font-size:.9375rem}}

/* /scuola non ha la variabile --verde: nel tema scuro la cornice prende il verde chiaro del sito (18 ottobre 2026) */
.dark .sc-card-classe{border-color:#10B981}
#sc-storia-chiedi,#sc-storia-attiva{margin:0}
#cp-storia-promoter .af-storia-card{margin:0 0 .75rem}

/* Computer (Marco, 18 ottobre 2026: «il desktop a tutto schermo, centrato»): niente cornice da telefono. La storia
   prende tutto lo schermo e il contenuto sta in una colonna centrale di 720 px, con titoli e testi più grandi. */
@media (min-width:900px){
  .sc-storia .sc-tel{--sc-fondo-tel:#0f0e0c;--sc-su:calc(84px + env(safe-area-inset-top,0px));--sc-giu:calc(108px + env(safe-area-inset-bottom,0px));max-width:none;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
  .sc-storia .sc-barre{left:50%;right:auto;width:min(720px,calc(100% - 64px));transform:translateX(-50%);top:calc(20px + env(safe-area-inset-top,0px))}
  .sc-storia .scs-testa-barra{left:50%;right:auto;width:min(744px,calc(100% - 40px));transform:translateX(-50%);top:calc(32px + env(safe-area-inset-top,0px))}
  .sc-storia .sc-scena{padding-left:max(32px,calc((100% - 720px) / 2));padding-right:max(32px,calc((100% - 720px) / 2))}
  .sc-storia .sc-puntini,.sc-storia .sc-spunte,.sc-storia .sc-uguali{max-width:520px}
  .sc-storia .sc-fondo .sc-btn{max-width:480px}
  .sc-storia .sc-guida{bottom:calc(28px + env(safe-area-inset-bottom,0px));gap:28px}
  .sc-storia .sc-freccia{width:64px;height:64px}
  .sc-storia .sc-freccia svg{width:28px;height:28px}
  .sc-storia .sc-pausa{height:52px;min-width:128px}
}
@media (min-width:900px) and (max-height:860px){
  .sc-storia .sc-tel{--sc-giu:calc(96px + env(safe-area-inset-bottom,0px))}
  .sc-storia .sc-guida{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .sc-storia .sc-puntini,.sc-storia .sc-spunte,.sc-storia .sc-uguali{max-width:420px}
}
@media (min-width:900px) and (min-height:820px){
  .sc-storia .sc-tit{font-size:2.75rem}
  .sc-storia .sc-txt{font-size:1.375rem}
  .sc-storia .scs-nota{font-size:1.0625rem}
  .sc-storia .sc-passo{font-size:1.0625rem}
  .sc-storia .sc-passo b{font-size:1.125rem}
  .sc-storia .scs-chi li{font-size:1.125rem}
  .sc-storia .sc-via b{font-size:1.1875rem}
  .sc-storia .sc-via span span{font-size:1.0625rem}
}

/* Il video per le famiglie, nell'area della scuola (18 ottobre 2026): due pulsanti affiancati, a capo sul telefono */
.sc-video-azioni{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.sc-video-azioni .sc-bottone{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;width:auto}

/* Schermi MOLTO bassi (iPhone SE con le barre di Safari, 375×553; il primo SE, 320×568): ancora più stretti, perché il
   lettore in basso prende il suo spazio. Il testo resta a 15 px. Il «Sì» si vede comunque: è fisso (.sc-azioni).    Sta IN FONDO al file: più in alto perdeva contro le regole dell'elenco (trappola 5). */
@media (max-height:600px){
  .sc-storia .sc-tel{--sc-su:calc(54px + env(safe-area-inset-top,0px));--sc-giu:calc(62px + env(safe-area-inset-bottom,0px))}
  .sc-storia .scs-testa-barra{top:calc(18px + env(safe-area-inset-top,0px))}
  .sc-storia .sc-scena{gap:10px;padding-top:4px}
  .sc-storia .sc-tit{font-size:1.375rem}
  .sc-storia .sc-txt{font-size:.9375rem;line-height:1.45}
  .sc-storia .sc-uguali,.sc-storia .sc-spunte{max-width:252px}
  .sc-storia .sc-puntini{gap:6px}
  /* «Chi può controllare» a pillole, su più righe: uno sotto l'altro, cinque voci non ci stanno */
  .sc-storia .scs-chi{flex-direction:row;flex-wrap:wrap;gap:6px}.sc-storia .scs-chi li{padding:6px 12px 6px 10px;gap:6px}
  .sc-storia .scs-chi li::before{width:6px;height:11px;border-width:0 2.5px 2.5px 0;margin:0 3px 2px 2px}
  .sc-storia .sc-guida{bottom:calc(9px + env(safe-area-inset-bottom,0px))}
  .sc-storia .sc-freccia{width:44px;height:44px}
  .sc-storia .sc-pausa{height:40px}
}