/* Vivere in Italia · foglio della sezione. Colore proprio: verde-acqua. */
:root{--vi:#1a6b5a;--vi-chiaro:rgba(26,107,90,.07)}
.vi-wrap{max-width:760px;margin:0 auto;padding:28px 20px 60px}
.vi-occhiello{font-family:system-ui,sans-serif;font-size:.74rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--vi);font-weight:700;margin:0 0 .3rem;
 display:flex;align-items:center;gap:8px}
.vi-occhiello svg{width:17px;height:17px}
.vi-wrap h1{font-size:2.05rem;line-height:1.2;margin:.2rem 0 .5rem;letter-spacing:-.01em}
.vi-firma{font-family:system-ui,sans-serif;font-size:.86rem;color:#6b7280;margin:0 0 1.1rem;line-height:1.5}
.vi-firma a{color:var(--vi);font-weight:600;text-decoration:none}
.vi-somm{font-size:1.06rem}
.vi-wrap h2{font-size:1.32rem;margin:2.1rem 0 .5rem;letter-spacing:-.01em}
.vi-wrap h3{font-size:1.02rem;margin:1.2rem 0 .3rem;font-family:system-ui,sans-serif}
/* scheda d'apertura */
.vi-card{margin:1.2rem 0 1.5rem;padding:14px 16px;border:1px solid var(--linea,#e6e1d8);
 border-radius:0;background:rgba(255,255,255,.6)}
.vi-card .dati{display:flex;gap:26px;margin:0 0 12px;padding:0 0 12px;list-style:none;
 border-bottom:1px solid var(--linea,#e6e1d8);flex-wrap:wrap;font-family:system-ui,sans-serif}
.vi-card .dati li{display:flex;flex-direction:column;line-height:1.2}
.vi-card .dati b{font-size:1.35rem;font-weight:800;color:var(--vi)}
.vi-card .dati li:last-child b{color:#6d4a7c}
.vi-card .dati span{font-size:.74rem;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}
.vi-card .tit{font-family:system-ui,sans-serif;font-size:.74rem;font-weight:700;color:#6b7280;
 text-transform:uppercase;letter-spacing:.06em;margin:0 0 7px}
.vi-card .arg{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;
 font-family:system-ui,sans-serif}
.vi-card .arg li{font-size:.88rem;padding:5px 11px;border-radius:0;
 border:1px solid var(--linea,#e6e1d8);background:#fff}
/* risposta rapida */
.vi-subito{border-left:4px solid var(--vi);background:var(--vi-chiaro);
 border-radius:0;padding:16px 18px;margin:1.6rem 0}
.vi-subito p{margin:.3rem 0}
.vi-subito .k{font-family:system-ui,sans-serif;font-weight:700;color:var(--vi)}
/* passi */
.vi-passi{list-style:none;counter-reset:p;padding:0;margin:1rem 0}
.vi-passi li{counter-increment:p;position:relative;padding:14px 16px 14px 52px;
 border:1px solid var(--linea,#e6e1d8);border-radius:0;margin-bottom:10px;background:#fff}
.vi-passi li::before{content:counter(p);position:absolute;left:14px;top:14px;
 width:26px;height:26px;border-radius:50%;background:var(--vi);color:#fff;
 font-family:system-ui,sans-serif;font-weight:700;font-size:.9rem;
 display:flex;align-items:center;justify-content:center}
.vi-passi b{font-family:system-ui,sans-serif;font-size:.98rem}
/* foto nel corpo */
.vi-foto{margin:1.8rem 0}
/* height:auto serve: senza, l'attributo height dell'img vince e la foto
   esce stirata in verticale (la tessera sanitaria a 777px invece di 492) */
.vi-foto img{width:100%;height:auto;border-radius:0;display:block}
.vi-foto figcaption{font-family:system-ui,sans-serif;font-size:.8rem;color:#6b7280;margin-top:6px}
.vi-foto figcaption a{color:#6b7280}
/* lessico */
.vi-less{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.97rem}
.vi-less th{text-align:left;font-family:system-ui,sans-serif;font-size:.78rem;
 text-transform:uppercase;letter-spacing:.06em;color:#6b7280;
 border-bottom:1px solid var(--linea,#e6e1d8);padding:6px 10px 6px 0}
.vi-less td{border-bottom:1px solid var(--linea,#e6e1d8);padding:9px 10px 9px 0;vertical-align:top}
.vi-less td:first-child{width:34%;font-weight:600}
.vi-less .dove{display:block;font-family:system-ui,sans-serif;font-size:.8rem;color:#6b7280}
/* avvisi */
.vi-avviso{border-left:4px solid #b3261e;background:rgba(179,38,30,.06);
 border-radius:0;padding:14px 16px;margin:1.5rem 0}
.vi-avviso b{color:#b3261e}
.vi-avviso.oro{border-left-color:#8a6d3b;background:rgba(138,109,59,.07)}
.vi-avviso.oro b{color:#8a6d3b}
/* nota legale */
.vi-nota{font-family:system-ui,sans-serif;font-size:.85rem;line-height:1.6;color:#6b7280;
 border:1px dashed var(--linea,#e6e1d8);border-radius:0;padding:13px 15px;margin:1.8rem 0}
.vi-nota b{color:#4b5563}
/* link ufficiali */
.vi-uff{list-style:none;padding:0;margin:1rem 0;font-family:system-ui,sans-serif}
.vi-uff li{border:1px solid var(--linea,#e6e1d8);border-radius:0;padding:11px 14px;
 margin-bottom:8px;background:#fff;font-size:.95rem}
.vi-uff a{color:var(--vi);font-weight:700;text-decoration:none}
.vi-uff span{display:block;color:#6b7280;font-size:.86rem}
/* esercizio */
.vi-eser{border:1px solid var(--linea,#e6e1d8);border-radius:0;padding:16px 18px;
 margin:1.6rem 0;background:rgba(255,255,255,.6)}
.vi-eser .cons{font-family:system-ui,sans-serif;font-size:.93rem;color:#6b7280;margin:.2rem 0 0}
.vi-eser ol{margin:.6rem 0 0;padding-left:1.2rem}
.vi-eser li{margin:.5rem 0}
.vi-gap{border:0;border-bottom:1.5px solid var(--vi);background:rgba(26,107,90,.06);
 font:inherit;font-size:.97rem;width:140px;padding:2px 4px;border-radius:0}
.vi-gap.giusto{background:rgba(26,107,90,.18)}
.vi-gap.sbagliato{background:rgba(179,38,30,.12);border-bottom-color:#b3261e}
.vi-tasti{margin-top:12px;font-family:system-ui,sans-serif}
.vi-tasti button{font:inherit;font-size:.9rem;font-weight:700;border-radius:0;
 padding:8px 14px;margin:0 8px 6px 0;cursor:pointer;border:1px solid var(--vi);
 background:var(--vi);color:#fff}
.vi-tasti button.sec{background:#fff;color:var(--vi)}
.vi-esito{font-family:system-ui,sans-serif;font-size:.9rem;color:#6b7280}
.vi-sol{color:#b3261e;font-size:.88rem;font-family:system-ui,sans-serif}
/* faq */
.vi-faq{border:1px solid var(--linea,#e6e1d8);border-radius:0;padding:10px 14px;
 margin-bottom:8px;background:rgba(255,255,255,.5)}
.vi-faq summary{cursor:pointer;font-weight:700;font-size:.98rem;font-family:system-ui,sans-serif}
.vi-faq div{font-size:.95rem;margin-top:6px}
/* banner app: stessa logica dei banner del sito */
.vi-promo{margin:2.2rem 0 0;padding:20px;border-radius:0;background:#1e2430;
 display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.vi-promo-scatti{display:flex;gap:10px;flex:0 0 auto}
.vi-promo-scatti img{width:124px;max-width:26vw;height:auto;border-radius:0;display:block}
.vi-promo-testo{flex:1 1 300px;min-width:270px;font-family:system-ui,sans-serif}
.vi-promo-testo h3{margin:0 0 .4rem;color:#fff;font-size:1.16rem;line-height:1.3}
.vi-promo-testo h3 span{color:#f5b400}
.vi-promo-testo p{margin:0 0 .7rem;color:rgba(255,255,255,.88);font-size:.94rem;line-height:1.55}
.vi-stelle{display:flex;align-items:center;gap:8px;font-size:.86rem;color:rgba(255,255,255,.8)}
.vi-stelle b{color:#FFC93C;letter-spacing:1px;font-weight:400}
.vi-prezzo{margin:12px 0;padding:12px 14px;border-radius:0;
 background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
.vi-prezzo .gratis{margin:0 0 8px;font-size:.87rem;color:rgba(255,255,255,.88)}
.vi-prezzo .riga{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.vi-prezzo .eq{padding:4px 12px;border-radius:0;background:rgba(126,231,135,.16);
 border:1px solid rgba(126,231,135,.5);color:#7ee787;font-weight:800;font-size:1.1rem}
.vi-prezzo .ann{color:rgba(255,255,255,.92);font-size:.87rem}
.vi-btn{display:inline-block;background:#7ee787;color:#10261a;font-weight:800;
 padding:11px 18px;border-radius:0;text-decoration:none;font-size:.95rem}
@media(max-width:640px){.vi-promo{padding:16px}.vi-promo-scatti picture:nth-child(3){display:none}}

/*207*/
/* Una sola tipografia per tutta la sezione.
   L'indice e le pagine figlie arrivavano da gusci diversi e mostravano
   due caratteri diversi: qui la sezione se la dichiara da sola, cosi'
   non dipende piu' da quale foglio ha caricato quale pagina. */
.vi-wrap, .vi-wrap p, .vi-wrap li, .vi-wrap td{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif}
.vi-wrap h1,.vi-wrap h2,.vi-wrap h3{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;
  letter-spacing:-.01em}
.vi-wrap h1{font-size:2.05rem;line-height:1.2}
.vi-wrap h2{font-size:1.32rem;margin:2.1rem 0 .5rem}
.vi-wrap .vi-somm{font-size:1.06rem;line-height:1.7}
/* L'interfaccia resta sans: numeri, pastiglie, bottoni, note di servizio.
   I selettori sono prefissati con .vi-wrap perche' altrimenti la regola
   serif qui sopra (.vi-wrap p) vince per specificita' e l'occhiello
   tornava in serif. */
.vi-wrap .vi-occhiello,.vi-wrap .vi-firma,.vi-wrap .vi-card,.vi-wrap .vi-card *,
.vi-wrap .vi-tasti,.vi-wrap .vi-tasti *,.vi-wrap .vi-uff,.vi-wrap .vi-uff *,
.vi-wrap .vi-faq summary,.vi-wrap .vi-indice b,.vi-wrap .vi-indice span,
.vi-wrap .vi-nota,.vi-wrap .vi-nota *,.vi-wrap .vi-less .dove,
.vi-wrap .vi-eser .cons,.vi-wrap .vi-altra,.vi-wrap .vi-altra *,
.vi-wrap .vi-passi b{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* in arabo il serif latino non serve: si lascia il carattere di sistema */
[dir="rtl"] .vi-wrap,[dir="rtl"] .vi-wrap h1,[dir="rtl"] .vi-wrap h2,
[dir="rtl"] .vi-wrap p,[dir="rtl"] .vi-wrap li{
  font-family:system-ui,"Noto Naskh Arabic","Geeza Pro",serif}
[dir="rtl"] .vi-less td[dir="ltr"],[dir="rtl"] .vi-eser li[dir="ltr"]{
  font-family:"Iowan Old Style",Georgia,serif}
/* In cinese il serif latino non ha i glifi han: il browser ripiegava da
   solo, carattere diverso a ogni riga. Qui la pagina cinese si dichiara
   il suo carattere di sistema — ma il lessico e l'esercizio restano
   italiani, quindi tornano al serif latino come nelle altre lingue. */
html[lang^="zh"] .vi-wrap,html[lang^="zh"] .vi-wrap h1,
html[lang^="zh"] .vi-wrap h2,html[lang^="zh"] .vi-wrap h3,
html[lang^="zh"] .vi-wrap p,html[lang^="zh"] .vi-wrap li,
html[lang^="zh"] .vi-wrap td{
  font-family:system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
  "Noto Sans CJK SC","Source Han Sans SC",sans-serif}
html[lang^="zh"] .vi-wrap h1,html[lang^="zh"] .vi-wrap h2{letter-spacing:0}
html[lang^="zh"] .vi-less td[dir="ltr"],html[lang^="zh"] .vi-eser li[dir="ltr"]{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif}
/* Stessa storia per il bengalese: Georgia non ha i glifi bengalesi e la
   pagina ripiegava su un carattere diverso a ogni blocco. La scrittura
   bengalese ha segni sopra e sotto la riga, quindi vuole anche piu'
   interlinea del latino. */
html[lang^="bn"] .vi-wrap,html[lang^="bn"] .vi-wrap h1,
html[lang^="bn"] .vi-wrap h2,html[lang^="bn"] .vi-wrap h3,
html[lang^="bn"] .vi-wrap p,html[lang^="bn"] .vi-wrap li,
html[lang^="bn"] .vi-wrap td{
  font-family:system-ui,"Noto Sans Bengali","Kohinoor Bangla","Bangla MN",
  "Nirmala UI",sans-serif}
html[lang^="bn"] .vi-wrap p,html[lang^="bn"] .vi-wrap li{line-height:1.85}
html[lang^="bn"] .vi-wrap h1,html[lang^="bn"] .vi-wrap h2{letter-spacing:0}
html[lang^="bn"] .vi-less td[dir="ltr"],html[lang^="bn"] .vi-eser li[dir="ltr"]{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif}
/* Tigrino: alfabeto ge'ez. Nessun carattere latino ha questi glifi e
   senza una regola la pagina cade sul ripiego di sistema, che su alcuni
   Android non ha il ge'ez completo e mostra i rettangoli vuoti. */
html[lang^="ti"] .vi-wrap,html[lang^="ti"] .vi-wrap h1,
html[lang^="ti"] .vi-wrap h2,html[lang^="ti"] .vi-wrap h3,
html[lang^="ti"] .vi-wrap p,html[lang^="ti"] .vi-wrap li,
html[lang^="ti"] .vi-wrap td{
  font-family:"Noto Sans Ethiopic","Kefa","Abyssinica SIL",
  "Nyala",system-ui,sans-serif}
html[lang^="ti"] .vi-wrap p,html[lang^="ti"] .vi-wrap li{line-height:1.9}
html[lang^="ti"] .vi-wrap h1,html[lang^="ti"] .vi-wrap h2{letter-spacing:0}
html[lang^="ti"] .vi-less td[dir="ltr"],html[lang^="ti"] .vi-eser li[dir="ltr"]{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",serif}

/*213*/
/* Il banner dell'app, in TUTTE le lingue.
   Prima queste regole vivevano dentro le pagine italiane e dentro il
   blocco [dir="rtl"]: le pagine ucraine non erano ne' l'una ne' l'altra
   cosa e restavano con il titolo scuro su fondo scuro. */
.ex-app-promo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:22px 20px 26px}
.ex-app-promo .app-scatti{flex:0 0 auto;float:none}
.ex-app-promo-body{flex:1 1 320px;min-width:260px}
.ex-app-promo-body h3{color:#fff;margin:0 0 12px}
.ex-app-promo-body h3 span{color:#f5b400}
.ex-app-promo-body p{color:rgba(255,255,255,.88);margin:0 0 14px}
.ex-app-promo .app-stelle{margin:0 0 10px}
.ex-app-promo .gr-abb{margin:0 0 18px;padding:14px 16px}
.ex-app-promo .gr-abb .gr-abb-gratis{margin:0 0 10px}
.ex-app-promo .ex-app-btn,.ex-app-promo a.button{
  display:inline-block;padding:12px 20px;border-radius:0;
  background:#106b73;border:1px solid #106b73;color:#fff;font-weight:800;
  text-decoration:none;font-family:system-ui,sans-serif;font-size:.96rem;
  margin-top:4px}
.ex-app-promo .ex-app-btn:hover{filter:brightness(1.08)}
@media (max-width:760px){
  .ex-app-promo{flex-direction:column;align-items:stretch;gap:16px;padding:18px 16px 22px}
  .ex-app-promo .app-scatti{justify-content:center}
  .ex-app-promo-body{min-width:0;flex:1 1 auto}
  .ex-app-promo .ex-app-btn{display:block;text-align:center}
}

/* Il bottone della barra: in ucraino e in arabo l'etichetta e' piu'
   lunga che in italiano e usciva dallo schermo. Sul telefono si
   accorcia invece di sbordare. */
@media (max-width:640px){
  .u-bar .u-cta{font-size:.78rem;padding:8px 11px;max-width:40vw;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){
  .u-bar .u-cta{max-width:34vw;padding:7px 9px}
}

/*218*/
/* L'indice della sezione: schede, non link nudi.
   Le voci erano <a><b>titolo</b><span>sommario</span></a> senza regole
   proprie, quindi uscivano come testo in grassetto seguito da testo
   grigio, tutto sulla stessa riga. */
.vi-wrap .vi-indice{list-style:none;margin:1.6rem 0 2rem;padding:0;
  display:grid;gap:12px}
@media (min-width:720px){
  .vi-wrap .vi-indice{grid-template-columns:1fr 1fr;gap:14px}
}
.vi-wrap .vi-indice li{margin:0;padding:0}
.vi-wrap .vi-indice li::marker{content:none}
.vi-wrap .vi-indice a{
  display:block;position:relative;height:100%;
  padding:16px 40px 16px 18px;
  border:1px solid var(--linea,#e6e1d8);border-radius:0;
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.vi-wrap .vi-indice a:hover,.vi-wrap .vi-indice a:focus-visible{
  border-color:#106b73;box-shadow:none;
  text-decoration:none}
/* la freccia: sta nell'angolo e si sposta al passaggio */
.vi-wrap .vi-indice a::after{
  content:"\2197";position:absolute;right:16px;top:16px;
  font-family:system-ui,sans-serif;font-size:.95rem;color:#106b73;opacity:.55;
  transition:transform .15s,opacity .15s}
.vi-wrap .vi-indice a:hover::after{opacity:1;transform:translate(2px,-2px)}
/* titolo e sommario su righe separate: erano attaccati */
.vi-wrap .vi-indice b{
  display:block;margin:0 0 5px;color:#106b73;
  font-size:1.06rem;line-height:1.3;font-weight:800;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.vi-wrap .vi-indice span{
  display:block;font-size:.93rem;line-height:1.5;color:#5b5b55;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* in RTL la freccia va a sinistra e il testo respira dall'altro lato */
[dir="rtl"] .vi-wrap .vi-indice a{padding:16px 18px 16px 40px}
[dir="rtl"] .vi-wrap .vi-indice a::after{
  content:"\2196";right:auto;left:16px}
[dir="rtl"] .vi-wrap .vi-indice a:hover::after{transform:translate(-2px,-2px)}

/* 269-simulazione-a2 =======================================================
   La prova di simulazione del test A2. Cinque parti come all'esame vero,
   correzione tutta insieme alla fine, come all'esame: non domanda per
   domanda, che qui servirebbe a poco. */
.sa2-parte{ margin:2.4rem 0; padding-top:1.6rem;
  border-top:1px solid var(--linea,#e6e1d8); }
.sa2-parte h2{ font-size:1.05rem; letter-spacing:.02em; }
.sa2-cons{ margin:.2rem 0 1rem; color:#5C6159; }
.sa2-testo{ padding:14px 16px; margin:0 0 1.1rem;
  border:1px solid var(--linea,#e6e1d8); border-radius:0;
  background:rgba(255,255,255,.6); line-height:1.6; }
.sa2-trascrizione{ padding:12px 14px; margin:0 0 1rem;
  border-inline-start:3px solid #1a6b5a; background:rgba(26,107,90,.05);
  line-height:1.6; }
.sa2-domande{ margin:0; padding-inline-start:1.4rem; }
.sa2-d{ margin:0 0 1.1rem; }
.sa2-q{ margin:0 0 .4rem; font-weight:600; }
.sa2-opz{ list-style:none; margin:0; padding:0; }
.sa2-opz li{ margin:.2rem 0; }
.sa2-opz label{ display:flex; gap:.5rem; align-items:baseline;
  cursor:pointer; }
.sa2-modulo label{ display:flex; gap:.6rem; align-items:baseline;
  flex-wrap:wrap; }
.sa2-gap{ border:0; border-bottom:1.5px solid #9aa39b; background:none;
  font:inherit; padding:1px 4px; min-width:9ch; }
.sa2-gap:focus{ outline:none; border-bottom-color:#1a6b5a; }
.sa2-d.giusto .sa2-segno{ color:#1a7f4b; font-weight:700; }
.sa2-d.sbagliato .sa2-segno{ color:#b3261e; font-weight:700; }
.sa2-d.sbagliato .sa2-gap{ border-bottom-color:#b3261e; }
.sa2-segno{ margin-inline-start:.4rem; }
.sa2-b{ font:inherit; font-weight:600; cursor:pointer; padding:8px 16px;
  border-radius:0; border:1px solid #1a6b5a; background:#1a6b5a;
  color:#fff; }
.sa2-b.sec{ background:none; color:#1a6b5a; }
.sa2-b:hover{ filter:brightness(1.08); }
.sa2-audio{ display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; }
.sa2-tasti{ display:flex; gap:.6rem; flex-wrap:wrap; margin:2rem 0 1rem; }
.sa2-esito{ font-weight:600; padding:12px 14px; border-radius:0;
  margin:0 0 1.4rem; }
.sa2-esito.ok{ background:rgba(26,127,75,.08); color:#12603a; }
.sa2-esito.no{ background:rgba(179,38,30,.07); color:#8c1d18; }
.sa2-esito:empty{ display:none; }
.sa2-onesta{ font-size:.9rem; color:#5C6159; padding:10px 14px;
  border-inline-start:3px solid var(--linea,#e6e1d8); }
.sa2-foto img{ width:100%; height:auto; border-radius:0; }
.sa2-foto figcaption{ font-size:.88rem; color:#5C6159; margin-top:.5rem; }
.sa2-credito{ display:block; font-size:.8rem; opacity:.8; }
@media print{ .sa2-tasti, .sa2-audio{ display:none } }

/* ------------------------------------------------------------
   GRUPPO 6, 16 agosto 2026: l'indice di «Vivere in Italia».

   Otto riquadri bordati, due per riga, tutti della stessa altezza.
   Ma questo e' un elenco di passi da fare in ordine, non un
   catalogo: diventa un elenco vero, righe separate da un filo, con
   la freccia che compare solo quando ci passi sopra.

   La pagina ha gia' il capolettera e la firma con la faccia: e'
   scritta come un articolo, e adesso anche l'indice lo sembra.
   ------------------------------------------------------------ */
.vi-wrap .vi-indice{
  gap:0;
  border-top:1px solid var(--linea,#e6e1d8);
  margin:1.5rem 0 2.2rem;
}
@media (min-width:720px){
  .vi-wrap .vi-indice{ grid-template-columns:1fr 1fr; gap:0 44px; }
}
.vi-wrap .vi-indice a{
  height:auto;
  background:none;
  border:none;
  border-bottom:1px solid var(--linea,#e6e1d8);
  padding:14px 26px 14px 0;
  transition:padding-left .13s ease;
}
.vi-wrap .vi-indice a:hover,
.vi-wrap .vi-indice a:focus-visible{
  background:none;
  border-color:var(--linea,#e6e1d8);
  padding-left:11px;
  box-shadow:inset 2px 0 0 var(--vi);
}
.vi-wrap .vi-indice a::after{ right:2px; }

/* Il credito della foto: il nome del fotografo e' un collegamento, e non
   aveva regola di colore. Usciva nel blu di default del browser,
   rgb(0,0,238), che sul sito non compare da nessun'altra parte: si vedeva
   a occhio sotto la foto della simulazione A2, in tutte e quindici le
   lingue. Un giro di controllo su tutte le classi di credito del sito
   (.u-crediti-foto, .img-credit, .blog-foto-credit, .cart-crediti-lungo,
   .crediti-foto, .credit, .bron) dice che era l'unica rimasta scoperta.

   Il credito e' una nota, non un invito: resta del colore del testo, con
   la sottolineatura a dire che si puo' cliccare, e prende il colore della
   sezione solo al passaggio del mouse. E' la stessa forma di .sc-mini a e
   di .gr-qcer .gr-fonte a in uniforme.css. */
.sa2-credito a{ color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.18em }
.sa2-credito a:hover{ color:var(--sa2-a, #106b73) }