/* ============================================================================
   LX-SITE — Cabecera + Footer UNIFICADOS (mismo diseño que la home).
   Se aplica a las paginas publicas de contenido (Partners, FAQ, Guia practica,
   Contacto y legales, ...). La HOME conserva su propio bloque #lx inline.
   Scopeado a `.lx` (envuelve SOLO cabecera y footer, ambos con fondo propio);
   por eso `.lx` NO pinta el fondo de la pagina (las de contenido son claras).
   Fuente unica de diseno: pages/home.php. Si cambia la home, sincronizar aqui.
   ========================================================================== */
.lx{
  --ink:#0D1031; --magenta:#AE419C; --magenta-h:#BC58AA; --magenta-p:#943785;
  --cyan:#6ECAE4; --line:#DAD8E0; --dark-text:#0D1031;
  --on-dark:rgba(255,255,255,.78); --muted-d:rgba(255,255,255,.72);
  --on-dark-3:rgba(255,255,255,.62); --on-dark-4:rgba(255,255,255,.45);
  font-family:'Montserrat',system-ui,sans-serif;color:#fff;text-align:left;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
.lx img{max-width:100%;display:block}
.lx a{text-decoration:none;color:inherit}
.lx h1,.lx h2,.lx h3,.lx h4,.lx b,.lx strong{font-weight:500}
.lx .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* ---- Botones del catalogo (los que usa el chrome) ---- */
.lx .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;height:46px;padding:0 24px;font-weight:500;font-size:14px;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s;border:1px solid transparent;white-space:nowrap}
.lx .nav .btn{height:40px;padding:0 20px;font-size:13px}
.lx .btn-magenta,.lx .btn-magenta:focus,.lx .btn-magenta:focus-visible{background:var(--magenta)!important;border-color:var(--magenta)!important;color:#fff!important}
.lx .btn-magenta:hover{background:var(--magenta-p)!important;border-color:var(--magenta-p)!important;color:#fff!important;opacity:1!important}
.lx .btn-magenta:active{background:var(--magenta-p)!important;border-color:var(--magenta-p)!important;color:#fff!important}
.lx .btn-ghost,.lx .btn-ghost:focus,.lx .btn-ghost:focus-visible{background:transparent!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.lx .btn-ghost:hover,.lx .btn-ghost:active{background:transparent!important;border-color:var(--cyan)!important;color:var(--cyan)!important;opacity:1!important}
.lx .lx-loginbtn{gap:7px;border-color:rgba(255,255,255,.55)!important;color:#fff!important}
.lx .lx-loginbtn:hover,.lx .lx-loginbtn:active{border-color:var(--cyan)!important;color:var(--cyan)!important}
.lx .lx-login-ico{flex:0 0 auto}
.lx a:focus-visible,.lx button:focus-visible,.lx .btn:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.lx ::selection{background:var(--magenta);color:#fff}

/* ---- Botones de marca para el CONTENIDO de las paginas unificadas (fuera del
   chrome .lx). !important para vencer el `.btn` global de index.css (borde azul
   noche + negrita) y el `a:hover{color:#353f4f!important}` de pink-theme.
   .lxbtn--magenta (primario) · --ghost (secundario sobre oscuro) · --outline (sobre claro). */
/* padding con !important: paginas como partners tienen un reset `#lxp *{padding:0}`
   con especificidad de id que, sin !important, deja el boton con padding 0 (texto
   pegado a los bordes). El !important gana a cualquier regla sin !important. */
.lxbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 32px!important;border-radius:6px;border:1px solid transparent;font-family:'Montserrat',system-ui,sans-serif;font-weight:500;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .16s,border-color .16s,color .16s}
.lxbtn--magenta,.lxbtn--magenta:link,.lxbtn--magenta:visited,.lxbtn--magenta:focus{background:#AE419C!important;border-color:#AE419C!important;color:#fff!important}
.lxbtn--magenta:hover,.lxbtn--magenta:active{background:#943785!important;border-color:#943785!important;color:#fff!important}
.lxbtn--ghost,.lxbtn--ghost:link,.lxbtn--ghost:visited,.lxbtn--ghost:focus{background:transparent!important;border-color:rgba(255,255,255,.55)!important;color:#fff!important}
.lxbtn--ghost:hover,.lxbtn--ghost:active{border-color:#6ECAE4!important;color:#6ECAE4!important}
.lxbtn--outline,.lxbtn--outline:link,.lxbtn--outline:visited,.lxbtn--outline:focus{background:#fff!important;border-color:#DAD8E0!important;color:#0D1031!important}
.lxbtn--outline:hover,.lxbtn--outline:active{background:#ECEBF0!important;border-color:#0D1031!important;color:#0D1031!important}

/* ---- Cabecera ---- */
/* Fondo SOLIDO azul noche: en paginas claras un fondo semitransparente + blur
   dejaba pasar el claro y se veia como un velo. Aqui debe ser #0D1031 puro. */
.lx .nav{display:block;position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.10)}
.lx .nav-in{display:flex;align-items:center;gap:32px;height:76px;padding:0 clamp(16px,3vw,40px)}
.lx .brand{display:flex;align-items:center;flex:0 0 auto}
.lx .brand img{height:32px;width:auto;filter:brightness(0) invert(1)}
.lx .nav-links{display:flex;gap:22px;margin-left:8px;flex-shrink:0}
.lx .nav-links a{font-size:13px;color:var(--on-dark);font-weight:300;white-space:nowrap;transition:color .16s}
.lx .nav-links a:hover,.lx .nav-links a:focus{color:var(--cyan)!important}
.lx .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lx .langsel{position:relative}
.lx .langseg{display:inline-flex;align-items:center;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:6px;overflow:hidden}
.lx .langseg-opt{display:inline-flex;align-items:center;height:100%;padding:0 12px;font-size:12px;font-weight:500;letter-spacing:.5px;color:rgba(255,255,255,.70)!important;transition:.16s}
.lx .langseg-opt:hover{color:#fff!important}
.lx .langseg-opt.on{background:var(--magenta);color:#fff!important}
.lx .langseg-opt+.langseg-opt{border-left:1px solid rgba(255,255,255,.16)}
.lx .navtoggle{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;line-height:1}
.lx .mobile-menu{display:none;flex-direction:column;gap:4px;padding:10px clamp(16px,3vw,40px) 18px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.10)}
.lx .mobile-menu a{color:var(--on-dark);padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
.lx .mobile-menu.open{display:flex}
.lx .mm-langs{display:flex;gap:8px;padding:12px 0}
.lx .mm-langs a{border:1px solid rgba(255,255,255,.20);border-radius:6px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--on-dark)}
.lx .mm-langs a.on{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* ---- Footer ---- */
/* Footer SOLIDO azul noche (nunca rgba/blur: sobre paginas claras un fondo
   semitransparente deja pasar el claro y crea "velo"). Mismo criterio que .lx .nav. */
.lx .foot{background:#0D1031;color:var(--muted-d);padding:clamp(18px,6vw,46px) 0 14px;border-top:1px solid rgba(255,255,255,.14);text-align:left}
.lx .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.lx .foot h3{color:var(--on-dark-4);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;margin-bottom:12px}
.lx .foot a{display:block;color:var(--on-dark);font-size:13px;font-weight:300;padding:2px 0;transition:color .16s}
.lx .foot a:hover,.lx .foot a:focus{color:var(--cyan)!important}
.lx .foot .copy{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--on-dark-4);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---- Responsive ---- */
@media(max-width:980px){
  .lx .nav-links,.lx .langsel,.lx #lx-login{display:none}
  .lx .navtoggle{display:block}
  .lx .foot-grid{grid-template-columns:1fr;gap:34px}
}