/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Sitio público · cascarón compartido (cabecera, pie, botones, tokens de marca).
   Se carga en TODAS las peticiones del sitio público (App.razor · IsLandingRequest), no en /app ni /admin.
   Todo va con prefijo rx- para no chocar con base.css / landing.css.

   Colores: SÓLO la paleta del manual (#1850F4 #0E065B #13A8FF #4D5EFF #303047 #1E7FFF #BEBEBF) y tintes
   derivados de ella con color-mix. Contraste (calculado): nunca #13A8FF como texto sobre claro (2,4:1);
   nunca #1850F4 como texto/botón/foco sobre navy (2,9:1) — sobre navy, foco y enlaces en cielo.
   base.css fija html{font-size:15px}: aquí todo va en px para que 1 unidad = 1 px de diseño.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Titulares: TT Firs Neue (fuente del manual) cuando haya licencia web; mientras, Outfit (OFL, autoalojada). */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/outfit/Outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/outfit/Outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --rx-navy: #0E065B;
    --rx-blue: #1850F4;
    --rx-sky: #13A8FF;
    --rx-peri: #4D5EFF;
    --rx-char: #303047;
    --rx-grey: #BEBEBF;
    --rx-wa: #25D366;
    /* Tintes derivados (documentados en DOCS/ui/landing-2026/PROPUESTA.md §2.1) */
    --rx-bg: color-mix(in srgb, #4D5EFF 5%, #fff);
    --rx-bg-alt: color-mix(in srgb, #4D5EFF 9%, #fff);
    --rx-sunken: color-mix(in srgb, #4D5EFF 10%, #fff);
    --rx-ink: var(--rx-navy);
    --rx-body: var(--rx-char);
    --rx-muted: color-mix(in srgb, #303047 78%, #fff);
    --rx-dark-deep: color-mix(in srgb, #0E065B 65%, #000);
    --rx-dark-raised: color-mix(in srgb, #0E065B 94%, #fff);
    --rx-border: color-mix(in srgb, #0E065B 10%, #fff);
    --rx-border-strong: color-mix(in srgb, #0E065B 18%, #fff);
    --rx-border-dark: color-mix(in srgb, #0E065B 80%, #fff);
    --rx-g-right: linear-gradient(95deg, #13A8FF, #4D5EFF);
    --rx-g-text: linear-gradient(95deg, #1850F4, #4D5EFF);
    --rx-g-dark: linear-gradient(180deg, var(--rx-dark-deep), #0E065B);
    --rx-g-dawn: linear-gradient(165deg, #0E065B 0%, #1850F4 100%);
    --rx-g-tile: linear-gradient(160deg, #fff, var(--rx-sunken));
    --rx-g-split: linear-gradient(90deg, #1850F4 0%, #0E065B 49.4%, #fff 49.4% 50.6%, #13A8FF 50.6%, #4D5EFF 100%);
    --rx-sh-xs: 0 1px 2px color-mix(in srgb, #0E065B 8%, transparent);
    --rx-sh-sm: 0 1px 2px color-mix(in srgb, #0E065B 6%, transparent), 0 6px 18px color-mix(in srgb, #0E065B 7%, transparent);
    --rx-sh-md: 0 2px 6px color-mix(in srgb, #0E065B 7%, transparent), 0 14px 34px color-mix(in srgb, #0E065B 11%, transparent);
    --rx-sh-lg: 0 6px 14px color-mix(in srgb, #0E065B 9%, transparent), 0 40px 80px color-mix(in srgb, #0E065B 18%, transparent);
    --rx-sh-brand: 0 10px 24px color-mix(in srgb, #1850F4 28%, transparent);
    --rx-f-display: "TT Firs Neue", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rx-f-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rx-nav-h: 72px;
    --rx-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --rx-ease-out: cubic-bezier(.22, 1, .36, 1);
    --rx-gutter: clamp(16px, 2.6vw, 32px);
}
/* Árabe e hindi: sin mayúsculas forzadas ni tracking; interlineado más amplio. */
:lang(ar) { --rx-f-display: "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --rx-f-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
:lang(hi) { --rx-f-display: "Poppins", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif; --rx-f-body: "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif; }

body.rx-site, .rx-site { background: var(--rx-bg); }
.rx-site { color: var(--rx-body); font-family: var(--rx-f-body); }
.rx-wrap { width: min(1200px, 100% - 2 * var(--rx-gutter)); margin-inline: auto; }
.rx-wrap-wide { width: min(1360px, 100% - 2 * var(--rx-gutter)); margin-inline: auto; }
/* Anillo de foco de las piezas NUEVAS (cabecera, home, pie): azul de marca sobre claro y cielo sobre navy.
   Sólo contorno: nunca cambia la forma del elemento. Las demás páginas conservan su propio foco. */
.rx-skip:focus-visible, .rx-header :focus-visible, .rx-home :focus-visible { outline: 2px solid var(--rx-blue); outline-offset: 2px; }
.rx-site .rx-on-dark :focus-visible, .rx-site .rx-footer :focus-visible { outline: 2px solid var(--rx-sky); outline-offset: 2px; }
/* …salvo dentro del menú de idioma, que es BLANCO aunque cuelgue de una zona navy (el pie). */
.rx-site :is(.rx-footer, .rx-on-dark) .lang-picker-menu :focus-visible { outline-color: var(--rx-blue); }
/* Destino de un salto interno (a11y.js lo enfoca para que el siguiente Tab siga desde ahí): sin anillo. */
.rx-site [tabindex="-1"]:focus { outline: none; }
.rx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rx-ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rx-ic--fill { fill: currentColor; stroke: none; }
.rx-ic--wa { color: var(--rx-wa); }

.rx-skip { position: absolute; inset-inline-start: 16px; top: -64px; z-index: 300; background: var(--rx-navy); color: #fff; padding: 10px 16px; border-radius: 10px; font: 700 15px/1.2 var(--rx-f-body); text-decoration: none; }
.rx-skip:focus { top: 12px; color: #fff; }

/* ── Botones ── */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 26px; border-radius: 9999px; font: 700 16px/1.1 var(--rx-f-body); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; white-space: nowrap; transition: transform .2s var(--rx-ease-out), box-shadow .2s; border: 0; cursor: pointer; text-align: center; }
.rx-btn--sm { min-height: 42px; padding: 0 19px; font-size: 15px; }
.rx-btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.rx-btn--navy, .rx-btn--navy:hover { background: var(--rx-navy); color: #fff; }
.rx-btn--navy { box-shadow: var(--rx-sh-md); }
/* Barrido a 50° (el ángulo del hueco del icono) al pasar el cursor. */
.rx-btn--navy::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(50deg, transparent 38%, color-mix(in srgb, #13A8FF 60%, transparent) 50%, transparent 62%); transform: translateX(-120%); transition: transform .75s var(--rx-ease-out); z-index: -1; }
.rx-btn--navy:hover::after { transform: translateX(120%); }
.rx-btn:hover { transform: translateY(-1px); }
.rx-btn--white, .rx-btn--white:hover { background: #fff; color: var(--rx-navy); }
.rx-btn--white { border: 1px solid var(--rx-border-strong); box-shadow: var(--rx-sh-xs); }
.rx-btn--blue, .rx-btn--blue:hover { background: var(--rx-blue); color: #fff; }
.rx-btn--blue { box-shadow: var(--rx-sh-brand); }
.rx-btn--ghost-dark, .rx-btn--ghost-dark:hover { background: transparent; color: #fff; }
.rx-btn--ghost-dark { border: 1.5px solid color-mix(in srgb, #fff 55%, transparent); }
.rx-btn .rx-ic { width: 1.1em; height: 1.1em; }
.rx-btn .rx-arrow { transition: transform .2s var(--rx-ease-out); }
.rx-btn:hover .rx-arrow { transform: translateX(3px); }
[dir="rtl"] .rx-arrow, [dir="rtl"] .rx-flip { scale: -1 1; }

.rx-tlink { display: inline-flex; align-items: center; gap: .4em; color: var(--rx-blue); font-weight: 700; text-decoration: none; }
.rx-tlink:hover { color: var(--rx-blue); text-decoration: underline; text-underline-offset: 3px; }
.rx-tlink .rx-ic { transition: transform .2s var(--rx-ease-out); }
.rx-tlink:hover .rx-ic { transform: translateX(3px); }
[dir="rtl"] .rx-tlink .rx-ic { scale: -1 1; }

/* Etiqueta VISIBLE de UI ilustrativa (siempre fuera de aria-hidden). */
.rx-sample { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--rx-f-body); color: var(--rx-muted); background: #fff; border: 1px solid var(--rx-border); padding: 6px 10px; border-radius: 9999px; box-shadow: var(--rx-sh-xs); white-space: nowrap; }
.rx-sample::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rx-peri); }
.rx-on-dark .rx-sample { background: transparent; color: var(--rx-grey); border-color: var(--rx-border-dark); box-shadow: none; }

/* La Lente: el icono oficial COMPLETO dentro de un disco blanco. La sombra va en el disco, nunca en el icono;
   el icono nunca se recorta, gira, recolorea ni anima. */
.rx-lens { --s: 32px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px color-mix(in srgb, #0E065B 18%, transparent); }
.rx-lens img { width: 64%; height: auto; display: block; }

/* ═════════ Cabecera (clara, sólida: sin blur ni transparencias detrás del logo) ═════════ */
.rx-header { position: sticky; top: 0; z-index: 200; background: var(--rx-bg); border-block-end: 1px solid var(--rx-border); }
@supports (animation-timeline: scroll()) {
    .rx-header { border-block-end-color: transparent; animation: rx-hdr linear both; animation-timeline: scroll(); animation-range: 0 64px; }
    @keyframes rx-hdr { to { border-block-end-color: var(--rx-border); box-shadow: var(--rx-sh-sm); } }
}
.rx-hdr-in { height: var(--rx-nav-h); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.rx-logo { display: block; padding: 8px 0; flex: none; }
.rx-logo img { height: 36px; width: auto; display: block; }
.rx-nav { display: flex; align-items: center; gap: 2px; }
.rx-hdr-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.rx-nav-a, .rx-dd > summary { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 9999px; font: 600 15px/1 var(--rx-f-body); color: var(--rx-ink); text-decoration: none; cursor: pointer; list-style: none; transition: background .15s; white-space: nowrap; }
.rx-nav-a:hover { color: var(--rx-ink); }
.rx-dd > summary::-webkit-details-marker { display: none; }
.rx-nav-a:hover, .rx-dd > summary:hover, .rx-dd[open] > summary { background: var(--rx-sunken); }
.rx-dd { position: relative; }
.rx-dd .rx-chev { width: 14px; height: 14px; transition: transform .2s; }
.rx-dd[open] .rx-chev { transform: rotate(180deg); }
.rx-menu, .rx-mega { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; background: #fff; border: 1px solid var(--rx-border); border-radius: 20px; box-shadow: var(--rx-sh-lg); padding: 10px; min-width: 240px; z-index: 210; animation: rx-dd-in .18s var(--rx-ease-out); }
@keyframes rx-dd-in { from { opacity: 0; transform: translateY(-6px); } }
.rx-menu a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--rx-ink); font: 500 15px/1.3 var(--rx-f-body); }
.rx-menu a:hover { background: var(--rx-bg); color: var(--rx-ink); }
.rx-mega { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; width: min(740px, 92vw); padding: 14px; inset-inline-start: -12px; }
.rx-mega-h { font: 700 11px/1 var(--rx-f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--rx-muted); padding: 10px 12px 8px; margin: 0; }
:lang(ar) .rx-mega-h, :lang(hi) .rx-mega-h { letter-spacing: 0; text-transform: none; font-size: 13px; }
.rx-mega-a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--rx-ink); }
.rx-mega-a:hover { background: var(--rx-bg); color: var(--rx-ink); }
.rx-mega-a b { display: block; font: 700 15px/1.3 var(--rx-f-body); }
.rx-mega-a small { display: block; color: var(--rx-muted); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.rx-mega-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--rx-g-tile); border: 1px solid var(--rx-border); display: grid; place-items: center; color: var(--rx-blue); flex: none; }
.rx-mega-ic svg { width: 18px; height: 18px; }
.rx-mega-res { background: var(--rx-bg); border-radius: 16px; padding: 4px; }
.rx-mega-res a.rx-plain { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--rx-ink); font: 500 15px/1.3 var(--rx-f-body); }
.rx-mega-res a.rx-plain:hover { background: #fff; }
.rx-mega-promo { margin: 8px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--rx-border); display: grid; gap: 6px; text-decoration: none; }
.rx-mega-promo b { color: var(--rx-ink); font: 600 16px/1.25 var(--rx-f-display); }
.rx-mega-promo span { font-size: 13px; color: var(--rx-muted); line-height: 1.4; }
.rx-login { font-weight: 600; }

/* Selector de idioma (LanguageSwitcher Variant="light|dark") */
.rx-header .lang-picker--light .lang-picker-trigger { height: 42px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--rx-border-strong); background: #fff; color: var(--rx-ink); font: 600 14px/1 var(--rx-f-body); }
.rx-footer .lang-picker--dark .lang-picker-trigger { height: 40px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--rx-border-dark); background: transparent; color: #fff; font: 600 14px/1 var(--rx-f-body); }
.rx-footer .lang-picker--dark .lang-picker-globe { color: var(--rx-sky); }
/* Sin blur ni transparencias (regla del sitio): el menú del idioma es sólido. */
.rx-site .lang-picker--light .lang-picker-menu, .rx-site .lang-picker--dark .lang-picker-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; border: 1px solid var(--rx-border); border-radius: 16px; box-shadow: var(--rx-sh-lg); }
.rx-site .lang-picker--light .lang-picker-item, .rx-site .lang-picker--dark .lang-picker-item { color: var(--rx-ink); }

/* Botón «subir» del sitio público: sólido, con los tokens de marca. */
.rx-site .rx-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; color: var(--rx-navy); border: 1px solid var(--rx-border-strong); box-shadow: var(--rx-sh-md); }

/* Menú móvil */
.rx-mob { display: none; }
.rx-mob > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--rx-border-strong); font: 700 15px/1 var(--rx-f-body); color: var(--rx-ink); cursor: pointer; background: #fff; }
.rx-mob > summary::-webkit-details-marker { display: none; }
.rx-mob-panel { position: fixed; inset: var(--rx-nav-h) 0 auto; max-height: calc(100svh - var(--rx-nav-h)); overflow: auto; background: #fff; border-top: 1px solid var(--rx-border); box-shadow: var(--rx-sh-lg); padding: 12px var(--rx-gutter) calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 4px; }
/* Con el menú móvil abierto, los lanzadores flotantes (chat, volver arriba) tapaban sus últimas opciones. */
body:has(.rx-mob[open]) :is(#rexenda-chat-widget, #scrollTopBtn) { display: none; }
.rx-mob-panel details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; font: 700 16px/1.2 var(--rx-f-body); color: var(--rx-ink); border-bottom: 1px solid var(--rx-border); cursor: pointer; }
.rx-mob-panel details > summary::-webkit-details-marker { display: none; }
.rx-mob-panel details > summary .rx-ic { transition: transform .2s; }
.rx-mob-panel details[open] > summary .rx-ic { transform: rotate(180deg); }
.rx-mob-panel details a, .rx-mob-panel > a.rx-mob-link { display: block; padding: 12px 4px; text-decoration: none; color: var(--rx-ink); font: 500 16px/1.3 var(--rx-f-body); }
.rx-mob-panel > a.rx-mob-link { font-weight: 700; border-bottom: 1px solid var(--rx-border); }
.rx-mob-ctas { display: grid; gap: 10px; margin-top: 12px; }
.rx-mob-ctas .rx-btn { width: 100%; }
.rx-mob-lang { padding: 12px 0 0; }

/* ═════════ Pie ═════════ */
.rx-footer { background: var(--rx-dark-deep); color: var(--rx-grey); padding-block: 72px 32px; }
.rx-ft-grid { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 36px 28px; }
.rx-ft-brand { display: grid; gap: 18px; align-content: start; }
.rx-ft-brand img { width: 132px; height: auto; display: block; }
.rx-ft-brand p { font-size: 15px; line-height: 1.55; max-width: 290px; color: var(--rx-grey); margin: 0; }
.rx-ft-social { display: flex; gap: 10px; }
.rx-ft-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rx-border-dark); display: grid; place-items: center; color: #fff; }
.rx-ft-social svg { width: 16px; height: 16px; }
.rx-ft-col h2 { font: 700 12px/1.2 var(--rx-f-body); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
:lang(ar) .rx-ft-col h2, :lang(hi) .rx-ft-col h2 { letter-spacing: 0; text-transform: none; font-size: 14px; }
.rx-ft-col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rx-ft-col a { font-size: 15px; text-decoration: none; color: var(--rx-grey); }
.rx-ft-col a:hover { color: #fff; text-decoration: underline; }
/* Los lanzadores flotantes viven SIEMPRE abajo a la derecha (también en árabe): la última fila les deja
   ese hueco (padding-right físico) para que nada quede debajo de la burbuja del chat. */
.rx-ft-bot { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 24px; padding-right: 104px; border-top: 1px solid var(--rx-border-dark); font-size: 13px; }
.rx-ft-bot p { color: var(--rx-grey); margin: 0; }

/* ═════════ Responsive (al final del archivo: decide el orden) ═════════ */
@media (max-width: 1279px) {
    .rx-nav .rx-nav-a--wide { display: none; }
}
@media (max-width: 1023px) {
    :root { --rx-nav-h: 64px; }
    .rx-nav, .rx-hdr-end .rx-login, .rx-hdr-end > .rx-btn { display: none; }
    .rx-logo img { height: 32px; }
    .rx-mob { display: block; }
    .rx-ft-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
    .rx-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    /* En móvil la última fila se apila: le basta con dejar libre la columna de los lanzadores (≈72 px). */
    .rx-ft-bot { padding-right: 80px; }
    .rx-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
    /* Cabecera en móvil: logo, idioma (sólo el globo) y Menú caben en 360 px. */
    .rx-hdr-in { gap: 10px; }
    .rx-logo img { height: 30px; }
    .rx-header .lang-picker--light .lang-picker-label { display: none; }
    .rx-header .lang-picker--light .lang-picker-trigger { padding: 0 10px; }
}
@media (max-width: 380px) {
    /* 320–380 px: el botón de menú se queda en el icono (su nombre accesible sigue en aria-label); con la
       palabra «Menú» (más larga en árabe o hindi) la cabecera no cabía y la página se desplazaba de lado. */
    .rx-mob-txt { display: none; }
    .rx-mob > summary { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .rx-site *, .rx-site *::before, .rx-site *::after { animation: none !important; transition-duration: 0s !important; }
    .rx-site .rx-header { border-block-end-color: var(--rx-border); }
}