/* ==========================================================================
   CAPKB — NATI PER GUIDARE
   Foglio di stile globale — V1
   ========================================================================== */

/* ---------- 1. Token di design ---------- */
:root{
  --nero:#0B0C0E;
  --nero-2:#15171A;
  --nero-3:#22252A;
  --inchiostro:#101114;
  --testo:#1C1F24;
  --testo-2:#5A616B;
  --testo-3:#868D97;
  --bianco:#FFFFFF;
  --grigio-1:#F6F7F9;
  --grigio-2:#EDEFF2;
  --grigio-3:#DFE3E8;
  --bordo:#E2E6EB;

  --rosso:#E10600;
  --rosso-scuro:#B10007;
  --rosso-chiaro:#FFE9E8;
  --verde:#00A639;
  --verde-scuro:#00832D;
  --verde-chiaro:#E6F7ED;
  --ambra:#B36B00;
  --ambra-chiaro:#FFF4E0;

  --raggio:14px;
  --raggio-s:10px;
  --raggio-l:22px;
  --ombra-1:0 1px 2px rgba(16,17,20,.05), 0 2px 8px rgba(16,17,20,.05);
  --ombra-2:0 2px 6px rgba(16,17,20,.07), 0 12px 28px rgba(16,17,20,.09);
  --ombra-3:0 24px 60px rgba(16,17,20,.16);

  --titolo:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --corpo:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largh:1160px;
  --gutter:20px;
  --header-h:64px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bianco);color:var(--testo);
  font-family:var(--corpo);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rosso-scuro);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
hr{border:0;border-top:1px solid var(--bordo);margin:32px 0}
:focus-visible{outline:3px solid var(--rosso);outline-offset:2px;border-radius:4px}
::selection{background:var(--rosso);color:#fff}

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4,.titolo{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.03;margin:0 0 .5em;color:var(--inchiostro);
}
h1{font-size:clamp(2.35rem,8vw,4.1rem)}
h2{font-size:clamp(1.85rem,5.2vw,2.9rem)}
h3{font-size:clamp(1.25rem,3.4vw,1.6rem)}
h4{font-size:1.06rem;letter-spacing:.02em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:650;color:var(--inchiostro)}
small{font-size:.85rem}

.occhiello{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.16em;color:var(--rosso);
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
}
.occhiello::before{content:"";width:26px;height:3px;background:var(--rosso);flex:none}
.occhiello--chiaro{color:#fff}
.occhiello--chiaro::before{background:var(--rosso)}

.guida{font-size:1.09rem;color:var(--testo-2);max-width:62ch}
.guida-l{font-size:1.2rem;color:var(--testo-2);max-width:60ch;line-height:1.55}
.muto{color:var(--testo-2)}
.centro{text-align:center}
.centro .occhiello{justify-content:center}
.centro .guida,.centro .guida-l{margin-left:auto;margin-right:auto}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--largh);margin:0 auto;padding:0 var(--gutter)}
.wrap--stretto{max-width:800px}
.sezione{padding:60px 0}
.sezione--s{padding:40px 0}
.sezione--l{padding:76px 0}
.sezione--grigia{background:var(--grigio-1);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.sezione--nera{background:var(--nero);color:#C9CDD3}
.sezione--sottile{padding:44px 0}
.sezione--nera h1,.sezione--nera h2,.sezione--nera h3,.sezione--nera h4{color:#fff}
.sezione--nera .guida,.sezione--nera .guida-l,.sezione--nera .muto{color:#9AA1AB}
.sezione--nera a{color:#fff}

.griglia{display:grid;gap:18px}
.griglia > *{min-width:0}
.g2,.g3,.g4{grid-template-columns:1fr}
@media(min-width:520px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:680px){
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}
.testa-sezione{margin-bottom:30px}

/* ---------- 5. Nastro tricolore ---------- */
.tricolore{height:4px;display:flex;flex:none}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--verde)}
.tricolore i:nth-child(2){background:#fff}
.tricolore i:nth-child(3){background:var(--rosso)}
.tricolore--sottile{height:3px}

/* ---------- 6. Header ---------- */
.header{position:sticky;top:0;z-index:80;background:var(--nero);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.header > .wrap{max-width:1340px}
.header__barra{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:16px}
.header__logo{display:flex;align-items:center;flex:none}
.header__logo img{height:31px;width:auto}
@media(max-width:400px){.header__logo img{height:27px}}
.header__logo:hover{text-decoration:none}

.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav a{
  display:block;padding:9px 11px;border-radius:8px;color:#D7DBE1;
  font-family:var(--titolo);font-weight:600;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.045em;white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.nav a[aria-current="page"]{color:#fff;background:rgba(225,6,0,.9)}
@media(min-width:1120px){.nav{display:block}}

.header .header__azione{display:none;white-space:nowrap;flex:none}
@media(min-width:1320px){.header .header__azione{display:inline-flex}}
@media(min-width:1120px) and (max-width:1460px){
  .nav a{padding:9px 7px;font-size:.96rem;letter-spacing:.02em}
  .header__barra{gap:10px}
}

.hamburger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:transparent;border:1px solid rgba(255,255,255,.25);
  border-radius:10px;flex:none;
}
.hamburger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.22s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1120px){.hamburger{display:none}}

.menu-mobile{
  display:none;background:var(--nero-2);border-top:1px solid rgba(255,255,255,.1);
  max-height:calc(100vh - var(--header-h));overflow:auto;
}
.menu-mobile.aperto{display:block}
.menu-mobile ul{list-style:none;margin:0;padding:8px 0 18px}
.menu-mobile a{
  display:block;padding:13px 20px;color:#E4E7EB;border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--titolo);font-weight:600;text-transform:uppercase;font-size:1.22rem;letter-spacing:.04em;
}
.menu-mobile a:hover,.menu-mobile a[aria-current="page"]{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.menu-mobile .btn{margin:16px 20px 0;width:calc(100% - 40px);justify-content:center}

/* ---------- 7. Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--raggio-s);border:2px solid transparent;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  font-size:1.12rem;letter-spacing:.05em;line-height:1;
  background:var(--rosso);color:#fff;transition:.16s;text-align:center;
}
.btn:hover{background:var(--rosso-scuro);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--nero{background:var(--inchiostro)}
.btn--nero:hover{background:#000}
.btn--fantasma{background:transparent;border-color:var(--inchiostro);color:var(--inchiostro)}
.btn--fantasma:hover{background:var(--inchiostro);color:#fff}
.btn--chiaro{background:#fff;color:var(--inchiostro)}
.btn--chiaro:hover{background:var(--grigio-2);color:var(--inchiostro)}
.btn--contorno-chiaro{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--contorno-chiaro:hover{background:#fff;color:var(--inchiostro)}
.btn--s{padding:10px 16px;font-size:.98rem}
.btn--l{padding:17px 32px;font-size:1.25rem}
.btn--pieno{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.btn-riga{display:flex;flex-wrap:wrap;gap:12px}
.btn-riga--centro{justify-content:center}

/* ---------- 8. Card ---------- */
.card{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:22px;box-shadow:var(--ombra-1);position:relative;
  display:flex;flex-direction:column;transition:.18s;
}
a.card:hover,.card--link:hover{
  text-decoration:none;box-shadow:var(--ombra-2);transform:translateY(-2px);border-color:var(--grigio-3);
}
.card h3{margin-bottom:.35em}
.card p{color:var(--testo-2);font-size:.97rem}
.card__pie{margin-top:auto;padding-top:16px}
.card__freccia{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  color:var(--rosso);letter-spacing:.06em;font-size:1rem;
  display:inline-flex;align-items:center;gap:7px;
}
a.card:hover .card__freccia{gap:12px}
.card--accento{border-top:4px solid var(--rosso)}
.card--nera{background:var(--nero);border-color:#2A2E34;color:#B9BFC7}
.card--nera h3,.card--nera h4{color:#fff}
.card--nera p{color:#9AA1AB}

.card__num{
  font-family:var(--titolo);font-weight:700;font-size:2.6rem;line-height:1;
  color:var(--rosso);margin-bottom:6px;
}
.card__icona{
  width:44px;height:44px;border-radius:10px;background:var(--rosso-chiaro);color:var(--rosso-scuro);
  display:flex;align-items:center;justify-content:center;font-family:var(--titolo);
  font-weight:700;font-size:1.35rem;margin-bottom:14px;flex:none;
}

/* Card grandi dei tre ingressi */
.ingresso{
  position:relative;overflow:hidden;border-radius:var(--raggio-l);
  border:1px solid var(--bordo);background:#fff;box-shadow:var(--ombra-1);
  display:flex;flex-direction:column;padding:26px 24px 24px;transition:.2s;
}
.ingresso:hover{box-shadow:var(--ombra-2);transform:translateY(-3px);text-decoration:none}
.ingresso__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.82rem;color:var(--testo-3);margin-bottom:10px;
}
.ingresso h3{font-size:clamp(1.55rem,4.6vw,2rem);margin-bottom:.3em}
.ingresso p{color:var(--testo-2);margin-bottom:20px}
.ingresso .btn{align-self:flex-start;margin-top:auto}
.ingresso--primo{background:var(--nero);border-color:var(--nero)}
.ingresso--primo h3{color:#fff}
.ingresso--primo p{color:#A8AFB8}
.ingresso--primo .ingresso__eti{color:var(--rosso)}
.ingresso__scacchi{position:absolute;inset:0 0 auto 0;height:8px}

/* Motivo a scacchi */
.scacchi{
  height:8px;
  background-image:
    linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%),
    linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;opacity:.9;
}

/* ---------- 9. Hero ---------- */
.hero{background:var(--nero);color:#C9CDD3;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-12%;top:-40%;width:60%;height:180%;
  background:radial-gradient(circle at 50% 50%,rgba(225,6,0,.28),transparent 62%);pointer-events:none;
}
.hero__in{position:relative;z-index:1;padding:52px 0 60px;text-align:center}
.hero__logo{width:min(520px,88vw);margin:0 auto 26px}
.hero h1{color:#fff;font-size:clamp(2.1rem,6.6vw,3.5rem);margin-bottom:.4em}
.hero p{color:#A8AFB8;font-size:1.13rem;max-width:56ch;margin:0 auto 28px}
.hero .btn-riga{justify-content:center}
.hero .occhiello{justify-content:center}
.hero .occhiello::before{display:none}
@media(min-width:760px){.hero__in{padding:70px 0 78px}}

/* Hero evento Mores.
   Per inserire la grafica del kart: metti il file in assets/img/mores-kart.jpg
   e togli i commenti dal blocco .hero--evento::before qui sotto. */
.hero--evento{background:linear-gradient(160deg,#0B0C0E 0%,#1A0F10 55%,#3A0D08 100%)}
/*
.hero--evento::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/mores-kart.jpg") center/cover no-repeat;
  opacity:.45;
}
.hero--evento::after{background:linear-gradient(180deg,rgba(11,12,14,.35),rgba(11,12,14,.85))}
*/

/* Hero di pagina (interne) */
.hero-pag{background:var(--nero);color:#B9BFC7;padding:44px 0 46px;position:relative;overflow:hidden}
.hero-pag::after{
  content:"";position:absolute;left:-10%;bottom:-70%;width:52%;height:170%;
  background:radial-gradient(circle,rgba(225,6,0,.22),transparent 65%);pointer-events:none;
}
.hero-pag > .wrap{position:relative;z-index:1}
.hero-pag h1{color:#fff;margin-bottom:.28em}
.hero-pag p{color:#A8AFB8;font-size:1.1rem;max-width:60ch;margin-bottom:0}
.hero-pag .btn-riga{margin-top:24px}

/* ---------- 10. Briciole ---------- */
.briciole{font-size:.86rem;color:var(--testo-3);padding:14px 0 0}
.briciole a{color:var(--testo-2)}
.briciole span{margin:0 7px;opacity:.6}
.hero-pag .briciole{color:#7C838D;padding-bottom:14px}
.hero-pag .briciole a{color:#A8AFB8}

/* ---------- 11. Fonte ufficiale ---------- */
.fonte{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--grigio-1);border:1px solid var(--bordo);border-left:4px solid var(--nero-3);
  border-radius:var(--raggio-s);padding:13px 16px;font-size:.88rem;color:var(--testo-2);margin:18px 0;
}
.fonte strong{color:var(--inchiostro)}
.fonte b{font-weight:700}

.avviso{
  border-radius:var(--raggio-s);padding:15px 18px;font-size:.93rem;margin:18px 0;
  background:var(--ambra-chiaro);border:1px solid #F0DCB4;color:#6A4300;
}
.avviso strong{color:#4E3100}
.avviso--info{background:#EEF4FF;border-color:#D3E0F7;color:#274069}
.avviso--info strong{color:#1B2E4D}

/* ---------- 12. Liste ---------- */
.lista-check{list-style:none;padding:0;margin:0 0 1em}
.lista-check li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--testo-2)}
.lista-check li::before{
  content:"";position:absolute;left:2px;top:.52em;width:14px;height:8px;
  border-left:3px solid var(--verde);border-bottom:3px solid var(--verde);
  transform:rotate(-45deg);
}
.lista-num{counter-reset:p;list-style:none;padding:0;margin:0}
.lista-num li{
  counter-increment:p;position:relative;padding-left:54px;padding-bottom:22px;
  border-left:2px solid var(--grigio-3);margin-left:15px;
}
.lista-num li:last-child{border-left-color:transparent;padding-bottom:0}
.lista-num li::before{
  content:counter(p);position:absolute;left:-16px;top:-2px;width:32px;height:32px;
  background:var(--nero);color:#fff;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--titolo);font-weight:700;font-size:1.02rem;
}
.lista-num h4{margin-bottom:.3em}
.lista-num p{color:var(--testo-2);font-size:.97rem}

/* ---------- 13. Tabelle ---------- */
.tabella-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bordo);border-radius:var(--raggio);background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--bordo);white-space:nowrap}
th{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;font-size:.92rem;
  letter-spacing:.05em;color:var(--testo-2);background:var(--grigio-1);
}
td:first-child,th:first-child{white-space:normal;min-width:150px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--grigio-1)}
.num{font-variant-numeric:tabular-nums}

/* ---------- 14. Form ---------- */
.campo{margin-bottom:18px}
.campo > label,.campo__eti{
  display:block;font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.05em;margin-bottom:7px;color:var(--inchiostro);
}
.campo__aiuto{font-size:.85rem;color:var(--testo-2);margin:-2px 0 8px}
input[type=text],input[type=date],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:13px 14px;border:2px solid var(--grigio-3);border-radius:var(--raggio-s);
  background:#fff;font-size:1rem;transition:.15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--rosso);outline:none}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rosso);background:var(--rosso-chiaro)}
.errore-campo{color:var(--rosso-scuro);font-size:.85rem;margin-top:6px;font-weight:600;display:none}
.errore-campo.mostra{display:block}

.scelte{display:flex;flex-wrap:wrap;gap:10px}
.scelta{position:relative}
.scelta input{position:absolute;opacity:0;width:0;height:0}
.scelta span{
  display:inline-flex;align-items:center;padding:11px 20px;border:2px solid var(--grigio-3);
  border-radius:var(--raggio-s);font-weight:600;background:#fff;transition:.15s;cursor:pointer;
}
.scelta input:checked + span{border-color:var(--rosso);background:var(--rosso-chiaro);color:var(--rosso-scuro)}
.scelta input:focus-visible + span{outline:3px solid var(--rosso);outline-offset:2px}

.form-box{background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio-l);padding:26px 22px;box-shadow:var(--ombra-1)}
@media(min-width:700px){.form-box{padding:34px 32px}}
.form-nota{font-size:.86rem;color:var(--testo-2);margin-top:14px}

/* ---------- 15. Footer ---------- */
.footer{background:var(--nero);color:#8C939D;padding:46px 0 26px;font-size:.92rem}
.footer__logo{width:240px;max-width:78%;margin-bottom:18px}
.footer h4{color:#fff;font-size:1rem;letter-spacing:.08em;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.footer a{color:#B9BFC7}
.footer a:hover{color:#fff}
.footer__griglia{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:760px){.footer__griglia{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__basso{
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:.86rem;color:#767D87;
}
/* ==========================================================================
   16. APP — Studio, Quiz, Simulazione, Statistiche
   ========================================================================== */

.app{background:var(--grigio-1);min-height:70vh;padding:22px 0 60px}
.app__testa{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--ombra-1);
}
.app__testa h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin-bottom:.15em}
.app__testa p{color:var(--testo-2);font-size:.93rem;margin:0}

.barra-app{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--nero);color:#fff;border-radius:var(--raggio);padding:12px 16px;margin-bottom:16px;
}
.barra-app__sx{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contatore{
  font-family:var(--titolo);font-weight:700;font-size:1.3rem;letter-spacing:.04em;color:#fff;
}
.contatore small{color:#8C939D;font-weight:600}
.timer{
  font-family:var(--titolo);font-weight:700;font-size:1.55rem;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;color:#fff;padding:2px 12px;border-radius:8px;background:rgba(255,255,255,.1);
}
.timer.allarme{background:var(--rosso);animation:pulsa 1s infinite}
@keyframes pulsa{50%{opacity:.62}}

.progresso{height:6px;background:var(--grigio-2);border-radius:99px;overflow:hidden;margin-bottom:18px}
.progresso i{display:block;height:100%;background:var(--rosso);border-radius:99px;transition:width .3s}
.progresso--chiara{background:rgba(255,255,255,.18)}

/* Scheda domanda */
.domanda{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio-l);
  padding:24px 20px;box-shadow:var(--ombra-1);
}
@media(min-width:700px){.domanda{padding:32px 34px}}
.domanda__materia{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;color:var(--testo-3);margin-bottom:10px;
}
.domanda__testo{
  font-size:clamp(1.15rem,3.4vw,1.45rem);line-height:1.42;font-weight:600;
  color:var(--inchiostro);margin-bottom:22px;
}

.risposte{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.risposta{
  display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
  padding:15px 16px;background:#fff;border:2px solid var(--grigio-3);
  border-radius:var(--raggio-s);transition:.14s;font-size:1.02rem;line-height:1.45;
}
.risposta:hover:not(:disabled){border-color:var(--nero-3);background:var(--grigio-1)}
.risposta__lettera{
  flex:none;width:30px;height:30px;border-radius:8px;background:var(--grigio-2);
  color:var(--testo);display:flex;align-items:center;justify-content:center;
  font-family:var(--titolo);font-weight:700;font-size:1.1rem;
}
.risposta.scelta{border-color:var(--nero);background:var(--grigio-1)}
.risposta.scelta .risposta__lettera{background:var(--nero);color:#fff}
.risposta.giusta{border-color:var(--verde);background:var(--verde-chiaro)}
.risposta.giusta .risposta__lettera{background:var(--verde);color:#fff}
.risposta.sbagliata{border-color:var(--rosso);background:var(--rosso-chiaro)}
.risposta.sbagliata .risposta__lettera{background:var(--rosso);color:#fff}
.risposta:disabled{cursor:default}
.risposta.attenuata{opacity:.55}

.esito{
  border-radius:var(--raggio-s);padding:15px 17px;margin-bottom:18px;font-size:.97rem;
  border:1px solid transparent;
}
.esito--ok{background:var(--verde-chiaro);border-color:#BEE8CE;color:#0A5A2A}
.esito--ko{background:var(--rosso-chiaro);border-color:#F7CFCD;color:#8A1712}
.esito__tit{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.15rem;margin-bottom:5px;display:block;
}

.spiegazione{
  background:var(--grigio-1);border:1px solid var(--bordo);border-radius:var(--raggio-s);
  padding:15px 17px;margin-bottom:16px;font-size:.95rem;color:var(--testo-2);
}
.spiegazione strong{display:block;font-family:var(--titolo);text-transform:uppercase;
  letter-spacing:.07em;font-size:.9rem;color:var(--inchiostro);margin-bottom:5px}

.navig{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:22px;flex-wrap:wrap}
.navig .btn{flex:1 1 auto;min-width:140px}

/* Barra audio */
.audio-barra{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:12px 0 0;margin-top:16px;border-top:1px solid var(--bordo);
}
.btn-audio{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;
  border:2px solid var(--grigio-3);background:#fff;font-weight:600;font-size:.9rem;transition:.15s;
}
.btn-audio:hover{border-color:var(--nero);background:var(--grigio-1)}
.btn-audio.attivo{border-color:var(--rosso);background:var(--rosso-chiaro);color:var(--rosso-scuro)}
.btn-audio[hidden]{display:none}

/* Selettore materie */
.materie{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.materie{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.materie{grid-template-columns:repeat(3,1fr)}}
.materia{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);padding:18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--ombra-1);transition:.16s;
}
.materia:hover{box-shadow:var(--ombra-2);transform:translateY(-2px)}
.materia h3{font-size:1.18rem;margin:0}
.materia__meta{font-size:.85rem;color:var(--testo-2);margin:0}
.materia__azioni{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.materia__azioni .btn{flex:1 1 auto;padding:10px 12px;font-size:.95rem}

.pillola{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;font-size:.82rem;
  letter-spacing:.06em;background:var(--grigio-2);color:var(--testo-2);
}
.pillola--ok{background:var(--verde-chiaro);color:var(--verde-scuro)}
.pillola--medio{background:var(--ambra-chiaro);color:var(--ambra)}
.pillola--ko{background:var(--rosso-chiaro);color:var(--rosso-scuro)}
.pillola--nera{background:var(--nero);color:#fff}

/* Statistiche */
.stat-griglia{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.stat-griglia{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);padding:17px;box-shadow:var(--ombra-1)}
.stat__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--testo-3);margin-bottom:6px;
}
.stat__val{font-family:var(--titolo);font-weight:700;font-size:2.1rem;line-height:1;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.stat__val small{font-size:1rem;color:var(--testo-3)}
.stat__val--testo{font-size:clamp(1.05rem,4.2vw,1.6rem);line-height:1.15}
/* «2h 40m» andava a capo tra le ore e i minuti nel riquadro stretto del telefono */
.stat__val--tempo{white-space:nowrap;font-size:clamp(1.35rem,7vw,2.1rem)}

.anello{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.anello__grafico{position:relative;width:132px;height:132px;flex:none}
.anello__grafico svg{transform:rotate(-90deg)}
.anello__val{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--titolo);font-weight:700;font-size:1.95rem;line-height:1.05;color:var(--inchiostro);
}
.anello__val span{font-size:.56rem;letter-spacing:.1em;color:var(--testo-3);margin-top:3px}

.barra-perc{height:8px;background:var(--grigio-2);border-radius:99px;overflow:hidden;min-width:80px}
.barra-perc i{display:block;height:100%;border-radius:99px;background:var(--verde)}
.barra-perc i.medio{background:#E8A100}
.barra-perc i.basso{background:var(--rosso)}

/* Studio contro quiz: due riquadri e una barra che mostra la proporzione.
   Con due sole voci la griglia da quattro colonne lascerebbe mezza riga vuota. */
.stat-griglia--2{grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.stat-griglia--2{grid-template-columns:repeat(2,1fr)}}
.stat__eti small{display:block;font-weight:600;text-transform:none;letter-spacing:.01em;font-size:.74rem;color:var(--testo-3);margin-top:2px}
.tempo-barra{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--grigio-2)}
.tempo-barra i{display:block;height:100%}
.tempo-barra__studio{background:var(--nero)}
.tempo-barra__quiz{background:var(--rosso)}
.tempo-legenda{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;font-size:.9rem;color:var(--testo-2)}
.tempo-legenda span{display:inline-flex;align-items:center;gap:7px}
.tempo-punto{width:11px;height:11px;border-radius:99px;flex:none}
.tempo-punto--studio{background:var(--nero)}
.tempo-punto--quiz{background:var(--rosso)}

/* Riepilogo esame */
.riepilogo{
  border-radius:var(--raggio-l);padding:30px 24px;text-align:center;color:#fff;margin-bottom:22px;
}
.riepilogo--ok{background:linear-gradient(135deg,#00832D,#00A639)}
.riepilogo--ko{background:linear-gradient(135deg,#8A0500,#E10600)}
.riepilogo h2{color:#fff;font-size:clamp(1.9rem,6vw,2.9rem);margin-bottom:.2em}
.riepilogo p{color:rgba(255,255,255,.9);margin:0}
.riepilogo__cifre{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.riepilogo__cifra{text-align:center}
.riepilogo__cifra b{display:block;font-family:var(--titolo);font-size:2.2rem;line-height:1}
.riepilogo__cifra span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}

.vuoto{
  text-align:center;padding:44px 20px;background:#fff;border:1px dashed var(--grigio-3);
  border-radius:var(--raggio);color:var(--testo-2);
}
.vuoto h3{color:var(--testo);margin-bottom:.4em}

/* Ripasso lista */
.lista-domande{display:flex;flex-direction:column;gap:10px}
.mini-dom{
  background:#fff;border:1px solid var(--bordo);border-left:4px solid var(--rosso);
  border-radius:var(--raggio-s);padding:14px 16px;font-size:.95rem;
}
.mini-dom__t{font-weight:600;color:var(--inchiostro);margin-bottom:7px}
.mini-dom__r{color:var(--testo-2);font-size:.9rem;margin:0}
.mini-dom__r b{color:var(--verde-scuro)}

/* Sticky bar mobile */
.sticky-azione{
  position:sticky;bottom:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-top:1px solid var(--bordo);
  padding:12px var(--gutter);margin:22px calc(var(--gutter)*-1) 0;
}
.sticky-azione .btn{width:100%}
@media(min-width:760px){.sticky-azione{position:static;background:none;border:0;backdrop-filter:none;padding:0;margin:22px 0 0}}

/* Utility */
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:32px}
[hidden]{display:none !important}
.salta{
  position:absolute;left:-9999px;top:0;background:var(--rosso);color:#fff;padding:12px 18px;z-index:200;
}
.salta:focus{left:0}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .header,.footer,.menu-mobile,.sticky-azione,.btn{display:none !important}
  body{background:#fff}
}

/* ==========================================================================
   17. Ricerca fra le domande
   ========================================================================== */
.cerca-box{
  position:sticky;top:var(--header-h);z-index:30;
  background:var(--grigio-1);padding:16px 0 14px;margin-bottom:6px;
  border-bottom:1px solid var(--bordo);
}
.cerca-campo{position:relative;display:flex;gap:10px;flex-wrap:wrap}
.cerca-campo input[type=search]{
  flex:1 1 260px;padding:15px 16px 15px 46px;font-size:1.05rem;
  border:2px solid var(--grigio-3);border-radius:var(--raggio-s);background:#fff;
  -webkit-appearance:none;appearance:none;
}
.cerca-campo input[type=search]:focus{border-color:var(--rosso);outline:none}
.cerca-campo{align-items:flex-start}
.cerca-campo::before{
  /* ancorata alla prima riga: resta sul campo anche quando il selettore va a capo */
  content:"⌕";position:absolute;left:15px;top:14px;
  font-size:1.6rem;color:var(--testo-3);pointer-events:none;line-height:1;
}
.cerca-campo select{flex:0 0 auto;width:auto;min-width:190px}
.cerca-opz{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.spunta{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--testo-2);cursor:pointer}
.spunta input{width:18px;height:18px;accent-color:var(--rosso);margin:0;cursor:pointer}
.spunta:hover{color:var(--inchiostro)}
.cerca-opz .cerca-stato{margin-top:0}
.cerca-stato{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.85rem;color:var(--testo-2);margin-top:10px;min-height:1.1em;
}

mark{background:#FFF1A8;color:inherit;padding:0 2px;border-radius:3px}

.ris{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:18px 18px 16px;box-shadow:var(--ombra-1);
}
.ris__testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ris__blocco{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;color:var(--testo-3);
}
.ris__dom{font-size:1.08rem;font-weight:600;line-height:1.4;color:var(--inchiostro);margin-bottom:12px}
.ris__opz{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.ris__opz li{
  padding:9px 12px;border-radius:8px;background:var(--grigio-1);
  font-size:.95rem;line-height:1.45;color:var(--testo-2);
}
.ris__opz li b{
  display:inline-block;min-width:1.3em;font-family:var(--titolo);font-weight:700;color:var(--testo-3);
}
.ris__opz li.giusta{background:var(--verde-chiaro);color:var(--testo);font-weight:500}
.ris__opz li.giusta b{color:var(--verde-scuro)}
.ris__ok{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:.74rem;color:var(--verde-scuro);white-space:nowrap;
}
.ris__perche{
  font-size:.93rem;color:var(--testo-2);background:var(--grigio-1);
  border-left:3px solid var(--grigio-3);padding:10px 13px;border-radius:0 8px 8px 0;margin-bottom:10px;
}
.ris__perche strong{color:var(--inchiostro)}
.ris__fonte{font-size:.85rem;color:var(--testo-3);margin-bottom:10px}
.ris__azioni{display:flex;gap:8px;flex-wrap:wrap}

.cerca-scorciatoia{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--ombra-1);
}
.cerca-scorciatoia .cerca-campo input[type=search]{flex:1 1 200px}

/* Ricerca in home: campo grande su fondo scuro, risultati sotto */
.cerca-home .cerca-campo input[type=search]{
  flex:1 1 100%;padding:17px 18px 17px 48px;font-size:1.08rem;border-color:transparent;
}
.cerca-home .cerca-campo::before{color:#8A9199;top:16px}
.cerca-home__nota{color:#98A0A8;font-size:.9rem;margin:12px 0 0;text-align:center}
.cerca-home #h-risultati:empty{display:none}
.cerca-home .lista-domande{text-align:left}
.cerca-home .vuoto{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#B9BFC7}
.cerca-home .vuoto h3{color:#fff}
/* dentro una sezione scura i risultati restano schede chiare: i link
   non devono ereditare il bianco di .sezione--nera a */
.sezione--nera .ris a{color:var(--rosso-scuro)}
.sezione--nera .ris .btn{color:#fff}
.sezione--nera .ris .btn--fantasma,
.sezione--nera .ris .btn--chiaro{color:var(--inchiostro)}
.cerca-tutti{text-align:center;margin:18px 0 0}

/* ==========================================================================
   18. Pagina di una singola domanda
   Regola cromatica: il VERDE è la risposta giusta e il perché è quella.
   L'ambra è la trappola, il nero è la legge. Il rosso resta al marchio.
   ========================================================================== */
.dett-pagina{background:var(--grigio-1);padding:0 0 54px}
.dett-wrap{width:100%;max-width:760px;margin:0 auto;padding:0 var(--gutter)}

/* --- testata --- */
.dett__testata{padding:24px 0 22px}
.dett__eti{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.dett__materia{
  display:inline-block;font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:.76rem;color:var(--rosso-scuro);
  background:var(--rosso-chiaro);padding:5px 12px;border-radius:99px;
}
.dett__blocco{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.76rem;color:var(--testo-3);
}
.dett__dom{
  font-family:var(--corpo);text-transform:none;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.36rem,4.2vw,1.95rem);line-height:1.32;color:var(--inchiostro);margin:0 0 18px;
}

/* --- barra audio --- */
.audio-pag{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.audio-pag .btn-audio{background:#fff}

/* ==== LE RISPOSTE ==== */
.risp{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.risp > li{
  background:#fff;border:1px solid var(--bordo);border-radius:13px;
  box-shadow:var(--ombra-1);overflow:hidden;
}
.risp__testa{display:flex;gap:12px;align-items:flex-start;padding:14px 15px}
.risp__l{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--grigio-2);color:var(--testo-2);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  font-family:var(--titolo);font-weight:700;font-size:1.1rem;
}
.risp__t{flex:1 1 auto;min-width:0;margin:0;font-size:1.02rem;line-height:1.45;color:var(--testo-2)}

/* la risposta giusta si vede da lontano */
.risp > li.ok{
  border:2px solid var(--verde);background:var(--verde-chiaro);
  box-shadow:0 2px 10px rgba(0,166,57,.13);
}
.risp > li.ok .risp__l{background:var(--verde);color:#fff}
.risp > li.ok .risp__t{color:var(--inchiostro);font-weight:600}
.risp__ok{
  display:flex;width:fit-content;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.75rem;color:var(--verde-scuro);
}

/* tendina «perché è sbagliata» */
.risp__apri{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:transparent;border:0;border-top:1px dashed var(--grigio-3);
  padding:11px 15px;text-align:left;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;color:var(--testo-3);transition:.14s;
}
.risp__apri:hover{color:var(--rosso-scuro);background:#FFF7F7}
.risp__apri .frecc{font-size:1rem;line-height:1;transition:transform .2s ease}
.risp__apri[aria-expanded="true"]{color:var(--rosso-scuro)}
.risp__apri[aria-expanded="true"] .frecc{transform:rotate(180deg)}
.risp__no{
  background:var(--grigio-1);border-top:1px solid var(--bordo);
  padding:13px 15px 15px;font-size:.93rem;line-height:1.6;color:var(--testo-2);
}

/* --- variante verde: nel quiz anche il «perché è giusta» è a tendina --- */
.risp__apri--ok{border-top:1px dashed #A8E2BF;color:var(--verde-scuro)}
.risp__apri--ok:hover{color:var(--verde-scuro);background:#DCF3E6}
.risp__apri--ok[aria-expanded="true"]{color:var(--verde-scuro)}
.risp__si{
  background:#F1FAF4;border-top:1px solid #A8E2BF;
  padding:13px 15px 15px;font-size:.96rem;line-height:1.62;color:var(--testo);
}

/* --- nel quiz: l'opzione che l'utente aveva scelto, quando è sbagliata --- */
.risp > li.tua{border-color:var(--nero-3);background:var(--grigio-1)}
.risp > li.tua .risp__l{background:var(--nero-3);color:#fff}
.risp__tua{
  display:flex;width:fit-content;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.75rem;color:var(--testo-3);
}

/* ==== PERCHÉ: verde, sempre aperto ==== */
.perche{
  background:#fff;border:1px solid #A8E2BF;border-left:5px solid var(--verde);
  border-radius:0 13px 13px 0;padding:17px 18px;margin:0 0 12px;box-shadow:var(--ombra-1);
}
@media(min-width:700px){.perche{padding:20px 22px}}
.perche__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.79rem;color:var(--verde-scuro);margin:0 0 9px;display:flex;align-items:center;gap:9px;
}
.perche__eti::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--verde);flex:none}
.perche p{margin:0;font-size:1.04rem;line-height:1.65;color:var(--testo)}
.perche p + p{margin-top:.85em}

/* ==== APPROFONDIMENTI a tendina ==== */
.appro{display:flex;flex-direction:column;gap:9px;margin:20px 0 0}
/* nel quiz gli approfondimenti stanno più stretti: il ritmo è l'allenamento */
.appro--quiz{margin:14px 0 0}
.dopo-appro{margin:14px 0 4px}
.appro__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.79rem;color:var(--testo-3);margin:0 0 3px;
}
.acc{background:#fff;border:1px solid var(--bordo);border-radius:13px;overflow:hidden;box-shadow:var(--ombra-1)}
.acc__testa{
  width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:0;
  padding:14px 15px;text-align:left;transition:.14s;
}
.acc__testa:hover{background:var(--grigio-1)}
.acc__ico{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  background:var(--grigio-2);color:var(--testo-2);
}
.acc__tit{
  flex:1 1 auto;min-width:0;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.06rem;color:var(--inchiostro);line-height:1.15;
}
.acc__sot{
  display:block;font-family:var(--corpo);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.83rem;color:var(--testo-3);margin-top:3px;line-height:1.35;
}
.acc__frecc{flex:none;color:var(--testo-3);font-size:1.1rem;line-height:1;transition:transform .22s ease}
.acc__testa[aria-expanded="true"] .acc__frecc{transform:rotate(180deg)}
.acc__corpo{border-top:1px solid var(--bordo);padding:16px 15px;font-size:.99rem;line-height:1.62;color:var(--testo-2)}
.acc__corpo p{margin:0 0 .9em}
.acc__corpo p:last-child{margin:0}
.acc__nota{font-size:.92rem;color:var(--testo-3)}

.acc--ambra .acc__ico{background:var(--ambra-chiaro);color:var(--ambra)}
.acc--ambra .acc__corpo{background:var(--ambra-chiaro);border-top-color:#F0D5A8;color:#6B4400}
.acc--norma .acc__ico{background:var(--grigio-2);color:var(--inchiostro)}
.acc--norma .acc__corpo{background:var(--nero);border-top-color:var(--nero);color:#D7DBE1}

/* --- testo di legge --- */
.norma{margin:0;padding:0;border:0}
.norma__t{
  display:block;position:relative;padding-left:20px;
  font-size:1rem;line-height:1.68;color:#E4E7EB;
}
.norma__t::before{
  content:"\00AB";position:absolute;left:0;top:-2px;
  color:var(--rosso);font-size:1.7rem;line-height:1;font-weight:700;
}
.norma__t::after{content:"\00BB";color:var(--rosso);font-weight:700}
.norma__fonte{
  display:block;margin-top:12px;
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:#8A9199;
}
.norma__solo{color:#fff;font-weight:600;margin:0}

/* --- varianti e collegate dentro le tendine --- */
.varianti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.varianti li{padding-left:14px;border-left:2px solid var(--grigio-3)}
.varianti b{display:block;color:var(--inchiostro);font-weight:600;line-height:1.5;margin-bottom:4px}
.varianti span{font-size:.93rem;color:var(--testo-2)}
.varianti span i{font-style:normal;color:var(--verde-scuro);font-weight:600}

.collegate{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.collegate a{
  display:block;padding:12px 14px;background:var(--grigio-1);border:1px solid var(--bordo);
  border-radius:var(--raggio-s);color:var(--testo);font-size:.95rem;line-height:1.45;transition:.15s;
}
.collegate a:hover{border-color:var(--nero-3);background:#fff;text-decoration:none;box-shadow:var(--ombra-1)}

/* --- azioni e piede --- */
.dett__azioni{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--grigio-3)}
.dett__azioni .btn{flex:1 1 290px}
.dett__pie{
  display:flex;flex-direction:column;gap:8px;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--bordo);
  font-size:.84rem;line-height:1.55;color:var(--testo-3);
}

/* ==========================================================================
   18b. Barra di ricerca fissa — «cambio domanda senza uscire dalla pagina»
   ========================================================================== */

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--nero);border-top:2px solid var(--rosso);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px rgba(0,0,0,.28);
}
.barra__riga{display:flex;align-items:center;gap:9px;max-width:760px;margin:0 auto;position:relative}
.barra__riga::before{
  content:"\2315";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:#8A9199;font-size:1.35rem;line-height:1;pointer-events:none;
}
.barra__campo{
  flex:1 1 auto;min-width:0;padding:12px 14px 12px 40px;font-size:1rem;
  border:2px solid transparent;border-radius:10px;background:#fff;color:var(--testo);
  -webkit-appearance:none;appearance:none;
}
.barra__campo:focus{outline:none;border-color:var(--rosso)}
.barra__campo::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.barra__x{
  flex:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#D7DBE1;
  border-radius:9px;padding:11px 13px;font-size:1rem;line-height:1;display:none;
}
.barra__x:hover{background:rgba(255,255,255,.09);color:#fff}
.barra.aperta .barra__x{display:block}
.barra__stato{
  max-width:760px;margin:8px auto 0;font-size:.82rem;color:#8A9199;text-align:center;
}
.barra__esiti{max-width:760px;margin:10px auto 0;display:none;flex-direction:column;gap:8px;overflow-y:auto}
.barra.aperta .barra__esiti{display:flex}

/* una riga per risultato: qui si salta, non si legge */
.riga-ris{
  display:block;background:#fff;border-radius:11px;padding:11px 14px;
  border:0;text-align:left;width:100%;color:var(--testo);
}
.riga-ris:hover{background:#F2F4F7;text-decoration:none}
.riga-ris__eti{
  display:block;font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:.71rem;color:var(--testo-3);margin-bottom:4px;
}
.riga-ris__dom{
  display:block;font-size:.95rem;font-weight:600;color:var(--inchiostro);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.riga-ris__ok{
  display:block;font-size:.87rem;color:var(--verde-scuro);font-weight:600;margin-top:4px;
  padding-left:17px;position:relative;line-height:1.4;
}
.riga-ris__ok::before{
  content:"";position:absolute;left:0;top:.45em;width:10px;height:5px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg);
}
.riga-ris__no{display:block;font-size:.85rem;color:var(--testo-3);margin-top:4px}
.barra mark{background:#FFF1A8;color:inherit;padding:0 2px;border-radius:3px}

/* pastiglie degli argomenti suggeriti */
.pastiglie{display:flex;flex-wrap:wrap;gap:7px;max-width:760px;margin:10px auto 0;justify-content:center}
.barra .pastiglie{display:none}
.barra.aperta.vuota .pastiglie{display:flex}
.pastiglia{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#D7DBE1;
  border-radius:99px;padding:7px 13px;font-size:.85rem;line-height:1;
}
.pastiglia:hover{background:rgba(255,255,255,.16);color:#fff;text-decoration:none}
.pastiglie--chiare .pastiglia{background:var(--grigio-1);border-color:var(--bordo);color:var(--testo-2)}
.pastiglie--chiare .pastiglia:hover{background:var(--grigio-2);color:var(--inchiostro)}

/* --- sul telefono la ricerca si prende tutto lo schermo ---
   con la tastiera aperta restano tre centimetri di pagina: un pannellino
   sopra la barra mostrerebbe un risultato e mezzo. */
@media(max-width:719px){
  .barra.aperta{
    top:0;bottom:0;display:flex;flex-direction:column;
    padding:16px 14px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:0;
  }
  .barra.aperta .barra__esiti{flex:1 1 auto;margin-top:12px;max-height:none}
  .barra.aperta .barra__stato{order:-1;margin:0 auto 10px}
}
@media(min-width:720px){
  .barra__esiti{max-height:min(52vh,420px)}
}
/* ==========================================================================
   19. Indice delle domande spiegate
   ========================================================================== */
/* --- il filtro in cima: si cerca scrivendo, oppure si apre una materia --- */
.idx-filtro{
  background:#fff;border:1px solid var(--bordo);border-radius:16px;
  padding:18px 18px 16px;margin:0 0 26px;box-shadow:var(--ombra-1);
}
@media(min-width:700px){.idx-filtro{padding:22px 24px 20px}}
.idx-filtro__eti{
  display:block;font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--testo-3);margin-bottom:10px;
}
.idx-filtro__riga{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.idx-filtro__riga .campo{flex:1 1 240px;margin-bottom:0}
.idx-filtro__riga .btn{flex:none}
.idx-filtro__stato{
  margin:12px 0 0;font-size:.93rem;color:var(--testo-2);
  padding-left:13px;border-left:3px solid var(--verde);
}
.idx-filtro__aiuto{margin:16px 0 9px;font-size:.88rem;color:var(--testo-3)}
/* le pastiglie qui stanno in una scheda bianca: allineate a sinistra, non al centro */
#i-materie{margin:0;max-width:none;justify-content:flex-start}
#i-materie .pastiglia b{color:var(--rosso);margin-left:3px}

.idx-materia{margin-bottom:14px}
.idx-materia__testa{
  width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left;
  background:#fff;border:1px solid var(--bordo);border-radius:13px;
  padding:15px 17px;box-shadow:var(--ombra-1);transition:.14s;
}
.idx-materia__testa:hover{border-color:var(--grigio-3);box-shadow:var(--ombra-2)}
.idx-materia__testa h2{font-size:clamp(1.05rem,3vw,1.28rem);margin:0;flex:1 1 auto}
.idx-materia__n{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--testo-3);flex:none;
}
.idx-materia__frecc{font-size:1.05rem;line-height:1;color:var(--testo-3);flex:none;transition:transform .2s ease}
.idx-materia__testa[aria-expanded="true"]{border-color:var(--nero);box-shadow:var(--ombra-2)}
.idx-materia__testa[aria-expanded="true"] .idx-materia__frecc{transform:rotate(180deg)}
.idx-materia__corpo{padding:16px 2px 6px}
.idx-lista{display:grid;gap:12px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:820px){.idx-lista{grid-template-columns:1fr 1fr}}
.idx-card{
  display:block;height:100%;background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px 18px;transition:.16s;color:var(--testo);
}
.idx-card:hover{text-decoration:none;box-shadow:var(--ombra-2);transform:translateY(-2px);border-color:var(--grigio-3)}
.idx-card__dom{font-weight:600;color:var(--inchiostro);line-height:1.45;margin:0 0 8px;font-size:.99rem}
.idx-card__ris{
  margin:0;font-size:.9rem;line-height:1.5;color:var(--testo-2);
  padding-left:20px;position:relative;
}
.idx-card__ris::before{
  content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg);
}
.idx-card__blocco{
  display:inline-block;margin-top:10px;font-family:var(--titolo);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--testo-3);
}

/* ==========================================================================
   20. Territori del Ruolo conducenti
   Una riga per regione, a tendina. Niente cartina: quello che serve sapere è
   chi organizza l'esame e quante banche dati ci sono, e una cartina non lo
   dice. Una riga sì, ed è identica su telefono e su PC.
   ========================================================================== */
.terr-lista{max-width:820px;margin:0 auto}
.terr__somma{
  margin:0 0 18px;padding:13px 16px;border-radius:12px;
  background:#F1FAF4;border:1px solid #A8E2BF;color:var(--testo-2);
  font-size:.95rem;line-height:1.55;
}
.terr__somma b{color:var(--verde-scuro)}

.terr{margin-bottom:8px}
.terr__testa{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:#fff;border:1px solid var(--bordo);border-radius:12px;
  padding:14px 16px;box-shadow:var(--ombra-1);transition:.14s;
}
.terr__testa:hover{border-color:var(--nero-3);box-shadow:var(--ombra-2)}
.terr__testa[aria-expanded="true"]{border-color:var(--nero);box-shadow:var(--ombra-2)}
.terr__nome{
  flex:1 1 auto;font-family:var(--titolo);font-weight:700;
  font-size:clamp(1.02rem,2.6vw,1.18rem);color:var(--inchiostro);
}
.terr--pronta .terr__nome{color:var(--inchiostro)}
.terr__frecc{font-size:1.05rem;line-height:1;color:var(--testo-3);flex:none;transition:transform .2s ease}
.terr__testa[aria-expanded="true"] .terr__frecc{transform:rotate(180deg)}
.terr__corpo{padding:16px 4px 10px}
.terr__nota{margin:0 0 14px;color:var(--testo-2);font-size:.95rem;line-height:1.6}

.terr__aree{display:flex;flex-direction:column;gap:8px}
.terr__area{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--bordo);border-radius:11px;
  padding:13px 15px;transition:.14s;
}
.terr__area:hover{border-color:var(--rosso);box-shadow:var(--ombra-1);text-decoration:none}
.terr__area-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.terr__area-t b{font-size:1.02rem;color:var(--inchiostro)}
.terr__area-t small{font-size:.87rem;color:var(--testo-2)}
.terr__area-t .terr__prov{color:var(--testo-3);font-size:.82rem}
.terr__area-f{flex:none;color:var(--rosso);font-size:1.2rem;font-weight:700}

/* province in chiaro: chi cerca «ruolo conducenti Olbia» deve trovarle */
.card__prov{font-size:.87rem;color:var(--testo-3);margin:6px 0 0}
.dett-prov{
  display:inline-block;background:var(--grigio-1);border:1px solid var(--bordo);
  border-radius:99px;padding:7px 14px;margin:0 0 18px;font-size:.92rem;color:var(--testo-2);
}
.tag--si{background:var(--verde-chiaro);color:var(--verde-scuro)}
.tag--no{background:var(--grigio-2);color:var(--testo-3)}
.terr .tag{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:.68rem;padding:4px 9px;border-radius:99px;flex:none;
}
/* «In preparazione»: stato intermedio, dato solo dove la fonte è verificata */
.tag--prep{background:#FFF3D6;color:#8A6200}
.terr--prep .terr__testa{border-color:#F0D89B}
.terr__nota--fonte{
  background:var(--grigio-1);border-left:3px solid var(--nero-3);
  padding:12px 14px;border-radius:0 10px 10px 0;font-size:.92rem;
}

/* --- scheda di regione: chi fa l'esame, com'è la prova, dove è il materiale --- */
.sch-ente{
  background:var(--inchiostro);color:#fff;border-radius:15px;
  padding:19px 21px;margin:0 0 20px;
}
.sch-ente__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.76rem;color:rgba(255,255,255,.6);margin:0 0 8px;
}
.sch-ente__t{margin:0;font-size:1.1rem;line-height:1.5;font-weight:600}
.sch-ente__legge{
  margin:11px 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem;color:rgba(255,255,255,.72);
}

.sch{margin:0;padding:0}
.sch__riga{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 0;border-bottom:1px solid var(--bordo);
}
@media(min-width:640px){
  .sch__riga{flex-direction:row;gap:18px;align-items:baseline}
  .sch__riga dt{flex:0 0 190px}
}
.sch__riga:last-child{border-bottom:0}
.sch__riga dt{
  margin:0;font-family:var(--titolo);font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--testo-3);
}
.sch__riga dd{margin:0;flex:1 1 auto;line-height:1.6;color:var(--testo)}

.stato-quiz{
  background:#fff;border:1px solid var(--bordo);border-radius:15px;
  padding:19px 21px;max-width:820px;margin:0 auto;box-shadow:var(--ombra-1);
}
.stato-quiz--fonte{border-left:5px solid var(--verde)}
.stato-quiz--info{border-left:5px solid var(--nero-3)}
.stato-quiz__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.76rem;color:var(--testo-3);margin:0 0 8px;
}
.stato-quiz p{margin:0 0 15px;line-height:1.65;color:var(--testo-2)}

.link-uff,.link-file{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.link-uff a,.link-file a{
  display:block;background:#fff;border:1px solid var(--bordo);border-radius:11px;
  padding:12px 15px;font-size:.97rem;transition:.14s;
}
.link-uff a:hover,.link-file a:hover{
  border-color:var(--rosso);box-shadow:var(--ombra-1);text-decoration:none;
}
.link-file a{padding-left:42px;position:relative}
.link-file a::before{
  content:"\2193";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  font-weight:700;color:var(--rosso);
}
.terr--fonte .terr__testa{border-color:#A8E2BF}

/* ==========================================================================
   16. DIREZIONE NUOVA — settembre 2026
   Tre regole sole, ma valgono su tutte le pagine. Stanno in fondo apposta:
   cambiano i valori di sopra senza riscriverli, cosi' si vede a colpo
   d'occhio cos'e' cambiato e, se serve, si torna indietro togliendo questo
   blocco.
   ========================================================================== */

/* 1. I grigi diventano caldi. Con un rosso acceso i grigi bluastri fanno a
      pugni; questi lo accompagnano. Raggi piu' piccoli e ombre quasi tolte:
      le scatole morbide invecchiano in fretta, i fili da un pixel no. */
:root{
  --grigio-1:#F7F6F4; --grigio-2:#EFEDE9; --grigio-3:#DEDAD3; --bordo:#E5E2DC;
  --testo:#1A1C20; --testo-2:#55585E; --testo-3:#8B8C8F;
  --raggio:8px; --raggio-s:6px; --raggio-l:12px;
  --ombra-1:none;
  --ombra-2:0 1px 2px rgba(16,17,20,.05);
  --ombra-3:0 18px 44px rgba(16,17,20,.14);
  --largh:1120px;
}

/* 2. I titoli escono dal maiuscolo. E' il cambio che da' solo ringiovanisce
      di dieci anni: il maiuscolo condensato resta sulle etichettine, dove fa
      il suo mestiere. */
h1,h2,h3,h4{text-transform:none;letter-spacing:-.005em;line-height:1.06}
h1{font-size:clamp(2.2rem,6.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.34em}
h3{font-size:clamp(1.14rem,2.6vw,1.34rem)}
h4{font-size:1rem;letter-spacing:.01em}

/* 3. Le etichettine: piccole, spaziate, grigie. Il rosso non le tocca — il
      rosso e' prezioso e si spende in un posto solo per schermata. */
.occhiello{font-size:.74rem;letter-spacing:.17em;color:var(--testo-3);margin-bottom:12px}
.occhiello::before{width:18px;height:2px;background:var(--grigio-3)}
.occhiello--chiaro{color:#8A9199}
.occhiello--chiaro::before{background:#3A3E45}

.sezione{padding:72px 0}
.sezione--s{padding:52px 0}
.sezione--grigia{border-bottom:0}
.testa-sezione{margin-bottom:26px}
.guida{font-size:1.04rem;max-width:58ch}
.card{box-shadow:none}
a.card:hover,.card--link:hover{box-shadow:var(--ombra-2);transform:none;border-color:var(--testo-3)}
.ingresso{box-shadow:none}
.ingresso:hover{box-shadow:var(--ombra-2);transform:none;border-color:var(--testo-3)}
.btn{padding:13px 22px;font-size:1.04rem;letter-spacing:.04em;border-radius:8px}
.btn:hover{transform:none}
.btn--s{padding:9px 15px;font-size:.95rem}
.btn--l{padding:15px 26px;font-size:1.1rem}
@media(min-width:760px){.btn--l{padding:16px 30px;font-size:1.18rem}}

/* ==========================================================================
   17. Menu con le tendine
   ========================================================================== */
.nav__voce{position:relative}
.nav__bottone{
  display:flex;align-items:center;gap:7px;background:transparent;border:0;
  padding:9px 12px;border-radius:8px;color:#D7DBE1;
  font-family:var(--titolo);font-weight:600;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.045em;white-space:nowrap;
}
.nav__bottone:hover{background:rgba(255,255,255,.09);color:#fff}
.nav__bottone.nav--attiva{color:#fff;box-shadow:inset 0 -2px 0 var(--rosso)}
.nav__frecc{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75;transition:transform .16s;
}
.nav__bottone[aria-expanded="true"] .nav__frecc{transform:rotate(180deg)}
.nav__bottone[aria-expanded="true"]{background:rgba(255,255,255,.09);color:#fff}
.nav__tendina{
  position:absolute;top:calc(100% + 9px);left:0;min-width:230px;z-index:90;
  background:#fff;border:1px solid var(--bordo);border-radius:10px;
  box-shadow:var(--ombra-3);padding:6px;
}
.nav__tendina::before{
  content:"";position:absolute;top:-9px;left:0;right:0;height:9px;
}
.nav__tendina a{
  display:block;padding:10px 13px;border-radius:7px;color:var(--testo);
  font-size:.99rem;line-height:1.3;
}
.nav__tendina a:hover{background:var(--grigio-1);color:var(--inchiostro);text-decoration:none}
@media(min-width:900px){.nav{display:block}.hamburger{display:none}}
@media(max-width:899px){.nav{display:none}}

/* La lente nella barra */
.cerca-apri{
  display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:auto;
  background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:8px;
  height:40px;padding:0 14px;color:#D7DBE1;
  font-family:var(--titolo);font-weight:600;text-transform:uppercase;
  font-size:.98rem;letter-spacing:.05em;
}
.cerca-apri:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.45)}
.lente{width:17px;height:17px;flex:none}
@media(max-width:560px){.cerca-apri__eti{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cerca-apri{padding:0 11px}}

/* La fisarmonica del telefono */
.mm__gruppo{border-bottom:1px solid rgba(255,255,255,.06)}
.mm__testa{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:0;padding:14px 20px;color:#E4E7EB;text-align:left;
  font-family:var(--titolo);font-weight:600;text-transform:uppercase;
  font-size:1.18rem;letter-spacing:.04em;
}
.mm__testa.nav--attiva{color:#fff;box-shadow:inset 3px 0 0 var(--rosso)}
.mm__frecc{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;opacity:.7;transition:transform .16s;
}
.mm__testa[aria-expanded="true"] .mm__frecc{transform:rotate(180deg)}
.mm__corpo{background:rgba(0,0,0,.28);padding:4px 0 8px}
.mm__corpo a{
  display:block;padding:11px 20px 11px 34px;color:#C7CCD3;border-bottom:0;
  font-family:var(--corpo);font-weight:500;text-transform:none;font-size:1rem;letter-spacing:0;
}
.mm__corpo a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.mm__solo{display:block}
.mm__cerca{margin:16px 20px 0;width:calc(100% - 40px);justify-content:center;gap:9px}

/* ==========================================================================
   18. La finestra della ricerca
   ========================================================================== */
body.senza-scorrimento{overflow:hidden}
.ric{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center}
.ric__velo{position:absolute;inset:0;background:rgba(11,12,14,.55);backdrop-filter:blur(2px)}
.ric__box{
  position:relative;z-index:1;width:min(720px,100%);margin-top:clamp(0px,6vh,72px);
  background:#fff;border-radius:14px;box-shadow:var(--ombra-3);
  padding:20px;display:flex;flex-direction:column;
  max-height:min(86vh,720px);
}
@media(max-width:620px){
  .ric__box{margin-top:0;border-radius:0;max-height:100%;height:100%;padding:16px}
}
.ric__testa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ric__testa h2{margin:0;font-size:clamp(1.3rem,4vw,1.6rem)}
.ric__x{
  background:transparent;border:0;font-size:1.9rem;line-height:1;color:var(--testo-3);
  padding:0 4px;border-radius:6px;
}
.ric__x:hover{color:var(--inchiostro);background:var(--grigio-1)}
.ric__campo{position:relative;display:flex;align-items:center}
.ric__campo .lente{position:absolute;left:14px;width:19px;height:19px;color:var(--testo-3)}
.ric__campo input{
  width:100%;border:1px solid var(--grigio-3);border-radius:9px;background:var(--grigio-1);
  padding:14px 14px 14px 44px;font-size:1.05rem;
}
.ric__campo input:focus{outline:none;border-color:var(--inchiostro);background:#fff}
.ric__campo input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ric__sugg{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:12px 0 0;
  font-size:.86rem;color:var(--testo-3);
}
.ric__sugg button{
  background:var(--grigio-1);border:1px solid var(--bordo);border-radius:99px;
  padding:5px 12px;font-size:.86rem;color:var(--testo-2);
}
.ric__sugg button:hover{border-color:var(--testo-3);color:var(--inchiostro)}
.ric__stato{margin:12px 0 0;font-size:.85rem;color:var(--testo-3);min-height:1em}
.ric__pagine,.ric__esiti{overflow-y:auto;margin-top:10px}
.ric__esiti{display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.ric__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.7rem;color:var(--testo-3);margin:4px 0 6px;
}
.ric__pag{
  display:block;padding:10px 12px;border:1px solid var(--bordo);border-radius:8px;
  margin-bottom:6px;color:var(--testo);
}
.ric__pag:hover{border-color:var(--testo-3);text-decoration:none;background:var(--grigio-1)}
.ric__pag-t{display:block;font-weight:600;color:var(--inchiostro)}
.ric__pag-d{display:block;font-size:.88rem;color:var(--testo-2);margin-top:2px}
.ric__ko{color:var(--testo-2);font-size:.95rem}
.ric__pie{margin:12px 0 0;font-size:.88rem;text-align:right}
.ric .riga-ris{border:1px solid var(--bordo);border-radius:8px}
.riga-ris__ctx{
  display:block;font-size:.86rem;color:var(--testo-2);margin-top:5px;
  padding-left:11px;border-left:2px solid var(--grigio-3);line-height:1.45;
}

/* ==========================================================================
   19. La home nuova — apertura, passi, due colonne
   ========================================================================== */
.apri{background:var(--nero);color:#C9CDD3;position:relative;overflow:hidden}
.apri::after{
  content:"";position:absolute;right:-10%;top:-40%;width:52%;height:180%;
  background:radial-gradient(circle at 50% 50%,rgba(225,6,0,.20),transparent 64%);pointer-events:none;
}
.apri__in{position:relative;z-index:1;padding-block:56px 60px;max-width:760px}
@media(min-width:900px){.apri__in{padding-block:86px 92px}}
.apri h1{color:#fff;margin:0 0 .42em;text-wrap:balance}
.apri__sotto{color:#A9AEB6;font-size:1.1rem;max-width:50ch;margin:0 0 24px;line-height:1.6}

/* I tre segni. Sono la risposta alla domanda che uno si fa prima di cliccare:
   «mi chiederanno soldi? mi chiederanno la mail?». Per questo stanno sopra i
   tasti e non in fondo alla pagina. */
.segni{
  list-style:none;margin:0 0 30px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.segni li{
  display:flex;align-items:center;gap:9px;color:#D5D9DE;
  font-size:.93rem;letter-spacing:.01em;
}
.segni li::before{
  content:"";width:15px;height:8px;flex:none;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:rotate(-45deg) translateY(-2px);
}

/* Capisco → Studio → Mi esercito. Tre colonne divise da un filo, non tre
   scatole: le scatole pesano e non dicono che c'e' un ordine. */
.passi{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:860px){
  .passi{grid-template-columns:repeat(3,1fr);gap:0}
  .passi > * + *{border-left:1px solid var(--bordo);padding-left:34px}
  .passi > *{padding-right:34px}
  .passi > *:last-child{padding-right:0}
}
.due{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:800px){
  .due{grid-template-columns:1fr 1fr;gap:0}
  .due > * + *{border-left:1px solid var(--bordo);padding-left:44px}
  .due > *{padding-right:44px}
  .due > *:last-child{padding-right:0}
}
.passo{border-top:2px solid var(--inchiostro);padding-top:16px;display:flex;flex-direction:column}
@media(max-width:859px){.passi > .passo + .passo{margin-top:0}}
.passo__eti{
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  font-size:.72rem;color:var(--testo-3);margin:0 0 8px;
}
.passo h3{margin:0 0 .4em}
.passo p{color:var(--testo-2);font-size:.98rem;margin:0 0 14px}
.passo__nota{color:var(--inchiostro);font-weight:600;font-size:.95rem}
.passo .passo__cta{margin:auto 0 0;padding-top:6px}   /* «.passo p» e' piu' forte di «.passo__cta»: senza ripetere .passo il tasto non scende in fondo e le tre colonne non finiscono allineate */
.passo__badge{
  display:inline-block;align-self:flex-start;margin:0 0 12px;padding:4px 11px;
  border:1px solid var(--rosso);border-radius:99px;color:var(--rosso-scuro);
  font-family:var(--titolo);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.7rem;
}
.passo--evento{border-top-color:var(--rosso)}

/* ==========================================================================
   20. Aperture tutte nere — settembre 2026
   La sfumatura rossa in un angolo divideva l'apertura a metà: nero da una
   parte, bordeaux dall'altra. Ramil la vuole nera e basta. Si spengono qui
   le quattro sfumature invece di cancellarle sopra, così se un giorno si
   vuole tornare indietro è un blocco solo da togliere.
   ========================================================================== */
.hero::after,.hero-pag::after,.apri::after{display:none}
.hero--evento{background:var(--nero)}

/* La lente sta accanto all'hamburger, non in mezzo alla barra.
   Il guasto: «.nav + .cerca-apri{margin-left:0}» valeva anche sul telefono,
   dove il menu largo è nascosto ma nel codice c'è ancora. Senza il margine
   automatico la barra distribuiva logo, lente e hamburger a distanze
   uguali, e la lente finiva al centro. */
.cerca-apri{margin-left:auto}
@media(min-width:900px){.nav + .cerca-apri{margin-left:0}}
@media(max-width:899px){.header__barra{gap:8px}}

/* ==========================================================================
   21. Barra fissa in fondo allo schermo
   Il tasto che serve sta sempre sotto il pollice, qualunque punto della
   pagina si stia leggendo: Studia | Quiz sulla pagina CAP KB, «Seleziona
   regione» sul Ruolo, «Il mio andamento» nelle pagine di studio e quiz.
   ========================================================================== */
.fissa{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
  border-top:1px solid var(--bordo);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.fissa__in{max-width:760px;margin:0 auto;display:grid;gap:10px}
.fissa__in--2{grid-template-columns:1fr 1fr}
.fissa__in--1{grid-template-columns:1fr}
.fissa .btn{width:100%;padding:14px 16px;font-size:1.06rem}
body.con-fissa{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
/* dove c'è la barra fissa, sul telefono non ci si mette sopra anche la
   finestra della ricerca: quella copre tutto lo schermo e va bene così */

/* ==========================================================================
   22. Il foglio che sale dal basso
   Serve due volte: l'elenco delle regioni («Seleziona regione») e il
   pannello «Il mio andamento». Sul telefono sale dal fondo come un foglio,
   sul desktop sta al centro.
   ========================================================================== */
.foglio{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center}
.foglio[hidden]{display:none}
.foglio__velo{position:absolute;inset:0;background:rgba(11,12,14,.5)}
.foglio__box{
  position:relative;z-index:1;width:min(640px,100%);max-height:86vh;
  background:#fff;border-radius:16px 16px 0 0;box-shadow:var(--ombra-3);
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  animation:foglio-su .22s ease-out;
}
@media(min-width:760px){
  .foglio{align-items:center}
  .foglio__box{border-radius:14px;max-height:82vh}
}
@keyframes foglio-su{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.foglio__box{animation:none}}
.foglio__testa{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 12px;border-bottom:1px solid var(--bordo);
}
.foglio__testa h2{margin:0;font-size:clamp(1.25rem,4vw,1.5rem)}
.foglio__x{background:transparent;border:0;font-size:1.9rem;line-height:1;color:var(--testo-3);padding:0 4px;border-radius:6px}
.foglio__x:hover{color:var(--inchiostro);background:var(--grigio-1)}
.foglio__corpo{overflow-y:auto;padding:14px 20px 22px}
.foglio__nota{font-size:.9rem;color:var(--testo-2);margin:0 0 12px}

.regioni{list-style:none;margin:0;padding:0}
.regioni li + li{border-top:1px solid var(--bordo)}
.reg{
  display:flex;align-items:center;gap:10px;padding:13px 4px;color:var(--inchiostro);
}
.reg:hover{background:var(--grigio-1);text-decoration:none}
.reg__nome{font-weight:600;flex:1}
.reg .tag{font-size:.68rem}
.reg__frecc{color:var(--testo-3)}

/* L'etichettina sopra il titolo delle pagine interne è un <p>, e «.hero-pag p»
   (1,1 di specificità) le dava la misura del sottotitolo: sul telefono
   «PREPARAZIONE NAZIONALE» andava su due righe, grande quanto il testo. */
.hero-pag .occhiello{font-size:.74rem;margin-bottom:12px;max-width:none}
.foglio__box:focus{outline:none}

/* ==========================================================================
   23. Materie a tendina
   ========================================================================== */
/* La riga che apri non si deve muovere sotto il dito: quando la fisarmonica
   chiude una riga più in alto, il conto lo fa app.js. Chrome però ha anche un
   suo meccanismo automatico — lo «scroll anchoring» — e in due su tre dei
   casi i due aggiustamenti si sommavano, facendo saltare la pagina il doppio.
   Qui lo spegniamo: il conto lo fa una parte sola. Safari, che lo scroll
   anchoring non ce l'ha, si comporta come gli altri. */
.materie-lista,.materie-lista *{overflow-anchor:none}
.materie-lista{border-top:1px solid var(--bordo)}
.mat{border-bottom:1px solid var(--bordo)}
.mat__testa{
  width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;
  background:transparent;border:0;text-align:left;padding:16px 4px;color:var(--inchiostro);
}
.mat__testa:hover{background:var(--grigio-1)}
.mat__nome{font-family:var(--titolo);font-weight:700;font-size:1.18rem;line-height:1.2;grid-column:1}
.mat__info{grid-column:1;font-size:.86rem;color:var(--testo-2)}
.mat__info strong{color:var(--inchiostro)}
.mat__pronta{color:var(--verde-scuro);font-weight:600}
.mat__frecc{
  grid-column:2;grid-row:1 / span 2;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--testo-3);transition:transform .16s;
}
.mat__testa[aria-expanded="true"] .mat__frecc{transform:rotate(180deg)}
.mat__corpo{padding:0 4px 18px}
.mat__corpo p{color:var(--testo-2);font-size:.95rem;margin:0 0 14px}
.mat__azioni{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.mat__azioni .btn{width:100%}

/* ==========================================================================
   24. L'audio in alto, accanto alla domanda
   ========================================================================== */
.domanda__alto{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.domanda__alto .domanda__materia{margin:0}
.domanda__audio{display:flex;gap:6px;flex:none}
.audio-tasto{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;height:40px;padding:0 12px;border-radius:99px;
  background:var(--grigio-1);border:1px solid var(--bordo);color:var(--inchiostro);
  font-size:.92rem;font-weight:600;white-space:nowrap;
}
.audio-tasto:hover{border-color:var(--testo-3)}
.audio-tasto.attivo{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
.audio-tasto[disabled]{opacity:.4}
.audio-tasto--lungo{font-size:.86rem}
.voce-stato{min-height:0;margin:-4px 0 12px;font-size:.9rem;color:var(--testo-2)}
.voce-stato:empty{display:none}
.navig__aiuto{margin:0;font-size:.9rem}

/* ==========================================================================
   25. «Il mio andamento» — il pannello tascabile
   ========================================================================== */
.and-vuoto h3{margin-bottom:.3em}
.and-vuoto p{color:var(--testo-2);margin:0}
.and-testa{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.and-cifra{background:var(--grigio-1);border:1px solid var(--bordo);border-radius:10px;padding:12px 10px}
.and-cifra b{display:block;font-family:var(--titolo);font-size:1.7rem;line-height:1;color:var(--inchiostro)}
.and-cifra b small{font-size:.55em;color:var(--testo-3)}
.and-cifra span{display:block;margin-top:6px;font-size:.76rem;line-height:1.3;color:var(--testo-2)}
.and-tempo{font-size:.9rem;color:var(--testo-2);margin:0 0 12px}
.and-errori{
  display:flex;align-items:center;gap:6px;padding:11px 13px;margin-bottom:14px;border-radius:9px;
  background:var(--ambra-chiaro);color:var(--inchiostro);font-size:.93rem;
}
.and-errori span{margin-left:auto;font-weight:700;color:var(--ambra)}
.and-errori:hover{text-decoration:none}
.and-materie{list-style:none;margin:0;padding:0}
.and-materie li{padding:12px 0;border-top:1px solid var(--bordo)}
.and-m__testa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-weight:600;color:var(--inchiostro);font-size:.97rem}
.and-m__testa .pillola{font-size:.66rem;flex:none}
.and-m__riga{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:8px;margin-bottom:5px}
.and-m__eti{font-size:.74rem;color:var(--testo-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.and-m__num{font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--testo-2)}
.and-m__riga .barra-perc{height:7px}
.and-m__nota{margin:2px 0 0 52px;font-size:.78rem;color:var(--testo-3)}
.and-tutto{margin:14px 0 0;text-align:right;font-size:.9rem}
/* la riga materia porta ancora la classe .materia (la usano le prove), ma
   non deve più essere una scheda: è una riga fra due filetti */
.mat.materia{border:0;border-bottom:1px solid var(--bordo);border-radius:0;padding:0;background:none;box-shadow:none;display:block}
.and-m__riga{grid-template-columns:58px 1fr 52px}
.and-m__nota{margin-left:66px}
.and-errori span{white-space:nowrap}

/* ==========================================================================
   26. Dentro lo studio e il quiz: la domanda sale in cima
   Aperta una materia, il riquadro nero con «Studia» e il sottotitolo non
   serve più, e spingeva la domanda sotto la piega dello schermo. Lo toglie
   hub.js mettendo sul corpo la classe «in-lettura». La barra con contatore,
   materia ed Esci resta su una riga sola: prima andava su tre e occupava
   mezzo schermo del telefono.
   ========================================================================== */
body.in-lettura .hero-pag{display:none}
body.in-lettura .app{padding-top:16px}
.barra-app{flex-wrap:nowrap;padding:10px 14px}
.barra-app__sx{flex-wrap:nowrap;min-width:0;gap:10px}
.barra-app .pillola{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-width:0}
.barra-app .btn{flex:none}
/* I due tasti della home, sul telefono, hanno la stessa larghezza: uno
   stretto sopra uno largo sembrava un errore di impaginazione. */
@media(max-width:560px){.apri .btn-riga .btn{flex:1 1 100%}}

/* ==========================================================================
   27. Più simile a un'app — settembre 2026
   Sul telefono gli spazi pensati per il desktop diventano vuoti: 72 pixel
   sopra ogni sezione, 56 sopra il titolo della home. Un'app usa lo schermo
   per il contenuto. Qui si stringe tutto sotto i 700 pixel di larghezza.
   ========================================================================== */
@media(max-width:699px){
  .apri__in{padding-block:34px 30px}
  .apri h1{margin-bottom:.35em}
  .apri__sotto{margin-bottom:18px;font-size:1.04rem}
  .segni{margin:0;gap:8px 18px}
  .sezione{padding:40px 0}
  .sezione--s{padding:30px 0}
  .testa-sezione{margin-bottom:18px}
  .hero-pag{padding:26px 0 28px}
  .hero-pag h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .briciole{margin-bottom:10px}
}
.apri .segni{margin-bottom:0}

/* ==========================================================================
   28. Il menu prende il posto del piè di pagina
   L'hamburger c'è anche sul computer: dentro stanno le voci che erano nel
   piè di pagina (progressi, contatti, WhatsApp, privacy, partita IVA). Sul
   telefono il pannello scende sotto la barra; sul computer si apre sulla
   destra, e le tre sezioni — che sono già nella barra in alto — non si
   ripetono.
   ========================================================================== */
.hamburger{display:inline-flex !important}
.header__barra{justify-content:flex-start}
.header__logo{margin-right:auto}
@media(min-width:900px){
  .header__logo{margin-right:0}
  .nav{margin-left:auto;margin-right:auto}
  .nav + .cerca-apri{margin-left:0}
  .menu-mobile{
    position:absolute;top:100%;right:max(20px,calc((100vw - 1340px) / 2 + 20px));
    width:340px;border-radius:0 0 12px 12px;box-shadow:var(--ombra-3);
  }
  .menu-mobile .mm__gruppo{display:none}
}
.mm__pie{margin:18px 20px 0;padding:14px 0 18px;border-top:1px solid rgba(255,255,255,.1)}
.mm__pie p{margin:0}
.mm__link{font-size:.95rem}
.mm__link a{color:#E4E7EB}
.mm__link span{color:#5F666F;margin:0 6px}
.mm__legale{margin-top:8px !important;font-size:.8rem;color:#8A9199}

/* la riga con la partita IVA, solo in home */
.colofone{background:var(--grigio-1);border-top:1px solid var(--bordo);padding:16px 0;font-size:.82rem;color:var(--testo-3)}
.colofone p{margin:0}
.colofone a{color:var(--testo-2)}
/* i tasti fissi che portano a un punto della pagina (#adesione,
   #form-community): la barra in alto non deve coprire l'inizio */
[id]{scroll-margin-top:84px}
/* i collegamenti in fondo al menu sono testo, non voci di menu */
.menu-mobile .mm__pie a{
  display:inline;padding:0;border:0;background:none;
  font-family:var(--corpo);text-transform:none;font-size:.95rem;letter-spacing:0;font-weight:500;
}
.menu-mobile .mm__pie a:hover{text-decoration:underline;background:none}
/* col menu aperto la barra fissa si toglie di mezzo */
body.menu-aperto .fissa{display:none}
/* nella barra fissa del telefono «Ruolo conducenti» deve stare su una riga */
@media(max-width:430px){.fissa .btn{padding:14px 8px;font-size:.98rem;letter-spacing:.02em}}
@media(max-width:430px){
  .fissa .btn{font-size:.92rem;letter-spacing:.01em}
  /* il bollino dell'evento su una riga sola: su due righe la pillola
     diventava un ovale */
  .passo__badge{letter-spacing:.06em;font-size:.66rem}
}


/* ==========================================================================
   29. LA PAGINA DEL QUIZ  (settembre 2026)
   Regole del Learning Design System CAPKB: il testo è il contenuto, tutto
   il resto sta indietro. Inter ovunque, colonna di lettura stretta, niente
   ombre pesanti, colore mai da solo (sempre anche un segno ✓ / ✕).

   Il rosso del marchio (--rosso, i tasti) e il rosso dell'errore
   (--errore) sono due colori diversi di proposito: se fossero lo stesso,
   il tasto «Continua quiz» sembrerebbe un avviso di errore.
   ========================================================================== */
:root{
  --errore:#C62B22;
  --errore-fondo:#FDEDEB;
  --errore-bordo:#F3C4BF;
  --giusto:#0E8A43;
  --giusto-fondo:#EAF7EF;
  --giusto-bordo:#BCE3C9;
  --lds-testo:#202124;
  --lds-testo-2:#5F6672;
  --qz-colonna:720px;
}

/* la pagina quiz è bianca e senza piè di pagina: solo studio */
body.quiz-vivo .app{background:#fff;padding:0 0 4px}
body.quiz-vivo .fissa{display:none}
body.quiz-vivo{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

.qz{font-family:var(--corpo)}

/* ---- barra funzionale: Esci · 8/20 · Salva ---- */
.qz-barra{
  position:sticky;top:var(--header-h);z-index:60;
  margin:0 calc(var(--gutter) * -1);
  background:#fff;border-bottom:1px solid var(--bordo);
}
.qz-barra__in{
  max-width:var(--qz-colonna);margin:0 auto;
  padding:0 var(--gutter);height:52px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.qz-esci,.qz-salva{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.96rem;font-weight:500;color:var(--lds-testo-2);
  background:none;border:0;padding:8px 2px;min-height:44px;cursor:pointer;
  font-family:inherit;
}
.qz-esci{justify-self:start;text-decoration:none}
.qz-salva{justify-self:end}
.qz-esci:hover,.qz-salva:hover{color:var(--lds-testo);text-decoration:none}
.qz-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
        stroke-linecap:round;stroke-linejoin:round}
.qz-salva.attivo{color:var(--rosso)}
.qz-salva.attivo .qz-ico{fill:currentColor;stroke:currentColor}
.qz-conta{font-size:1.14rem;font-weight:600;color:var(--lds-testo);font-variant-numeric:tabular-nums}
.qz-conta span[aria-hidden]{color:var(--testo-3);margin:0 2px}
.qz-timer{
  justify-self:end;font-weight:600;font-size:1.05rem;color:var(--lds-testo);
  font-variant-numeric:tabular-nums;
}
.qz-timer.allarme{color:var(--errore)}

/* ---- corpo: materia, domanda, risposte ---- */
.qz-corpo{max-width:var(--qz-colonna);margin:0 auto;padding:22px 0 8px}
.qz-materia{
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--lds-testo-2);margin:0 0 12px;
}
.qz-dom{
  font-size:1.2rem;line-height:1.45;font-weight:600;color:var(--lds-testo);
  margin:0 0 26px;
}
.qz-risposte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qz-risp{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  min-height:56px;padding:14px 16px;
  background:#FCFCFD;border:1px solid var(--bordo);border-radius:14px;
  font-family:inherit;font-size:1.0625rem;line-height:1.45;color:var(--lds-testo);
  cursor:pointer;transition:border-color .14s,background .14s;
}
.qz-risp:hover:not(:disabled){border-color:#C8CED6;background:#fff}
.qz-risp:disabled{cursor:default}
.qz-risp__l{
  flex:none;width:22px;text-align:center;
  font-weight:600;font-size:1.05rem;color:var(--lds-testo);
}
.qz-risp__t{flex:1 1 auto;min-width:0}
.qz-risp--scelta{border-color:var(--nero-3);background:#fff}
.qz-risp--ok{background:var(--giusto-fondo);border-color:var(--giusto-bordo)}
.qz-risp--ko{background:var(--errore-fondo);border-color:var(--errore-bordo)}
.qz-seg{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.86rem;font-weight:700;
}
.qz-seg--ok{background:#D6EFDF;color:var(--giusto)}
.qz-seg--ko{background:#FADBD7;color:var(--errore)}

/* ---- il perché ---- */
.qz-perche{margin:26px 0 0}
.qz-perche__tit{font-size:1.12rem;font-weight:500;color:var(--lds-testo);margin:0 0 8px}
.qz-ok{color:var(--giusto)}
.qz-ko{color:var(--errore)}
.qz-perche__t{font-size:1.0625rem;line-height:1.6;color:var(--lds-testo);margin:0;max-width:68ch}
.qz-appro{margin:12px 0 0;font-size:.95rem}
.qz-appro a{color:var(--lds-testo-2);text-decoration:underline;text-underline-offset:3px}

/* ---- barra in fondo ---- */
.qz-azioni{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bianco);border-top:1px solid var(--bordo);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.qz-azioni__in{
  max-width:var(--qz-colonna);margin:0 auto;
  display:flex;gap:12px;align-items:stretch;
}
.qz-btn{
  flex:1 1 auto;min-height:52px;max-width:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1.2;
  padding:12px 16px;transition:.14s;
}
.qz-btn--chiaro{background:var(--grigio-1);color:var(--lds-testo);border-color:var(--grigio-2);flex:0 1 auto}
.qz-btn--chiaro:hover:not(:disabled){background:var(--grigio-2)}
.qz-btn--rosso{background:var(--rosso);color:#fff}
.qz-btn--rosso:hover:not(:disabled){background:var(--rosso-scuro)}
.qz-btn:disabled{opacity:.45;cursor:default}
.qz-azioni__in .qz-btn--rosso{max-width:none}

/* ---- pannello della modalità audio ---- */
.qz-pannello{flex:1 1 auto;max-width:var(--qz-colonna);width:100%}
.qz-pannello__alto{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.qz-pannello__stato{font-size:.92rem;font-weight:500;color:var(--lds-testo-2)}
.qz-pannello[data-stato="attende"] .qz-pannello__stato{color:var(--rosso)}
.qz-pannello__x{
  background:none;border:0;font-family:inherit;font-size:.92rem;font-weight:600;
  color:var(--lds-testo-2);cursor:pointer;padding:6px 4px;min-height:32px;
}
.qz-pannello__tasti{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qz-tasto{
  min-height:46px;border-radius:12px;border:1px solid var(--grigio-2);
  background:var(--grigio-1);color:var(--lds-testo);
  font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
}
.qz-tasto--forte{background:var(--nero);border-color:var(--nero);color:#fff}
.qz-pannello__nota{margin:9px 0 0;font-size:.85rem;color:var(--lds-testo-2)}

/* ---- schermi piccoli ---- */
@media(max-width:340px){.qz-btn--chiaro span{display:none}}
@media(max-width:400px){
  .qz-dom{font-size:1.14rem}
  .qz-risp{font-size:1.02rem;padding:13px 14px}
  .qz-btn{font-size:.94rem;padding:12px 10px;gap:7px}
  .qz-btn--chiaro{padding-left:12px;padding-right:12px}
  .qz-tasto{font-size:.86rem}
}

/* ---- tablet e computer: la colonna non si allarga, lo spazio sì ---- */
@media(min-width:700px){
  .qz-corpo{padding:30px 0 12px}
  .qz-dom{font-size:1.38rem;margin-bottom:30px}
  .qz-risp{font-size:1.125rem;min-height:60px;padding:16px 18px}
  .qz-perche__t{font-size:1.125rem}
  .qz-azioni{padding:12px var(--gutter)}
}

/* ---- accessibilità: il fuoco da tastiera si deve vedere ---- */
.qz-risp:focus-visible,.qz-btn:focus-visible,.qz-tasto:focus-visible,
.qz-salva:focus-visible,.qz-esci:focus-visible{
  outline:3px solid var(--nero);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .qz-risp{transition:none}
}

/* avviso verde del riepilogo senza errori */
.avviso--verde{background:var(--verde-chiaro);border-color:#BEE8CE;color:#0A5A2A}

/* ---- 30. Domande salvate ---- */
.sal-banche{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sal-banca{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;min-height:44px;
  border:1px solid var(--bordo);border-radius:999px;background:#fff;
  font-size:.92rem;font-weight:500;color:var(--lds-testo-2);text-decoration:none;
}
.sal-banca b{font-weight:700;color:var(--lds-testo)}
.sal-banca.attiva{border-color:var(--nero);background:var(--nero);color:#fff}
.sal-banca.attiva b{color:#fff}
.sal-banca:hover{text-decoration:none;border-color:var(--nero-3)}
.sal-materie{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sal-mat{
  padding:8px 12px;min-height:40px;border:1px solid var(--bordo);border-radius:999px;
  background:#fff;font-family:inherit;font-size:.88rem;font-weight:500;
  color:var(--lds-testo-2);cursor:pointer;
}
.sal-mat b{color:var(--lds-testo)}
.sal-mat.attiva{border-color:var(--nero);background:var(--grigio-1);color:var(--lds-testo)}
.sal-riga{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.sal-lista{display:flex;flex-direction:column;gap:12px}
.sal-card{
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px 18px;
}
.sal-card__mat{
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--lds-testo-2);margin:0 0 8px;
}
.sal-card__dom{font-size:1.05rem;font-weight:600;line-height:1.45;color:var(--lds-testo);margin:0 0 10px}
.sal-card__ris{font-size:1rem;line-height:1.5;color:var(--lds-testo);margin:0}
.sal-card__ris span{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--giusto);margin-bottom:2px;
}
.sal-card__pie{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px}
.sal-card__link{font-size:.92rem;font-weight:500;color:var(--lds-testo-2);text-decoration:underline;text-underline-offset:3px}
.sal-card__togli{
  background:none;border:0;padding:6px 0;min-height:40px;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:500;color:var(--errore);
  text-decoration:underline;text-underline-offset:3px;
}

/* ---- 31. Pagina Simulazione (le regole, prima della prova) ---- */
.sezione--stretta{padding:34px 0 0;max-width:var(--qz-colonna)}
.sezione--stretta h2{font-family:var(--corpo);text-transform:none;letter-spacing:0;
  font-size:1.35rem;font-weight:700;line-height:1.25;margin-bottom:.5em;color:var(--lds-testo)}
.sezione--stretta p{font-size:1.0625rem;line-height:1.62;color:var(--lds-testo);max-width:68ch;margin:0 0 14px}
.sim-numeri{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 6px;
  max-width:var(--qz-colonna);
}
.sim-num{
  background:var(--grigio-1);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:14px 16px;text-align:center;
}
.sim-num b{
  display:block;font-family:var(--titolo);font-weight:700;font-size:2.1rem;line-height:1;
  color:var(--lds-testo);font-variant-numeric:tabular-nums;
}
.sim-num span{
  display:block;margin-top:4px;font-size:.78rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--lds-testo-2);
}
.sim-storico{
  margin-top:18px;background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px 18px;max-width:var(--qz-colonna);
}
.sim-storico h3{font-family:var(--corpo);text-transform:none;letter-spacing:0;
  font-size:1.05rem;font-weight:700;margin-bottom:10px}
.sim-storico__righe{display:flex;flex-wrap:wrap;gap:18px;margin:0}
.sim-storico__v{font-family:var(--titolo);font-weight:700;font-size:1.6rem;line-height:1;display:block}
.sim-storico__e{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--lds-testo-2)}
.sim-storico__ok{color:var(--giusto)}
.sim-ultima{margin:12px 0 0;font-size:.95rem;color:var(--lds-testo-2)}
@media(min-width:700px){
  .sim-numeri{grid-template-columns:repeat(4,1fr)}
  .sezione--stretta h2{font-size:1.5rem}
}

/* ---- 32. Scorciatoie della pagina Quiz e riga verso la simulazione ---- */
.scorciatoie{display:flex;flex-direction:column;gap:10px}
.scorc{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:15px 18px;min-height:64px;text-decoration:none;transition:.14s;
}
.scorc:hover{border-color:var(--nero-3);text-decoration:none}
.scorc__t{font-size:1.05rem;font-weight:600;color:var(--lds-testo)}
.scorc__d{grid-column:1;font-size:.95rem;line-height:1.45;color:var(--lds-testo-2)}
.scorc__f{grid-column:2;grid-row:1 / span 2;font-size:1.2rem;color:var(--testo-3)}
.scorc--forte{border-color:var(--nero-3)}
.scorc--forte .scorc__t{color:var(--lds-testo)}

.verso-sim{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  margin-top:22px;padding:18px;border-radius:var(--raggio);
  background:var(--nero);color:#fff;text-decoration:none;
}
.verso-sim:hover{background:var(--nero-2);text-decoration:none}
.verso-sim__t{font-size:1.06rem;font-weight:600;line-height:1.35}
.verso-sim__d{grid-column:1;font-size:.95rem;line-height:1.45;color:#B9BFC7}
.verso-sim__f{grid-column:2;grid-row:1 / span 2;font-size:1.2rem;color:#fff}

/* ==========================================================================
   33. ESAME: risposta scelta, mappa delle domande, consegna a scorrimento
   ========================================================================== */
/* All'esame non c'è verde né rosso: la risposta scelta si riconosce dal
   bordo scuro, dal fondo e da un segno neutro. */
/* la doppia classe batte la regola del passaggio del mouse, che altrimenti
   schiariva il bordo della risposta scelta proprio mentre la si tocca */
.qz-risp.qz-risp--scelta,
.qz-risp.qz-risp--scelta:hover:not(:disabled){
  border-color:var(--nero);border-width:2px;background:var(--grigio-1);padding:13px 15px;
}
.qz-risp--scelta .qz-risp__l{font-weight:700}
.qz-seg--scelta{background:var(--nero);color:#fff}

.qz-azioni__in--esame{flex-direction:column;gap:10px}
.qz-fila{display:flex;gap:12px;width:100%}
.qz-btn--scuro{background:var(--nero);color:#fff}
.qz-btn--scuro:hover:not(:disabled){background:var(--nero-2)}

/* la mappa: un pallino per domanda, come il foglio d'esame in miniatura */
.qz-mappa{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.qz-pallini{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
.qz-pall{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--grigio-3);background:#fff;
}
@media(min-width:560px){.qz-pall{width:13px;height:13px}.qz-pallini{gap:5px}}
.qz-pall--data{background:var(--nero-3);border-color:var(--nero-3)}
.qz-pall--qui{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rosso);border-color:var(--rosso)}
.qz-mappa__c{
  order:-1;font-size:.78rem;font-weight:600;color:var(--lds-testo-2);
  font-variant-numeric:tabular-nums;
}
.qz-pallini{justify-content:space-between}

/* «Scorri per consegnare» */
.qz-slide{
  position:relative;width:100%;height:54px;border-radius:14px;
  background:var(--grigio-1);border:1px solid var(--grigio-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  touch-action:pan-y;
}
.qz-slide__testo{
  font-size:.96rem;font-weight:600;color:var(--lds-testo-2);
  pointer-events:none;transition:opacity .1s linear;padding-left:56px;
}
.qz-slide__pom{
  position:absolute;left:4px;top:4px;width:78px;height:44px;border-radius:11px;
  border:0;background:var(--rosso);color:#fff;font-size:1.2rem;cursor:grab;
  display:flex;align-items:center;justify-content:center;touch-action:none;
}
.qz-slide__pom:active{cursor:grabbing}
.qz-slide__pom:focus-visible{outline:3px solid var(--nero);outline-offset:2px}

/* con tre file in fondo, il corpo lascia più spazio sotto */
body.quiz-vivo.esame-vivo{padding-bottom:calc(186px + env(safe-area-inset-bottom))}
/* e l'apertura nera della pagina sparisce: durante la prova serve schermo,
   non un titolo grande */
body.esame-vivo .hero-pag{display:none}

/* conto alla rovescia */
.conto{
  min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;
}
.conto__eti{
  margin:0;font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lds-testo-2);
}
.conto__n{
  font-family:var(--titolo);font-weight:700;font-size:6.5rem;line-height:1;
  color:var(--nero);font-variant-numeric:tabular-nums;
}
.conto__n--via{font-size:4rem;color:var(--rosso)}
.conto__d{margin:8px 0 0;max-width:34ch;color:var(--lds-testo-2);font-size:.98rem}
@keyframes conto-batti{from{transform:scale(1.25);opacity:.4}to{transform:scale(1);opacity:1}}
.conto__n--batti{animation:conto-batti .32s ease-out}
@media (prefers-reduced-motion:reduce){.conto__n--batti{animation:none}}

/* ---- materia lasciata a metà ---- */
.mat--mezzo .mat__nome{padding-right:4px}
.mat__mezzo{
  display:block;margin-top:5px;font-size:.84rem;font-weight:600;color:var(--rosso);line-height:1.45;
}

/* ---- i due tasti della materia ----
   Studia e Quiz occupano due colonne uguali e non si spostano mai: quando c'è
   qualcosa in sospeso il tasto si porta dietro il quadratino «da capo», ma la
   colonna resta quella. Il quadratino è alto quanto il tasto, così si prende
   col pollice, e non è mai una scrittina sotto: una scritta piccola accanto a
   un tasto grosso sembra un ripensamento. */
.mat__slot{display:flex;min-width:0}
.mat__slot .btn{
  flex:1 1 auto;min-width:0;width:auto;padding:11px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.mat__slot .btn b{font-size:1.05rem;line-height:1.1}
/* La riga piccola: qui sotto niente maiuscole e niente spaziatura fra le
   lettere, se no «riprendi da 6/36» non ci sta e diventa «RIPREN…». */
.mat__slot .btn small{
  font-family:var(--corpo);font-size:.76rem;font-weight:500;line-height:1.2;
  text-transform:none;letter-spacing:0;opacity:.9;
}
.mat__slot--doppio .btn{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}
.mat__rif{
  flex:0 0 auto;width:46px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bordo);border-left-width:1px;
  border-radius:0 var(--raggio-s) var(--raggio-s) 0;
  background:#fff;color:var(--lds-testo-2);transition:.16s;
}
.mat__rif svg{width:20px;height:20px}
.mat__rif:hover{background:var(--grigio-1);color:var(--inchiostro);border-color:var(--grigio-3);text-decoration:none}
.mat__rif:focus-visible{outline:3px solid var(--rosso);outline-offset:2px;z-index:1}

/* ---- «ripreso da dove avevi lasciato» ----
   Una striscia, non una finestra: la pagina è già lì sotto, funzionante, e
   questa dice solo com'è cominciata e come si ricomincia da capo. */
.qz-ripreso{
  max-width:var(--qz-colonna);margin:14px auto 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:11px 14px;border-radius:var(--raggio-s);
  background:var(--grigio-1);border:1px solid var(--bordo);
  font-size:.92rem;color:var(--lds-testo-2);
}
.qz-ripreso a{font-weight:600;color:var(--rosso);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.scorc--largo{margin-top:18px;max-width:var(--qz-colonna)}

/* ---- le prove precedenti ---- */
.prove-giro{overflow-x:auto;max-width:var(--qz-colonna)}
.prove{width:100%;border-collapse:collapse;font-size:.96rem}
.prove th{
  text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lds-testo-2);padding:0 12px 8px 0;border-bottom:1px solid var(--bordo);
}
.prove td{padding:11px 12px 11px 0;border-bottom:1px solid var(--bordo);vertical-align:top;
  font-variant-numeric:tabular-nums;color:var(--lds-testo)}
.prove__ora{display:block;font-size:.8rem;color:var(--lds-testo-2)}
.prove__su{color:var(--lds-testo-2)}
.prove__esito{font-size:.82rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.prove__esito--ok{background:var(--giusto-fondo);color:var(--giusto)}
.prove__esito--ko{background:var(--errore-fondo);color:var(--errore)}