/* Da destra a sinistra — solo la pagina araba.
   Non basta `dir="rtl"`: vanno specchiate le cose disegnate a mano (menu che
   entra da destra, frecce, bordini a sinistra) e va cambiato il carattere,
   perché i caratteri latini non hanno le lettere arabe e il browser
   ripiegherebbe su un carattere di sistema diverso a ogni telefono. */

body, .funnel, .cookie, .campo input, .campo select, .campo textarea, .scelta, button {
  font-family: Cairo, 'Noto Kufi Arabic', system-ui, sans-serif;
}
h1, h2, h3, .cifra, .dato b, .nodo b {
  font-family: Cairo, system-ui, sans-serif;
  letter-spacing: 0;          /* la spaziatura fra lettere spezza l'arabo */
  line-height: 1.35;
}
.eyebrow, .dove, .lingue a, .passi-conta { letter-spacing: .06em }

/* i nomi propri restano scritti da sinistra a destra dentro una riga araba */
.marchio span { direction: ltr; unicode-bidi: isolate }

/* il menu del telefono entra dal lato giusto */
@media (max-width: 900px) {
  nav { transform: translateX(-100%) }
  nav.aperto { transform: none }
}
@media (max-width: 860px) { nav { transform: translateX(-100%) } nav.aperto { transform: none } }

/* elenchi con il trattino: il segno passa a destra */
.carta li { padding-left: 0; padding-right: 22px }
.carta li::before { left: auto; right: 0 }
.fonti ol { padding-left: 0; padding-right: 22px }

/* frecce e segni direzionali: si specchiano, altrimenti indicano il verso
   sbagliato in una pagina che si legge al contrario */
.flusso .freccia, .catena span[aria-hidden="true"] { transform: scaleX(-1) }

/* le tele restano da sinistra a destra: sono disegni tecnici, non testo */
.tela { direction: ltr }

/* numeri e dati in cifre europee restano leggibili nel verso giusto */
.cifra, .dato b, .passi li::before, .tappe li::before { direction: ltr; unicode-bidi: isolate }

/* il testo lungo va a bandiera a destra */
.intesta p, .carta p, .funnel .aiuto, .cookie p { text-align: right }