/* Guida benessere digitale - stile "alba": caldo, morbido, vicino a studentesse e studenti.
   Nessun font o immagine esterna: tutto e' locale. */
:root{
  --bg:#fff8f1; --card:#ffffff; --ink:#2a2750; --muted:#5b5880; --line:#eadde0;
  --brand:#0d7a85; --brand-ink:#ffffff; --sun:#ffc857; --sun-ink:#9a5800;
  --cta:#d9442e; --cta-ink:#ffffff; --alert:#b3261e; --alert-ink:#8f1d17; --focus:#0b57d0;
  --acc:var(--brand); --tint:12%; --cheer:42%; --shadow:rgba(42,39,80,.2);
  /* OpenDyslexic ed EasyReading vengono usati se installati sul dispositivo;
     Verdana/Tahoma/Arial sono fallback locali ad alta leggibilità. Nessuna risorsa esterna. */
  --read-font:"OpenDyslexic","EasyReading",Verdana,Tahoma,Arial,sans-serif;
  --head:var(--read-font);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#17152e; --card:#221f42; --ink:#f3eefc; --muted:#bbb6da; --line:#3b3768;
    --brand:#5fd0d8; --brand-ink:#0b2a30; --sun:#ffd67a; --sun-ink:#ffd67a;
    --cta:#ff8a75; --cta-ink:#2a0f0a; --alert:#ff9b94; --alert-ink:#ffb4ae; --focus:#8ab4f8;
    --tint:20%; --cheer:20%; --shadow:rgba(0,0,0,.5)}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--read-font);line-height:1.62;letter-spacing:.012em;word-spacing:.04em;font-synthesis:none;
  background:
    radial-gradient(48rem 24rem at 105% -8%,color-mix(in srgb,var(--sun) 34%,transparent),transparent 62%),
    radial-gradient(36rem 24rem at -12% 28%,color-mix(in srgb,#ff6f59 13%,transparent),transparent 62%),
    var(--bg);
  background-attachment:fixed}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:.5rem;z-index:20}
.i{width:1.25em;height:1.25em;flex:none}

/* Barra superiore e fascia "spazio protetto" */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 1rem;background:color-mix(in srgb,var(--card) 93%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--head);font-weight:800;font-size:1rem;line-height:1.2}
.brand svg{width:1.8rem;height:1.8rem;flex:none}
.exit{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--alert) 12%,var(--card));color:var(--alert-ink);border:2px solid color-mix(in srgb,var(--alert) 50%,var(--card));border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;min-height:48px;white-space:nowrap;flex:none}
.exit [data-icon]{display:inline-flex}
.shield-strip{display:flex;gap:.55rem;align-items:center;justify-content:center;padding:.5rem 1rem;background:color-mix(in srgb,var(--sun) var(--cheer),var(--bg));color:var(--ink);font-size:.84rem;line-height:1.35;text-align:left}
.shield-strip [data-icon]{display:inline-flex;color:var(--sun-ink)}
.shield-strip .i{width:1.1rem;height:1.1rem}

main{max-width:42rem;margin:0 auto;padding:1.1rem 1rem 7rem}
main:focus{outline:none}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main>*{animation:rise .35s ease both}
h1,h2,h3{font-family:var(--head)}
h1{font-size:1.6rem;line-height:1.28;margin:0;font-weight:800;letter-spacing:.005em}
h2{font-size:1.12rem;margin:0 0 .6rem;font-weight:800}
.sec{margin:1.8rem 0 .7rem}
p{margin:.5rem 0}
.intro{font-size:1.05rem}
.small{font-size:.85rem;color:var(--muted)}
.nota{color:var(--muted);font-size:.88rem;margin:1rem 0 0;white-space:pre-line}

/* icone in cerchio colorato */
.disc{--s:2.6rem;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--acc) calc(var(--tint) + 8%),var(--card));color:var(--acc)}
@media (prefers-color-scheme:dark){.disc{color:color-mix(in srgb,var(--acc) 55%,#fff)}}
.disc .i{width:1.4rem;height:1.4rem}

/* frase di incoraggiamento */
.cheer{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0 0;padding:.8rem 1rem;border-radius:20px;background:color-mix(in srgb,var(--sun) var(--cheer),var(--card));border:1px solid color-mix(in srgb,var(--sun) 65%,var(--line));font-size:1rem;line-height:1.4;font-weight:600}
.cheer .i{color:var(--sun-ink);width:1.5rem;height:1.5rem;margin-top:.05rem}

/* intestazione dell'istituto */
.school{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin:0 0 1rem;padding:.8rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 6px 18px -12px var(--shadow)}
.school .disc{--s:3rem;background:var(--ink);color:var(--sun)}
.school p{margin:0}
.s-type{font-size:.82rem;color:var(--muted);line-height:1.25}
.s-name{font-family:var(--head);font-size:1.25rem;font-weight:800;line-height:1.2}
.s-project{flex-basis:100%;border-top:1px dashed var(--line);padding-top:.65rem}
.s-proj{font-size:1rem;font-weight:700;line-height:1.3;color:var(--ink)}
.s-place{font-size:.9rem;color:var(--brand);font-weight:700}
.s-participation{flex-basis:100%;margin:.05rem 0 0;padding:.7rem .85rem;border-radius:14px;background:color-mix(in srgb,var(--brand) 7%,var(--card));border-left:4px solid var(--brand);font-size:.88rem;line-height:1.5;color:var(--muted);font-weight:600}
@media (prefers-color-scheme:dark){.school .disc{background:var(--bg);color:var(--sun)}}

/* pagina iniziale */
.hero{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 18px 34px -22px var(--shadow)}
.hero-art{display:block;width:100%;height:auto}
.hero-art .beam{animation:beam 7s ease-in-out infinite}
.hero-art .sun{animation:sun 9s ease-in-out infinite;transform-origin:150px 168px}
@keyframes beam{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes sun{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hero-copy{padding:1.1rem 1.25rem 1.4rem}
.hero-copy h1{font-size:2.1rem}
.hero-copy p{margin:.55rem 0 0;font-size:1.05rem}
.guarantees{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem}
.guarantees li{display:flex;gap:.8rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:.7rem .95rem;font-size:.95rem;line-height:1.35}
.guarantees strong{display:block}
.guarantees li span span{display:block;color:var(--muted);font-size:.88rem}
@media (min-width:560px){.guarantees{grid-template-columns:1fr 1fr}}
.cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1.2rem;background:var(--cta);color:var(--cta-ink);border:0;border-radius:20px;padding:1rem 1.2rem;font-family:var(--head);font-size:1.2rem;font-weight:800;cursor:pointer;min-height:58px;box-shadow:0 10px 20px -12px var(--cta)}
.cta:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* domande */
.q-head{display:flex;gap:.8rem;align-items:center;margin-bottom:.4rem}
.opts{display:grid;gap:.7rem;margin-top:1.1rem}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;width:100%;text-align:left;background:color-mix(in srgb,var(--acc) 9%,var(--card));color:var(--ink);border:2px solid color-mix(in srgb,var(--acc) 26%,var(--card));border-radius:22px;padding:.75rem 1rem;font:inherit;cursor:pointer;min-height:58px;transition:transform .12s,box-shadow .12s}
.opt .disc{background:var(--card)}
.opt:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:0 10px 18px -12px var(--acc)}
.opt .chev{color:var(--muted);width:1.1rem;height:1.1rem}
.opt .lbl{line-height:1.3;font-weight:600}

/* schermata finale */
.banner{display:flex;gap:1rem;align-items:center;background:color-mix(in srgb,var(--acc) var(--tint),var(--card));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line));border-radius:28px;padding:1rem 1.1rem}
.banner .disc{--s:3.2rem;background:var(--card)}
.banner .intro{margin:.65rem 0 0;font-size:1rem}
.definition{margin:.5rem 0 0;padding:.7rem .8rem;border-left:4px solid var(--acc);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--acc) 7%,var(--card));font-size:.98rem;line-height:1.58;font-weight:600;max-width:68ch}
.art{width:4.4rem;height:auto;flex:none;overflow:visible}
.banner{flex-wrap:wrap}
.banner>div{min-width:0;flex:1 1 15rem}
.banner h1{font-size:1.5rem;overflow-wrap:break-word}
@media (min-width:520px){.art{width:5.6rem}.banner h1{font-size:1.6rem}}
.art .a{fill:var(--acc)} .art .ao{fill:var(--acc);opacity:.2} .art .b{fill:var(--sun)} .art .w{fill:var(--card)}
.art .k{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .wk{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.art .ak{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.art .i2{fill:var(--ink)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:1.05rem 1.15rem;margin-top:1rem;box-shadow:0 8px 20px -16px var(--shadow)}
.panel.evidence{background:color-mix(in srgb,#ffb84d 16%,var(--card));border-color:color-mix(in srgb,#ffb84d 45%,var(--line))}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.5rem;margin:.95rem 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.02rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;font-size:.92rem;display:grid;place-items:center}
@media (prefers-color-scheme:dark){.steps li::before{color:#08202c;background:color-mix(in srgb,var(--acc) 60%,#fff)}}
.dots{margin:0;padding-left:1.2rem}
.dots li{margin:.5rem 0}
.cards{display:grid;gap:.8rem}
.contact{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:.95rem 1.05rem;box-shadow:0 8px 20px -16px var(--shadow)}
.c-head{display:flex;gap:.75rem;align-items:center}
.c-head .disc{--s:2.4rem}
.c-title h3{margin:0;font-size:1.03rem;line-height:1.25}
.role{color:var(--muted);font-size:.86rem;margin:.1rem 0 0}
.contact>p{margin:.5rem 0 0;font-size:.95rem}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand);color:var(--brand-ink);text-decoration:none;font:inherit;font-size:.95rem;font-weight:700;border-radius:14px;padding:.6rem 1rem;min-height:48px;cursor:pointer;border:2px solid var(--brand)}
.btn.alt{background:transparent;color:var(--brand)}
.btn .i{width:1.1rem;height:1.1rem}
.end{margin-top:1.8rem}
.tag-dev{display:inline-block;background:var(--alert);color:#fff;font-size:.68rem;border-radius:4px;padding:0 .35rem;margin-left:.4rem;vertical-align:middle}

/* barra di navigazione fissa in basso */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);border-radius:26px 26px 0 0;box-shadow:0 -10px 24px -14px var(--shadow)}
.bar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:56px;border:2px solid transparent;border-radius:18px;background:color-mix(in srgb,var(--brand) 11%,var(--card));color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.bar button [data-icon]{display:inline-flex;color:var(--brand)}
.bar button .i{width:1.5rem;height:1.5rem}
.bar button:hover{border-color:var(--brand)}
.bar button.danger{background:color-mix(in srgb,var(--alert) 13%,var(--card));color:var(--alert-ink)}
.bar button.danger [data-icon]{color:var(--alert-ink)}
.bar button[aria-disabled="true"]{opacity:.42;cursor:default}
.bar button[aria-disabled="true"]:hover{border-color:transparent}
@media (min-width:700px){.bar{padding-left:calc(50% - 21rem);padding-right:calc(50% - 21rem)}}

/* azioni dentro i suggerimenti */
.quick{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
.btn.sm{font-size:.88rem;padding:.35rem .8rem;min-height:44px;border-radius:12px}

button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media print{
  .top,.shield-strip,.bar,.opts,.print,.hero,.quick,.art,.cheer{display:none!important}
  body{background:#fff;color:#000}
  .contact,.panel,.banner{break-inside:avoid;border-color:#999;background:#fff;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  main>*,.hero-art .beam,.hero-art .sun{animation:none}
  .opt,.cta{transition:none}
}

.printlink{color:var(--brand);font-weight:700}

/* Restyling visuale 2026: schede più riconoscibili, illustrative e leggibili */
:root{
  --radius-xl:32px; --radius-lg:24px; --soft-shadow:0 18px 44px -30px rgba(22,34,58,.48);
}
body{background:
  radial-gradient(52rem 32rem at 100% -10%,color-mix(in srgb,var(--sun) 28%,transparent),transparent 60%),
  radial-gradient(40rem 28rem at -10% 22%,color-mix(in srgb,#57b8c8 16%,transparent),transparent 62%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 96%,#fff) 0%,var(--bg) 100%)}
main{max-width:56rem;padding-top:1.5rem}
.top{padding:.7rem clamp(1rem,3vw,2rem);box-shadow:0 10px 30px -28px var(--shadow)}
.brand{font-size:1.05rem;letter-spacing:.005em}
.shield-strip{border-bottom:1px solid color-mix(in srgb,var(--sun) 42%,var(--line))}
.school{border-radius:var(--radius-lg);padding:1rem 1.1rem;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--brand) 5%,var(--card)))}
.hero{display:grid;grid-template-columns:1fr;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--sun) 7%,var(--card)));border-radius:var(--radius-xl);box-shadow:var(--soft-shadow)}
.hero-art{aspect-ratio:4/3;object-fit:cover}.hero-photo{width:100%;height:100%;display:block;object-position:58% 44%;filter:saturate(.98) contrast(1.02)}
.hero-copy{padding:1.35rem 1.5rem 1.6rem}
.hero-copy h1{font-size:clamp(2rem,5vw,3rem)}
.hero-copy p{max-width:42rem;color:var(--muted)}
@media (min-width:800px){.hero{grid-template-columns:1.1fr .9fr;align-items:stretch}.hero-art{height:100%;min-height:25rem;object-fit:cover}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:2rem}.hero-copy h1{font-size:2.65rem}}

.visual-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0 1.2rem}
.visual-card{display:flex;gap:.75rem;align-items:center;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:.85rem .9rem;box-shadow:0 10px 26px -24px var(--shadow)}
.visual-card .art{width:4rem}
.visual-card h2{font-size:.96rem;margin:0 0 .15rem;line-height:1.2}
.visual-card p{font-size:.79rem;color:var(--muted);margin:0;line-height:1.3}
@media (max-width:580px){.visual-gallery{grid-template-columns:1fr}.visual-card .art{width:4.6rem}}

.guarantees{gap:.8rem}
.guarantees li{border-radius:22px;padding:.9rem 1rem;box-shadow:0 10px 24px -26px var(--shadow)}
.q-head{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 13%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--acc) 24%,var(--line));border-radius:26px;padding:1rem 1.1rem;margin-bottom:.7rem}
.q-head h1{font-size:clamp(1.55rem,4vw,2.05rem)}

.topic-visual{--acc:var(--brand);position:relative;display:flex;align-items:center;gap:1.1rem;margin:1rem 0;padding:1rem 1.15rem;overflow:hidden;border-radius:26px;background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 11%,var(--card)),color-mix(in srgb,var(--sun) 11%,var(--card)));border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line));box-shadow:0 12px 30px -28px var(--shadow)}
.topic-visual::after{content:"";position:absolute;width:10rem;height:10rem;border-radius:50%;right:-4rem;top:-5rem;background:color-mix(in srgb,var(--acc) 10%,transparent)}
.topic-visual .art-xl{width:7rem;min-width:7rem;position:relative;z-index:1}
.topic-visual-copy{display:flex;flex-direction:column;gap:.15rem;position:relative;z-index:1}
.topic-visual-copy .eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.02em;color:var(--acc)}
.topic-visual-copy strong{font-family:var(--head);font-size:1.12rem;line-height:1.2}
.topic-visual-copy>span:last-child{font-size:.88rem;line-height:1.35;color:var(--muted)}
@media (max-width:500px){.topic-visual{align-items:flex-start}.topic-visual .art-xl{width:5.5rem;min-width:5.5rem}}

.opts{gap:.85rem}
.opt{border-radius:24px;padding:.9rem 1rem;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 10%,var(--card)),var(--card));box-shadow:0 8px 20px -22px var(--shadow)}
.opt:hover{box-shadow:0 16px 30px -24px var(--acc)}
.banner{border-radius:30px;padding:1.2rem 1.25rem;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 15%,var(--card)),var(--card));box-shadow:var(--soft-shadow)}
.banner .art{width:6.4rem}
.panel{border-radius:26px;padding:1.2rem 1.25rem;box-shadow:0 14px 34px -30px var(--shadow)}
.panel h2{display:flex;align-items:center;gap:.5rem}
.steps li{padding: .15rem 0 .15rem 2.8rem;margin:1rem 0}
.steps li::before{width:2rem;height:2rem;box-shadow:0 6px 14px -8px var(--acc)}
.cards{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.contact{border-radius:24px;padding:1rem 1.1rem;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--brand) 3%,var(--card)));transition:transform .15s ease,box-shadow .15s ease}
.contact:hover{transform:translateY(-2px);box-shadow:0 16px 34px -28px var(--shadow)}
.btn{border-radius:16px}.btn.alt{background:color-mix(in srgb,var(--brand) 5%,var(--card))}
.cheer{border-radius:22px;padding:.9rem 1.05rem}
@media (min-width:760px){.bar{left:50%;right:auto;width:min(54rem,calc(100% - 2rem));transform:translateX(-50%);border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0}}


/* Accessibilità: leggibilità, contrasto, tastiera e preferenze di sistema */
p,li,.lbl,.role,.nota,.intro,.definition{max-width:72ch}
button,a{touch-action:manipulation}
a{text-underline-offset:.16em;text-decoration-thickness:.08em}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
@media (prefers-contrast:more){
  :root{--line:color-mix(in srgb,var(--ink) 42%,var(--card));--muted:color-mix(in srgb,var(--ink) 78%,var(--card))}
  .contact,.panel,.banner,.opt,.school,.hero,.guarantees li{border-width:2px}
  .btn.alt{background:var(--card)}
}
@media (forced-colors:active){
  .disc,.steps li::before,.btn,.cta,.exit{forced-color-adjust:auto}
  .hero-photo{filter:none}
}


/* ==============================================================
   V12 — Accessibilità reale + palette blu / grigio / verde
   Font Andika incorporato localmente (SIL Open Font License).
   ============================================================= */
@font-face{
  font-family:"Andika Local";
  src:url("assets/fonts/Andika-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Andika Local";
  src:url("assets/fonts/Andika-Bold.ttf") format("truetype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  --bg:#F1F5F6;
  --card:#FFFFFF;
  --ink:#16303B;
  --muted:#4C6068;
  --line:#CBD6DA;
  --brand:#145E75;
  --brand-ink:#FFFFFF;
  --green:#2F6B56;
  --green-ink:#FFFFFF;
  --slate:#52676F;
  --soft-blue:#DCECF2;
  --soft-green:#E1EFE9;
  --soft-gray:#E9EEF0;
  --sun:#A8CEC4;
  --sun-ink:#234F43;
  --cta:#2F6B56;
  --cta-ink:#FFFFFF;
  --alert:#9B2C3B;
  --alert-ink:#781A29;
  --focus:#004E89;
  --shadow:rgba(22,48,59,.22);
  --read-font:"Andika Local","OpenDyslexic","EasyReading",Verdana,Tahoma,Arial,sans-serif;
  --head:var(--read-font);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101B20;--card:#18272E;--ink:#F4F8FA;--muted:#CAD6DA;--line:#465B64;
    --brand:#78BDD0;--brand-ink:#10262F;--green:#80C4A7;--green-ink:#11281E;--slate:#AFC0C7;
    --soft-blue:#203740;--soft-green:#20372F;--soft-gray:#29373D;--sun:#86B7AA;--sun-ink:#E8FAF3;
    --cta:#3F8069;--cta-ink:#FFFFFF;--alert:#D76B78;--alert-ink:#FFE8EB;--focus:#8CCBFF;
    --shadow:rgba(0,0,0,.55)
  }
}

html{font-size:18px}
body{
  font-family:var(--read-font)!important;
  line-height:1.68;
  letter-spacing:.018em;
  word-spacing:.075em;
  background:
    radial-gradient(46rem 28rem at 102% -6%,rgba(20,94,117,.14),transparent 62%),
    radial-gradient(40rem 30rem at -8% 32%,rgba(47,107,86,.12),transparent 64%),
    linear-gradient(180deg,#F5F8F9 0%,var(--bg) 52%,#EAF0F1 100%);
}
@media (prefers-color-scheme:dark){
  body{background:
    radial-gradient(46rem 28rem at 102% -6%,rgba(120,189,208,.10),transparent 62%),
    radial-gradient(40rem 30rem at -8% 32%,rgba(128,196,167,.08),transparent 64%),
    linear-gradient(180deg,#122127 0%,var(--bg) 100%)}
}

h1,h2,h3,.brand,.cta,.s-name,.topic-visual-copy strong{font-family:var(--head)!important;letter-spacing:.012em}
p,li,.lbl,.role,.nota,.intro,.definition{line-height:1.68}
.small,.role,.nota{line-height:1.55}

.top{background:color-mix(in srgb,var(--card) 96%,var(--soft-blue));border-bottom-color:var(--line)}
.shield-strip{background:linear-gradient(90deg,var(--soft-blue),var(--soft-green));border-bottom:1px solid var(--line)}
.school{background:linear-gradient(135deg,var(--card),var(--soft-blue))}
.hero{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--soft-green) 42%,var(--card)));border-color:var(--line)}
.hero-photo{object-position:center 42%;filter:saturate(.92) contrast(1.03)}
.guarantees li{background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--soft-blue) 38%,var(--card)))}
.cheer{background:linear-gradient(100deg,var(--soft-green),color-mix(in srgb,var(--soft-blue) 55%,var(--card)));border-color:#B9CEC7;color:var(--ink)}
.q-head{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 11%,var(--card)),var(--soft-gray));border-color:color-mix(in srgb,var(--acc) 28%,var(--line))}
.topic-visual{background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 10%,var(--card)),var(--soft-green));border-color:color-mix(in srgb,var(--acc) 26%,var(--line))}
.opt{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 9%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--acc) 30%,var(--line))}
.banner{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,var(--card)),var(--soft-gray))}
.panel{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--soft-blue) 24%,var(--card)))}
.contact{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--soft-green) 25%,var(--card)))}
.btn.alt{background:var(--card);color:var(--brand);border-color:var(--brand)}
.bar{background:color-mix(in srgb,var(--card) 96%,var(--soft-gray));border-top-color:var(--line)}
.bar button{background:linear-gradient(180deg,var(--card),var(--soft-blue))}
.bar button.danger{background:linear-gradient(180deg,var(--card),#F6E8EA)}
.definition{background:color-mix(in srgb,var(--acc) 6%,var(--card));border-left-color:var(--acc)}

/* 112 volutamente isolato come ultima opzione della schermata di aiuto immediato. */
.emergency-final{
  margin:2rem 0 1rem;
  padding:1.1rem 1.15rem;
  border:2px solid var(--alert);
  border-radius:26px;
  background:linear-gradient(145deg,var(--card),#F8EBED);
  box-shadow:0 16px 36px -30px rgba(155,44,59,.5)
}
.emergency-final h2{margin:0;color:var(--alert-ink);font-size:1.22rem}
.emergency-final>p{margin:.35rem 0 .8rem;color:var(--ink)}
.emergency-final .contact{margin:0;border-color:color-mix(in srgb,var(--alert) 38%,var(--line));background:var(--card)}
.emergency-final .contact .disc{--acc:var(--alert);background:#F8EBED;color:var(--alert)}
.emergency-final .contact .btn{background:var(--alert);border-color:var(--alert);color:#fff}

/* Contrasti principali verificati WCAG AA/AAA per il testo normale nella palette chiara. */
@media (prefers-contrast:more){
  :root{--bg:#FFFFFF;--card:#FFFFFF;--ink:#0B2028;--muted:#314B56;--line:#71848C;--brand:#0D4F66;--green:#245A46}
  body{background:#fff}
  .opt,.contact,.panel,.banner,.school,.hero,.guarantees li,.emergency-final{box-shadow:none;border-width:2px}
}
@media (forced-colors:active){
  body{background:Canvas;color:CanvasText}
  .emergency-final{border:2px solid CanvasText;background:Canvas}
}

/* ==============================================================
   V14 — versione statica per il sito scolastico
   Nessun backend, nessuna PWA, nessun tracciamento interno.
   ============================================================= */
.a11y-tools{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;
  padding:.55rem .8rem;background:color-mix(in srgb,var(--card) 94%,var(--soft-gray));
  border-bottom:1px solid var(--line);font-size:.82rem
}
.a11y-label{font-weight:700;color:var(--muted);margin-right:.15rem}
.a11y-tools button{
  min-height:40px;padding:.32rem .7rem;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer
}
.a11y-tools button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

body.font-large{font-size:1.13rem}
body.font-large main{max-width:46rem}
body.manual-contrast{
  --bg:#FFFFFF;--card:#FFFFFF;--ink:#071D25;--muted:#253E48;--line:#5D737C;
  --brand:#0B4E64;--green:#215A45;--soft-blue:#E7F2F6;--soft-green:#E8F4EE;--soft-gray:#EEF2F3;
  background:#fff
}
body.manual-contrast .hero,body.manual-contrast .school,body.manual-contrast .panel,
body.manual-contrast .contact,body.manual-contrast .banner,body.manual-contrast .opt,
body.manual-contrast .guarantees li,body.manual-contrast .story-card,body.manual-contrast .resource-card{
  box-shadow:none;border-width:2px
}
body.manual-reduced-motion *,body.manual-reduced-motion *::before,body.manual-reduced-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important
}

/* Scenari esemplificativi: originali e chiaramente non attribuiti a persone reali. */
.story-card{
  margin:1rem 0 1.25rem;padding:1rem 1.1rem;border:1.5px solid color-mix(in srgb,var(--green) 35%,var(--line));
  border-radius:24px;background:linear-gradient(135deg,var(--soft-green),color-mix(in srgb,var(--soft-blue) 42%,var(--card)));
  box-shadow:0 14px 34px -28px var(--shadow)
}
.story-card .eyebrow{display:block;color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.75rem}
.story-text{margin:.45rem 0 .5rem;font-size:1.02rem;font-weight:600;line-height:1.65}
.story-note{margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}

/* Risorse esterne: nessun contenuto di terzi viene copiato nella guida. */
.resources{margin:1.5rem 0 1.1rem;padding:1rem;border:1px solid var(--line);border-radius:26px;background:var(--card)}
.resources-head h2{margin:.15rem 0 .3rem}
.resources-head p{margin:.2rem 0 .8rem;color:var(--muted);font-size:.9rem}
.eyebrow{color:var(--brand);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.75rem}
.resource-grid{display:grid;gap:.65rem}
.resource-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;text-decoration:none;color:var(--ink);
  padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--soft-blue),var(--card))
}
.resource-card:hover{border-color:var(--brand)}
.resource-card strong{display:block;line-height:1.35}
.resource-card span span{display:block;margin-top:.18rem;color:var(--muted);font-size:.82rem;line-height:1.45}
.resource-card .chev{color:var(--brand);width:1rem;height:1rem}

/* Migliore comportamento quando la guida è incorporata nella home della scuola. */
@media (min-width:900px){
  main{max-width:48rem}
  .resource-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  html{font-size:17px}
  .top{align-items:flex-start}
  .brand{max-width:58%}
  .exit{padding:.38rem .65rem;font-size:.82rem}
  .a11y-tools{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .a11y-label{display:none}
}
@media print{
  .a11y-tools,.resources,.story-card{display:none!important}
}


/* V16 — risorse territoriali e nota trasparenza IA */
.local-links{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--soft-green),var(--card))}
.local-links h2{margin:0 0 .65rem;color:var(--green)}
.local-link{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;width:100%;text-align:left;padding:.8rem .9rem;border:1.5px solid color-mix(in srgb,var(--green) 35%,var(--line));border-radius:18px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:58px}
.local-link:hover{border-color:var(--green);transform:translateY(-1px)}
.local-link strong{display:block;line-height:1.35}
.local-link span span{display:block;margin-top:.18rem;color:var(--muted);font-size:.84rem;line-height:1.45}
.local-link .chev{color:var(--green);width:1rem;height:1rem}
.ai-note{margin-top:1.2rem;padding:.85rem 1rem;border-left:4px solid var(--brand);border-radius:0 14px 14px 0;background:var(--soft-blue);color:var(--ink)}
.contact-source-note{margin-top:1rem;padding:.8rem .9rem;border-radius:14px;background:var(--soft-gray);color:var(--muted)}
@media print{.local-links{display:none!important}.ai-note{border:1px solid #aaa;background:#fff}}

/* V18 — home essenziale e pagina "Il progetto" */
.project-link-wrap{margin:1.15rem 0 .25rem;padding-top:.85rem;border-top:1px solid var(--line)}
.project-link{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;width:100%;text-align:left;padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:60px}
.project-link:hover{border-color:var(--brand);transform:translateY(-1px)}
.project-link strong{display:block;line-height:1.35}
.project-link span span{display:block;margin-top:.18rem;color:var(--muted);font-size:.84rem;line-height:1.45}
.project-link .chev{color:var(--brand);width:1rem;height:1rem}
.project-page{max-width:46rem;margin:0 auto}
.project-intro{margin-bottom:1.25rem}
.project-sections{display:grid;gap:.8rem}
.project-section{padding:1rem 1.05rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--soft-blue),var(--card))}
.project-section:nth-child(even){background:linear-gradient(135deg,var(--soft-green),var(--card))}
.project-section h2{margin:0 0 .45rem;font-size:1.08rem;color:var(--brand)}
.project-section p{margin:0;line-height:1.65;color:var(--ink)}
@media print{.project-link-wrap{display:none!important}.project-section{break-inside:avoid}}