@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   AJURIDIC · rtl.css — Parche para las paginas en arabe (html dir="rtl")
   ---------------------------------------------------------------------------
   NO es un fork de style.css ni lo sustituye: se enlaza DESPUES, y SOLO en
   las paginas de /ar/. Corrige dos cosas que style.css resuelve con
   propiedades fisicas en vez de logicas:
     1. Tipografia: Archivo e IBM Plex Sans no tienen glifos arabes, y el
        letter-spacing positivo o negativo rompe la union entre letras de
        una escritura cursiva.
     2. Posicion: bordes de acento, indice, migas, listas y tablas puestos
        con left/right en vez de inline-start/inline-end.

   Motivo de vivir en un fichero aparte: SUD tiene prohibido tocar style.css
   sin permiso de Nico. Si esto se aprueba, lo correcto a medio plazo es
   fundir estas reglas en el fichero madre con propiedades logicas
   (margin-inline-start, border-inline-start, text-align:start) y borrar
   este parche: entonces cualquier idioma RTL futuro (hebreo, persa, urdu)
   funcionaria solo, sin fichero aparte.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. TIPOGRAFIA ARABE ═════════════════════════════════════════════════
   Todo el sitio saca sus tipos de estas dos variables: redefinirlas aqui
   basta para arreglar titulares, kickers, botones, menu y pie sin tocar
   selector por selector. IBM Plex Sans Arabic es la misma familia tipografica
   que ya usa el cuerpo de texto del sitio (mismo trazo, mismo dibujo de
   numero), asi que la marca no cambia de caracter al cambiar de idioma. */
:root {
  --font-titular:  'IBM Plex Sans Arabic', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-texto:    'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --track-kicker:  0em;   /* en LTR era 0.14em: en arabe separa las letras y las desconecta */
  --track-titular: 0em;
}

/* Restos de letter-spacing que style.css escribe a pelo (no via variable) en
   selectores que SI aparecen traducidos: titulares, boton, chip y el claim
   del logo ("Abogados · Barcelona" -> su version arabe). El nombre de marca
   "Ajuridic" no lleva esta regla a proposito: es un nombre propio en latin
   y no se traduce, así que conserva su tracking de siempre. */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ar"] .btn, [lang="ar"] .logo__claim, [lang="ar"] .chip {
  letter-spacing: normal;
}


/* ═══ 2. DIRECCION: lo que style.css resuelve con left/right fisicos ═════ */

/* Saltar al contenido: esquina de arriba a la derecha, que es el INICIO en RTL */
[dir="rtl"] .saltar { left: auto; right: var(--esp-4); }

/* Submenu de "Areas": se abre bajo el propio enlace, no hacia el borde ajeno */
[dir="rtl"] .submenu { left: auto; right: 0; }

/* Flecha del "Areas": el hueco va ANTES del signo (hacia el texto), no despues */
[dir="rtl"] .nav__item--areas > .nav__enlace::after { margin-left: 0; margin-right: var(--esp-2); }

/* Migas de pan: el separador "›" de style.css NO se toca. Es un carácter con
   espejo Unicode (Bidi_Mirrored): dentro de un contexto RTL el navegador ya
   lo dibuja como "‹" solo, en el sentido correcto de lectura. Cambiarlo a
   mano produce un doble espejo y vuelve a salir "›" al revés (comprobado en
   pantalla). Lo único que hay que mover es el hueco, que sí es físico. */
[dir="rtl"] .migas__item + .migas__item::before {
  margin-right: 0;
  margin-left: var(--esp-2);
}

/* Filete de acento de indice, aviso y cita legal: al borde de INICIO (derecha) */
[dir="rtl"] .indice,
[dir="rtl"] .aviso,
[dir="rtl"] .cita {
  border-left: 0;
  border-right: var(--filete) solid var(--verd);
}
[dir="rtl"] .aviso--neutro { border-left-color: transparent; border-right-color: var(--tinta-3); }
[dir="rtl"] .cita { padding-left: 0; padding-right: var(--esp-5); border-right-width: 2px; }

/* Checks de lista: el signo va a la derecha del texto, no a la izquierda */
[dir="rtl"] .lista-check li { padding-left: 0; padding-right: var(--esp-6); }
[dir="rtl"] .lista-check li::before {
  left: auto; right: 2px;
  border-left: 0;
  border-right: 1.5px solid var(--verd);
  transform: rotate(45deg);
}

/* Pasos numerados: la cifra va a la derecha del texto */
[dir="rtl"] .pasos > li { padding-left: 0; padding-right: var(--esp-8); }
[dir="rtl"] .pasos > li::before { left: auto; right: 0; }

/* Tabla: alineacion de lectura a la derecha */
[dir="rtl"] .tabla th,
[dir="rtl"] .tabla td { text-align: right; }

/* Indice flotante (JS, guias largas >= 1280px): filete de acento a la derecha
   y la animacion de entrada apartandose hacia el borde, no hacia el texto */
[dir="rtl"] .indice-flotante {
  border-left: 0;
  border-right: var(--filete) solid var(--verd);
  transform: translateX(8px);
}
[dir="rtl"] .indice-flotante[data-visible="true"] { transform: none; }

/* Listas de prosa (guias del blog, por si se traducen mas adelante) */
[dir="rtl"] .prosa ul,
[dir="rtl"] .prosa ol { padding-left: 0; padding-right: var(--esp-5); }

/* El widget de chat (esquina inferior) y la barra fija de movil se DEJAN tal
   cual, a proposito: son un boton flotante y una barra de ancho completo, no
   texto que se lea en un sentido. Cambiar de esquina el chat en cada idioma
   es mas confuso que dejarlo siempre abajo a la derecha, que es donde la
   gente ya espera encontrar un chat en cualquier web. */


/* ═══ 3. NUMEROS Y DIRECCIONES LATINAS DENTRO DE UN PARRAFO ARABE ════════
   El telefono, el email y "Carrer del Freser, 104" se escriben tal cual: no
   se traducen, son los que hay que reconocer en un mapa o marcar en un
   telefono. El algoritmo bidi de Unicode ya los coloca leyendo bien solo,
   pero en un parrafo largo la coma o el numero de portal puede reordenarse
   en el borde de linea. Este envoltorio lo aisla:
   <bdi class="ltr-embed">614 26 26 92</bdi> */
.ltr-embed { unicode-bidi: isolate; direction: ltr; }