/* ══════════════════════════════════════════════════════════════════════════
   CAPA 17 · UNIFICACION DE SHELL EN PAGINAS SATELITE · 5 sep 2026
   ─────────────────────────────────────────────────────────────────────────
   Cada salida bajo outputs/ traia su propia cabecera y su propio pie,
   escritos a mano dentro del archivo, con dos familias de clases distintas
   (tf-p-* y rl-shell-*) y una paleta propia: navy #1E2D3D en el header, un
   mast casi negro (#08111B) y un CTA ambar #D9941A que el producto ya no
   usa. Abrir una figura en una pestana nueva sacaba al lector del producto.

   Esta hoja NO reescribe el marcado: mapea las dos familias de clases sobre
   los mismos valores medidos en la cabecera y el pie de index.html, para que
   el shell de un satelite sea el shell del sitio. La inyecta
   assets/js/satellite-shell-2026-09-05.js, que ademas completa la
   navegacion, anade el selector ES/EN y sincroniza el modo.

   Retirar el unico <script> de un archivo de outputs/ revierte esta pasada
   entera en ese archivo y no toca nada mas. No modifica ninguna figura,
   ningun dato, ningun umbral: solo el cromo alrededor.

   Valores medidos en index.html (1440px):
     header  67px alto, borde inferior 1px rgba(255,255,255,.07)
     row     max-width 1560px, gutter clamp(20px,2.1vw,40px)
     logo    IBM Plex Sans 700 18px / -0.02em, em en --sat-panel
     nav     Barlow 500 14.6px / 0.02em, padding 0 0 3px, subrayado 1px
     ES/EN   pastilla 34px, borde rgba(255,255,255,.18), botones 11.5px/600
     CTA     pastilla 34px, IBM Plex Sans 600 12.5px, versal, borde acento
     footer  wordmark Barlow Condensed 700 19px, pie 11.9px versal .16em
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §1 · Tokens del shell, por modo ──────────────────────────────────────
   Mismos tres modos que el sitio. El satelite hereda el modo guardado en
   localStorage (recolab.mood) via el atributo data-sat-mood, escrito por el
   script. Los tokens solo alcanzan al cromo: el papel de la figura sigue
   siendo claro en los tres modos, que es el contrato declarado del sistema.

   REVISION 5 sep 2026 (congelado de UI): los tres modos comparten ahora el
   MISMO navy en cabecera y pie -- #1d2d3d, el navy institucional de la home --
   y el MISMO azul secundario en el bloque introductorio -- #2b4159. Antes de
   esta revision el modo night pintaba la cabecera en #050a10 y el pie en
   #131f29: la cabecera se leia como negra y no coincidia con el pie. Los
   valores de este bloque son los mismos que declara la capa 19,
   assets/css/ui-freeze-2026-09-05.css, para las cuatro paginas del sitio: el
   producto tiene una sola familia navy y ninguna variante por salida.
   Piso verificable: L >= 0.010 y canal azul 12 pasos por encima del rojo.                       */
:root{
  --sat-shell:#1d2d3d;
  --sat-foot:#1d2d3d;
  --sat-mast:#2b4159;
  --sat-accent:#5980a6;
  --sat-panel:#5980a6;
  --sat-teal:#4fb3a5;
  --sat-ink:#ffffff;
  --sat-dim:rgba(255,255,255,0.72);
  --sat-rule:rgba(255,255,255,0.07);
  --sat-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sat-shellfont:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sat-display:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --sat-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sat-measure:1560px;
  --sat-gutter:clamp(20px,2.1vw,40px);
  --sat-pill:999px;
  --sat-fast:.16s ease;
}
html[data-sat-mood="dark"]{
  --sat-shell:#1d2d3d; --sat-foot:#1d2d3d; --sat-mast:#2b4159;
  --sat-accent:#7ea6cc; --sat-panel:#7ea6cc;
}
html[data-sat-mood="night"]{
  --sat-shell:#1d2d3d; --sat-foot:#1d2d3d; --sat-mast:#2b4159;
  --sat-accent:#6d93b8; --sat-panel:#6d93b8; --sat-teal:#3f9d91;
}


/* ── §1b · Suelo navy dentro del propio archivo · 5 sep 2026 ──────────────
   Ademas del cromo, cada salida traia fondos casi negros escritos en su
   <style> local. Se corrigen aqui, sobre el mismo piso que el resto del
   producto (L >= 0.010 y azul por encima del rojo), y solo donde el valor
   es un FONDO. No se toca ni una tinta, ni un trazo de capa, ni un color de
   dato: --tf-ink (#0E1418), los colores de los circleMarker (#121212), el
   trazo por defecto del geojson (#0b1220) y las tintas #0d1c1a / #0c1a18 /
   #1A1612 se quedan exactamente como estan, porque son tinta o son dato.

     --tf-analytical  #08111B  L=0.0037  usado SOLO como background (12 usos)
     .tf-p-stage      #0B1622  L=0.0053  papel del area de mapa
     .tf-titleband    hereda de --tf-analytical con !important
   La leyenda del mapa de Aliyah llevaba rgba(18,18,18,.92) escrito en un
   atributo style. No se corrige desde aqui: una regla para .tf-map-legend
   alcanzaria tambien a las leyendas BLANCAS de los otros dos mapas de flujo
   y les rompería el contraste. Se corrige el literal en esos dos archivos,
   que es donde vive.                                                     */
:root{
  --tf-analytical:#1a2b3d;
}
.tf-p-stage{
  background:#16273a;
}
.tf-titleband{
  background:#1a2b3d!important;
  background-image:none!important;
}
.tf-footer{
  background-image:none!important;
}

/* ── §2 · Cabecera ────────────────────────────────────────────────────────
   Las dos familias reciben exactamente la misma regla. El estilo original
   vive en un <style> del propio archivo y varias de sus declaraciones son
   igual de especificas, asi que aqui se marca la propiedad para que gane
   sin depender del orden de insercion.                                    */
.tf-p-header,
.rl-shell-head{
  background:var(--sat-shell,#1d2d3d)!important;
  color:var(--sat-dim,rgba(255,255,255,0.72));
  border-bottom:1px solid var(--sat-rule,rgba(255,255,255,0.07))!important;
  box-shadow:none;
}
.tf-p-nav,
.rl-shell-nav{
  box-sizing:border-box!important;
  max-width:var(--sat-measure,1560px)!important;
  margin:0 auto!important;
  padding:0 var(--sat-gutter,clamp(20px,2.1vw,40px))!important;
  min-height:66px; height:auto!important;
  display:flex!important; align-items:center!important;
  gap:20px!important;
}

/* Logotipo. Mismo peso, mismo cuerpo y mismo ajuste optico que en la home;
   el em del guion toma el paso luminoso del acento, como alli.            */
.tf-p-brand,
.rl-shell-brand{
  display:inline-flex!important; align-items:center; gap:14px;
  text-decoration:none; flex:0 0 auto; min-width:0;
}
.tf-p-brand .m,
.rl-shell-brand .m{
  font-family:var(--sat-ui)!important;
  font-weight:700!important; font-size:18px!important;
  letter-spacing:-0.02em!important; line-height:1!important;
  color:var(--sat-ink,#ffffff)!important; text-transform:none!important;
}
.tf-p-brand .m em,
.rl-shell-brand .m em{
  font-style:normal!important; color:var(--sat-panel,#6d93b8)!important;
}

/* La bajada del logotipo pasa a ser la miga de orientacion del producto,
   igual que .rlx-hdr-ctx en las paginas interiores del sitio. */
.tf-p-brand .t,
.rl-shell-brand .t,
.rl-sat-ctx{
  font-family:var(--sat-shellfont)!important;
  font-weight:500!important; font-size:12.4px!important;
  letter-spacing:0.02em!important; line-height:1.2!important;
  text-transform:none!important;
  color:rgba(255,255,255,0.58)!important;
  padding-left:14px; border-left:1px solid rgba(255,255,255,0.16);
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  max-width:none; flex:0 1 auto; min-width:0;
}
/* Estado calculado por el script: igual que en el sitio, el rotulo de
   orientacion se retira cuando su texto no entra entero. Un rotulo
   cortado no es una version corta del rotulo. */
.tf-p-header[data-sat-ctx="0"] .tf-p-brand .t,
.rl-shell-head[data-sat-ctx="0"] .rl-shell-brand .t{ display:none!important; }

/* Navegacion. Barlow 500 / 14.6px, subrayado de 1px al pasar, igual que
   .rlx-nav a. La ruta activa se marca con aria-current, no con una clase. */
.tf-p-links,
.rl-shell-links{
  display:flex!important; align-items:center; gap:14px!important;
  margin-left:auto; min-width:0; flex-wrap:nowrap;
}
.tf-p-links a,
.rl-shell-links a{
  font-family:var(--sat-shellfont)!important;
  font-weight:500!important; font-size:14.6px!important;
  letter-spacing:0.02em!important; line-height:1!important;
  color:rgba(255,255,255,0.78)!important;
  text-decoration:none!important;
  padding:0 0 3px!important;
  border-bottom:1px solid transparent!important;
  transition:color var(--sat-fast),border-color var(--sat-fast);
  white-space:nowrap;
}
.tf-p-links a:hover,.tf-p-links a:focus-visible,
.rl-shell-links a:hover,.rl-shell-links a:focus-visible{
  color:#fff!important; border-bottom-color:var(--sat-accent,#6d93b8)!important;
}
.tf-p-links a[aria-current="page"],
.rl-shell-links a[aria-current="page"]{
  color:#fff!important; border-bottom-color:var(--sat-accent,#6d93b8)!important;
}

/* Grupo de utilidades: ES/EN y CTA, centrados en la altura de la fila por
   align-items del contenedor flex, no por un desplazamiento propio.       */
.rl-sat-end,
.rl-shell-end{
  display:flex!important; align-items:center!important;
  gap:12px!important; flex:0 0 auto; margin-left:0;
}

/* Selector de idioma. Copia exacta de .rlx-lang. */
.tf-p-header .rlx-lang,
.rl-shell-head .rlx-lang,
.rl-sat-lang{
  display:inline-flex!important; align-items:center!important;
  height:34px!important; padding:1px!important;
  border:1px solid rgba(255,255,255,0.18)!important;
  border-radius:var(--sat-pill,999px)!important; overflow:hidden;
  background:transparent!important; flex:0 0 auto;
}
.tf-p-header .rlx-lang button,
.rl-shell-head .rlx-lang button,
.rl-sat-lang button{
  appearance:none; -webkit-appearance:none;
  border:0!important; background:transparent!important;
  height:30px!important; min-height:30px; padding:0 8px!important;
  font-family:var(--sat-ui)!important; font-weight:600!important;
  font-size:11.5px!important; letter-spacing:0.04em!important;
  line-height:1.35!important;
  color:rgba(255,255,255,0.72)!important;
  border-radius:var(--sat-pill,999px)!important; cursor:pointer;
}
.tf-p-header .rlx-lang button[aria-pressed="true"],
.rl-shell-head .rlx-lang button[aria-pressed="true"],
.rl-sat-lang button[aria-pressed="true"]{
  background:#fff!important; color:var(--sat-shell,#1d2d3d)!important;
}

/* CTA. El ambar #D9941A desaparece: la home usa una pastilla perfilada con
   el acento y ese es el unico CTA del producto en esta posicion. */
.tf-p-cta,
.rl-shell-head .rlx-contact,
.rl-sat-cta{
  display:inline-flex!important; align-items:center!important;
  height:34px!important; padding:0 12px!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#fff!important; text-decoration:none!important;
  font-family:var(--sat-ui)!important; font-weight:600!important;
  font-size:12.5px!important; letter-spacing:0.06em!important;
  line-height:1!important; text-transform:uppercase!important;
  border-width:1px!important; border-style:solid!important;
  border-color:var(--sat-accent,#6d93b8)!important;
  border-radius:var(--sat-pill,999px)!important;
  box-sizing:border-box!important;
  white-space:nowrap; flex:0 0 auto;
}
.tf-p-cta:hover,.tf-p-cta:focus-visible,
.rl-shell-head .rlx-contact:hover,.rl-shell-head .rlx-contact:focus-visible,
.rl-sat-cta:hover,.rl-sat-cta:focus-visible{
  background-color:var(--sat-accent,#6d93b8)!important; color:#fff!important;
}

/* ── §3 · Bloque introductorio ────────────────────────────────────────────
   Era #08111B (tf-p-mast) y #12263A (rl-shell-mast): en los dos casos mas
   oscuro que el header y que el pie, y el primero practicamente negro.
   Pasa al azul oscuro secundario del producto, por encima de los dos.     */
.tf-p-mast,
.rl-shell-mast{
  background:var(--sat-mast,#2b4159)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,0.08)!important;
}
.tf-p-mast .in,
.rl-shell-mast .in{
  box-sizing:border-box!important;
  max-width:var(--sat-measure,1560px)!important;
  margin:0 auto!important;
  padding-left:var(--sat-gutter,clamp(20px,2.1vw,40px))!important;
  padding-right:var(--sat-gutter,clamp(20px,2.1vw,40px))!important;
}
.tf-p-mast .eye,
.rl-shell-mast .eye{
  font-family:var(--sat-mono)!important;
  font-size:11.25px!important; font-weight:600!important;
  letter-spacing:0.18em!important; text-transform:uppercase!important;
  color:var(--sat-panel,#6d93b8)!important;
}
.tf-p-mast h1,
.rl-shell-mast h1{ color:#fff!important; }
.tf-p-mast p,
.rl-shell-mast p{ color:rgba(255,255,255,0.78)!important; }
.tf-p-meta span,
.rl-shell-meta span{
  border-color:rgba(255,255,255,0.22)!important;
  color:rgba(255,255,255,0.80)!important;
}
.tf-p-meta b,
.rl-shell-meta b{ color:var(--sat-panel,#6d93b8)!important; }

/* ── §4 · Volver al proyecto ──────────────────────────────────────────────
   Se mantiene, pero como control integrado en la jerarquia del producto:
   una pastilla perfilada bajo el contenido, no un sustituto del header.   */
.tf-p-back-wrap,
.rl-shell-backwrap{
  box-sizing:border-box!important;
  max-width:var(--sat-measure,1560px)!important;
  width:auto!important;
  margin:0 auto!important;
  padding:18px var(--sat-gutter,clamp(20px,2.1vw,40px)) 26px!important;
}
.tf-p-back,
.rl-shell-back{
  display:inline-flex!important; align-items:center; gap:8px;
  font-family:var(--sat-ui)!important; font-weight:600!important;
  font-size:12.5px!important; letter-spacing:0.04em!important;
  line-height:1!important;
  color:#1d2d3d!important; text-decoration:none!important;
  border:1px solid rgba(29,45,61,0.30)!important;
  border-radius:var(--sat-pill,999px)!important;
  padding:10px 16px!important; background:transparent!important;
  transition:border-color var(--sat-fast),color var(--sat-fast);
}
.tf-p-back:hover,.tf-p-back:focus-visible,
.rl-shell-back:hover,.rl-shell-back:focus-visible{
  border-color:#1d2d3d!important; color:#0f1c26!important;
}

/* ── §5 · Pie ─────────────────────────────────────────────────────────────
   Mismos valores que .rlx-ftr: fondo del pie del sitio, wordmark en Barlow
   Condensed 700 / 19px y linea inferior en versal de 11.9px con .16em.    */
.tf-p-footer,
.rl-shell-foot{
  background:var(--sat-foot,#1d2d3d)!important;
  color:var(--sat-dim,rgba(255,255,255,0.72))!important;
  padding:20px 0 0!important; margin-top:0!important;
}
.tf-p-footer .in,
.rl-shell-foot .in{
  box-sizing:border-box!important;
  max-width:var(--sat-measure,1560px)!important;
  margin:0 auto!important;
  padding:14px var(--sat-gutter,clamp(20px,2.1vw,40px)) 18px!important;
}
.tf-p-footer .nm,
.rl-shell-foot .nm{
  font-family:var(--sat-display)!important;
  font-weight:700!important; font-size:19px!important;
  letter-spacing:-0.02em!important; line-height:1.1!important;
  color:#fff!important;
}
.tf-p-footer .nm em,
.rl-shell-foot .nm em{ font-style:normal!important; color:var(--sat-accent,#6d93b8)!important; }
.tf-p-footer .au,
.rl-shell-foot .au{
  font-family:var(--sat-display)!important;
  font-weight:600!important; font-size:18px!important;
  color:#fff!important; line-height:1.2!important;
}
.tf-p-footer .ro,
.rl-shell-foot .ro{
  font-family:var(--sat-shellfont)!important;
  font-size:12.65px!important; line-height:1.5!important;
  color:rgba(255,255,255,0.60)!important; margin-top:3px!important;
}
.tf-p-footer .bot,
.rl-shell-foot .bot{
  box-sizing:border-box!important;
  max-width:var(--sat-measure,1560px)!important;
  margin:0 auto!important;
  padding:14px var(--sat-gutter,clamp(20px,2.1vw,40px))!important;
  border-top:1px solid rgba(255,255,255,0.14)!important;
  font-family:var(--sat-shellfont)!important;
  font-size:11.9px!important; font-weight:400!important;
  letter-spacing:0.16em!important; line-height:1.6!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,0.56)!important;
  text-align:center!important;
}

/* ── §6 · Responsive ──────────────────────────────────────────────────────
   El satelite no tiene cajon lateral, asi que por debajo de 1080 la
   navegacion se retira y quedan logotipo, miga, ES/EN y CTA. Los tres
   controles comparten el mismo eje vertical por align-items, nunca por un
   desplazamiento absoluto atado a una resolucion.                          */
@media (max-width:1080px){
  .tf-p-links,.rl-shell-links{ display:none!important; }
  .rl-sat-end,.rl-shell-end{ margin-left:auto!important; }
}
@media (max-width:760px){
  .tf-p-brand .t,.rl-shell-brand .t,.rl-sat-ctx{ display:none!important; }
  .tf-p-nav,.rl-shell-nav{ min-height:60px; gap:12px!important; }
  .tf-p-cta,.rl-shell-head .rlx-contact,.rl-sat-cta{
    font-size:11.5px!important; padding:0 10px!important;
  }
}
@media (max-width:430px){
  .tf-p-nav,.rl-shell-nav{ gap:10px!important; padding:0 16px!important; }
  .tf-p-brand .m,.rl-shell-brand .m{ font-size:16.5px!important; }
  .tf-p-footer .in,.rl-shell-foot .in{ flex-direction:column; gap:14px!important; }
}

/* ── §7 · Modo incrustado ─────────────────────────────────────────────────
   Cuando la salida se sirve dentro de un iframe del sitio, todo el cromo
   desaparece. La regla original ya cubria header y footer; se anaden los
   elementos que esta pasada introduce para que no reaparezca ninguno.     */
html[data-embed="1"] .tf-p-header,
html[data-embed="1"] .tf-p-footer,
html[data-embed="1"] .tf-p-back-wrap,
html[data-embed="1"] .rl-shell-head,
html[data-embed="1"] .rl-shell-foot,
html[data-embed="1"] .rl-shell-backwrap,
html[data-embed="1"] .rl-sat-end,
html[data-embed="1"] .rl-sat-lang{ display:none!important; }