/* picTRUE: impaginazione da destra a sinistra (arabo).
   Si carica solo nelle lingue scritte da destra a sinistra, dopo site.css, e contiene soltanto ciò che va
   specchiato: griglie e colonne si girano da sole con dir="rtl". Lo stile delle altre lingue non cambia. */

/* ---------- Carattere e testo ---------- */
html[dir=rtl] body{font-family:-apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic","Noto Kufi Arabic",Tahoma,system-ui,sans-serif}
/* in arabo le lettere sono legate: la spaziatura tra lettere le staccherebbe */
html[dir=rtl] body *{letter-spacing:0!important}
/* i titoli arabi hanno aste e segni sopra e sotto la riga: serve più aria tra le righe */
html[dir=rtl] .dk-h1{line-height:1.22}
html[dir=rtl] .dk-h2,html[dir=rtl] .post-h1{line-height:1.25}
html[dir=rtl] .dk-h3,html[dir=rtl] .sx-h,html[dir=rtl] .post-body h2,html[dir=rtl] .post-body h3,html[dir=rtl] .post-body h4{line-height:1.35}
html[dir=rtl] .dk-big{line-height:1.3;padding-bottom:.12em}
html[dir=rtl] .pg-word{line-height:1.3;padding-bottom:.14em;margin-bottom:calc(14 * var(--u))}
html[dir=rtl] .pg-stmt .pg-word{line-height:1.35;margin-bottom:0}
html[dir=rtl] .m-chain span{line-height:1.35}
/* parole evidenziate in gradiente: l'area colorata deve coprire anche le aste che scendono sotto la riga */
html[dir=rtl] .dk-h1 b,html[dir=rtl] .dk-h2 b,html[dir=rtl] .post-h1 b{padding:.2em 0 .36em}
/* il motto e i numeri con il segno restano scritti da sinistra a destra */
html[dir=rtl] .dk-claim{direction:ltr}
html[dir=rtl] .dk-stat strong{direction:ltr;text-align:right}

/* ---------- Frecce: puntano nel verso della lettura ---------- */
html[dir=rtl] .dk-link svg,html[dir=rtl] .pf-vx svg,html[dir=rtl] .vx-arr,html[dir=rtl] .ar-more svg,html[dir=rtl] .post-back svg,
html[dir=rtl] .vs-prev svg,html[dir=rtl] .vs-next svg,html[dir=rtl] .sx-nav svg{transform:scaleX(-1)}
html[dir=rtl] .dk-link:hover svg,html[dir=rtl] .ar-card:hover .ar-more svg{transform:scaleX(-1) translateX(calc(4 * var(--u)))}
html[dir=rtl] .post-back:hover svg{transform:scaleX(-1) translateX(calc(-4 * var(--u)))}

/* ---------- Intestazione ---------- */
html[dir=rtl] .nb{margin-left:0;margin-right:auto}
html[dir=rtl] .lx{margin-left:0;margin-right:calc(8 * var(--u))}
html[dir=rtl] .lx-list{right:auto;left:0}
html[dir=rtl] .lx-list a{text-align:right}
html[dir=rtl] .vx-nav{padding:0 calc(12 * var(--u)) 0 calc(16 * var(--u))}
@media (min-width:901px) and (max-width:1100px){html[dir=rtl] .vx-nav{padding:0 calc(10 * var(--u)) 0 calc(12 * var(--u))}}
@media (max-width:900px){
  html[dir=rtl] .m-lang{margin-left:0;margin-right:auto;padding:0 10px 0 6px}
  html[dir=rtl] .nb{margin-right:6px}
  html[dir=rtl] .vx-mob{margin-left:0;margin-right:auto}
  html[dir=rtl] .vx-mob+.m-lang{margin-right:8px}
  html[dir=rtl] .m-pill{padding:0 18px 0 16px}
  html[dir=rtl] .m-chain li{padding-left:0;padding-right:34px}
  html[dir=rtl] .m-chain li::before{left:auto;right:8px}
  html[dir=rtl] .m-chain li::after{left:auto;right:2px}
}
@media (max-width:389px){html[dir=rtl] .vx-mob+.m-lang{margin-right:6px}}
@media (max-width:359px){html[dir=rtl] .m-lang{padding:0 9px}}

/* ---------- Elementi con il filetto o il punto sul lato d'inizio ---------- */
html[dir=rtl] .dk-row::after,html[dir=rtl] .pg-feat li::after{left:auto;right:0}
html[dir=rtl] .dk-val::before,html[dir=rtl] .post-sum::before{left:auto;right:0}
html[dir=rtl] .dk-list li{padding-left:0;padding-right:calc(64 * var(--u))}
html[dir=rtl] .dk-list li i{left:auto;right:0}
html[dir=rtl] .dk-list li::before{left:auto;right:calc(9 * var(--u))}
html[dir=rtl] .dk-list li::after{left:auto;right:calc(1 * var(--u))}
@media (max-width:900px){html[dir=rtl] .dk-list li{padding-right:44px}}
/* il bollino LinkedIn sulle foto del team resta in basso a destra: copre il simbolo già presente nella foto */

/* ---------- Home: immagine certificata ---------- */
html[dir=rtl] .pf{text-align:right}
html[dir=rtl] .pf-seal{right:auto;left:calc(18 * var(--u))}
html[dir=rtl] .pf dl div{transform:translateX(-12px)}
html[dir=rtl] .pf.in dl div{transform:none}

/* ---------- Home: sei dati ---------- */
html[dir=rtl] .vs{text-align:right}
@media (min-width:901px){html[dir=rtl] .vs{margin-left:0;margin-right:calc(50% - min(calc(560 * var(--u)),calc(50vw - 24px)))}}
/* i grafici con gli anni restano in ordine cronologico da sinistra a destra, come la curva */
html[dir=rtl] .vs-bars{direction:ltr}
/* il segno % sta a destra del numero, come nel testo */
html[dir=rtl] .vs-n small[dir=ltr]{order:-1}
html[dir=rtl] .vs-share .vs-track span{transform-origin:right}
@media (max-width:900px){html[dir=rtl] .vs-foot{text-align:right}}

/* ---------- Home: settori che scorrono ---------- */
@keyframes dk-marq-rtl{0%{transform:translateX(0)}100%{transform:translateX(50%)}}
html[dir=rtl] .dk-marq div{animation-name:dk-marq-rtl}

/* ---------- Home: indice dei settori ---------- */
html[dir=rtl] .st-b{text-align:right}
html[dir=rtl] .sx-b{text-align:right;padding:calc(11 * var(--u)) calc(34 * var(--u)) calc(11 * var(--u)) 0}
html[dir=rtl] .sx-list::before{left:auto;right:calc(8 * var(--u))}
html[dir=rtl] .sx-node{left:auto;right:0}
@media (min-width:901px){
  html[dir=rtl].js-sx .sx-card{right:auto;left:0}
  html[dir=rtl].js-sx .sx-ui{margin:calc(14 * var(--u)) auto 0 0}
}
@media (max-width:900px){
  html[dir=rtl] .sx-b{padding:11px 32px 11px 0}
  html[dir=rtl] .sx-list::before{right:8px}
  html[dir=rtl] .sx-card{margin:4px 32px 14px 0}
  html[dir=rtl]:not(.js-sx) .sx-card{margin-right:0}
}

/* ---------- Home: Verifica ---------- */
html[dir=rtl] .vx-bar span{margin-left:0;margin-right:calc(10 * var(--u))}

/* ---------- Pagine interne ---------- */
html[dir=rtl] .pg-steps li{padding:calc(54 * var(--u)) 0 0 calc(24 * var(--u))}
html[dir=rtl] .pg-steps li::before{left:calc(-9 * var(--u));right:calc(9 * var(--u));transform:scaleX(-1)}
html[dir=rtl] .pg-steps li::after{left:auto;right:0}
/* i connettori dell'architettura: freccia e luce corrono verso sinistra */
html[dir=rtl] .pg-conn{transform:scaleX(-1)}
@media (max-width:900px){
  html[dir=rtl] .pg-steps li{padding:0 44px 34px 0}
  html[dir=rtl] .pg-steps li:last-child{padding-bottom:0}
  html[dir=rtl] .pg-steps li::before{left:auto;right:8px;transform:none}
}

/* ---------- Pagine di testo e articoli ---------- */
html[dir=rtl] .post-body h2::before,html[dir=rtl] .post-body h3::before,html[dir=rtl] .post-body h4::before{left:auto;right:0}
html[dir=rtl] .post-body li{padding:0 calc(40 * var(--u)) calc(18 * var(--u)) 0}
html[dir=rtl] .post-body li::before{left:auto;right:calc(4 * var(--u))}
html[dir=rtl] .post-sum{padding:calc(40 * var(--u)) calc(48 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u))}
html[dir=rtl] .post-body blockquote{padding:0 calc(28 * var(--u)) 0 0;border-left:0;border-right:calc(4 * var(--u)) solid #4461ea}
html[dir=rtl] .post-body ol{padding-left:0;padding-right:1.3em}
html[dir=rtl] .post-body ol li{padding:0 0 calc(12 * var(--u)) 0}
@media (max-width:900px){
  html[dir=rtl] .post-body li{padding-right:32px}
  html[dir=rtl] .post-body ol li{padding-right:0}
  html[dir=rtl] .post-body li::before{right:2px}
  html[dir=rtl] .post-sum{padding:28px 30px 8px 24px}
  html[dir=rtl] .post-body blockquote{padding-right:20px}
}

/* ---------- Piè di pagina ---------- */
@media (min-width:600px) and (max-width:900px){
  html[dir=rtl] .dk-foot-in{text-align:right}
  html[dir=rtl] .dk-foot img{margin-left:auto;margin-right:0}
}

/* ---------- Accessibilità e campi nascosti ---------- */
html[dir=rtl] .screen-reader-text:focus{left:auto;right:12px}
html[dir=rtl] .dk-hp{left:auto!important;right:-9999px!important}