/* ═══════════════════════════════════════════════════════════════ RTL / ÁRABE — style-rtl.css Cargar solo en páginas árabes: Fuente árabe recomendada: CAIRO Descargar en: https://fonts.google.com/specimen/Cairo Ficheros: Cairo-Light.ttf, Cairo-Regular.ttf, Cairo-Medium.ttf, Cairo-SemiBold.ttf, Cairo-Bold.ttf, Cairo-ExtraBold.ttf ═══════════════════════════════════════════════════════════════ */ /* ── CAIRO (fuente árabe, self-hosted) ── */ @font-face{font-family:"Cairo";font-style:normal;font-weight:300;font-display:swap; src:url("/fonts/Cairo-Light.ttf") format("truetype")} @font-face{font-family:"Cairo";font-style:normal;font-weight:400;font-display:swap; src:url("/fonts/Cairo-Regular.ttf") format("truetype")} @font-face{font-family:"Cairo";font-style:normal;font-weight:500;font-display:swap; src:url("/fonts/Cairo-Medium.ttf") format("truetype")} @font-face{font-family:"Cairo";font-style:normal;font-weight:600;font-display:swap; src:url("/fonts/Cairo-SemiBold.ttf") format("truetype")} @font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/Cairo-Bold.ttf") format("truetype")} @font-face{font-family:"Cairo";font-style:normal;font-weight:800;font-display:swap; src:url("/fonts/Cairo-ExtraBold.ttf") format("truetype")} /* ═══════════════════════════════════════════════════════════════ BASE RTL Se activa automáticamente con ═══════════════════════════════════════════════════════════════ */ [dir="rtl"] { direction: rtl; } /* Cairo reemplaza a Manrope + Cormorant Garamond para árabe */ [dir="rtl"], [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "Cairo", system-ui, sans-serif; } /* Títulos en árabe: Cairo Bold, sin letter-spacing negativo */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .dc-nm, [dir="rtl"] .bc-t, [dir="rtl"] .hero-cn, [dir="rtl"] .sn, [dir="rtl"] .prof-info h3, [dir="rtl"] .ob strong, [dir="rtl"] .logo-t .ln { font-family: "Cairo", system-ui, sans-serif; letter-spacing: 0; } /* h1 árabe: más line-height, sin cursiva (no existe en árabe) */ /* ── H1 árabe: tamaño reducido porque las palabras árabes son más largas ── */ [dir="rtl"] h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.5; font-weight: 700; } [dir="rtl"] h1 em { font-style: normal; font-weight: 700; color: var(--CR2); } /* Mayor interlineado para texto árabe */ [dir="rtl"] p, [dir="rtl"] .lead, [dir="rtl"] .h-sub, [dir="rtl"] .dc-bio, [dir="rtl"] .pi-bio, [dir="rtl"] .trb, [dir="rtl"] .fa, [dir="rtl"] .bc-ex, [dir="rtl"] .ft-desc { line-height: 2; } /* ── LOGO ── */ [dir="rtl"] .logo-a { flex-direction: row-reverse; } [dir="rtl"] .logo-t { text-align: right; } [dir="rtl"] .logo-t .ln { background: linear-gradient(225deg, #1c3552 0%, #2d8bb8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── EYEBROW LABELS ── */ /* La línea decorativa va al otro lado */ [dir="rtl"] .ey { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .ey::before { order: 1; } /* ── TOPBAR ── */ [dir="rtl"] .topbar { flex-direction: row-reverse; } [dir="rtl"] .tbl { flex-direction: row-reverse; } [dir="rtl"] .tbr { flex-direction: row-reverse; } /* ── NAVEGACIÓN ── */ [dir="rtl"] nav { flex-direction: row-reverse; } [dir="rtl"] .nav-ul { flex-direction: row-reverse; } [dir="rtl"] .nav-r { flex-direction: row-reverse; } /* Language switcher: dropdown a la izquierda en RTL */ [dir="rtl"] .lang-dd { right: auto; left: 0; } /* Mobile nav */ [dir="rtl"] .mob-x { right: auto; left: 1.5rem; } [dir="rtl"] .mob-nav { direction: rtl; } /* ── HERO ── */ [dir="rtl"] .hero-c { direction: rtl; } [dir="rtl"] .h-ey { flex-direction: row-reverse; } [dir="rtl"] .h-ey::before { order: 1; } [dir="rtl"] .h-acts { flex-direction: row-reverse; } [dir="rtl"] .h-trust { flex-direction: row-reverse; flex-wrap: wrap; } [dir="rtl"] .h-ti { flex-direction: row-reverse; } /* Gradiente del hero invertido */ [dir="rtl"] .hero { background: linear-gradient(220deg, #0e2438 0%, #1c3552 55%, #1f4a70 100%); } /* ── STATS ── */ [dir="rtl"] .stats { direction: rtl; } [dir="rtl"] .stat { border-right: none; border-left: 1px solid rgba(28,53,82,.15); } [dir="rtl"] .stat:last-child { border-left: none; } /* ── DIVIDER ── */ [dir="rtl"] .gr { flex-direction: row-reverse; } /* ── SECTION HEADER ── */ [dir="rtl"] .sec-hd { text-align: right; } [dir="rtl"] .lead { text-align: right; } /* ── DOCTOR CARDS ── */ [dir="rtl"] .dc-badge { right: auto; left: 1rem; } [dir="rtl"] .dc-col { left: auto; right: .75rem; } [dir="rtl"] .dc-ig { left: auto; right: 1rem; } [dir="rtl"] .dc-b { text-align: right; } [dir="rtl"] .dc-acts { flex-direction: row-reverse; } /* ── DOCTOR PROFILES ── */ [dir="rtl"] .prof-g { direction: rtl; } [dir="rtl"] .prof-info { text-align: right; } [dir="rtl"] .pi-tt { text-align: right; } [dir="rtl"] .tags { flex-direction: row-reverse; } [dir="rtl"] .pi-acts { flex-direction: row-reverse; } [dir="rtl"] .pi-social { flex-direction: row-reverse; } /* ── TREATMENTS ── */ [dir="rtl"] .tabs { flex-direction: row-reverse; } [dir="rtl"] .trhd { flex-direction: row-reverse; } [dir="rtl"] .trt { text-align: right; } [dir="rtl"] .trb { text-align: right; } /* ── GALLERY ── */ [dir="rtl"] .gal-grid { direction: rtl; } /* ── BLOG ── */ [dir="rtl"] .bc-b { text-align: right; } [dir="rtl"] .bc-mt { flex-direction: row-reverse; } /* ── FAQ ── */ [dir="rtl"] .fq { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .fi-ic { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .fa { text-align: right; } /* ── CONTACT + FORM ── */ [dir="rtl"] .cita-g { direction: rtl; } [dir="rtl"] .cl { direction: rtl; } [dir="rtl"] .ci { flex-direction: row-reverse; } [dir="rtl"] .ci-dt { text-align: right; } [dir="rtl"] .ob { direction: rtl; } [dir="rtl"] .cf { direction: rtl; } [dir="rtl"] .fr2 { direction: rtl; } [dir="rtl"] .fg { text-align: right; } [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { direction: rtl; text-align: right; } [dir="rtl"] label { display: block; text-align: right; } [dir="rtl"] .fnote { text-align: right; } /* ── MAP ── */ [dir="rtl"] .map-bar { flex-direction: row-reverse; } [dir="rtl"] .md { flex-direction: row-reverse; } /* ── FOOTER ── */ [dir="rtl"] .ft-g { direction: rtl; } [dir="rtl"] .ft-col ul { text-align: right; } [dir="rtl"] .ft-soc { flex-direction: row-reverse; } [dir="rtl"] .ft-b { flex-direction: row-reverse; } [dir="rtl"] .ft-ll { flex-direction: row-reverse; } [dir="rtl"] .ft-desc { text-align: right; } /* ── COOKIE BANNER ── */ [dir="rtl"] .ck { flex-direction: row-reverse; } [dir="rtl"] .ck-bs { flex-direction: row-reverse; } [dir="rtl"] .ck p { text-align: right; } /* ── LIGHTBOX ── */ [dir="rtl"] .lbx-prev { left: auto; right: 1.5rem; } [dir="rtl"] .lbx-next { right: auto; left: 1.5rem; } [dir="rtl"] .lbx-x { right: auto; left: 1.5rem; } [dir="rtl"] .lbx-cap { text-align: center; } /* ── WHATSAPP FAB ── */ /* En RTL se mueve al lado izquierdo */ [dir="rtl"] .wa-fab { right: auto; left: 1.5rem; } /* ── LEGAL ── */ [dir="rtl"] .legal-c { text-align: right; } [dir="rtl"] .legal-list { text-align: right; } /* ── RESPONSIVE RTL ── */ @media(max-width:1000px){ [dir="rtl"] .prof-g { grid-template-columns: 1fr; } } @media(max-width:680px){ [dir="rtl"] .mob-x { left: 1rem; right: auto; } [dir="rtl"] .wa-fab { left: 1.5rem; right: auto; } [dir="rtl"] .lbx-prev{ left: auto; right: 1rem; } [dir="rtl"] .lbx-next{ right: auto; left: 1rem; } [dir="rtl"] .lbx-x { right: auto; left: 1rem; } }