/* ============================================================
   ITALIANO VIVO — foglio di stile unico
   italianovivo.uniscientia.it
   Direzione: "segnaletica civica" — l'autorevolezza di un
   documento ufficiale, la leggibilita' di un cartello ben fatto.
   Nessuna dipendenza esterna: font self-hosted, niente CDN,
   compatibile con CSP stretta.
   ============================================================ */

/* ---------- FONT (self-hosted, /assets/font/) ---------- */
@font-face{
  font-family:"Archivo IV";
  src:url("../font/archivo-var-latin.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; font-style:normal;
}
@font-face{
  font-family:"Atkinson IV";
  src:url("../font/atkinson-400-latin.woff2") format("woff2");
  font-weight:400; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"Atkinson IV";
  src:url("../font/atkinson-700-latin.woff2") format("woff2");
  font-weight:700; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"Plex Mono IV";
  src:url("../font/plexmono-400-latin.woff2") format("woff2");
  font-weight:400; font-display:swap; font-style:normal;
}

/* ============================================================
   1. TOKEN
   ============================================================ */
:root{
  color-scheme: light dark;

  --f-display:"Archivo IV", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-testo:"Atkinson IV", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dati:"Plex Mono IV", ui-monospace, Consolas, monospace;

  /* primitivi — non usare nei componenti, passare dai ruoli */
  --c-navy:#16273B;  --c-navy-2:#4A5A6E;  --c-navy-3:#5F7186;
  /* Il fondo era #FAFAF8: distava 1,03:1 dalla superficie, cioe' le targhe
     non si staccavano — si staccavano solo i loro bordi. #F0F2F5 da' uno
     stacco vero (1,07:1) e vira il grigio dal caldo al freddo: il caldo-crema
     e' l'estetica di default, il freddo e' istituzionale.
     Navy su #F0F2F5 = 13,5:1. */
  --c-carta:#FFFFFF; --c-carta-2:#F0F2F5; --c-carta-3:#E7EAEF;
  --c-bordo:#E2E5EA; --c-bordo-forte:#6E7C8C;
  --c-teal:#00778A;  --c-teal-scuro:#005C6B;
  --c-verde:#0A7B3E; --c-verde-scuro:#086330;
  --c-blu:#1567B3;   --c-blu-scuro:#0F5490;
  --c-ambra:#8F5A00; --c-ambra-scuro:#6E4600;
  --c-rosso:#B3261E;
  --c-verde-vivo:#00B67A;      /* SOLO su navy: su bianco fa 2,63:1 */
  --c-band-verde:#008C45; --c-band-rosso:#CD212A;

  /* ruoli semantici */
  --sfondo:var(--c-carta-2);
  --superficie:var(--c-carta);
  --superficie-2:var(--c-carta-3);
  --inchiostro:var(--c-navy);      /* 14,49:1 */
  --inchiostro-2:var(--c-navy-2);  /*  6,75:1 */
  --inchiostro-3:var(--c-navy-3);  /*  4,79:1 */
  --bordo:var(--c-bordo);
  --bordo-forte:var(--c-bordo-forte);

  --liv-a2:var(--c-teal);    /* restare   */
  --liv-b1:var(--c-verde);   /* diventare */
  --liv-b2:var(--c-blu);     /* studiare  */
  --prog-sicuro:var(--c-ambra);
  --su-livello:#FFFFFF;

  --positivo:var(--c-verde);
  --negativo:var(--c-navy-3);
  --errore:var(--c-rosso);
  --errore-fondo:#FCEDEC;

  --banda:var(--c-navy);
  --su-banda:#F2F5F9;              /* 13,84:1 sul navy */
  --su-banda-2:#A6B4C4;            /*  7,17:1 */
  --su-banda-accento:var(--c-verde-vivo); /* 5,75:1 — vive solo qui */

  --accento:var(--c-verde);
  --accento-scuro:var(--c-verde-scuro);
  --accento-tenue:#E8F3EC;
  --su-accento:#FFFFFF;

  /* tipografia */
  --misura:1.0625rem;
  --interlinea:1.65;
  --riga:64ch;
  --t-100:calc(var(--misura) * .78);
  --t-200:calc(var(--misura) * .875);
  --t-300:var(--misura);
  --t-400:calc(var(--misura) * 1.125);
  --t-500:calc(var(--misura) * 1.3);
  --t-600:clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
  --t-700:clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --t-800:clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --t-850:clamp(2.75rem, 1.55rem + 4.4vw, 4.75rem);
  --t-900:clamp(2.5rem, 1.7rem + 4vw, 4.25rem);
  /* usato dalla fascia tipografica: era dichiarato e non lo usava nessuno.
     Il massimo scende da 7rem perche' li' le frasi vanno a tre righe. */
  --t-mega:clamp(2.6rem, 1.4rem + 5vw, 5.5rem);

  --peso-testo:400; --peso-medio:500; --peso-forte:700; --peso-display:800;
  /* Archivo e' caricato con asse di larghezza 62-125%: si pagano 86 KB per
     quell'asse e finora si usavano cinque valori tutti fra 104 e 118. Tre
     valori dichiarati, e uno che arriva davvero al fondo della corsa. */
  --larg-display:110%;
  --larg-corpo:104%;
  --larg-titolo:118%;
  --larg-mega:125%;
  --sp-display:-0.015em;
  --sp-titolo:-0.02em;
  --sp-mega:-0.032em;
  --sp-occhiello:0.14em;

  /* spazio */
  --densita:1;
  --passo:calc(4px * var(--densita));
  --s1:calc(var(--passo)*1);  --s2:calc(var(--passo)*2);  --s3:calc(var(--passo)*3);
  --s4:calc(var(--passo)*4);  --s5:calc(var(--passo)*6);  --s6:calc(var(--passo)*8);
  --s7:calc(var(--passo)*12); --s8:calc(var(--passo)*16); --s9:calc(var(--passo)*24);
  --s10:calc(var(--passo)*32);

  --largh-testo:var(--riga);
  --largh-contenuto:1180px;
  --largh-larga:1400px;
  --margine-lato:clamp(1rem, 4vw, 3rem);

  /* La segnaletica non ha angoli morbidi: 10px era un raggio da app.
     --r-tondo sopravvive solo per .iv-tag. */
  --r1:2px; --r2:4px; --r3:4px; --r-tondo:999px;

  --ombra-1:0 1px 2px rgba(22,39,59,.06);
  --ombra-2:0 2px 4px rgba(22,39,59,.06), 0 8px 20px -8px rgba(22,39,59,.12);
  --ombra-3:0 4px 8px rgba(22,39,59,.08), 0 24px 48px -16px rgba(22,39,59,.20);
  --ombra-focus:0 0 0 2px var(--superficie), 0 0 0 5px var(--inchiostro);

  /* Elevazione: non un'ombra sfocata — un aggetto. Le targhe stanno
     sul muro, non fluttuano. */
  --rilievo:0 2px 0 var(--bordo);
  --rilievo-forte:0 3px 0 var(--bordo-forte);
  --smalto-chiaro:rgba(255,255,255,.22);
  --smalto-vivo:rgba(255,255,255,.55);

  --d1:120ms; --d2:220ms; --d3:420ms;
  --e-esce:cubic-bezier(.2,.8,.25,1);
  --e-entra:cubic-bezier(.4,0,.2,1);

  /* firma: il segmento bianco del tricolore E' lo sfondo della pagina */
  --filo-tricolore:linear-gradient(90deg,
    var(--c-band-verde) 0 33.333%,
    var(--sfondo) 33.333% 66.666%,
    var(--c-band-rosso) 66.666% 100%);
  --filo-h:4px;
}

/* ---------- tema scuro ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sfondo:#0C1520; --superficie:#132030; --superficie-2:#1B2B3E;
    --inchiostro:#E8EDF3; --inchiostro-2:#A6B4C4; --inchiostro-3:#7E8FA3;
    --bordo:#24374C; --bordo-forte:#55697F;
    --liv-a2:#45BFD1; --liv-b1:#3FBF77; --liv-b2:#5FA9E8; --prog-sicuro:#E0A33C;
    --su-livello:#06111C;
    --positivo:#3FBF77; --negativo:#7E8FA3; --errore:#F2857A; --errore-fondo:#2A1614;
    --banda:#101C2A; --su-banda:#E8EDF3; --su-banda-2:#A6B4C4; --su-banda-accento:#3FBF77;
    --accento:#3FBF77; --accento-scuro:#6FD79B; --accento-tenue:#12291D; --su-accento:#06111C;
    --ombra-1:0 1px 2px rgba(0,0,0,.5);
    --ombra-2:0 2px 6px rgba(0,0,0,.5);
    --ombra-3:0 12px 32px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --sfondo:#0C1520; --superficie:#132030; --superficie-2:#1B2B3E;
  --inchiostro:#E8EDF3; --inchiostro-2:#A6B4C4; --inchiostro-3:#7E8FA3;
  --bordo:#24374C; --bordo-forte:#55697F;
  --liv-a2:#45BFD1; --liv-b1:#3FBF77; --liv-b2:#5FA9E8; --prog-sicuro:#E0A33C;
  --su-livello:#06111C;
  --positivo:#3FBF77; --negativo:#7E8FA3; --errore:#F2857A; --errore-fondo:#2A1614;
  --banda:#101C2A; --su-banda:#E8EDF3; --su-banda-2:#A6B4C4; --su-banda-accento:#3FBF77;
  --accento:#3FBF77; --accento-scuro:#6FD79B; --accento-tenue:#12291D; --su-accento:#06111C;
  --ombra-1:0 1px 2px rgba(0,0,0,.5);
  --ombra-2:0 2px 6px rgba(0,0,0,.5);
  --ombra-3:0 12px 32px rgba(0,0,0,.6);
}
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

/* ============================================================
   2. LE DUE PORTE — un attributo, cinque token
   ------------------------------------------------------------
   I token DERIVATI vanno ridichiarati qui, non in :root.
   Un var() dentro una custom property viene sostituito
   sull'elemento che la dichiara: --t-300:var(--misura) scritto
   in :root legge per sempre il --misura di :root, ed eredita
   gia' risolto. Fino al 14/08/2026 --misura, --riga e --densita
   del body non li leggeva nessuno: fra le due porte cambiava
   soltanto il colore.
   ============================================================ */
[data-porta]{
  /* tipografia derivata dalla misura della porta.
     Il pavimento di 13px su --t-100 serve alla porta centri:
     16px x .78 farebbe 12,48px, illeggibili nelle note. */
  --t-100:max(0.8125rem, calc(var(--misura) * .78));
  --t-200:calc(var(--misura) * .875);
  --t-300:var(--misura);
  --t-400:calc(var(--misura) * 1.125);
  --t-500:calc(var(--misura) * 1.3);

  /* spazio derivato dalla densita' della porta */
  --passo:calc(4px * var(--densita));
  --s1:calc(var(--passo)*1);  --s2:calc(var(--passo)*2);  --s3:calc(var(--passo)*3);
  --s4:calc(var(--passo)*4);  --s5:calc(var(--passo)*6);  --s6:calc(var(--passo)*8);
  --s7:calc(var(--passo)*12); --s8:calc(var(--passo)*16); --s9:calc(var(--passo)*24);
  --s10:calc(var(--passo)*32);

  --largh-testo:var(--riga);

  /* perche' cambi registro anche la banda centri annidata nella
     home, che eredita il line-height gia' calcolato del body */
  font-size:var(--t-300);
  line-height:var(--interlinea);
}
/* --t-600 .. --t-900 restano in :root: i titoli scalano sul
   viewport, non sulla porta, e devono restare identici. */

[data-porta="persone"]{
  --accento:var(--c-verde); --accento-scuro:var(--c-verde-scuro); --accento-tenue:#E8F3EC;
  --misura:1.0625rem; --interlinea:1.75; --riga:56ch; --densita:1.15;
}
[data-porta="centri"]{
  --accento:var(--c-blu); --accento-scuro:var(--c-blu-scuro); --accento-tenue:#E7F0F9;
  --misura:1rem; --interlinea:1.55; --riga:72ch; --densita:.9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-porta="persone"]{
    --accento:#3FBF77; --accento-scuro:#6FD79B; --accento-tenue:#12291D; --su-accento:#06111C;
  }
  :root:not([data-theme="light"]) [data-porta="centri"]{
    --accento:#5FA9E8; --accento-scuro:#8FC4F0; --accento-tenue:#0E2337; --su-accento:#06111C;
  }
}
:root[data-theme="dark"] [data-porta="persone"]{
  --accento:#3FBF77; --accento-scuro:#6FD79B; --accento-tenue:#12291D; --su-accento:#06111C;
}
:root[data-theme="dark"] [data-porta="centri"]{
  --accento:#5FA9E8; --accento-scuro:#8FC4F0; --accento-tenue:#0E2337; --su-accento:#06111C;
}

/* ============================================================
   3. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--sfondo);
  color:var(--inchiostro);
  font-family:var(--f-testo);
  font-size:var(--t-300);
  line-height:var(--interlinea);
  font-weight:var(--peso-testo);
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

h1,h2,h3,h4,.iv-display{
  font-family:var(--f-display);
  font-weight:var(--peso-display);
  font-stretch:var(--larg-display);
  letter-spacing:var(--sp-display);
  line-height:1.08;
  text-wrap:balance;
  margin:0 0 var(--s4);
  color:var(--inchiostro);
}
h1{ font-size:var(--t-900); }
h2{ font-size:var(--t-800); }
h3{ font-size:var(--t-700); }
h4{ font-size:var(--t-600); line-height:1.2; }
h5{ font-family:var(--f-display); font-weight:var(--peso-forte);
    font-size:var(--t-500); line-height:1.25; margin:0 0 var(--s3); }

p{ margin:0 0 var(--s4); max-width:var(--largh-testo); }
p:last-child{ margin-bottom:0; }
strong{ font-weight:var(--peso-forte); color:var(--inchiostro); }

a{ color:var(--accento); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--accento-scuro); text-decoration-thickness:2px; }

img{ max-width:100%; height:auto; }

.iv-occhiello{
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-100); letter-spacing:var(--sp-occhiello);
  text-transform:uppercase; color:var(--accento);
  display:flex; align-items:center; gap:var(--s3);
  margin:0 0 var(--s4);
}
.iv-occhiello::after{ content:""; flex:1; height:1px; background:var(--bordo); }

.iv-rif{
  font-family:var(--f-dati); font-size:var(--t-200); font-weight:400;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  color:var(--inchiostro-2);
}

.iv-contenitore{ width:100%; max-width:var(--largh-contenuto);
  margin-inline:auto; padding-inline:var(--margine-lato); }
.iv-contenitore--largo{ max-width:var(--largh-larga); }
.iv-contenitore--stretto{ max-width:calc(var(--largh-testo) + 2*var(--margine-lato)); }
.iv-sezione{ padding-block:var(--s9); }
.iv-sezione--stretta{ padding-block:var(--s8); }

.iv-filo{ height:var(--filo-h); background:var(--filo-tricolore); border:0; margin:0; }

.iv-salta{
  position:absolute; left:var(--s4); top:var(--s4); z-index:100;
  transform:translateY(-250%); transition:transform var(--d1) var(--e-esce);
  background:var(--superficie); color:var(--inchiostro);
  padding:var(--s3) var(--s5); border-radius:var(--r2); box-shadow:var(--ombra-focus);
  text-decoration:none;
}
.iv-salta:focus{ transform:translateY(0); }

.iv-vissuto{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ============================================================
   4. BOTTONI
   ============================================================ */
.iv-btn{
  --btn-min:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:var(--btn-min);
  padding:var(--s3) var(--s6);
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-stretch:104%; font-size:var(--t-300); line-height:1.2;
  text-decoration:none; text-align:center;
  border:2px solid transparent; border-radius:var(--r2);
  cursor:pointer; background:none; color:inherit;
  transition:background-color var(--d1) var(--e-esce),
             border-color var(--d1) var(--e-esce),
             color var(--d1) var(--e-esce),
             box-shadow var(--d1) var(--e-esce),
             translate var(--d1) var(--e-esce);
}
[data-porta="centri"] .iv-btn{ --btn-min:44px; }

.iv-btn--primario{ background:var(--accento); color:var(--su-accento); border-color:var(--accento); }
.iv-btn--primario:hover{ background:var(--accento-scuro); border-color:var(--accento-scuro);
  translate:0 -1px; box-shadow:var(--ombra-2); color:var(--su-accento); }
.iv-btn--primario:active{ translate:0 0; box-shadow:none; filter:brightness(.94); }

.iv-btn--secondario{ background:transparent; color:var(--inchiostro); border-color:var(--inchiostro); }
.iv-btn--secondario:hover{ background:var(--inchiostro); color:var(--superficie); translate:0 -1px; }
.iv-btn--secondario:active{ translate:0 0; }

.iv-btn--fantasma{ color:var(--accento); padding-inline:var(--s4); }
.iv-btn--fantasma:hover{ background:var(--accento-tenue); color:var(--accento-scuro); }

.iv-banda .iv-btn--primario{ background:var(--su-banda); color:var(--banda); border-color:var(--su-banda); }
.iv-banda .iv-btn--primario:hover{ background:#FFFFFF; border-color:#FFFFFF; color:var(--banda); }
.iv-banda .iv-btn--secondario{ color:var(--su-banda); border-color:var(--su-banda-2); }
.iv-banda .iv-btn--secondario:hover{ background:var(--su-banda); color:var(--banda); }

.iv-btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid transparent; outline-offset:2px;
  box-shadow:var(--ombra-focus); border-radius:var(--r2);
}
.iv-banda :focus-visible{ box-shadow:0 0 0 2px var(--banda), 0 0 0 5px var(--su-banda); }

.iv-btn:disabled,.iv-btn[aria-disabled="true"]{
  background:var(--superficie-2); color:var(--inchiostro-3);
  border-color:var(--bordo); cursor:not-allowed; translate:0 0; box-shadow:none;
}
.iv-freccia{ transition:translate var(--d1) var(--e-esce); }
.iv-btn:hover .iv-freccia{ translate:3px 0; }

@media (forced-colors:active){
  .iv-btn{ border:2px solid ButtonText; }
  .iv-btn:focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
}

.iv-azioni{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s6); }

/* ============================================================
   5. TESTATA
   ============================================================ */
.iv-testata{ position:sticky; top:0; z-index:50; background:var(--superficie);
  border-bottom:1px solid var(--bordo); }
.iv-testata__riga{ display:flex; align-items:center; gap:var(--s5); min-height:72px; }
.iv-testata__marchio{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.iv-testata__marchio img{ height:34px; width:auto; display:block; }
.iv-testata nav{ margin-inline-start:auto; display:flex; gap:var(--s1); align-items:center;
  flex-wrap:wrap; justify-content:flex-end; }
.iv-testata nav a{ padding:var(--s3) var(--s4); min-height:44px; display:inline-flex;
  align-items:center; border-radius:var(--r2); text-decoration:none;
  color:var(--inchiostro); font-weight:var(--peso-medio); font-size:var(--t-200); }
.iv-testata nav a:hover{ background:var(--superficie-2); color:var(--accento); }
.iv-testata nav a[aria-current="page"]{ color:var(--accento); box-shadow:inset 0 -2px 0 var(--accento); }

/* barra di servizio: la porta laterale */
.iv-servizio{ background:var(--superficie-2); border-bottom:1px solid var(--bordo);
  font-size:var(--t-200); }
.iv-servizio__riga{ display:flex; align-items:center; justify-content:flex-end;
  gap:var(--s3); min-height:40px; flex-wrap:wrap; color:var(--inchiostro-2); }
.iv-servizio a{ font-weight:var(--peso-medio); }

/* Sotto i 760px la nav non entra in riga: 694px di voci sulla
   pagina centri contro ~700 di contenitore. Il valore 860 era
   tarato largo: la nav B2C cede a 648, la B2B a 760. */
@media (max-width:760px){
  :root{ --h-testata:56px; }

  .iv-testata{ box-shadow:var(--ombra-1); }
  .iv-testata__riga{ min-height:var(--h-testata); gap:var(--s4);
    justify-content:space-between; }
  .iv-testata__marchio img{ height:30px; }

  /* La nav in riga sparisce SOLO quando il JS ha acceso il cassetto:
     senza JS resta quella di prima, che va a capo ma funziona. */
  .iv-testata[data-menu="pronto"] nav{ display:none; }
  .iv-testata:not([data-menu="pronto"]) .iv-testata__riga{ flex-wrap:wrap; padding-block:var(--s3); }
  .iv-testata:not([data-menu="pronto"]) nav{ width:100%; margin-inline-start:0;
    justify-content:flex-start; border-top:1px solid var(--bordo); padding-top:var(--s2); }

  /* barra di servizio: su telefono resta il ponte fra le due porte,
     ma non la frase che lo introduce — e' l'invito B2B servito
     per primo a un pubblico B2C. Il testo integrale e' nel cassetto. */
  .iv-servizio__riga{ justify-content:flex-end; min-height:0; flex-wrap:nowrap; }
  .iv-servizio__riga > span{ display:none; }
  .iv-servizio a{ min-height:40px; display:inline-flex; align-items:center;
    padding-inline:var(--s2); }
}

/* ============================================================
   6. HERO
   ============================================================ */
.iv-hero{ position:relative; padding-block:var(--s9) var(--s8); background:var(--sfondo); }
.iv-hero__griglia{ display:grid; gap:var(--s7);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end; }
@media (max-width:900px){ .iv-hero__griglia{ grid-template-columns:1fr; align-items:start; } }
.iv-hero__titolo{ font-size:var(--t-900); margin:0 0 var(--s5); max-width:18ch; }
.iv-hero__titolo em{ font-style:normal; color:var(--accento);
  box-shadow:inset 0 -.14em 0 var(--accento-tenue); }
.iv-hero__sommario{ font-size:var(--t-400); color:var(--inchiostro-2); max-width:var(--largh-testo); }
.iv-hero__nota{ margin-top:var(--s3); font-size:var(--t-200); color:var(--inchiostro-3); }

.iv-hero__prove{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--bordo); border:1px solid var(--bordo);
  border-radius:var(--r2); overflow:hidden; }
.iv-hero__prove li{ background:var(--superficie); padding:var(--s5); }
.iv-hero__prove b{ display:block; font-family:var(--f-display); font-weight:var(--peso-display);
  font-stretch:112%; font-size:var(--t-700); line-height:1; color:var(--inchiostro);
  font-variant-numeric:lining-nums tabular-nums; }
.iv-hero__prove span{ display:block; margin-top:var(--s2); font-size:var(--t-200); color:var(--inchiostro-2); }

/* ============================================================
   7. FIRMA — badge di livello e scala QCER
   ============================================================ */
.iv-livello{
  --lv:var(--liv-a2);
  display:inline-flex; align-items:stretch;
  border:1px solid var(--bordo); border-radius:var(--r1);
  background:var(--superficie); overflow:hidden;
  text-decoration:none; color:inherit;
}
.iv-livello[data-lv="A2"]{ --lv:var(--liv-a2); }
.iv-livello[data-lv="B1"]{ --lv:var(--liv-b1); }
.iv-livello[data-lv="B2"]{ --lv:var(--liv-b2); }
.iv-livello__codice{
  background:var(--lv); color:var(--su-livello);
  font-family:var(--f-display); font-weight:900; font-stretch:118%;
  font-size:var(--t-400); line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s3) var(--s4); min-width:3.25em;
  font-variant-numeric:lining-nums tabular-nums;
}
.iv-livello__scopo{ padding:var(--s3) var(--s4);
  font-size:var(--t-200); font-weight:var(--peso-medio);
  color:var(--inchiostro-2); display:flex; align-items:center; }

.iv-scala{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); border-top:2px solid var(--bordo); }
.iv-scala li{ position:relative; padding:var(--s4) var(--s2) var(--s2); text-align:center; }
.iv-scala li::before{ content:""; position:absolute; inset-block-start:-2px; inset-inline:0;
  height:2px; background:var(--bordo); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d3) var(--e-esce), background-color var(--d3) var(--e-esce); }
.iv-scala[data-acceso] li::before{ transform:scaleX(1); }
.iv-scala__cod{ font-family:var(--f-dati); font-size:var(--t-200);
  color:var(--inchiostro-3); display:block; }
.iv-scala__uso{ font-size:var(--t-100); color:var(--inchiostro-3); display:block; }
.iv-scala li[aria-current="step"]{ --lv:var(--accento); }
.iv-scala li[aria-current="step"]::before{ background:var(--lv); height:4px; inset-block-start:-3px; }
.iv-scala li[aria-current="step"] .iv-scala__cod{ color:var(--lv); font-size:var(--t-400); }
.iv-scala li[aria-current="step"] .iv-scala__uso{ color:var(--inchiostro); font-weight:var(--peso-medio); }
@media (max-width:640px){ .iv-scala{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   8. GRIGLIE E CARD
   ============================================================ */
.iv-griglia{ display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.iv-griglia--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); }

/* card "porta": le tre domande di bisogno */
.iv-porta{
  --lv:var(--accento);
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  background:var(--superficie); border:1px solid var(--bordo);
  border-inline-start:4px solid var(--lv);
  border-radius:var(--r2); padding:var(--s6);
  box-shadow:var(--ombra-1);
  transition:box-shadow var(--d1) var(--e-esce), translate var(--d1) var(--e-esce);
}
.iv-porta[data-lv="A2"]{ --lv:var(--liv-a2); }
.iv-porta[data-lv="B1"]{ --lv:var(--liv-b1); }
.iv-porta[data-lv="B2"]{ --lv:var(--liv-b2); }
.iv-porta[data-prog="sicuro"]{ --lv:var(--prog-sicuro); }
.iv-porta:hover{ box-shadow:var(--ombra-2); translate:0 -2px; }
.iv-porta:focus-within{ box-shadow:var(--ombra-focus); }
.iv-porta__titolo{ font-size:var(--t-600); margin:0; }
.iv-porta__titolo a{ color:inherit; text-decoration:none; }
.iv-porta__titolo a::after{ content:""; position:absolute; inset:0; }
.iv-porta__corpo{ color:var(--inchiostro-2); flex:1; }
.iv-porta__piede{ display:flex; align-items:center; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--bordo);
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-200); color:var(--lv); }

.iv-tag{ display:inline-block; padding:2px var(--s3); border-radius:var(--r-tondo);
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-100); letter-spacing:.06em; text-transform:uppercase;
  background:var(--accento-tenue); color:var(--accento-scuro); }

/* card certificazione con prezzo */
.iv-cert{
  --lv:var(--accento);
  display:flex; flex-direction:column;
  background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r3); overflow:hidden; box-shadow:var(--ombra-1);
}
.iv-cert[data-lv="A2"]{ --lv:var(--liv-a2); }
.iv-cert[data-lv="B1"]{ --lv:var(--liv-b1); }
.iv-cert[data-lv="B2"]{ --lv:var(--liv-b2); }
.iv-cert__testata{ background:var(--lv); color:var(--su-livello); padding:var(--s5) var(--s6); }
.iv-cert__codice{ font-family:var(--f-display); font-weight:900; font-stretch:118%;
  font-size:var(--t-800); line-height:1; display:block;
  font-variant-numeric:lining-nums tabular-nums; }
.iv-cert__scopo{ display:block; margin-top:var(--s2); font-size:var(--t-300); font-weight:var(--peso-medio); }
.iv-cert__corpo{ padding:var(--s6); display:flex; flex-direction:column; gap:var(--s5); flex:1; }
.iv-cert__titolo{ font-size:var(--t-600); margin:0; }
.iv-cert__prezzo{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.iv-cert__cifra{ font-family:var(--f-display); font-weight:var(--peso-display); font-stretch:112%;
  font-size:var(--t-800); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums; color:var(--inchiostro); }
.iv-cert__unita{ font-size:var(--t-200); color:var(--inchiostro-3); }
.iv-cert__incluso{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.iv-cert__incluso li{ display:grid; grid-template-columns:1.25em 1fr; gap:var(--s3);
  font-size:var(--t-300); color:var(--inchiostro-2); align-items:start; }
.iv-cert__incluso li::before{ content:"\2713"; color:var(--positivo); font-weight:700; }
.iv-cert__incluso li[data-escluso]::before{ content:"\2014"; color:var(--negativo); }
.iv-cert__incluso li[data-escluso]{ color:var(--inchiostro-3); }
.iv-cert__piede{ padding:var(--s5) var(--s6) var(--s6); border-top:1px solid var(--bordo);
  display:grid; gap:var(--s3); }
.iv-cert__piede .iv-btn{ width:100%; }
.iv-cert__nota{ font-size:var(--t-100); color:var(--inchiostro-3); text-align:center; }

/* passi numerati */
.iv-passi{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); counter-reset:passo; }
.iv-passi li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:start;
  counter-increment:passo; }
.iv-passi li::before{
  content:counter(passo);
  font-family:var(--f-display); font-weight:var(--peso-display); font-stretch:112%;
  font-size:var(--t-500); line-height:1;
  width:2.2em; height:2.2em; display:grid; place-items:center;
  border-radius:var(--r-tondo); background:var(--accento-tenue); color:var(--accento-scuro);
  font-variant-numeric:lining-nums tabular-nums;
}
.iv-passi h3,.iv-passi h4{ margin:0 0 var(--s2); font-size:var(--t-500); }
.iv-passi p{ margin:0; color:var(--inchiostro-2); }

/* elenco pacchetto */
.iv-pacchetto{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); }
.iv-pacchetto li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; }
.iv-pacchetto li::before{ content:"\2713"; color:var(--positivo); font-weight:700; font-size:var(--t-400); }
.iv-pacchetto b{ display:block; margin-bottom:var(--s1); font-family:var(--f-display);
  font-weight:var(--peso-forte); font-size:var(--t-400); }
.iv-pacchetto span{ color:var(--inchiostro-2); font-size:var(--t-200); }

/* ============================================================
   9. FASCIA NAVY — qui NON vanno marchi (i PNG sono per fondo chiaro)
   ============================================================ */
.iv-banda{ background:var(--banda); color:var(--su-banda);
  border-block:1px solid var(--bordo); padding-block:var(--s8); }
.iv-banda h1,.iv-banda h2,.iv-banda h3{ color:var(--su-banda); }
.iv-banda p{ color:var(--su-banda-2); }
.iv-banda strong{ color:var(--su-banda); }
.iv-banda .iv-occhiello{ color:var(--su-banda-accento); }
.iv-banda .iv-occhiello::after{ background:rgba(242,245,249,.22); }
.iv-banda a{ color:var(--su-banda); text-decoration-color:var(--su-banda-accento); }
.iv-banda .iv-rif{ color:var(--su-banda-2); }

.iv-norme{ list-style:none; margin:var(--s6) 0 0; padding:0;
  display:grid; gap:1px; background:rgba(242,245,249,.16);
  border:1px solid rgba(242,245,249,.16); border-radius:var(--r2); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.iv-norme li{ background:var(--banda); padding:var(--s5); }
.iv-norme__fonte{ display:block; font-family:var(--f-dati); font-size:var(--t-100);
  letter-spacing:.02em; color:var(--su-banda-accento); margin-bottom:var(--s2); }
.iv-norme__cosa{ display:block; font-size:var(--t-200); color:var(--su-banda-2); line-height:1.5; }

.iv-sentenze{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) 0 0; padding:0; list-style:none; }
.iv-sentenze li{ font-family:var(--f-dati); font-size:var(--t-100); font-variant-numeric:tabular-nums;
  color:var(--su-banda-2); border:1px solid rgba(242,245,249,.22);
  border-radius:var(--r1); padding:var(--s1) var(--s3); }

/* ============================================================
   10. CONFRONTO
   ============================================================ */
.iv-confronto{ width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--bordo); border-radius:var(--r3); overflow:hidden;
  background:var(--superficie); font-size:var(--t-300); }
.iv-confronto caption{ text-align:start; font-size:var(--t-200);
  color:var(--inchiostro-3); padding-bottom:var(--s3); }
.iv-confronto th,.iv-confronto td{ padding:var(--s4) var(--s5); text-align:start;
  vertical-align:top; border-bottom:1px solid var(--bordo); }
.iv-confronto tr:last-child th,.iv-confronto tr:last-child td{ border-bottom:0; }
.iv-confronto thead th{ font-family:var(--f-display); font-weight:var(--peso-forte);
  font-stretch:106%; font-size:var(--t-400); background:var(--superficie-2);
  color:var(--inchiostro); border-bottom:2px solid var(--bordo); }
.iv-confronto thead th[data-lato="senza"]{ color:var(--inchiostro-3); }
.iv-confronto thead th[data-lato="con"]{ color:var(--accento); box-shadow:inset 0 -3px 0 var(--accento); }
.iv-confronto td[data-lato="senza"]{ color:var(--inchiostro-3); }
.iv-confronto td[data-lato="con"]{ color:var(--inchiostro); background:var(--accento-tenue);
  font-weight:var(--peso-medio); }
.iv-confronto td[data-lato]::before{ font-weight:700; margin-inline-end:var(--s3); }
.iv-confronto td[data-lato="senza"]::before{ content:"\2014"; color:var(--negativo); }
.iv-confronto td[data-lato="con"]::before{ content:"\2713"; color:var(--positivo); }
/* La soglia 720 e' giusta e resta. Cambia l'ordine di lettura:
   con thead nascosto l'etichetta serve, ma va PRIMA del valore,
   non dopo — altrimenti si legge la risposta prima di sapere
   di chi e'. L'ordine si ottiene con order negativi sugli
   pseudo-elementi: il nodo di testo e' un item anonimo con
   order:0 e non e' selezionabile. */
@media (max-width:720px){
  .iv-confronto,.iv-confronto tbody,.iv-confronto tr,.iv-confronto td,.iv-confronto th{ display:block; }
  .iv-confronto thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .iv-confronto tr{ border-bottom:1px solid var(--bordo); padding-block:var(--s2); }
  .iv-confronto tr:last-child{ border-bottom:0; }

  .iv-confronto td[data-lato]{
    display:flex; flex-wrap:wrap; align-items:baseline;
    column-gap:var(--s3); padding:var(--s3) var(--s4);
    border-bottom:0;
  }
  .iv-confronto td[data-lato]::after{
    order:-2; flex:0 0 100%; margin:0 0 var(--s1);
    font-family:var(--f-display); font-weight:var(--peso-forte);
    font-size:var(--t-100); letter-spacing:var(--sp-occhiello);
    text-transform:uppercase; line-height:1.2;
  }
  .iv-confronto td[data-lato="senza"]::after{ content:"Oggi, da solo"; color:var(--inchiostro-3); }
  .iv-confronto td[data-lato="con"]::after{ content:"Come centro accreditato"; color:var(--accento); }
  .iv-confronto td[data-lato]::before{ order:-1; margin:0; }

  .iv-confronto td[data-lato="senza"]{ padding-bottom:var(--s2); }
  .iv-confronto td[data-lato="con"]{ border-radius:var(--r2); margin-inline:var(--s2); }

  /* tabella a 3 colonne (/certificato/): etichette dove il thead sparisce */
  .iv-tabella3 td::after{ content:attr(data-eti); display:block; margin-top:var(--s1);
    font-size:var(--t-100); color:var(--inchiostro-3); }
}
.iv-scorri{ overflow-x:auto; }

/* ============================================================
   11. FAQ
   ============================================================ */
.iv-faq{ border-top:1px solid var(--bordo); }
.iv-faq__voce{ border-bottom:1px solid var(--bordo); }
.iv-faq__voce > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s4);
  min-height:56px; padding:var(--s4) 0;
  font-family:var(--f-display); font-weight:var(--peso-forte); font-stretch:104%;
  font-size:var(--t-400); line-height:1.3; color:var(--inchiostro);
  transition:color var(--d1) var(--e-esce);
}
.iv-faq__voce > summary::-webkit-details-marker{ display:none; }
.iv-faq__voce > summary:hover{ color:var(--accento); }
.iv-faq__voce > summary::after{
  content:""; margin-inline-start:auto; flex:0 0 auto;
  width:14px; height:14px; border-inline-end:2px solid currentColor;
  border-block-end:2px solid currentColor; rotate:45deg; translate:0 -3px;
  transition:rotate var(--d2) var(--e-esce);
}
.iv-faq__voce[open] > summary{ color:var(--accento); }
.iv-faq__voce[open] > summary::after{ rotate:-135deg; translate:0 3px; }
.iv-faq__corpo{ padding-bottom:var(--s5); }
.iv-faq__corpo p{ color:var(--inchiostro-2); max-width:var(--largh-testo); }

/* ============================================================
   12. RIQUADRI DI AVVERTENZA
   ============================================================ */
.iv-nota{ padding:var(--s5); border-radius:var(--r2);
  border-inline-start:4px solid var(--accento); background:var(--accento-tenue); }
.iv-nota p{ margin:0; max-width:none; }
.iv-nota--attenzione{ border-color:var(--prog-sicuro); background:var(--superficie-2); }

/* sigillo: chi rilascia il titolo */
.iv-sigillo{ display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  padding:var(--s6); background:var(--superficie);
  border:1px solid var(--bordo); border-radius:var(--r3);
  border-block-start:var(--filo-h) solid transparent;
  background-image:var(--filo-tricolore), none;
  background-size:100% var(--filo-h); background-repeat:no-repeat;
  background-position:top left; background-origin:border-box;
}
.iv-sigillo div b{ display:block; font-family:var(--f-display); font-weight:var(--peso-display);
  font-size:var(--t-500); margin-bottom:var(--s2); }
.iv-sigillo div span{ color:var(--inchiostro-2); font-size:var(--t-200); }

/* ============================================================
   13. FOOTER
   ============================================================ */
.iv-footer{ background:var(--superficie); border-top:1px solid var(--bordo);
  padding-block:var(--s8) var(--s6); margin-top:var(--s9); }
/* Tutte le tracce dentro il repeat: e' l'unico modo perche' la
   colonna del marchio non venga schiacciata dal minimo di 10rem
   delle altre due (a 500px valeva 44px e deformava il logo).
   L'enfasi sulla prima colonna torna esplicita da 1000px. */
.iv-footer__griglia{ display:grid; gap:var(--s7) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
@media (min-width:1000px){
  .iv-footer__griglia{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
}
.iv-footer h3{ font-size:var(--t-200); letter-spacing:var(--sp-occhiello);
  text-transform:uppercase; color:var(--inchiostro-3);
  font-family:var(--f-display); font-weight:var(--peso-forte); margin-bottom:var(--s4); }
.iv-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s1); }
.iv-footer a{ color:var(--inchiostro-2); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; font-size:var(--t-200); }
.iv-footer a:hover{ color:var(--accento); text-decoration:underline; }
.iv-footer__intro p{ color:var(--inchiostro-2); font-size:var(--t-200); }

.iv-marchi{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s6);
  padding-block:var(--s6); margin-top:var(--s7); border-top:1px solid var(--bordo); }
.iv-marchi img{ height:30px; width:auto; display:block; }

.iv-footer__legale{ margin-top:var(--s5); padding-top:var(--s5);
  border-top:1px solid var(--bordo); font-size:var(--t-100); color:var(--inchiostro-3);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); }
.iv-footer__legale p{ max-width:none; margin:0; }

/* ============================================================
   14. MOTO — quattro regole
   ============================================================ */
/* La comparsa allo scroll nasconde l'elemento e lo rivela via JS.
   Se il JS non gira — bloccato, in errore, connessione caduta a meta' —
   quello che resta nascosto qui sono LE TRE PORTE della home, cioe' la
   navigazione primaria. Non e' un degrado estetico: e' perdita di
   contenuto. Due reti, nessuna delle quali richiede JS inline (la CSP
   e' script-src 'self'):
   1. si nasconde solo dove lo scripting e' davvero abilitato;
   2. e comunque, dopo 3 secondi, l'elemento si rivela da solo. */
@media (scripting: enabled){
  [data-comparsa]{
    opacity:0; translate:0 12px;
    transition:opacity var(--d3) var(--e-esce), translate var(--d3) var(--e-esce);
    transition-delay:calc(var(--ritardo,0) * 60ms);
    animation:iv-rete-comparsa 0s linear 3s forwards;
  }
}
@keyframes iv-rete-comparsa{ to{ opacity:1; translate:0 0; } }
[data-comparsa][data-visibile]{ opacity:1; translate:0 0; animation:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
  [data-comparsa]{ opacity:1 !important; translate:none !important; transition:none !important; }
  .iv-btn:hover,.iv-porta:hover{ translate:0 0 !important; }
  .iv-scala li::before{ transform:scaleX(1) !important; }
}

/* ============================================================
   15. STAMPA — un certificato si stampa, capita
   ============================================================ */
@media print{
  .iv-testata,.iv-servizio,.iv-footer,.iv-azioni{ display:none; }
  body{ background:#fff; color:#000; }
  .iv-banda{ background:#fff; color:#000; border:1px solid #999; }
  .iv-banda p,.iv-banda h2{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}

/* ============================================================
   16. CORREZIONI MOBILE — 14/08/2026
   Prima le riparazioni valide a ogni larghezza, poi i breakpoint
   dal piu' largo al piu' stretto. Ogni soglia e' la larghezza a
   cui una misura reale smette di stare dentro, non un valore
   preso da un framework.
   ============================================================ */

:root{ --h-testata:72px; }

[hidden]{ display:none !important; }

/* Ogni bersaglio di ancora deve fermarsi SOTTO la testata sticky.
   Senza, su accreditamento-centri l'intero menu porta a schermate
   in cui il titolo e' coperto dall'header. */
[id]{ scroll-margin-top:calc(var(--h-testata) + var(--s5)); }

/* era absolute: tabulando a meta' pagina compariva fuori schermo */
.iv-salta{ position:fixed; }

/* rete per la parola lunga nel font di ripiego durante lo swap:
   i clamp dei titoli sono stati misurati e non vanno toccati */
h1,h2,h3,h4,h5,.iv-display,.iv-scala__uso,.iv-cert__titolo,.iv-porta__titolo{
  overflow-wrap:break-word;
}

/* iOS 15 e precedenti non conoscono overflow:clip e scartano la
   dichiarazione su body. Il guardrail va su html: overflow-x:hidden
   sul body lo renderebbe scroll container e romperebbe lo sticky. */
@supports not (overflow: clip){
  html{ overflow-x:hidden; }
}

/* ---- 16.1 tema scuro ---- */

/* I marchi sono PNG navy su trasparente, disegnati per fondo chiaro:
   su --superficie (#132030) spariscono, UNIDA compreso — cioe' la
   prova stessa che il titolo lo rilascia un'universita'. Targa bianca
   invece di invertirli: l'inversione distruggerebbe il tricolore del
   marchio e i colori di UNIDA. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --banda:#1A2E44;   /* era #101C2A: 1,06:1 dallo sfondo, le fasce sparivano */
  }
  :root:not([data-theme="light"]) .iv-testata__marchio img,
  :root:not([data-theme="light"]) .iv-footer__intro img,
  :root:not([data-theme="light"]) .iv-marchi img{
    background:#FFFFFF; padding:var(--s2) var(--s3);
    border-radius:var(--r1); box-sizing:content-box;
  }
}
:root[data-theme="dark"]{ --banda:#1A2E44; }
:root[data-theme="dark"] .iv-testata__marchio img,
:root[data-theme="dark"] .iv-footer__intro img,
:root[data-theme="dark"] .iv-marchi img{
  background:#FFFFFF; padding:var(--s2) var(--s3);
  border-radius:var(--r1); box-sizing:content-box;
}
/* --banda #1A2E44: su-banda 11,2:1 · su-banda-2 6,53:1
   · su-banda-accento 5,88:1 · stacco dallo sfondo 1,34:1 */

/* ---- 16.2 target tattile della riga legale ---- */

/* .iv-footer a{min-height:44px;display:inline-flex} colpiva anche
   "Privacy" dentro un <p> a 13px, allargando la riga di 25px.
   Qui il bersaglio si costruisce col padding, che non sfonda il
   line box. */
.iv-footer__legale a{
  min-height:0; display:inline-block;
  padding-block:var(--s2); text-decoration:underline;
}
.iv-footer__legale-link{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); width:100%;
  align-items:center; }
.iv-footer__legale-link a{ font-size:var(--t-100); }

/* ---- 16.3 collegamento social ---- */

/* Dal 17/08/2026 le voci sono tre — Facebook, Instagram, X — e non piu' una:
   il blocco era un contenitore di flusso, quindi tre link inline si sarebbero
   toccati e sotto i 390px sarebbero andati a capo dentro la parola. Serve
   flex con gap esplicito. Il padding-inline delle voci resta perche' allarga
   il bersaglio del dito oltre il testo, ma il primo elemento va riallineato
   al bordo della colonna, altrimenti l'etichetta sballa rispetto al footer. */
.iv-social{
  padding-block:var(--s4); border-top:1px solid var(--bordo);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s1) var(--s2);
}
.iv-social__eti{
  margin:0; font-size:var(--t-100); font-weight:var(--peso-forte);
  letter-spacing:var(--sp-occhiello); text-transform:uppercase;
  color:var(--inchiostro-3);
}
.iv-social a{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding-inline:var(--s2);
  color:var(--inchiostro-2); text-decoration:none; font-size:var(--t-200);
  font-weight:var(--peso-medio);
}
.iv-social a:hover{ color:var(--accento); text-decoration:underline; }
.iv-social svg{ flex:0 0 auto; }

/* ---- 16.4 fascia 901-1080px delle prove dell'hero ---- */

/* Unica fascia in cui la griglia dell'hero e' ancora a due colonne
   ma il contenitore non e' al massimo: cella 117px, "UNIDA" a
   --t-700 ne misura 119 e overflow:hidden ne taglia la A. */
@media (min-width:901px) and (max-width:1080px){
  .iv-hero__prove li{ padding:var(--s5) var(--s4); }
  .iv-hero__prove b{ font-size:var(--t-600); }
}

/* ---- 16.5 sotto i 760px ---- */

@media (max-width:760px){
  /* la densita' 1,15 della porta persone su telefono si paga in scroll */
  [data-porta="persone"]{ --densita:1; --t-100:calc(var(--misura) * .85); }

  /* la nota che precede l'uscita verso il negozio e' il testo piu'
     importante fra quelli piccoli: chi legge sta per pagare su un
     altro dominio, e non e' madrelingua */
  [data-porta="persone"] .iv-cert__nota{
    font-size:var(--t-200); color:var(--inchiostro-2); text-align:start;
  }
}

/* ---- 16.6 sotto i 640px: il documento diventa una colonna ---- */

@media (max-width:640px){
  .iv-sezione{ padding-block:var(--s8); }
  .iv-sezione--stretta{ padding-block:var(--s7); }
  .iv-banda{ padding-block:var(--s7); }
  .iv-hero{ padding-block:var(--s7) var(--s6); }
  .iv-footer{ margin-top:var(--s8); padding-block:var(--s7) var(--s5); }

  .iv-marchi{ gap:var(--s5); padding-block:var(--s5); margin-top:var(--s6); }
  .iv-marchi img{ height:26px; }
  .iv-marchi picture img{ height:26px; }

  .iv-sigillo{ padding:var(--s5); }
  h2{ margin-bottom:var(--s3); }

  /* L'etichetta «Seguici» costa 77px e a 390px spinge X da sola su una
     seconda riga — tre voci, due righe, la terza spaiata. Sotto i 640px
     sparisce: i tre link restano nominati per esteso, e il nome accessibile
     completo e' sull'aria-label, quindi non si perde nulla. */
  .iv-social__eti{ display:none; }
}

/* ---- 16.7 sotto i 480px: una cosa per riga ---- */

@media (max-width:480px){
  /* a 320px la cella dava 95px utili e "UNIDA" ne chiede 90 col
     font giusto, di piu' con quello di sistema durante lo swap */
  .iv-hero__prove{ grid-template-columns:1fr; }
  .iv-hero__prove li{ display:grid; grid-template-columns:auto 1fr;
    align-items:baseline; gap:var(--s2) var(--s4);
    padding:var(--s4) var(--s5); }
  .iv-hero__prove b{ font-size:var(--t-500); }
  .iv-hero__prove span{ margin-top:0; }

  /* bottoni in colonna SOLO sulla porta B2C: arriva da telefono e
     con una mano. Il B2B legge da tablet e resta in riga. */
  [data-porta="persone"] .iv-azioni{
    flex-direction:column; align-items:stretch; gap:var(--s3);
  }
  [data-porta="persone"] .iv-azioni > .iv-btn{ width:100%; }

  .iv-btn{ padding-inline:var(--s5); text-wrap:balance; }
  .iv-porta{ padding:var(--s5); }
  .iv-cert__corpo{ padding:var(--s5); }
  .iv-cert__testata{ padding:var(--s4) var(--s5); }
  .iv-cert__piede{ padding:var(--s4) var(--s5) var(--s5); }
  .iv-passi li{ gap:var(--s4); }
  .iv-nota{ padding:var(--s4); }
}

/* ---- 16.8 sotto i 390px: la scala QCER a due colonne ---- */

/* A 3 colonne la cella da' 80px di riga utile a 320px, e
   "cittadinanza" a 13,26px ne misura 83 senza punti di rottura.
   A 2 colonne le coppie sono A1/A2, B1/B2, C1/C2 — che e' anche
   il modo in cui la scala si racconta. */
@media (max-width:389px){
  .iv-scala{ grid-template-columns:repeat(2,1fr); }
  .iv-scala li{ padding:var(--s3) var(--s3) var(--s2); }
}

/* ============================================================
   17. CASSETTO DI NAVIGAZIONE (sotto i 760px)
   Si accende solo quando il JS mette data-menu="pronto" sulla
   testata. Senza JS non compare e la nav resta quella di prima.
   ============================================================ */

.iv-leva{
  display:none; align-items:center; gap:var(--s2);
  min-height:44px; min-width:44px; padding:var(--s2) var(--s3);
  background:none; border:2px solid transparent; border-radius:var(--r2);
  color:var(--inchiostro); cursor:pointer;
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-200); font-stretch:104%;
}
@media (max-width:760px){
  .iv-testata[data-menu="pronto"] .iv-leva:not([hidden]){ display:inline-flex; }
}
.iv-leva:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); }
.iv-leva__barre,
.iv-leva__barre::before,
.iv-leva__barre::after{
  display:block; width:20px; height:2px; background:currentColor; border-radius:2px;
  transition:translate var(--d2) var(--e-esce), rotate var(--d2) var(--e-esce),
             opacity var(--d1) linear;
}
.iv-leva__barre{ position:relative; }
.iv-leva__barre::before,.iv-leva__barre::after{ content:""; position:absolute; inset-inline:0; }
.iv-leva__barre::before{ translate:0 -6px; }
.iv-leva__barre::after{ translate:0 6px; }
.iv-leva[aria-expanded="true"] .iv-leva__barre{ background:transparent; }
.iv-leva[aria-expanded="true"] .iv-leva__barre::before{ translate:0 0; rotate:45deg; }
.iv-leva[aria-expanded="true"] .iv-leva__barre::after{ translate:0 0; rotate:-45deg; }

.iv-cassetto{
  position:fixed; inset:0; z-index:60;
  visibility:hidden;
  transition:visibility 0s linear var(--d2);
}
.iv-cassetto[data-aperto]{ visibility:visible; transition-delay:0s; }
@media (min-width:761px){ .iv-cassetto{ display:none; } }

.iv-cassetto__telo{
  position:absolute; inset:0; background:rgba(22,39,59,.55);
  opacity:0; transition:opacity var(--d2) var(--e-esce);
}
.iv-cassetto[data-aperto] .iv-cassetto__telo{ opacity:1; }

.iv-cassetto__pannello{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--superficie); color:var(--inchiostro);
  padding:var(--s4) var(--margine-lato) calc(var(--s6) + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; translate:0 14px;
  transition:opacity var(--d2) var(--e-esce), translate var(--d2) var(--e-esce);
}
.iv-cassetto[data-aperto] .iv-cassetto__pannello{ opacity:1; translate:0 0; }

.iv-cassetto__testa{ display:flex; align-items:center; justify-content:space-between;
  min-height:48px; }
.iv-cassetto__titolo{ font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-100); letter-spacing:var(--sp-occhiello);
  text-transform:uppercase; color:var(--inchiostro-3); }
.iv-cassetto__chiudi{ min-height:48px; min-width:48px; font-size:28px; line-height:1;
  background:none; border:2px solid transparent; border-radius:var(--r2);
  color:var(--inchiostro); cursor:pointer; }
.iv-cassetto__chiudi:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); }

/* Le voci stanno IN BASSO: chi arriva da telefono tiene il
   dispositivo con una mano e il pollice non raggiunge il bordo alto. */
.iv-cassetto__voci{ margin-top:auto; display:grid; border-top:1px solid var(--bordo); }
.iv-cassetto__voci a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:60px; padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--bordo); text-decoration:none;
  color:var(--inchiostro); font-family:var(--f-display);
  font-weight:var(--peso-forte); font-stretch:104%; font-size:var(--t-400);
}
.iv-cassetto__voci a[aria-current="page"]{ color:var(--accento); }
.iv-cassetto__voci a[aria-current="page"]::after{ content:"\2022"; color:var(--accento); }

.iv-cassetto__piede{ display:grid; gap:var(--s3); margin-top:var(--s5); }
.iv-cassetto__piede .iv-btn{ width:100%; }
.iv-cassetto__ponte{ font-size:var(--t-200); color:var(--inchiostro-2);
  margin-top:var(--s3); }
/* I link dentro queste righe sono bersagli da toccare — «Chiama 02 5004 1577»
   e «Accredita il tuo centro» — e misuravano 142x18 e 145x18: sotto il minimo
   di 24x24 del criterio 2.5.8 del WCAG 2.2, che e' livello AA. Il padding
   verticale li porta a 26px senza spostare la riga di testo, perche'
   inline-block non cambia il flusso. */
.iv-cassetto__ponte a{
  display:inline-block; padding-block:4px;
}

/* I tre profili, in coda al menu. Nel footer cadono al 96% dell'altezza
   della home — 11.367px — e chi li cerca non li trova; qui sono a un tocco
   da ogni pagina. Stanno pero' SOTTO i bottoni e sotto il ponte verso i
   centri, e sono icone piccole con etichetta invece che bottoni: il menu
   serve a portare alle pagine che convertono, non a raccogliere follower.
   La riga sopra li separa, cosi' non si leggono come una quarta azione. */
.iv-cassetto__social{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s2);
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--bordo);
}
.iv-cassetto__social-eti{
  margin:0; font-size:var(--t-100); font-weight:var(--peso-forte);
  letter-spacing:var(--sp-occhiello); text-transform:uppercase;
  color:var(--inchiostro-3);
}
.iv-cassetto__social a{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px; padding-inline:var(--s1);
  color:var(--inchiostro-2); text-decoration:none;
  font-size:var(--t-100); font-weight:var(--peso-medio);
}
.iv-cassetto__social a:hover{ color:var(--accento); text-decoration:underline; }
.iv-cassetto__social svg{ flex:0 0 auto; }

.iv-bloccato{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .iv-cassetto__pannello{ translate:none; }
}
@media (forced-colors:active){
  .iv-cassetto__pannello{ border:2px solid CanvasText; }
  .iv-leva{ border-color:ButtonText; }
}

/* ============================================================
   18. CONSENSO — banner cookie (iv-consenso.js)
   Nessun colore letterale: solo ruoli. Chiaro e scuro gratis.
   Oggi il registro dei servizi e' vuoto e la finestra non compare
   mai: e' voluto, un sito senza cookie che mostra un banner mente.
   ============================================================ */
.iv-cc[hidden]{ display:none !important; }

.iv-cc{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--s4);
  background:rgba(12,21,32,.55);
  overscroll-behavior:contain;
}
@media (min-width:720px){ .iv-cc{ align-items:center; } }

.iv-cc__finestra{
  width:100%; max-width:44rem;
  max-height:calc(100dvh - (2 * var(--s4)));
  display:flex; flex-direction:column;
  background:var(--superficie);
  color:var(--inchiostro);
  border:1px solid var(--bordo);
  border-block-start:var(--filo-h) solid transparent;
  border-radius:var(--r3);
  box-shadow:var(--ombra-3);
  background-image:var(--filo-tricolore);
  background-size:100% var(--filo-h);
  background-repeat:no-repeat;
  background-position:top left;
  background-origin:border-box;
  animation:iv-cc-entra var(--d2) var(--e-esce);
}
@keyframes iv-cc-entra{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }

.iv-cc__corpo{ padding:var(--s6); overflow-y:auto; }
.iv-cc__titolo{
  font-family:var(--f-display); font-weight:var(--peso-display);
  font-stretch:var(--larg-display); letter-spacing:var(--sp-display);
  font-size:var(--t-600); line-height:1.1; margin:0 0 var(--s4);
  color:var(--inchiostro);
}
.iv-cc__testo{ color:var(--inchiostro-2); margin:0 0 var(--s4); max-width:none; }
.iv-cc__testo:last-of-type{ margin-bottom:0; }
.iv-cc__testo strong{ color:var(--inchiostro); }
.iv-cc__minuto{ font-size:var(--t-200); color:var(--inchiostro-3); margin:var(--s4) 0 0; max-width:none; }
.iv-cc__minuto a{ color:var(--accento); }

/* rifiutare pesa esattamente quanto accettare */
.iv-cc__azioni{
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding:var(--s5) var(--s6);
  border-top:1px solid var(--bordo);
  background:var(--superficie-2);
  border-radius:0 0 var(--r3) var(--r3);
}
.iv-cc__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s5); width:100%;
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-stretch:104%; font-size:var(--t-300); line-height:1.2; text-align:center;
  border:2px solid transparent; border-radius:var(--r2);
  cursor:pointer;
  transition:background-color var(--d1) var(--e-esce),
             border-color var(--d1) var(--e-esce),
             color var(--d1) var(--e-esce);
}
/* Stessa forma, stessa altezza, stessa larghezza, stesso peso.
   Cambia solo il colore: e' l'unica differenza ammessa fra si' e no. */
.iv-cc__btn--si{ background:var(--accento); color:var(--su-accento); border-color:var(--accento); }
.iv-cc__btn--si:hover{ background:var(--accento-scuro); border-color:var(--accento-scuro); }
.iv-cc__btn--no{ background:var(--inchiostro); color:var(--superficie); border-color:var(--inchiostro); }
.iv-cc__btn--no:hover{ background:var(--inchiostro-2); border-color:var(--inchiostro-2); }
.iv-cc__btn--terzo{
  background:transparent; color:var(--inchiostro);
  border-color:var(--bordo-forte); font-weight:var(--peso-medio);
}
.iv-cc__btn--terzo:hover{ background:var(--superficie); border-color:var(--inchiostro); }
.iv-cc__btn:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); }

.iv-cc__indietro{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:0; margin:0 0 var(--s4);
  background:none; border:0; cursor:pointer;
  color:var(--accento); font-family:var(--f-testo); font-size:var(--t-200);
  font-weight:var(--peso-medio);
}
.iv-cc__indietro:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); border-radius:var(--r2); }

.iv-cc__categorie{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3); }
.iv-cc__cat{
  border:1px solid var(--bordo); border-radius:var(--r2);
  padding:var(--s4) var(--s5); background:var(--superficie);
}
.iv-cc__cat-riga{ display:flex; align-items:flex-start; gap:var(--s4); }
.iv-cc__cat-testi{ flex:1; min-width:0; }
.iv-cc__cat-nome{
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-400); line-height:1.25; color:var(--inchiostro); display:block;
}
.iv-cc__cat-desc{ margin:var(--s2) 0 0; font-size:var(--t-200); color:var(--inchiostro-2); max-width:none; }
.iv-cc__cat-stato{
  display:block; margin-top:var(--s2);
  font-family:var(--f-dati); font-size:var(--t-100); color:var(--inchiostro-3);
}
.iv-cc__cat input[type="checkbox"]{
  flex:0 0 auto; width:24px; height:24px; margin:0; cursor:pointer;
  accent-color:var(--accento);
}
.iv-cc__cat input[type="checkbox"]:disabled{ cursor:not-allowed; opacity:.6; }
.iv-cc__cat input[type="checkbox"]:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); border-radius:var(--r1); }
.iv-cc__cat[data-vuota="1"]{ background:var(--superficie-2); }

.iv-cc-riapri{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:var(--f-testo); font-size:var(--t-100); font-weight:var(--peso-testo);
  color:var(--inchiostro-2); text-decoration:underline;
  min-height:44px; display:inline-flex; align-items:center;
}
.iv-cc-riapri:hover{ color:var(--accento); }
.iv-cc-riapri:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); border-radius:var(--r2); }

.iv-cc-blocco{
  border:1px dashed var(--bordo-forte); border-radius:var(--r2);
  padding:var(--s6); text-align:center; background:var(--superficie-2);
  color:var(--inchiostro-2); font-size:var(--t-200);
}
.iv-cc-blocco .iv-cc__btn{ width:auto; margin-top:var(--s4); }

html.iv-cc-aperto, body.iv-cc-aperto{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .iv-cc__finestra{ animation:none; }
}
@media print{
  .iv-cc, .iv-cc-riapri{ display:none !important; }
}
@media (forced-colors:active){
  .iv-cc__finestra{ border:2px solid CanvasText; }
  .iv-cc__btn{ border:2px solid ButtonText; }
}

/* ============================================================
   19. LA SCALA E LA TARGA — direzione artistica, 14/08/2026
   ------------------------------------------------------------
   Il concept «segnaletica civica» era dichiarato in testa a questo
   foglio e non era mai stato eseguito: c'era «SaaS pulito con palette
   navy». La segnaletica vera ha tre proprieta' che qui mancavano:
   contrasto di scala violento, il colore come CAMPO e non come bordo,
   e codici di registrazione leggibili come sistema.
   Queste regole aggiungono quelle tre cose e nient'altro.
   ============================================================ */

/* ---- 19.0 la voce «documento»: il mono sui dati verificabili ---- */

/* IBM Plex Mono era caricato (6,9 KB) e usato in quattro selettori.
   Da qui in poi: ogni volta che sulla pagina compare un dato che si
   puo' verificare — un codice, una sigla, un prezzo, una data, un
   riferimento — e' in mono. NON i paragrafi: un testo legale in
   monospazio si legge peggio, e la leggibilita' viene prima. */
.iv-sigla, .iv-cert__cifra, .iv-hero__prove b, .iv-targa__cod,
.iv-scala-v__cod, .iv-guida a span, .iv-tariffa__cifra{
  font-family:var(--f-dati);
  font-variant-numeric:lining-nums tabular-nums;
}

.iv-sigla{
  display:flex; align-items:center; gap:var(--s3);
  font-size:var(--t-100); letter-spacing:.04em;
  color:var(--inchiostro-3); margin:var(--s4) 0 0; max-width:none;
}
.iv-sigla--alto{ margin:0 0 var(--s5); }
.iv-sigla__cod{
  flex:0 0 auto; padding:2px var(--s2);
  border:1px solid var(--bordo-forte); border-radius:var(--r1);
  color:var(--inchiostro-2); letter-spacing:.08em;
}

/* ---- 19.1 APERTURA ---- */

.iv-apertura{ position:relative; background:var(--sfondo); }
.iv-apertura__griglia{
  display:grid; gap:var(--s8) var(--s9);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:start;
  padding-block:var(--s9);
}
@media (max-width:900px){
  .iv-apertura__griglia{ grid-template-columns:1fr; gap:var(--s7);
    padding-block:var(--s7) var(--s8); }
}

.iv-apertura__titolo{
  font-family:var(--f-display); font-weight:900;
  font-size:var(--t-850);
  font-stretch:var(--larg-titolo);
  letter-spacing:var(--sp-titolo);
  line-height:.96; text-wrap:balance;
  margin:0 0 var(--s5); max-width:15ch;
  color:var(--inchiostro);
}
/* campo pieno, non alone: a 76px un box-shadow tenue sparisce */
.iv-apertura__titolo em{
  font-style:normal; color:var(--su-accento);
  background:var(--accento);
  padding:0 .12em .04em; margin-inline:-.04em;
  border-radius:var(--r1);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.iv-apertura__sommario{
  font-size:var(--t-500); line-height:1.45;
  color:var(--inchiostro-2); max-width:44ch; margin:0;
}
.iv-apertura__sommario strong{ color:var(--inchiostro); }
.iv-apertura__nota{
  margin-top:var(--s5); font-size:var(--t-200);
  color:var(--inchiostro-3); max-width:46ch;
}

/* ---- 19.2 la scelta: la domanda dell'utente diventa interfaccia ---- */

.iv-scelta{ margin-top:var(--s7); }
.iv-scelta__domanda{
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-size:var(--t-100); letter-spacing:var(--sp-occhiello);
  text-transform:uppercase; color:var(--inchiostro-3);
  margin:0 0 var(--s3); max-width:none;
}
.iv-scelta__opzioni{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.iv-scelta__opz{
  --opz:var(--inchiostro);
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:52px; padding:var(--s3) var(--s5);
  background:var(--superficie); color:var(--inchiostro);
  border:2px solid var(--bordo-forte); border-radius:var(--r2);
  box-shadow:var(--rilievo);
  font-family:var(--f-display); font-weight:var(--peso-forte);
  font-stretch:var(--larg-corpo); font-size:var(--t-300); line-height:1.15;
  text-decoration:none;
  transition:background-color var(--d1) var(--e-esce),
             border-color var(--d1) var(--e-esce),
             color var(--d1) var(--e-esce),
             box-shadow var(--d1) var(--e-esce),
             translate var(--d1) var(--e-esce);
}
.iv-scelta__opz[data-liv="A2"]{ --opz:var(--liv-a2); }
.iv-scelta__opz[data-liv="B1"]{ --opz:var(--liv-b1); }
.iv-scelta__opz[data-liv="B2"]{ --opz:var(--liv-b2); }
.iv-scelta__opz::before{
  content:attr(data-liv);
  flex:0 0 auto; padding:3px var(--s2);
  background:var(--opz); color:var(--su-livello);
  border-radius:var(--r1);
  font-family:var(--f-dati); font-size:var(--t-100);
  letter-spacing:.06em; font-variant-numeric:lining-nums tabular-nums;
  transition:background-color var(--d1) var(--e-esce), color var(--d1) var(--e-esce);
}
/* si preme dentro, non si solleva: il rilievo si chiude e scende di 2px.
   Costa le stesse due proprieta' del sollevamento e comunica materia. */
.iv-scelta__opz:hover{
  background:var(--opz); border-color:var(--opz); color:var(--su-livello);
  box-shadow:none; translate:0 2px;
}
.iv-scelta__opz:hover::before{ background:var(--su-livello); color:var(--opz); }
.iv-scelta__opz:focus-visible{
  background:var(--opz); border-color:var(--opz); color:var(--su-livello);
  box-shadow:var(--ombra-focus); translate:0 0;
}
.iv-scelta__opz:focus-visible::before{ background:var(--su-livello); color:var(--opz); }

/* ---- 19.3 LA SCALA ---- */

.iv-scala-v{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2px;
  background:var(--bordo);
  border:1px solid var(--bordo);
  border-radius:var(--r2);
  overflow:hidden;
}
.iv-scala-v__grado{ --lv:var(--inchiostro-3); background:var(--superficie); }
.iv-scala-v__riga{
  display:grid; grid-template-columns:4rem 1fr auto;
  align-items:center; gap:var(--s4);
  min-height:52px; padding:var(--s3) var(--s5);
  color:var(--inchiostro-3); text-decoration:none;
}
.iv-scala-v__cod{
  font-weight:900; font-size:var(--t-500); line-height:1; letter-spacing:-.01em;
  font-family:var(--f-display); font-stretch:var(--larg-titolo);
}
.iv-scala-v__uso{ font-size:var(--t-200); line-height:1.25; }
.iv-scala-v__freccia{ font-size:var(--t-400); transition:translate var(--d1) var(--e-esce); }

/* i tre gradini raggiungibili sono TARGHE: campo di colore pieno */
.iv-scala-v__grado--porta{ background:var(--lv); transition:opacity var(--d2) var(--e-esce); }
.iv-scala-v__grado--porta[data-liv="A2"]{ --lv:var(--liv-a2); }
.iv-scala-v__grado--porta[data-liv="B1"]{ --lv:var(--liv-b1); }
.iv-scala-v__grado--porta[data-liv="B2"]{ --lv:var(--liv-b2); }
.iv-scala-v__grado--porta .iv-scala-v__riga{
  min-height:76px; color:var(--su-livello);
  box-shadow:inset 0 0 0 2px var(--smalto-chiaro);   /* il bordo dello smalto */
}
.iv-scala-v__grado--porta .iv-scala-v__cod{ font-size:var(--t-700); }
.iv-scala-v__grado--porta .iv-scala-v__uso{ font-size:var(--t-300); font-weight:var(--peso-forte); }
.iv-scala-v__grado--porta .iv-scala-v__riga:hover{ box-shadow:inset 0 0 0 2px var(--smalto-vivo); }
.iv-scala-v__grado--porta .iv-scala-v__riga:hover .iv-scala-v__freccia{ translate:4px 0; }
.iv-scala-v__grado--porta .iv-scala-v__riga:focus-visible{ box-shadow:var(--ombra-focus); border-radius:0; }

/* La pagina risponde: nessun JS, solo :has(). Passi il dito su una
   situazione e la scala si spegne tranne il gradino che ti riguarda.
   Dove :has() non c'e', non succede niente e la pagina resta corretta. */
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="A2"]:hover)  .iv-scala-v__grado--porta:not([data-liv="A2"]),
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="A2"]:focus-visible) .iv-scala-v__grado--porta:not([data-liv="A2"]),
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="B1"]:hover)  .iv-scala-v__grado--porta:not([data-liv="B1"]),
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="B1"]:focus-visible) .iv-scala-v__grado--porta:not([data-liv="B1"]),
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="B2"]:hover)  .iv-scala-v__grado--porta:not([data-liv="B2"]),
.iv-apertura__griglia:has(.iv-scelta__opz[data-liv="B2"]:focus-visible) .iv-scala-v__grado--porta:not([data-liv="B2"]){
  opacity:.32;
}

/* ---- 19.4 IL GARANTE — non e' un quarto livello, e' chi firma ---- */

.iv-garante{
  background:var(--superficie);
  border-block:1px solid var(--bordo);
  border-block-start:var(--filo-h) solid transparent;
  background-image:var(--filo-tricolore);
  background-size:100% var(--filo-h);
  background-repeat:no-repeat;
  background-position:top left;
  background-origin:border-box;
}
.iv-garante__riga{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--s5) var(--s7); padding-block:var(--s6);
}
.iv-garante img{ height:52px; width:auto; flex:0 0 auto; display:block; }
.iv-garante p{
  margin:0; flex:1 1 32ch; max-width:62ch;
  font-size:var(--t-200); line-height:1.55; color:var(--inchiostro-2);
}
.iv-garante b{ color:var(--inchiostro); font-weight:var(--peso-forte); }

/* ---- 19.5 LA TARGA ---- */

.iv-targa{
  --lv:var(--accento);
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  background:var(--lv); color:var(--su-livello);
  border-radius:var(--r2); padding:var(--s6);
  box-shadow:inset 0 0 0 2px var(--smalto-chiaro), var(--rilievo);
  transition:box-shadow var(--d2) var(--e-esce), translate var(--d2) var(--e-esce);
}
.iv-targa[data-liv="A2"]{ --lv:var(--liv-a2); }
.iv-targa[data-liv="B1"]{ --lv:var(--liv-b1); }
.iv-targa[data-liv="B2"]{ --lv:var(--liv-b2); }
.iv-targa__cod{
  position:absolute; inset-block-start:var(--s4); inset-inline-end:var(--s5);
  font-size:var(--t-100); letter-spacing:.08em; color:rgba(255,255,255,.62);
}
.iv-targa h3,.iv-targa h4{ color:var(--su-livello); margin:0; }
.iv-targa p{ color:rgba(255,255,255,.88); }
.iv-targa a{ color:var(--su-livello); }
.iv-targa:has(a:hover),.iv-targa:has(a:focus-visible){
  box-shadow:inset 0 0 0 2px var(--smalto-vivo); translate:0 2px;
}
.iv-targa--carta{
  background:var(--superficie); color:var(--inchiostro);
  box-shadow:inset 0 0 0 2px var(--bordo), var(--rilievo);
}
.iv-targa--carta p{ color:var(--inchiostro-2); }
.iv-targa--carta .iv-targa__cod{ color:var(--inchiostro-3); }

/* ---- 19.6 FASCIA TIPOGRAFICA — il momento di voce, 1 per pagina ---- */

.iv-proclama{ background:var(--banda); color:var(--su-banda); padding-block:var(--s9); }
.iv-proclama__testo{
  font-family:var(--f-display); font-weight:900;
  font-size:var(--t-mega); font-stretch:var(--larg-mega);
  letter-spacing:var(--sp-mega); line-height:.94;
  margin:0; max-width:none; color:var(--su-banda);
  text-wrap:balance;
}
.iv-proclama__testo span{ display:block; }
.iv-proclama__testo b{ font-weight:900; color:var(--su-banda-accento); }
.iv-proclama__piede{
  margin-top:var(--s6); font-size:var(--t-300);
  color:var(--su-banda-2); max-width:56ch;
}

/* ---- 19.7 TARIFFARIO — dopo il vuoto, la riga fitta ---- */

.iv-tariffa{ background:var(--superficie-2); padding-block:var(--s7); }
.iv-tariffa__elenco{ list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; gap:1px; background:var(--bordo);
  border:1px solid var(--bordo); border-radius:var(--r2); overflow:hidden; }
.iv-tariffa__riga{
  --lv:var(--inchiostro-3);
  display:grid; grid-template-columns:3.5rem 1fr auto;
  align-items:baseline; gap:var(--s4);
  background:var(--superficie); padding:var(--s4) var(--s5);
}
.iv-tariffa__riga[data-liv="A2"]{ --lv:var(--liv-a2); }
.iv-tariffa__riga[data-liv="B1"]{ --lv:var(--liv-b1); }
.iv-tariffa__riga[data-liv="B2"]{ --lv:var(--liv-b2); }
.iv-tariffa__liv{
  font-family:var(--f-dati); font-size:var(--t-100); letter-spacing:.06em;
  color:var(--su-livello); background:var(--lv);
  padding:3px var(--s2); border-radius:var(--r1); text-align:center;
}
.iv-tariffa__cosa{ font-size:var(--t-200); color:var(--inchiostro-2); }
.iv-tariffa__cifra{ font-size:var(--t-400); font-weight:var(--peso-forte); color:var(--inchiostro); }
@media (max-width:480px){
  .iv-tariffa__riga{ grid-template-columns:3.5rem 1fr; row-gap:var(--s2); }
  .iv-tariffa__cifra{ grid-column:2; }
}

/* ---- 19.8 GUIDA STICKY su /certificato/ ---- */

.iv-guida{
  position:sticky; top:calc(var(--h-testata) + var(--s3)); z-index:20;
  float:inline-end; margin-inline-start:var(--s6); width:11rem;
}
.iv-guida ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px;
  border:1px solid var(--bordo); border-radius:var(--r2);
  background:var(--bordo); overflow:hidden; }
.iv-guida li{ --lv:var(--inchiostro-3); background:var(--superficie); }
.iv-guida li[data-liv="A2"]{ --lv:var(--liv-a2); }
.iv-guida li[data-liv="B1"]{ --lv:var(--liv-b1); }
.iv-guida li[data-liv="B2"]{ --lv:var(--liv-b2); }
.iv-guida a{
  display:flex; align-items:center; gap:var(--s3);
  min-height:48px; padding:var(--s2) var(--s4);
  color:var(--inchiostro-2); text-decoration:none; font-size:var(--t-200);
  border-inline-start:4px solid transparent;
  transition:border-color var(--d2) var(--e-esce), background-color var(--d2) var(--e-esce);
}
.iv-guida a span{
  font-size:var(--t-100); letter-spacing:.06em;
  padding:2px 5px; border-radius:var(--r1);
  background:var(--lv); color:var(--su-livello);
}
.iv-guida li[data-qui] a{
  border-inline-start-color:var(--lv);
  background:var(--superficie-2); color:var(--inchiostro);
  font-weight:var(--peso-forte);
}
@media (max-width:1100px){ .iv-guida{ display:none; } }

/* ---- 19.9 FILIERA (SVG inline) ---- */

.iv-filiera{ margin:0; }
.iv-filiera__dis{ width:100%; height:auto; color:var(--inchiostro); display:block; }
@media (max-width:560px){
  .iv-filiera{ overflow-x:auto; }
  .iv-filiera__dis{ min-width:520px; }
}

/* ---- 19.10 ICONE — griglia 24, tratto 2, spigoli vivi ---- */

.iv-i{ flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:square; stroke-linejoin:miter; vertical-align:-.15em; }

/* ---- 19.11 il filo tricolore si traccia, una volta per pagina ---- */

.iv-filo{ clip-path:inset(0 100% 0 0); transition:clip-path 720ms var(--e-esce); }
.iv-filo[data-tracciato]{ clip-path:inset(0 0 0 0); }

/* ---- 19.12 niente si solleva piu' ---- */

.iv-btn--primario:hover,.iv-btn--secondario:hover,.iv-porta:hover{ translate:0 0; }
.iv-porta:hover{ box-shadow:var(--rilievo-forte); }

/* ---- 19.13 dark mode: una lastra sola, non adesivi ---- */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --smalto-chiaro:rgba(255,255,255,.14); }
  :root:not([data-theme="light"]) .iv-marchi,
  :root:not([data-theme="light"]) .iv-garante__riga{
    background:#FFFFFF; border-radius:var(--r2);
    padding:var(--s5); margin-block:var(--s5);
  }
  :root:not([data-theme="light"]) .iv-marchi img,
  :root:not([data-theme="light"]) .iv-garante img{ background:none; padding:0; }
  :root:not([data-theme="light"]) .iv-garante__riga p{ color:var(--c-navy-2); }
  :root:not([data-theme="light"]) .iv-garante__riga b{ color:var(--c-navy); }
}
:root[data-theme="dark"]{ --smalto-chiaro:rgba(255,255,255,.14); }
:root[data-theme="dark"] .iv-marchi,
:root[data-theme="dark"] .iv-garante__riga{
  background:#FFFFFF; border-radius:var(--r2);
  padding:var(--s5); margin-block:var(--s5);
}
:root[data-theme="dark"] .iv-marchi img,
:root[data-theme="dark"] .iv-garante img{ background:none; padding:0; }
:root[data-theme="dark"] .iv-garante__riga p{ color:var(--c-navy-2); }
:root[data-theme="dark"] .iv-garante__riga b{ color:var(--c-navy); }

/* ---- 19.15 accessibilita' da tastiera ---- */

/* Il focus sequenziale finiva SOTTO la testata sticky da 72px.
   [id]{scroll-margin-top} copre le ancore, non il Tab: serve anche qui.
   E' WCAG 2.2 SC 2.4.11 «Focus Not Obscured», livello AA. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  scroll-margin-top:calc(var(--h-testata) + var(--s5));
  scroll-margin-bottom:var(--s6);
}

/* I contenitori che scorrono in orizzontale devono poter scorrere anche
   da tastiera: senza tabindex il contenuto oltre il bordo e' irraggiungibile
   per chi non usa il mouse (SC 2.1.1). */
.iv-scorri{ scrollbar-width:thin; }
.iv-scorri:focus-visible{ outline:2px solid transparent; box-shadow:var(--ombra-focus); }

/* Le voci escluse in un elenco erano distinte solo da un trattino e dal
   grigio: colore e forma, nessun testo. Si aggiunge la parola. */
.iv-cert__incluso li[data-escluso] .iv-vissuto{ position:static; width:auto; height:auto; clip-path:none; }

/* ---- 19.16 contrasti in tema scuro rimisurati ---- */

/* --inchiostro-3 su --superficie-2 in scuro dava 4,34:1: sotto il minimo.
   E --bordo-forte su superficie scura dava 2,91:1 su bordi di controllo
   veri (i bottoni), sotto il 3:1 richiesto per i componenti. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --inchiostro-3:#8A9BB0;    /* su --superficie-2 (#1B2B3E): 4,62:1 */
    --bordo-forte:#6B8099;     /* su --superficie (#132030):  3,42:1 */
  }
}
:root[data-theme="dark"]{
  --inchiostro-3:#8A9BB0;
  --bordo-forte:#6B8099;
}

/* ---- 19.14 moto ridotto: chiude tutto quello aperto qui sopra ---- */

@media (prefers-reduced-motion:reduce){
  .iv-filo{ clip-path:none !important; transition:none !important; }
  .iv-scelta__opz:hover,.iv-targa:has(a:hover){ translate:0 !important; }
  .iv-scala-v__grado--porta{ opacity:1 !important; }
}

@media (max-width:480px){
  .iv-apertura__titolo{ max-width:none; }
  .iv-scelta__opzioni{ flex-direction:column; align-items:stretch; }
  .iv-scelta__opz{ justify-content:flex-start; }
  .iv-scala-v__riga{ grid-template-columns:3.25rem 1fr auto; padding-inline:var(--s4); }
  .iv-garante img{ height:44px; }
}


/* ==========================================================================
   20. L'APP — schermate vere, 14/08/2026
   --------------------------------------------------------------------------
   Le immagini sono screenshot presi dall'app in produzione a 414x896.
   Larghezza di posa fissa: la fotografia riconosce la schermata, non la
   fa leggere. Chi vuole leggere apre l'app, ed e' il bottone qui accanto.
   ========================================================================== */

/* ---- 20.1 il telaio ---- */

.iv-schermo{
  margin:0;
  width:100%;
  max-width:240px;
  flex:none;
}
.iv-schermo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--bordo);
  border-radius:var(--r2);
  background:var(--superficie);
  box-shadow:var(--ombra-2);
}
.iv-schermo figcaption{
  margin-top:var(--s3);
  font-size:var(--t-100);
  line-height:1.4;
  color:var(--inchiostro-3);
}

/* Due schermate accostate: la seconda arretra un poco, cosi' si legge
   che sono due passaggi dello stesso gesto e non due prodotti. */
.iv-schermi{
  display:flex;
  gap:var(--s4);
  align-items:flex-start;
}
.iv-schermi .iv-schermo:nth-child(2){ margin-top:var(--s6); }

/* Il blocco e' stato scritto il 14/08 per due schermate e fino al 17/08 non
   ne ha mai avute due: la riga non andava a capo e nessuno se n'era accorto.
   Due schermate da 240px fanno 496px col gap, cioe' sfondano qualunque
   telefono — misurato 512px di pagina dentro un viewport da 390.
   Sotto i 560px si impilano. Non si rimpiccioliscono: a 170px il testo
   dentro la schermata non si legge piu', e una schermata illeggibile non
   serve a niente. Impilate, l'arretramento della seconda non ha piu' senso
   e va tolto, altrimenti sembra disallineata. */
@media (max-width:560px){
  .iv-schermi{ flex-direction:column; align-items:center; gap:var(--s5); }
  .iv-schermi .iv-schermo:nth-child(2){ margin-top:0; }
}

/* ---- 20.2 la funzione: testo + schermata ---- */

.iv-funz{
  display:grid;
  gap:var(--s6);
  align-items:start;
  padding-block:var(--s7);
  border-top:1px solid var(--bordo);
}
.iv-funz:first-of-type{ border-top:0; }
.iv-funz__testo > * + *{ margin-top:var(--s4); }
.iv-funz__testo h3{
  font-family:var(--f-display);
  font-size:var(--t-600);
  line-height:var(--larg-titolo);
  letter-spacing:var(--sp-titolo);
  margin:0;
}
.iv-funz__testo p{ max-width:var(--largh-testo); }
.iv-funz__occhiello{
  font-family:var(--f-dati);
  font-size:var(--t-100);
  letter-spacing:var(--sp-occhiello);
  text-transform:uppercase;
  color:var(--accento-scuro);
  margin:0 0 var(--s2);
}

@media (min-width:760px){
  .iv-funz{
    grid-template-columns:1fr auto;
    gap:var(--s8);
    padding-block:var(--s8);
  }
  /* A schermate alternate il ritmo non e' una decorazione: senza, la
     colonna delle immagini diventa una fascia laterale e il testo perde
     il primo piano. */
  .iv-funz:nth-of-type(even){ grid-template-columns:auto 1fr; }
  .iv-funz:nth-of-type(even) .iv-funz__testo{ order:2; }
  .iv-funz:nth-of-type(even) .iv-funz__figura{ order:1; }
}

/* ---- 20.3 l'elenco delle cose che ci sono dentro ---- */

.iv-dentro{
  list-style:none;
  margin:var(--s6) 0 0;
  padding:0;
  display:grid;
  gap:var(--s3);
}
@media (min-width:620px){ .iv-dentro{ grid-template-columns:1fr 1fr; } }
.iv-dentro li{
  border:1px solid var(--bordo);
  border-radius:var(--r1);
  padding:var(--s4);
  background:var(--superficie);
}
.iv-dentro b{
  display:block;
  font-family:var(--f-display);
  font-weight:var(--peso-forte);
  margin-bottom:var(--s1);
}
.iv-dentro span{
  display:block;
  font-size:var(--t-200);
  color:var(--inchiostro-2);
  line-height:1.45;
}

/* ---- 20.4 le lingue ---- */

/* Tredici lingue non sono un dettaglio tecnico: sono la ragione per cui
   una persona che non parla italiano riesce a iscriversi da sola. Vanno
   scritte, non contate. */
.iv-lingue{
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
}
.iv-lingue li{
  font-family:var(--f-dati);
  font-size:var(--t-200);
  border:1px solid var(--bordo);
  border-radius:var(--r-tondo);
  padding:var(--s2) var(--s4);
  color:var(--inchiostro-2);
  background:var(--superficie);
}
.iv-lingue li[lang]{ font-family:var(--f-testo); }

/* ---- 20.5 la riga dei tre gesti ---- */

.iv-gesti{
  display:grid;
  gap:var(--s5);
  margin-top:var(--s6);
  counter-reset:gesto;
}
@media (min-width:700px){ .iv-gesti{ grid-template-columns:repeat(3,1fr); } }
.iv-gesti > div{
  padding-top:var(--s4);
  border-top:2px solid var(--accento);
}
.iv-gesti h3{
  font-size:var(--t-400);
  margin:0 0 var(--s2);
}
.iv-gesti p{ font-size:var(--t-200); color:var(--inchiostro-2); margin:0; }
.iv-gesti > div::before{
  counter-increment:gesto;
  content:counter(gesto);
  display:block;
  font-family:var(--f-dati);
  font-size:var(--t-100);
  color:var(--inchiostro-3);
  margin-bottom:var(--s2);
}

/* ---- 20.6 moto ridotto e stampa ---- */

@media print{
  .iv-schermo{ max-width:150px; }
  .iv-funz{ break-inside:avoid; }
}


/* ---- 20.7 il rimando alla pagina dedicata ----
   L'hub e le due pagine di dettaglio rispondono alla stessa domanda: se
   non si dichiara qual e' l'approfondimento, si fanno concorrenza e
   vince la piu' generica, che e' quella che risponde peggio. */
.iv-approfondisci{
  margin:var(--s3) 0 var(--s5);
  font-family:var(--f-dati);
  font-size:var(--t-200);
}
.iv-approfondisci a{
  color:var(--accento-scuro);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}