/* Locale adapter: identity and motion stay intact; only reading direction changes. */
:root[dir="rtl"] { overflow-x: clip; }
/* Keep the viewport as the sticky ancestor while clipping RTL horizontal overflow. */
:root[dir="rtl"] body { overflow-x: clip; }
.depth-control { flex: none; }
.depth-control[hidden] { display: none; }
.depth-trigger { display: inline-grid; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.depth-trigger svg { width: 24px; height: 24px; }
.depth-trigger.ic { color: var(--ink); }
:root.preferences-open { overflow: hidden; }
.preferences-panel { position: fixed; inset-block-start: max(80px, env(safe-area-inset-top, 0px)); inset-block-end: auto; inset-inline-start: auto; inset-inline-end: var(--m); margin: 0; padding: 20px; inline-size: min(360px, calc(100vw - 2 * var(--m))); max-inline-size: none; max-block-size: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; color: var(--ink); background: var(--void); border: 1px solid var(--edge); border-radius: var(--corner); box-shadow: none; font: .9375rem/1.5 var(--ui); }
.preferences-panel:not([open]) { display: none; }
.preferences-panel::backdrop { background: color-mix(in srgb, var(--void) 72%, transparent); }
.preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 20px; }
.preferences-heading h2 { margin: 0; font: 500 1.125rem/1.4 var(--ui); overflow-wrap: anywhere; }
.preferences-panel .ic { margin: 0; opacity: 1; color: var(--ink); }
.preferences-panel .ic:hover { background: var(--card-deep); }
.preferences-group { display: grid; gap: 8px; min-inline-size: 0; margin: 0 0 20px; padding: 0; border: 0; }
.preferences-group legend { padding: 0; margin-block-end: 8px; }
.depth-options { display: flex; flex-wrap: wrap; gap: 8px; }
.depth-option { flex: 1 1 120px; display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 12px; border: 0; border-block-end: 2px solid var(--edge); border-radius: 0; color: var(--ink); background: transparent; cursor: pointer; overflow-wrap: anywhere; }
.depth-option:has(input:focus-visible) { border-block-end-color: var(--ink); }
.depth-option input { flex: none; margin: 0; width: 16px; height: 16px; accent-color: var(--ink); }
/* PREF1: el punto de selección con los tokens del sitio, no el radio de fábrica. Elegido = aro de tinta con punto lleno;
   sin elegir = aro suave vacío, así que se distingue por la forma y no sólo por el color. */
@supports (appearance: none) {
  .depth-option input { appearance: none; display: grid; place-content: center; border: 2px solid var(--edge); border-radius: 50%; background: transparent; }
  .depth-option input::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink); transform: scale(0); }
  .depth-option input:checked { border-color: var(--ink); }
  .depth-option input:checked::before { transform: scale(1); }
}
@media (forced-colors: active) { .depth-option input { appearance: auto; } }
.depth-option input:focus-visible { outline: none; }
.preferences-panel :is(button,summary):focus-visible, .depth-trigger:focus-visible, .top .js-sound:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.preferences-more { border-block-start: 1px solid var(--edge); }
.preferences-more summary { min-block-size: 44px; padding-block: 12px; cursor: pointer; overflow-wrap: anywhere; }
.preferences-extra { display: grid; gap: 8px; padding-block-start: 8px; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 44px; }
.preference-row[hidden] { display: none; }
.preference-row > span { overflow-wrap: anywhere; }
/* The approved fourth fact remains readable in the candidate's mobile rail. */
:root[data-preview="core"] #preview-core-intro:not(.guide-open) > [data-depth-fact="ecosystemEntry"] { display: block; }
@media (max-width: 560px) {
  .preferences-panel { inset-block-start: auto; inset-block-end: max(12px, env(safe-area-inset-bottom, 0px)); inset-inline: 12px; inline-size: auto; max-block-size: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 20px; }
}
.language-picker { position: relative; display: block; letter-spacing: normal; }
.language-picker summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 44px; min-height: 44px; cursor: pointer; list-style: none; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary svg { width: 20px; height: 20px; }
.language-picker:not([open]) .language-options { display: none; }
.language-options { position: absolute; inset-block-start: 100%; inset-inline-start: 0; display: grid; min-width: 180px; max-width: calc(100vw - 2 * var(--m)); max-block-size: calc(100dvh - 220px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-xs); background: var(--void); border: 1px solid var(--edge); border-radius: var(--corner); box-shadow: 0 8px 28px var(--void); }
.lang .language-options a { justify-content: start; padding-inline: var(--space-sm); height: auto; min-height: 44px; font-weight: 400; text-shadow: none; }
.language-options a:hover, .language-options a:focus-visible { background: var(--card-deep); color: var(--cyan); }
.language-options a:lang(ar) { font-family: "Noto Sans Arabic Variable", var(--ui); }
.contact-ltr { white-space: nowrap; unicode-bidi: isolate; }
:root:lang(ar) { --display: "Noto Sans Arabic Variable", "Outfit", sans-serif; --ui: "Noto Sans Arabic Variable", "Outfit", sans-serif; }
:root:lang(ar) :is(.d, .menu .minor a, .lang, .rail .tip, .fw label, .scroll-cue) { letter-spacing: normal; }
:root:lang(ar) :is(.title, .statement, .para, .home-ending h2, .label, .slides, .menu .big, .menu .minor a, .phero .sub, .sitefoot p) { line-height: 1.6; }
.card .track { direction: ltr; }
:root[dir="rtl"] .card .track { flex-direction: row-reverse; }
:root[dir="rtl"] .slides .track > div { direction: rtl; }
:root[dir="rtl"] :is(.arr, .arrows button, .more, .send) svg { transform: scaleX(-1); }
:root[dir="rtl"] .menu { right: auto; inset-inline-end: 0; transform: translateX(-101%); }
:root[dir="rtl"] .menu.open { transform: none; }
:root[dir="rtl"] .menu .row { transform: translateX(-20px); }
:root[dir="rtl"] .menu.open .row { transform: none; }
:root[dir="rtl"] .menu .hl { transform-origin: right; }
:root[dir="rtl"] .motion .label { left: auto; inset-inline-start: var(--m); }
:root[dir="rtl"] .rail { right: auto; inset-inline-end: calc(var(--m) + 13px); }
:root[dir="rtl"] .rail .tip { right: auto; inset-inline-end: 19px; }
:root[dir="rtl"] select.f { background-position: left 18px center; padding-inline: 17px 48px; }
:root[dir="rtl"] input[type="email"] { direction: ltr; text-align: start; }
@media (max-width: 820px) { :root[dir="rtl"] .rail { inset-inline-end: 10px; } }