/* Lexia · landing v1.6.1 · estilos. Tokens, componentes, escenas y animaciones: ver ESPECIFICACION_TECNICA.md */
/* Una sola luz sobre la noche: retícula fina, brillo que sigue al cursor, vidrio líquido. Mirada única (oscura), colores explícitos. */
:root{
  color-scheme: dark;
  --bg0:#07061A; --bg1:#0D0B1F; --bg2:#15132A;
  --iris:#6449F5; --iris70:#4A2DC1; --iris40:#9B9CFD; --iris30:#BDC0FD; --iris10:#F2F3FF;
  --azure:#3A77FF; --azure30:#88D0FF; --mist:#C9EEFF; --orq:#B983ED; --lav:#E9D3FD;
  --tx:#FFFFFF; --tx2:rgba(255,255,255,.70); --tx3:rgba(255,255,255,.50); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --okI:#24A148; --ok:#6FDC8C; --warnI:#E0A800; --warn:#F1C21B; --crit:#FA4D56;
  --tx1:rgba(255,255,255,.82); --s1:rgba(255,255,255,.04); --s2:rgba(255,255,255,.09); --s3:rgba(255,255,255,.13); --s4:rgba(255,255,255,.35);
  --hl:rgba(100,73,245,.18); --hlb:rgba(155,156,253,.4); --acc-ana:#88D0FF; --g1e:#C9EEFF; --g2e:#E9D3FD;
  --hero-bg:radial-gradient(120% 90% at 50% 0%,#130F3A 0%,#07061A 70%); --au1:rgba(150,140,255,.95); --au1b:rgba(100,73,245,.55); --au2:rgba(120,150,255,.95); --au2b:rgba(58,119,255,.5); --au3:rgba(185,131,237,.28); --core:rgba(7,6,26,.55); --spot:rgba(155,156,253,.16);
  --h1g:linear-gradient(90deg,#9B9CFD,#B983ED 55%,#E9D3FD); --glowk:1; --film-bg:#0D0B1F; --film-glow:rgba(100,73,245,.2); --lxa:#17133D; --lxb:#0E1838; --lxg:rgba(100,73,245,.4);
  /* Sistema de luz (estilo Apple): la luz nace de lo que entrega Lexia, desde abajo; los contenedores reciben luz desde arriba y un filo de luz en el borde superior */
  --halo-i:rgba(100,73,245,.5); --halo-a:rgba(58,119,255,.42); --halo-top:rgba(155,156,253,.14); --rim:inset 0 1px 0 rgba(255,255,255,.08);
  --disp:'Funnel Display','Segoe UI',system-ui,sans-serif; --sans:'Funnel Sans','Segoe UI',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --ease:cubic-bezier(.45,0,.1,1); --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg0);color:var(--tx);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg0)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
.wrap{position:relative;max-width:1440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(72px,env(safe-area-inset-left,0px));padding-right:max(72px,env(safe-area-inset-right,0px))}}
h1,h2,h3{margin:0;text-wrap:balance}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--iris30)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--iris)}
.h2{font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.2vw,62px);line-height:1.03;letter-spacing:-.024em}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--tx2);margin:0;text-wrap:pretty;max-width:56ch}
.mono{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:12px;background:var(--iris);color:var(--tx);font:600 16px var(--sans);border:0;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .11s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--iris70)}
.btn:active{transform:translateY(1px)}
.btn.sm{height:42px;padding:0 18px;font-size:14.5px;border-radius:10px}
.btn.ghost{background:var(--s1);border:1px solid var(--line2);color:var(--tx)}
.btn.ghost:hover{background:var(--s2)}
.lnk{font-weight:500;color:var(--tx);text-decoration:underline;text-decoration-color:var(--s4);text-underline-offset:4px}
.lnk:hover{text-decoration-color:var(--tx)}
:focus-visible{outline:2px solid var(--iris40);outline-offset:3px;border-radius:8px}
.ic{display:inline-flex;flex:none;--ic-ink:var(--tx);--ic-acc:var(--iris40)}
.sec-pad{padding-block:clamp(90px,11vw,150px)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--line2);background:var(--s1);font:500 11px var(--mono);letter-spacing:.06em;color:var(--tx2)}
.rb{display:inline-block;width:10px;height:10px;border-radius:3px;transform:rotate(45deg);flex:none}
.rb.full{background:var(--okI)}
.rb.half{border:2px solid var(--iris40);background:linear-gradient(90deg,var(--iris40) 50%,transparent 50%)}
.rb.dash{border:2px dashed var(--s4)}
/* Retícula de fondo (como Giga) */
.grid-lines{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(8,1fr);-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.grid-lines i{border-left:1px solid var(--line);transform-origin:top}
.intro .grid-lines i{animation:drawy 1.6s var(--out) both}
.intro .grid-lines i:nth-child(2){animation-delay:.05s}.intro .grid-lines i:nth-child(3){animation-delay:.1s}.intro .grid-lines i:nth-child(4){animation-delay:.15s}.intro .grid-lines i:nth-child(5){animation-delay:.2s}.intro .grid-lines i:nth-child(6){animation-delay:.25s}.intro .grid-lines i:nth-child(7){animation-delay:.3s}.intro .grid-lines i:nth-child(8){animation-delay:.35s}
@keyframes drawy{from{transform:scaleY(0)}}
/* Vidrio líquido */
.lg{background:linear-gradient(150deg,var(--s3),var(--s1) 45%,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 var(--line),0 30px 80px -40px rgba(100,73,245,.6)}
/* Marco de las pantallas: vidrio neutro, sin brillo de color (las pantallas hablan solas) */
.lgf{position:relative;padding:10px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -50px rgba(0,0,0,.7)}
.lgf img{border-radius:22px;width:100%;height:auto}
/* Pantallas del dashboard en vivo (HTML real, nítido a cualquier tamaño) */
.dframe{position:relative;aspect-ratio:1440/900;border-radius:22px;overflow:hidden;background:var(--bg1)}
.dframe iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none}

/* ---------- Botones del UI System de Lexia (copiados tal cual de assets_dashboard/botones/botones.css) ---------- */
/* Lexia · Botones (UI System, fase 2). CSS sin dependencias, listo para pegar.
   Fuente: librería de Figma «Lexia · UI System» (componentes Botón y Botón Lexia · Anillo) y tokens de
   Marca/03_UI_System/tokens/lexia-theme.css. Tema claro = tokens oficiales. Tema Noche = PROPUESTA PROVISIONAL
   (branding aún no define roles oscuros en el manual). Nada está aprobado hasta que Alex lo vea.
   Tipografía: IBM Plex Sans 500 (cárgala tú, p. ej. Google Fonts). Sin sombras: la forma «cruce» (radio solo arriba-izquierda
   y abajo-derecha) es la firma del sistema. Las clases .is-hover / .is-activo / .is-foco solo sirven para la lámina de muestra. */

/* ---------------------------------------------------------------- tokens */
:root, .lx-claro {
  /* forma, alturas y espacios */
  --lx-radio-s: 8px;                       /* cruce S: 8px 0 8px 0 */
  --lx-boton-h-s: 32px; --lx-boton-h-m: 40px; --lx-boton-h-l: 48px;
  --lx-boton-pad-s: 12px; --lx-boton-pad-m: 16px; --lx-boton-pad-l: 24px;
  --lx-boton-gap: 8px; --lx-boton-icono: 16px;
  /* tipografía */
  --lx-fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lx-boton-texto: 500 14px/20px var(--lx-fuente);      /* S y M */
  --lx-boton-texto-l: 500 16px/24px var(--lx-fuente);    /* L */
  /* movimiento */
  --lx-dur-rapida: 110ms;                  /* duration/fast-02: cambio de estado */
  --lx-dur-moderada: 240ms;                /* duration/moderate-02: brillo del Anillo */
  --lx-dur-carga: 700ms;                   /* duration/slow-02: una vuelta del indicador */
  --lx-dur-anillo: 2400ms;                 /* duration/anillo-lexia: recorrido del borde */
  --lx-curva-productiva: cubic-bezier(0.2, 0, 0.38, 0.9);
  /* color · claro (oficial) */
  --lx-b-principal: #6449F5; --lx-b-principal-hover: #4A2DC1; --lx-b-principal-activo: #341593; --lx-b-principal-texto: #FFFFFF;
  --lx-b-secundario: #F2F3FF; --lx-b-secundario-hover: #DBDDFF; --lx-b-secundario-activo: #BDC0FD;
  --lx-b-terciario-hover: #F2F3FF; --lx-b-terciario-activo: #DBDDFF;
  --lx-b-texto-interactivo: #4A2DC1; --lx-b-icono-interactivo: #4A2DC1;
  --lx-b-deshabilitado: #E0E0E0; --lx-b-deshabilitado-texto: #8D8D8D;
  --lx-b-carga-pista: #E0E0E0;
  --lx-foco: #6449F5;                      /* anillo de foco: 2 px a 2 px del borde */
  /* Anillo (acciones de IA). El degradado es fijo: Azure 50 → Iris 60 → Orquídea 40 */
  --lx-azure-50: #3A77FF; --lx-iris-60: #6449F5; --lx-orquidea-40: #B983ED;
  --lx-anillo-degradado: linear-gradient(90deg, var(--lx-azure-50), var(--lx-iris-60) 50%, var(--lx-orquidea-40));
  --lx-anillo-cara: #FFFFFF; --lx-anillo-texto: #161616;
  --lx-anillo-brillo: 0.45; --lx-anillo-brillo-hover: 0.6;
  --lx-anillo-deshabilitado: #C6C6C6; --lx-anillo-deshabilitado-texto: #8D8D8D;
}
.lx-noche {
  /* color · Noche (provisional; fondo de página #0D0B1F, capa #15132A) */
  --lx-b-principal: #6449F5; --lx-b-principal-hover: #4A2DC1; --lx-b-principal-activo: #341593; --lx-b-principal-texto: #FFFFFF;
  --lx-b-secundario: rgba(100, 73, 245, 0.20); --lx-b-secundario-hover: rgba(100, 73, 245, 0.30); --lx-b-secundario-activo: rgba(100, 73, 245, 0.40);
  --lx-b-terciario-hover: rgba(100, 73, 245, 0.20); --lx-b-terciario-activo: rgba(100, 73, 245, 0.30);
  --lx-b-texto-interactivo: #C9C0FF; --lx-b-icono-interactivo: #9B9CFD;
  --lx-b-deshabilitado: #2A2846; --lx-b-deshabilitado-texto: #6F6F6F;
  --lx-b-carga-pista: #2A2846;
  --lx-foco: #9B9CFD;
  --lx-anillo-cara: #15132A; --lx-anillo-texto: #F4F4F4;
  --lx-anillo-deshabilitado: #3D3A5C; --lx-anillo-deshabilitado-texto: #6F6F6F;
}

/* ---------------------------------------------------------------- botón */
.lx-boton {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--lx-boton-gap);
  height: var(--lx-boton-h-m); padding: 0 var(--lx-boton-pad-m); margin: 0;
  border: 0; border-radius: var(--lx-radio-s) 0 var(--lx-radio-s) 0;
  font: var(--lx-boton-texto); letter-spacing: 0; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--lx-dur-rapida) var(--lx-curva-productiva), color var(--lx-dur-rapida) var(--lx-curva-productiva);
}
.lx-boton svg { width: var(--lx-boton-icono); height: var(--lx-boton-icono); flex: none; display: block; }
.lx-boton--s { height: var(--lx-boton-h-s); padding: 0 var(--lx-boton-pad-s); }
.lx-boton--l { height: var(--lx-boton-h-l); padding: 0 var(--lx-boton-pad-l); font: var(--lx-boton-texto-l); }

.lx-boton--principal { background: var(--lx-b-principal); color: var(--lx-b-principal-texto); }
.lx-boton--principal:hover, .lx-boton--principal.is-hover { background: var(--lx-b-principal-hover); }
.lx-boton--principal:active, .lx-boton--principal.is-activo { background: var(--lx-b-principal-activo); }

.lx-boton--secundario { background: var(--lx-b-secundario); color: var(--lx-b-texto-interactivo); }
.lx-boton--secundario svg { color: var(--lx-b-icono-interactivo); }
.lx-boton--secundario:hover, .lx-boton--secundario.is-hover { background: var(--lx-b-secundario-hover); }
.lx-boton--secundario:active, .lx-boton--secundario.is-activo { background: var(--lx-b-secundario-activo); }

.lx-boton--terciario { background: transparent; color: var(--lx-b-texto-interactivo); }
.lx-boton--terciario svg { color: var(--lx-b-icono-interactivo); }
.lx-boton--terciario:hover, .lx-boton--terciario.is-hover { background: var(--lx-b-terciario-hover); }
.lx-boton--terciario:active, .lx-boton--terciario.is-activo { background: var(--lx-b-terciario-activo); }

.lx-boton:focus { outline: none; }
.lx-boton:focus-visible, .lx-boton.is-foco { outline: 2px solid var(--lx-foco); outline-offset: 2px; }

.lx-boton:disabled, .lx-boton[aria-disabled="true"] { background: var(--lx-b-deshabilitado); color: var(--lx-b-deshabilitado-texto); cursor: not-allowed; }
.lx-boton:disabled svg, .lx-boton[aria-disabled="true"] svg { color: var(--lx-b-deshabilitado-texto); }
.lx-boton--terciario:disabled, .lx-boton--terciario[aria-disabled="true"] { background: transparent; }

/* cargando: mantiene el ancho, el indicador reemplaza al ícono, la etiqueta pasa a gerundio («Generando…»), sin clic */
.lx-boton[aria-busy="true"] { cursor: progress; pointer-events: none; }
.lx-carga { animation: lx-carga-gira var(--lx-dur-carga) linear infinite; }
.lx-carga .pista { fill: none; stroke: var(--lx-b-carga-pista); stroke-width: 2; }
.lx-carga .arco { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lx-boton--principal .lx-carga .pista { stroke: currentColor; stroke-opacity: 0.3; }
@keyframes lx-carga-gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Botón Lexia · Anillo
   Solo acciones de IA («Procesar con Lexia», «Generar con Lexia», «Validar con Lexia»). Uno por pantalla, nunca como
   principal genérico. Es el único brillo del sistema. Alto fijo 40 px. */
@property --lx-anillo-angulo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lx-anillo {
  box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--lx-boton-gap);
  height: var(--lx-boton-h-m); padding: 0 16px 0 14px; margin: 0; border: 0; background: none;
  border-radius: var(--lx-radio-s) 0 var(--lx-radio-s) 0;
  font: var(--lx-boton-texto); color: var(--lx-anillo-texto); white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* cara: fondo de capa + borde de 2 px en degradado */
.lx-anillo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; box-sizing: border-box;
  border: 2px solid transparent; border-radius: inherit;
  background: linear-gradient(var(--lx-anillo-cara), var(--lx-anillo-cara)) padding-box, var(--lx-anillo-degradado) border-box;
}
/* brillo: el mismo degradado, desenfocado detrás del borde */
.lx-anillo::before {
  content: ''; position: absolute; inset: -3px; z-index: -2; border-radius: inherit;
  background: var(--lx-anillo-degradado); filter: blur(11px); opacity: var(--lx-anillo-brillo);
  transition: opacity var(--lx-dur-moderada) var(--lx-curva-productiva);
}
.lx-anillo:hover::before, .lx-anillo.is-hover::before { opacity: var(--lx-anillo-brillo-hover); }
.lx-anillo:focus { outline: none; }
.lx-anillo:focus-visible, .lx-anillo.is-foco { outline: 2px solid var(--lx-foco); outline-offset: 2px; }
.lx-anillo__rombo {
  width: 12px; height: 12px; flex: none; background: var(--lx-anillo-degradado);
  clip-path: path('M7.108 0.459L11.541 4.892A1.567 1.567 0 0 1 11.541 7.108L7.108 11.541A1.567 1.567 0 0 1 4.892 11.541L0.459 7.108A1.567 1.567 0 0 1 0.459 4.892L4.892 0.459A1.567 1.567 0 0 1 7.108 0.459Z');
}
/* procesando: el degradado recorre el borde en bucle de 2,4 s; la etiqueta cambia a «Lexia está procesando…» */
.lx-anillo[aria-busy="true"] { cursor: progress; pointer-events: none; }
.lx-anillo[aria-busy="true"]::after {
  background: linear-gradient(var(--lx-anillo-cara), var(--lx-anillo-cara)) padding-box,
    conic-gradient(from var(--lx-anillo-angulo), var(--lx-azure-50), var(--lx-iris-60), var(--lx-orquidea-40), var(--lx-iris-60), var(--lx-azure-50)) border-box;
  animation: lx-anillo-recorre var(--lx-dur-anillo) linear infinite;
}
.lx-anillo[aria-busy="true"]::before {
  background: conic-gradient(from var(--lx-anillo-angulo), var(--lx-azure-50), var(--lx-iris-60), var(--lx-orquidea-40), var(--lx-iris-60), var(--lx-azure-50));
  animation: lx-anillo-recorre var(--lx-dur-anillo) linear infinite;
}
@keyframes lx-anillo-recorre { to { --lx-anillo-angulo: 360deg; } }
/* deshabilitado (PROPUESTA: aún no está en la librería de Figma): sin brillo ni degradado */
.lx-anillo:disabled, .lx-anillo[aria-disabled="true"] { color: var(--lx-anillo-deshabilitado-texto); cursor: not-allowed; }
.lx-anillo:disabled::before, .lx-anillo[aria-disabled="true"]::before { display: none; }
.lx-anillo:disabled::after, .lx-anillo[aria-disabled="true"]::after {
  background: linear-gradient(var(--lx-anillo-cara), var(--lx-anillo-cara)) padding-box, linear-gradient(var(--lx-anillo-deshabilitado), var(--lx-anillo-deshabilitado)) border-box;
}
.lx-anillo:disabled .lx-anillo__rombo, .lx-anillo[aria-disabled="true"] .lx-anillo__rombo { background: var(--lx-anillo-deshabilitado); }

/* movimiento reducido: el indicador y el Anillo quedan quietos (el texto ya dice qué pasa) */
@media (prefers-reduced-motion: reduce) {
  .lx-boton, .lx-anillo::before { transition: none; }
  .lx-carga, .lx-anillo[aria-busy="true"]::after, .lx-anillo[aria-busy="true"]::before { animation: none; }
}

/* La landing es oscura: aplica los valores Noche del UI System a toda la página. */
:root{--lx-b-principal:#6449F5;--lx-b-principal-hover:#4A2DC1;--lx-b-principal-activo:#341593;--lx-b-principal-texto:#FFFFFF;--lx-b-secundario:rgba(100,73,245,.20);--lx-b-secundario-hover:rgba(100,73,245,.30);--lx-b-secundario-activo:rgba(100,73,245,.40);--lx-b-terciario-hover:rgba(100,73,245,.20);--lx-b-terciario-activo:rgba(100,73,245,.30);--lx-b-texto-interactivo:#C9C0FF;--lx-b-icono-interactivo:#9B9CFD;--lx-b-deshabilitado:#2A2846;--lx-b-deshabilitado-texto:#6F6F6F;--lx-b-carga-pista:#2A2846;--lx-foco:#9B9CFD;--lx-anillo-cara:#15132A;--lx-anillo-texto:#F4F4F4;--lx-anillo-deshabilitado:#3D3A5C;--lx-anillo-deshabilitado-texto:#6F6F6F}

/* ---------- Versión clara: neutros del manual (#F4F4F4 página, #FFFFFF tarjetas) y botones con los tokens oficiales ---------- */
html.claro{
  color-scheme:light;
  --bg0:#F4F4F4; --bg1:#FFFFFF; --bg2:#FFFFFF;
  --tx:#161433; --tx1:#393939; --tx2:#525252; --tx3:#6F6F6F; --line:#E0E0E0; --line2:#C6C6C6;
  --s1:rgba(22,20,51,.03); --s2:rgba(22,20,51,.06); --s3:rgba(22,20,51,.10); --s4:rgba(22,20,51,.30);
  --iris30:#4A2DC1; --iris40:#6449F5; --mist:#1A47B0; --ok:#198038; --warn:#8E6A00; --crit:#DA1E28;
  --hl:rgba(100,73,245,.08); --hlb:rgba(100,73,245,.35); --acc-ana:#3A77FF; --g1e:#7DB4FF; --g2e:#C59CF0;
  --hero-bg:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#F4F4F4 70%); --au1:rgba(100,73,245,.55); --au1b:rgba(185,131,237,.32); --au2:rgba(58,119,255,.55); --au2b:rgba(100,73,245,.28); --au3:rgba(185,131,237,.22); --core:rgba(244,244,244,.6); --spot:rgba(100,73,245,.09);
  --h1g:linear-gradient(90deg,#6449F5,#A472D4); --glowk:.45; --film-bg:#FFFFFF; --film-glow:rgba(100,73,245,.07); --lxa:#F2F3FF; --lxb:#E7F7FF; --lxg:rgba(185,131,237,.28);
  --halo-i:rgba(100,73,245,.24); --halo-a:rgba(58,119,255,.2); --halo-top:rgba(100,73,245,.06); --rim:inset 0 1px 0 #fff,0 1px 2px rgba(22,20,51,.04),0 28px 56px -36px rgba(22,20,51,.16);
  --lx-b-secundario:#F2F3FF;--lx-b-secundario-hover:#DBDDFF;--lx-b-secundario-activo:#BDC0FD;--lx-b-terciario-hover:#F2F3FF;--lx-b-terciario-activo:#DBDDFF;
  --lx-b-texto-interactivo:#4A2DC1;--lx-b-icono-interactivo:#4A2DC1;--lx-b-deshabilitado:#E0E0E0;--lx-b-deshabilitado-texto:#8D8D8D;--lx-b-carga-pista:#E0E0E0;--lx-foco:#6449F5;
  --lx-anillo-cara:#FFFFFF;--lx-anillo-texto:#161616;--lx-anillo-deshabilitado:#C6C6C6;--lx-anillo-deshabilitado-texto:#8D8D8D;
}
/* Vidrio líquido en claro: cuerpo casi transparente que deja ver el color de atrás, canto especular y lente en el borde */
html.claro .lg,html.claro .lgf{background:linear-gradient(140deg,rgba(255,255,255,.58),rgba(255,255,255,.2) 55%,rgba(255,255,255,.42));-webkit-backdrop-filter:blur(14px) saturate(190%);backdrop-filter:blur(14px) saturate(190%);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1.5px 0 #fff,inset 1.5px 0 0 rgba(255,255,255,.75),inset 0 -1.5px 0 rgba(100,73,245,.14),inset -1.5px 0 0 rgba(58,119,255,.12),inset 0 0 26px rgba(255,255,255,.5),0 2px 6px rgba(22,20,51,.05),0 30px 60px -34px rgba(60,40,160,.32)}
html.claro .nav{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(18px) saturate(190%);backdrop-filter:blur(18px) saturate(190%);border-color:rgba(255,255,255,.85);box-shadow:inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(100,73,245,.1),0 14px 40px -20px rgba(60,40,160,.25)}
/* marco de pantalla en claro: canto de vidrio con refracción (cielo arriba a la izquierda, orquídea abajo a la derecha) y brillo especular */
html.claro .lgf{background:linear-gradient(135deg,rgba(201,238,255,.75),rgba(255,255,255,.35) 32%,rgba(255,255,255,.2) 62%,rgba(233,211,253,.75));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 0 #fff,inset 2px 0 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(185,131,237,.35),inset -2px 0 0 rgba(58,119,255,.22),inset 0 0 0 1px rgba(100,73,245,.08),0 3px 8px rgba(22,20,51,.06),0 40px 80px -44px rgba(60,40,160,.4)}
html.claro .lgf>.dframe,html.claro .lgf>.fview,html.claro .lgf>.screen{box-shadow:0 0 0 1px rgba(100,73,245,.12),0 1px 3px rgba(22,20,51,.08)}
/* color suave detrás de los vidrios para que el vidrio se lea (solo en claro) */
html.claro .prod::before,html.claro .pcard .glow,html.claro .qcard::before,html.claro .vault::before,html.claro .close .orb2{opacity:.45}
html.claro .al.w{background:#FCF4D6;color:#684E00;border-color:rgba(178,134,0,.3)}
html.claro .al.c{background:#FFF1F1;color:#A2191F;border-color:rgba(218,30,40,.3)}
html.claro .al.none{background:#DEFBE6;color:#0E6027;border-color:rgba(36,161,72,.3)}
html.claro .err{color:#DA1E28}
html.claro .seal .badge::before{background:linear-gradient(135deg,rgba(100,73,245,.14),rgba(58,119,255,.06));border-color:rgba(100,73,245,.3);box-shadow:none}
html.claro .close h2 em{background-image:linear-gradient(90deg,#6449F5,#A472D4)}
html.claro .pglow{opacity:.35}
html.claro .pillwrap:focus-within .pglow,html.claro .pillwrap:hover .pglow{opacity:.55}
html.claro .pill{box-shadow:0 20px 50px -30px rgba(22,20,51,.25)}
html.claro .lx-boton--principal{color:#fff}
/* selector de tema */
.theme{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:0;border-radius:11px;background:none;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--tx2);transition:background .2s,color .2s}
.theme:hover{background:var(--s2);color:var(--tx)}
@media (max-width:720px){.theme span:last-child{display:none}.theme{padding:0 9px}}
.cta-short{display:none}
@media (max-width:480px){.cta-long{display:none}.cta-short{display:inline}.nav .logo{margin-right:4px}.nav{gap:2px}}
/* ---------- Navegación · vidrio líquido ---------- */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 14px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-width:1336px;margin:0 auto;height:60px;display:flex;align-items:center;gap:6px;padding:0 9px 0 18px;border-radius:18px;
  background:linear-gradient(135deg,rgba(40,36,74,.55),rgba(13,11,31,.38));-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 40px -16px rgba(0,0,0,.7);transition:transform .5s var(--out),opacity .5s}
.nav .logo{display:block;height:26px;width:76px;margin-right:16px}
.nav .links{display:flex;gap:2px}
.nav .links a,.nav .login{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:11px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tx2);transition:background .2s,color .2s}
.nav .links a:hover,.nav .login:hover{background:var(--s2);color:var(--tx)}
.nav .links a.cur{color:var(--tx);background:var(--s2)}
.nav .sp{flex:1}
/* entre 721 y 1100 px los enlaces quedan solo con su ícono; el texto se oculta a la vista pero no a los lectores de pantalla */
@media (max-width:1100px){.nav .links a span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:720px){.nav .links{display:none}.nav .login span{display:none}.nav .login{padding:0 9px}.nav{padding-left:14px}.nav .lx-boton{padding:0 12px}}

/* ---------- Índice lateral (como Giga) ---------- */
.rail{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;text-decoration:none;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:transparent;transition:color .3s}
.rail a i{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);border:1.5px solid var(--s4);transition:background .3s,border-color .3s,width .3s,height .3s}
.rail a.on i{background:var(--iris40);border-color:var(--iris40);width:10px;height:10px}
.rail:hover a{color:var(--tx3)}
.rail:hover a.on{color:var(--tx)}
@media (max-width:1180px){.rail{display:none}}

/* ---------- 1 · Hero ---------- */
/* Centrado, sin el símbolo grande: una atmósfera de luz (Azure · Iris · Orquídea) que respira y sigue al cursor */
.hero{position:relative;min-height:max(760px,100vh);overflow:hidden;isolation:isolate;background:var(--hero-bg)}
.hero .aura{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero .aura i{position:absolute;border-radius:50%;filter:blur(90px)}
/* Dos focos fuertes pegados a los bordes (como Syncore) y el centro más oscuro para que el titular respire */
.hero .aura .a1{left:-22%;top:-8%;width:54%;height:116%;filter:blur(70px);background:radial-gradient(closest-side,var(--au1),var(--au1b) 48%,transparent);animation:drift1 16s ease-in-out infinite alternate}
.hero .aura .a2{right:-26%;top:-14%;width:58%;height:124%;filter:blur(70px);background:radial-gradient(closest-side,var(--au2),var(--au2b) 48%,transparent);animation:drift2 19s ease-in-out infinite alternate}
.hero .aura .a3{left:30%;bottom:-44%;width:40%;height:60%;background:radial-gradient(closest-side,var(--au3),transparent);animation:drift1 22s ease-in-out infinite alternate-reverse}
.hero .aura::after{content:"";position:absolute;inset:0;background:radial-gradient(34% 52% at 50% 46%,var(--core),transparent 80%)}
@keyframes drift1{to{transform:translate(6%,4%) scale(1.08)}}
@keyframes drift2{to{transform:translate(-7%,6%) scale(1.06)}}
.intro .hero .aura{animation:ignite 2.4s var(--out) .2s both}
@keyframes ignite{from{opacity:0;transform:scale(.9)}}
.hero .spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(560px circle at var(--hx,50%) var(--hy,40%),var(--spot),transparent 60%)}
.hero .veil{position:absolute;inset:auto 0 0;height:34%;z-index:-1;pointer-events:none;background:linear-gradient(transparent,var(--bg0))}
.hero .in{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding-block:150px 130px}
.hero .aura{bottom:auto;height:max(820px,110vh)}
.hero .ebc{display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--s1);font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .ebc::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--iris40)}
.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(46px,6.6vw,104px);line-height:.98;letter-spacing:-.034em;margin-top:28px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .l>span{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-image:var(--h1g)}
.intro .hero h1 .ln>span{animation:rise 1.1s var(--out) both}
.intro .hero h1 .t>span{animation-delay:.35s}
.intro .hero h1 .l>span{animation-delay:.5s}
@keyframes rise{from{transform:translateY(105%)}}
.intro .fadeup{animation:fadeup .9s var(--out) both}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
.hero .lead{margin:26px auto 0;max-width:44ch;text-align:center}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:38px}
.hero .trustrow{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:84px}
.hero .trustrow .lab{color:var(--tx3)}
.hero .trustrow .row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,5vw,72px)}
.hero .trustrow .row span{display:inline-flex;align-items:center;gap:10px;font:600 clamp(20px,2vw,26px)/1 var(--disp);letter-spacing:-.01em;color:var(--tx1)}
.hero .trustrow .row small{font:500 12px var(--sans);color:var(--tx3);letter-spacing:0}
.hero .who{margin-top:22px;font-size:14px;color:var(--tx3)}
.lab{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.frow{display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;font-size:15px;color:var(--tx2);border-top:1px solid transparent;border-bottom:1px solid transparent;transition:background .5s var(--ease),color .5s}
.frow.on{background:rgba(100,73,245,.18);border-color:rgba(155,156,253,.35);color:var(--tx);font-weight:600}
.frow .st{margin-left:auto;font:500 12px var(--mono)}
.ticker{position:absolute;left:0;right:0;bottom:0;height:64px;border-top:1px solid var(--line);display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker .tk{display:flex;gap:48px;white-space:nowrap;animation:marq 40s linear infinite;padding-left:48px}
.ticker .tk span{display:inline-flex;align-items:center;gap:10px;font:500 12.5px var(--mono);letter-spacing:.04em;color:var(--tx3)}
.ticker .tk b{color:var(--tx);font-weight:500}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 2 · Qué es Lexia ---------- */
.what .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px}
.prod{position:relative;overflow:hidden;border-radius:40px 8px 40px 8px;padding:40px;min-height:500px;background:var(--bg1);border:1px solid var(--line);isolation:isolate;transition:border-color .3s,transform .5s var(--out)}
.prod:hover{border-color:rgba(155,156,253,.35);transform:translateY(-4px)}
.prod::before{content:"";position:absolute;right:-6%;bottom:-24%;width:62%;height:62%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);transition:opacity .5s;opacity:.55}
.prod:hover::before{opacity:1}
.prod.rep{--glow:rgba(100,73,245,.35)}
.prod.ana{--glow:rgba(58,119,255,.32)}
.prod .tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font:600 13px var(--sans)}
.prod.rep .tag{background:rgba(100,73,245,.18);color:var(--iris30)}
.prod.ana .tag{background:rgba(58,119,255,.18);color:var(--mist)}
.prod h3{font-family:var(--disp);font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.015em;margin-top:22px;max-width:15ch}
.prod p{margin:14px 0 0;color:var(--tx2);font-size:16.5px;line-height:1.5;max-width:32ch}
.prod ul{list-style:none;padding:0;margin:26px 0 0;max-width:290px}
.prod li{display:flex;align-items:center;gap:12px;height:46px;border-top:1px solid var(--line);font-size:15px;color:var(--tx2)}
.prod .art{position:absolute;right:10px;bottom:4px;width:min(300px,46%);transition:transform .7s var(--out)}
.prod:hover .art{transform:translateY(-10px) scale(1.02)}
.regs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.reg{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--s1);font:600 14.5px var(--sans)}

/* ---------- 3 · Problema: tarjetas que se abren, como Giga; el «hoy» y el «con Lexia» se leen juntos, sin scroll fijo ---------- */
.prob{position:relative;background:var(--bg0)}
.prob .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.prob .q{font-family:var(--disp);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin:18px 0 0}
.prob .head .lead{max-width:36ch}
.gdeck{--gw:104px;--gg:14px;display:flex;gap:var(--gg);height:600px;margin-top:48px}
.gc{position:relative;flex:0 0 var(--gw);min-width:0;border-radius:36px 8px 36px 8px;background:var(--bg1);border:1px solid var(--line);overflow:hidden;isolation:isolate;box-shadow:var(--rim);transition:flex-grow .8s var(--out),flex-basis .8s var(--out),border-color .5s}
.gc.on{flex:1 1 0;border-color:var(--line2)}
.gc:not(.on):hover{border-color:var(--line2)}
.gtab{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:30px 0;background:none;border:0;color:var(--tx2);font:inherit;cursor:pointer;transition:opacity .3s,color .3s}
.gtab .n{font:500 12px var(--mono);letter-spacing:.12em;color:var(--tx3)}
.gtab .gt{writing-mode:vertical-rl;transform:rotate(180deg);font:600 18px var(--disp);letter-spacing:-.005em;white-space:nowrap}
.gc:not(.on) .gtab:hover{color:var(--tx)}
.gc.on .gtab{opacity:0;pointer-events:none}
.gtab:focus-visible{outline:2px solid var(--iris40);outline-offset:-6px;border-radius:inherit}
.gbody{position:absolute;top:0;bottom:0;left:0;width:var(--ow,1000px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px;padding:16px;opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity .3s,transform .6s var(--out)}
.gc.on .gbody{opacity:1;transform:none;pointer-events:auto;transition-delay:.22s,.18s}
.ghoy{display:flex;flex-direction:column;min-width:0;padding:30px 16px 8px 30px}
.glx{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 30px 26px;border-radius:28px 6px 28px 6px;background:linear-gradient(165deg,var(--lxa),var(--lxb));border:1px solid var(--hlb);overflow:hidden;isolation:isolate;box-shadow:var(--rim)}
/* una sola luz: nace del panel de Lexia, abajo y al centro, y se enciende cuando la tarjeta se abre */
.glx::before{content:"";position:absolute;left:8%;right:8%;bottom:-42%;height:72%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-i),transparent);filter:blur(30px);opacity:0;transition:opacity 1.2s .35s}
.gc.on .glx::before{opacity:1}
.ghoy h3,.glx h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.3vw,36px);line-height:1.05;letter-spacing:-.02em;margin-top:18px;max-width:15ch}
.ghoy p,.glx p{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--tx2);max-width:36ch}
.ghoy .gart{margin-top:auto;align-self:center;width:min(240px,78%);height:auto;animation:pfloat 7s ease-in-out infinite alternate}
.glx .mini{margin-top:auto}
.tagp{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.tagp.lxt{border-color:var(--hlb);color:var(--iris30)}
.tagp.lxt::before{content:"";width:7px;height:7px;margin-right:8px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#3A77FF,#B983ED)}
/* mini pantallas de la solución: las filas entran al abrir y luego se encienden en ciclo */
.mini{position:relative;z-index:1;width:100%;border-radius:22px 6px 22px 6px;padding:14px 18px;overflow:hidden}
.mini .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:14.5px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mini .mr{display:flex;align-items:center;gap:10px;height:40px;border-bottom:1px solid var(--line);font-size:14px;color:var(--tx1);opacity:0;transform:translateY(8px);transition:opacity .5s var(--out),transform .6s var(--out)}
.mini .mr:last-child{border:0}
.mini .mr .r{margin-left:auto;display:flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--ok)}
.mini .mr .m{font:500 12px var(--mono);color:var(--tx3);width:46px}
.gc.on .mini .mr{opacity:1;transform:none}
.gc.on .mini .mr:nth-child(2){transition-delay:.45s}.gc.on .mini .mr:nth-child(3){transition-delay:.55s}.gc.on .mini .mr:nth-child(4){transition-delay:.65s}.gc.on .mini .mr:nth-child(5){transition-delay:.75s}
@keyframes pfloat{to{translate:0 -12px}}
.mini::after{content:"";position:absolute;left:0;right:0;top:-45%;height:45%;background:linear-gradient(transparent,rgba(155,156,253,.14),transparent);pointer-events:none;opacity:0}
.gc.on .mini::after{opacity:1;animation:pscan 3.6s linear 1s infinite}
@keyframes pscan{to{transform:translateY(330%)}}
.gc.on .mini .mr{animation:prow 4.8s ease-in-out 1.2s infinite}
.gc.on .mini .mr .r .rb{animation:prb 4.8s ease-in-out 1.2s infinite}
.gc.on .mini .mr:nth-child(3),.gc.on .mini .mr:nth-child(3) .r .rb{animation-delay:2.4s}
.gc.on .mini .mr:nth-child(4),.gc.on .mini .mr:nth-child(4) .r .rb{animation-delay:3.6s}
.gc.on .mini .mr:nth-child(5),.gc.on .mini .mr:nth-child(5) .r .rb{animation-delay:4.8s}
@keyframes prow{0%,30%,100%{background:transparent}8%,22%{background:var(--hl)}}
@keyframes prb{0%,30%,100%{transform:rotate(45deg) scale(1)}12%{transform:rotate(45deg) scale(1.45)}}
/* Pista lateral (escritorio): al bajar, las tarjetas pasan de lado y un cable las recorre; cuando llega al panel «Con Lexia», lo conecta y lo enciende */
.gwire,.gn2,.gk2{display:none}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .prob.sec-pad{padding:0;height:420vh}
  .prob .sticky{position:sticky;top:0;height:100vh;min-height:760px;display:flex;flex-direction:column;justify-content:center;padding-top:64px;overflow:hidden}
  .prob .sticky>.wrap{width:100%}
  .prob .gdeck{--cw:min(1040px,72vw);--cg:150px;position:relative;width:max-content;height:min(590px,60vh);min-height:520px;gap:var(--cg);margin-top:34px;will-change:transform}
  .prob .gc,.prob .gc.on{flex:0 0 var(--cw);border-color:var(--line2)}
  .prob .gtab{display:none}
  .prob .gc .gbody{position:relative;width:auto;height:100%;opacity:1;transform:none;pointer-events:auto;padding:16px 16px 58px}
  .prob .mini .mr{height:36px}
  .prob .glx{padding:26px 28px 22px;transition:opacity .7s var(--out),filter .7s var(--out),border-color .7s}
  .prob .ghoy{padding-top:26px}
  /* antes de que llegue el cable el panel de Lexia espera apagado; al conectarse se enciende */
  .prob .gc:not(.on) .glx{opacity:.5;filter:saturate(.35);border-color:var(--line)}
  .gwire{display:block;position:absolute;left:0;top:0;z-index:4;height:100%;overflow:visible;pointer-events:none}
  .gwire path{fill:none;stroke-linecap:round}
  .gwire .bg{stroke:var(--line2);stroke-width:1.5}
  .gwire .br{stroke:var(--line2);stroke-width:1.5;transition:stroke .5s}
  .gwire .br.hit{stroke:#6449F5;stroke-width:2}
  .gwire .fg{stroke:url(#gwg);stroke-width:2.5;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 6px rgba(100,73,245,.55))}
  .gn2,.gk2{display:block;position:absolute;z-index:5;border-radius:3px;transform:rotate(45deg);pointer-events:none}
  .gn2{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--bg1);border:1.5px solid var(--s4);transition:background .5s,border-color .5s,box-shadow .5s}
  .gn2.hit{background:#6449F5;border-color:#6449F5;box-shadow:0 0 0 6px rgba(100,73,245,.16),0 0 18px rgba(100,73,245,.6)}
  .gk2{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--bg1);border:2px solid #9B9CFD;box-shadow:0 0 18px rgba(100,73,245,.7)}
}
@media (max-width:980px){
  .gdeck{flex-direction:column;height:auto}
  .gc,.gc.on{flex:none}
  .gtab{position:relative;inset:auto;width:100%;flex-direction:row;justify-content:flex-start;gap:16px;padding:22px 24px;text-align:left}
  .gtab .gt{writing-mode:horizontal-tb;transform:none;white-space:normal;font-size:18px}
  .gc.on .gtab{display:none}
  .gbody{position:relative;width:auto;display:none;grid-template-columns:minmax(0,1fr);opacity:1;transform:none}
  .gc.on .gbody{display:grid}
  .ghoy{padding:24px 14px 8px}
  .ghoy .gart{width:min(200px,60%);margin-top:18px}
  .glx{padding:24px 22px}
  .glx .mini{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){.mini .mr{opacity:1;transform:none}}

/* ---------- 3b · Lema ----------
   Texto con luz (manual 3.08): cada línea lleva el degradado de su pieza, horizontal y medido por línea; Tú = Iris→Azure→Mist, Lexia = Iris→Orquídea→Lavanda.
   Al bajar, cada palabra pasa de apagada a encendida. El texto de lectura no lleva luz (2.08): solo se aclara.
   Luz en rombo (manual 5.02, «no uses luz redonda»): rombos concéntricos del símbolo en la fórmula Encuentro (el lema tiene las dos partes), que suben desde el borde inferior como un horizonte. */
.lema{position:relative;height:240vh;background:var(--bg0)}
.lema .sticky{position:sticky;top:0;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-bottom:22vh}
.lema .wrap{width:100%;text-align:center}
.lm{font-family:var(--disp);font-weight:600;font-size:clamp(48px,8.4vw,136px);line-height:.98;letter-spacing:-.035em;margin:24px 0 0}
.lm .ln{display:block;width:fit-content;margin:0 auto}
.lm .w{display:inline-block;padding-bottom:.08em;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-repeat:no-repeat;background-size:var(--lw,100%) 100%;background-position:var(--lo,0px) 0}
.lm .tu .w{background-image:linear-gradient(90deg,#6449F5,#3A77FF 55%,#C9EEFF)}
.lm .lx .w{background-image:linear-gradient(90deg,#6449F5,#B983ED 55%,#E9D3FD)}
html.claro .lm .tu .w{background-image:linear-gradient(90deg,#6449F5,#3A77FF 62%,#7DB4FF)}
html.claro .lm .lx .w{background-image:linear-gradient(90deg,#6449F5,#B983ED 62%,#C59CF0)}
/* una línea de lectura, en voz baja: aparece cuando el lema ya está encendido */
.lmp{max-width:46ch;margin:32px auto 0;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--tx2);opacity:0;transform:translateY(8px);transition:opacity .8s var(--out),transform .8s var(--out)}
.lema.lit .lmp{opacity:1;transform:none}
.lema .w{opacity:.14;transition:opacity .5s var(--out)}
.lema .w.on{opacity:1}
.hz{position:absolute;left:50%;bottom:-16vh;z-index:-1;width:0;height:0;pointer-events:none;transform:translateY(calc((1 - var(--hz,0)) * 26vh));opacity:calc(.2 + var(--hz,0) * .8)}
.hz i{position:absolute;left:0;top:0;border-radius:16.6%;transform:translate(-50%,-50%) rotate(45deg)}
/* fórmula Encuentro (2.04), como el glow de las piezas: Azure a la izquierda, Orquídea a la derecha, Iris al centro.
   Los rombos están girados 45°: un degradado a 45° en el rombo corre de izquierda a derecha en pantalla. */
.hz .r1{width:min(680px,58vw);aspect-ratio:1;background:linear-gradient(45deg,rgba(58,119,255,.6) 12%,rgba(100,73,245,.56) 50%,rgba(185,131,237,.56) 88%);filter:blur(34px)}
.hz .r2{width:min(500px,42vw);aspect-ratio:1;background:linear-gradient(45deg,rgba(58,119,255,.62) 8%,rgba(100,73,245,.7) 50%,rgba(185,131,237,.6) 92%);filter:blur(22px)}
.hz .r3{width:min(320px,26vw);aspect-ratio:1;background:linear-gradient(45deg,rgba(126,119,254,.85),rgba(189,192,253,.9) 50%,rgba(126,119,254,.85));filter:blur(14px)}
html.claro .hz .r1{background:linear-gradient(45deg,rgba(58,119,255,.24) 12%,rgba(100,73,245,.24) 50%,rgba(185,131,237,.22) 88%)}
html.claro .hz .r2{background:linear-gradient(45deg,rgba(58,119,255,.24) 8%,rgba(100,73,245,.3) 50%,rgba(185,131,237,.26) 92%)}
html.claro .hz .r3{background:linear-gradient(45deg,rgba(100,73,245,.34),rgba(155,156,253,.34) 50%,rgba(100,73,245,.34))}
@media (max-width:980px),(prefers-reduced-motion:reduce){
  .lema{height:auto}
  .lema .sticky{position:relative;height:auto;min-height:0;padding-block:110px 140px}
  .lema .w{opacity:1}
  .lema .lmp{opacity:1;transform:none}
  .hz{transform:none;opacity:1;bottom:-14vw}
}
/* Grano del sistema gráfico (manual 5.02, intensidad 0,18): solo sobre las luces, nunca sobre el logo ni el texto.
   Va entre la luz y el contenido; en modo superposición solo se nota donde hay luz. */
.gr{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:200px 200px;mix-blend-mode:overlay;opacity:var(--grano,.5)}
html.claro .gr{--grano:.36}
/* el modo de mezcla necesita un fondo dentro de cada grupo aislado (un sticky también aísla) */
.lema .sticky,.close,.how .sticky,.ana{background:var(--bg0)}
/* la luz del lema se funde con la sección siguiente: sin corte */
.lema .sticky{-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}

/* ---------- Video de portada: ver css/video-portada.css ---------- */

/* ---------- 4 · Producto (pantalla real en vidrio líquido) ---------- */
.reveal{position:relative;overflow:hidden}
.reveal .bgl{display:none}
.reveal .cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px}
.rv{perspective:1800px;isolation:isolate}
/* luz de escenario bajo la pantalla, como un equipo sobre una mesa iluminada */
.rv::after{content:"";position:absolute;left:14%;right:14%;bottom:-70px;height:200px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-i),transparent);filter:blur(44px);opacity:.8;pointer-events:none}
.rv .lgf{transform-origin:50% 0;transform:rotateX(var(--rx,18deg)) scale(var(--sc,.9))}
.rv .tagd{position:absolute;left:28px;top:-14px;z-index:2;background:var(--bg2)}
/* Lista con vista previa: cada estado enfoca la pantalla y voltea la ficha de ejemplo */
.eq{display:grid;grid-template-columns:272px minmax(0,1fr);gap:44px;align-items:center}
.eql{display:flex;flex-direction:column;gap:6px}
.eqi{display:block;width:100%;text-align:left;background:none;border:0;border-radius:18px 4px 18px 4px;padding:16px 18px;color:var(--tx2);font:inherit;cursor:pointer;transition:background .4s,color .4s,box-shadow .4s}
.eqi:hover{color:var(--tx)}
.eqi .t{display:flex;align-items:center;gap:12px;font:600 16.5px var(--sans)}
.eqi .ct{margin-left:auto;font:500 12px var(--mono);color:var(--tx3)}
.eqi .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--out)}
.eqi .d>span{overflow:hidden;min-height:0}
.eqi .d i{display:block;font-style:normal;padding:8px 0 0 23px;font-size:14.5px;line-height:1.5;color:var(--tx2)}
.eqi[aria-selected=true]{background:var(--s1);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.eqi[aria-selected=true] .d{grid-template-rows:1fr}
.mk{display:inline-block;width:11px;height:11px;border-radius:3px;transform:rotate(45deg);flex:none}
.mk.acc{position:relative;border:2px solid #F1C21B;background:radial-gradient(circle,#F1C21B 0 0) center/4px 4px no-repeat}.mk.cur{border:2px solid #9B9CFD;background:linear-gradient(90deg,#9B9CFD 50%,transparent 50%)}
.mk.esp{border:2px solid #5AAEFD}.mk.ok{background:#42BE65}
html.claro .mk.acc{border-color:#B28600;background:radial-gradient(circle,#B28600 0 0) center/4px 4px no-repeat}html.claro .mk.cur{border-color:#6449F5;background:linear-gradient(90deg,#6449F5 50%,transparent 50%)}
html.claro .mk.esp{border-color:#3A77FF}html.claro .mk.ok{background:#24A148}
.eq .rv{margin-bottom:84px}
.ficha{position:absolute;right:-26px;top:calc(100% - 70px);z-index:3;width:300px;border-radius:24px 6px 24px 6px;perspective:900px}
.fin{padding:20px 22px;transform-origin:50% 50%;transition:transform .5s var(--out),opacity .5s var(--out)}
.fin.out{transform:rotateY(88deg);opacity:.2;transition:transform .24s cubic-bezier(.55,0,.8,.4),opacity .24s}
.fin.inn{transform:rotateY(-88deg);opacity:.2;transition:none}
.ficha .k{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.ficha .nm{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.01em}
.ficha .nm b{font:500 15px var(--mono)}
.ficha .rw{display:flex;justify-content:space-between;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.ficha .rw span:last-child{color:var(--tx);font-weight:500;text-align:right}
.ficha .who{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:500 12px var(--mono);background:rgba(155,156,253,.16);color:var(--iris30)}
.ficha .who.tu{background:rgba(241,194,27,.14);color:var(--warn)}

/* ---------- 5 · Cómo funciona: el scroll avanza el riel y controla lo que pasa dentro de cada pantalla ---------- */
.how{height:620vh}
.how .sticky{position:sticky;top:0;height:100vh;min-height:720px;overflow:hidden}
.how .bgl{position:absolute;inset:0;background:radial-gradient(36% 46% at 72% 62%,var(--halo-i),transparent 72%);opacity:.55}
.how .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;height:100%;padding-block:96px 44px}
/* riel con avance continuo */
.steps{position:relative;margin-top:30px;padding-left:34px}
.steps .rl{position:absolute;left:8px;top:22px;bottom:22px;width:2px;border-radius:1px;background:var(--line2)}
.steps .rf{position:absolute;left:8px;top:22px;width:2px;height:var(--fh,0px);border-radius:1px;background:linear-gradient(#3A77FF,#6449F5 55%,#B983ED)}
.steps .rk{position:absolute;left:9px;top:calc(22px + var(--fh,0px));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:3px;transform:rotate(45deg);background:var(--bg0);border:2px solid #6449F5;box-shadow:0 0 16px rgba(100,73,245,.55)}
.step{position:relative;display:block;width:100%;text-align:left;background:none;border:0;color:var(--tx3);padding:13px 0;font:500 20px var(--sans);cursor:pointer;transition:color .4s}
.step .row{display:flex;align-items:center;gap:14px}
.step .n{font:500 12px var(--mono);letter-spacing:.1em;width:26px}
.step .who{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);transition:background .4s,border-color .4s,color .4s}
.step .who.lx::before{content:"";width:6px;height:6px;border-radius:1.5px;transform:rotate(45deg);background:linear-gradient(135deg,#3A77FF,#B983ED)}
.step .sub{display:block;max-height:0;overflow:hidden;opacity:0;margin-left:40px;font:400 15px/1.5 var(--sans);color:var(--tx2);transition:max-height .6s var(--ease),opacity .6s var(--ease),margin .6s}
.step.on{color:var(--tx);font-weight:600}
.step.on .who{border-color:var(--hlb);background:var(--hl);color:var(--tx)}
.step.on .sub{max-height:90px;opacity:1;margin-top:6px}
.step.past{color:var(--tx2)}
/* quién actúa: Tú supervisas | Lexia procesa */
.duo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.duo .seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid var(--line2);background:var(--s1)}
.duo .seg span{position:relative;z-index:1;padding:8px 16px;font:500 13.5px var(--sans);color:var(--tx3);text-align:center;white-space:nowrap;transition:color .4s}
.duo .seg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--hl);border:1px solid var(--hlb);transition:transform .6s var(--out)}
.duo .seg.lexia i{transform:translateX(100%)}
.duo .seg.tu span:first-of-type,.duo .seg.lexia span:last-of-type{color:var(--tx)}
.duo .pn{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
/* pantallas que se apilan */
.screen{position:relative;height:min(480px,56vh);border-radius:22px;background:var(--bg2);overflow:hidden}
.scr{position:absolute;inset:0;opacity:0;transform:translateY(40px) scale(.985);transition:opacity .55s var(--ease),transform .7s var(--out),filter .55s var(--ease);pointer-events:none}
.scr.on{opacity:1;transform:none;pointer-events:auto}
.scr.past{opacity:0;transform:translateY(-30px) scale(.96);filter:blur(4px)}
.sbar{display:flex;align-items:center;gap:14px;height:64px;padding:0 28px;border-bottom:1px solid var(--s2)}
.sbar b{font-size:16.5px}
.sbar .p{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.sbar .chip{margin-left:auto}
.tr{display:grid;grid-template-columns:1.1fr 1fr .9fr;align-items:center;height:56px;padding:0 28px;border-top:1px solid var(--line);font-size:15px;color:var(--tx1);transition:background .4s,color .4s}
.tr.h{height:40px;border:0;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.tr.on,.tr.now{background:var(--hl);color:var(--tx);font-weight:600}
.tr .s{justify-self:end;display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono)}
.bar{position:relative;display:block;width:min(160px,90%);height:4px;border-radius:2px;background:var(--s3);overflow:hidden}
.bar b{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--iris40);width:calc(var(--k,1) * var(--w,100%))}
.bar.ok b,.hit .bar b{background:var(--okI)}
/* estado que cambia al llegar su momento: s0 antes, s1 después */
.sw{position:relative;justify-self:end;display:grid}
.sw>span{grid-area:1/1;justify-self:end;display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);transition:opacity .3s,transform .4s var(--out)}
.sw .s1{opacity:0;transform:translateY(6px)}
.hit .sw .s0,.sw.hit .s0{opacity:0;transform:translateY(-6px)}
.hit .sw .s1,.sw.hit .s1{opacity:1;transform:none}
.rv2{opacity:0;transform:translateY(10px);transition:opacity .45s var(--out),transform .5s var(--out)}
.rv2.hit{opacity:1;transform:none}
/* notas que señalan lo importante */
.co{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;max-width:280px;padding:10px 14px;border-radius:14px 4px 14px 4px;font-size:13.5px;line-height:1.35;color:var(--tx);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .45s var(--out),transform .55s var(--out);pointer-events:none}
.co.hit{opacity:1;transform:none}
.co::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#3A77FF,#B983ED)}
.fbtn2{display:inline-flex;align-items:center;gap:8px}
.marker{position:absolute;left:28px;bottom:18px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);opacity:.8}
@media (max-width:980px),(prefers-reduced-motion:reduce){
  .steps .rl,.steps .rf,.steps .rk{display:none}
  .steps{padding-left:0}
  .duo,.how .hright{display:none}
  .co{position:static;opacity:1;transform:none;margin:10px 28px 0;max-width:none}
  .rv2{opacity:1;transform:none}
}

/* ---------- 6 · Analytics ---------- */
.ana{position:relative;overflow:hidden}
.ana .bgl{position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 30% at 68% 34%,var(--halo-a),transparent 72%);opacity:.6}
.ana-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:start}
.ctrl{margin-top:34px;padding:22px 24px;border-radius:22px}
.ctrl label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.ctrl output{font:500 15px var(--mono);color:var(--warn)}
.ctrl input[type=range]{width:100%;margin-top:16px;accent-color:var(--warnI)}
.ctrl .crit{display:flex;justify-content:space-between;margin-top:14px;font-size:14px;color:var(--tx2)}
.ctrl .crit span:last-child{font-family:var(--mono);color:var(--crit)}
.chart{position:relative;border-radius:34px 8px 34px 8px;padding:26px 26px 18px;background:var(--bg1);border:1px solid var(--line);box-shadow:var(--rim)}
.chart .hdc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.chart .hdc b{font-size:16.5px}
.chart svg{display:block;width:100%;height:auto;margin-top:12px;overflow:visible}
.chart .barg{transform-origin:50% 100%;transform-box:fill-box;transform:scaleY(0);transition:transform 1.1s var(--out)}
.chart.live .barg{transform:scaleY(1)}
.alerts{display:flex;flex-direction:column;gap:10px;margin-top:14px;min-height:104px}
/* Lecturas que ruedan: cada cifra gira como un contador al entrar y cuando mueves el umbral */
.odos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.odo{display:flex;flex-direction:column;gap:8px;padding:2px 18px}
.odo+.odo{border-left:1px solid var(--line)}
.odo:first-child{padding-left:0}
.ol{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);line-height:1.35}
.ov{display:flex;align-items:flex-end;height:1em;font-family:var(--disp);font-weight:600;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:-.02em;color:var(--tx)}
.ov.c{color:#FF8389}.ov.w{color:#F8DD7E}
html.claro .ov.c{color:#A2191F}html.claro .ov.w{color:#8E6A00}
.ov .dg{display:inline-block;height:1em;overflow:hidden}
.ov .col{display:flex;flex-direction:column;transition:transform 1.5s var(--out)}
.ov .col span{display:block;height:1em;text-align:center}
.ov .sy{display:inline-block}
.ov .sy.pc{font-size:.55em;margin-left:.12em;align-self:flex-start;margin-top:.1em}
.al{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-size:14.5px;animation:pop .45s var(--out) both}
.al.w{background:rgba(241,194,27,.10);color:#F8DD7E;border:1px solid rgba(241,194,27,.25)}
.al.c{background:rgba(250,77,86,.10);color:#FFB3B8;border:1px solid rgba(250,77,86,.3)}
.al.none{background:rgba(36,161,72,.12);color:#A7F0BA;border:1px solid rgba(36,161,72,.3)}
.al .rb{width:9px;height:9px}
.al.w .rb{background:var(--warn)}.al.c .rb{background:var(--crit)}.al.none .rb{background:var(--okI)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.shot{margin-top:70px}
.shotcap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:18px;font-size:14px;color:var(--tx3)}

/* ---------- 7 · Autodiagnóstico (una pregunta a la vez) ---------- */
.quiz .g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.qcard{position:relative;border-radius:40px 8px 40px 8px;padding:40px;min-height:470px;overflow:hidden;isolation:isolate}
.qcard{box-shadow:var(--rim)}
.qcard::before{content:"";position:absolute;left:10%;right:10%;top:-46%;height:70%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-top),transparent);filter:blur(24px)}
.qtop{display:flex;justify-content:space-between;align-items:center}
.qdots{display:flex;gap:8px}
.qdots i{width:12px;height:12px;border-radius:3px;transform:rotate(45deg);border:1.5px solid var(--s4);transition:background .3s,border-color .3s}
.qdots i.a{background:var(--iris40);border-color:var(--iris40)}
.qdots i.p{background:linear-gradient(90deg,var(--iris40) 50%,transparent 50%);border-color:var(--iris40)}
.qdots i.cur{border-color:var(--tx)}
.qstage{position:relative;margin-top:34px;min-height:300px;display:grid}
.qv{grid-area:1/1;min-width:0;transition:opacity .45s var(--ease),transform .55s var(--out)}
.qv.out{opacity:0;transform:translateX(-40px);pointer-events:none}
.qv.next{opacity:0;transform:translateX(40px);pointer-events:none}
.qv .qn{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.qv .qq{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1.14;letter-spacing:-.015em;margin:14px 0 0;max-width:22ch}
.opts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.opt{height:54px;padding:0 22px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);font:600 15.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .2s,border-color .2s,transform .2s}
.opt:hover{background:var(--s2);border-color:var(--s4);transform:translateY(-2px)}
.opt .k{font:500 11px var(--mono);color:var(--tx3);border:1px solid var(--line2);border-radius:5px;padding:2px 6px}
.qback{margin-top:22px;background:none;border:0;color:var(--tx3);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.ring{position:relative;width:150px;height:150px}
.ring svg{width:150px;height:150px;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:40px;letter-spacing:-.02em}
.ring .v small{font:500 11px var(--mono);letter-spacing:.1em;color:var(--tx3);margin-top:2px}
.lvl{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--iris30)}
.rtitle{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.25;margin-top:8px;max-width:30ch}
.recs{list-style:none;padding:0;margin:22px 0 0;grid-column:1/-1}
.recs li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--tx2)}
.recs li b{color:var(--tx);font-weight:600}
.racts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:20px}

/* ---------- 8 · Confianza ---------- */
.trust .g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:34px;padding:5px;border-radius:14px;background:var(--s1);border:1px solid var(--line);width:max-content;max-width:100%}
.tab{background:none;border:0;border-radius:10px;padding:10px 16px;font:500 15px var(--sans);color:var(--tx2);cursor:pointer;transition:background .25s,color .25s}
.tab[aria-selected=true]{background:rgba(155,156,253,.16);color:var(--tx)}
.tp{padding-top:26px;min-height:250px}
.tp .who{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.tp .qq{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.2;margin:12px 0 0;max-width:24ch}
.tp p{margin:14px 0 0;color:var(--tx2);font-size:16.5px;line-height:1.5;max-width:46ch}
.evs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ev{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:rgba(155,156,253,.12);color:var(--iris30);font-size:14px;font-weight:500}
.vault{position:relative;border-radius:40px 8px 40px 8px;background:var(--bg1);border:1px solid var(--line);padding:36px;overflow:hidden;isolation:isolate}
.vault{box-shadow:var(--rim)}
.vault::before{content:"";position:absolute;left:10%;right:10%;top:-46%;height:70%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--halo-top),transparent);filter:blur(24px)}
.vault .top{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:center}
.vault h3{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1.12;margin-top:12px}
.seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.seal{position:relative;padding:18px 16px;border-radius:18px;background:var(--s1);border:1px solid var(--line);transition:border-color .3s,background .3s,transform .4s var(--out)}
.seal:hover{border-color:rgba(155,156,253,.4);background:rgba(155,156,253,.07);transform:translateY(-3px)}
.seal .badge{width:46px;height:46px;display:flex;align-items:center;justify-content:center;position:relative}
.seal .badge::before{content:"";position:absolute;inset:6px;border-radius:9px;transform:rotate(45deg);background:linear-gradient(135deg,rgba(155,156,253,.35),rgba(58,119,255,.15));border:1px solid rgba(201,238,255,.45);box-shadow:0 0 24px -6px rgba(100,73,245,.9)}
.seal .badge span{position:relative;font:600 10px var(--mono);letter-spacing:.02em;color:var(--tx)}
.seal b{display:block;margin-top:14px;font-size:15px}
.seal small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--tx3)}
.note{margin-top:16px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}

/* ---------- 9 · Cierre (estilo Giga) ---------- */
.close{position:relative;overflow:hidden;text-align:center;isolation:isolate}
.close .orb2{position:absolute;left:50%;top:58%;width:980px;height:520px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(100,73,245,.38),rgba(58,119,255,.14) 50%,transparent);filter:blur(30px);animation:breathe2 8s ease-in-out infinite alternate}
@keyframes breathe2{to{transform:translate(-50%,-50%) scale(1.1)}}
/* Vidrio estriado: la aurora Lexia vista a través de cañas verticales; cada caña la comprime y la desplaza */
@property --fa{syntax:'<percentage>';inherits:true;initial-value:16%}
@property --fb{syntax:'<percentage>';inherits:true;initial-value:86%}
@property --fc{syntax:'<percentage>';inherits:true;initial-value:64%}
.flute{position:absolute;inset:-40px;z-index:-1;pointer-events:none;overflow:hidden;--mx:50%;filter:blur(18px);
  -webkit-mask-image:linear-gradient(transparent 40px,#000 24%,#000 72%,transparent calc(100% - 40px));mask-image:linear-gradient(transparent 40px,#000 24%,#000 72%,transparent calc(100% - 40px));
  --au:radial-gradient(32% 48% at var(--fa) 40%,rgba(58,119,255,.78),transparent 70%),radial-gradient(30% 52% at var(--fb) 60%,rgba(185,131,237,.72),transparent 70%),radial-gradient(30% 36% at var(--mx) var(--fc),rgba(100,73,245,.42),transparent 72%);
  animation:fdrift 14s ease-in-out infinite alternate}
@keyframes fdrift{to{--fa:30%;--fb:72%;--fc:50%}}
.flute i{position:absolute;top:0;bottom:0;background-image:var(--au);background-repeat:no-repeat}
.flute i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 18%,transparent 45%,rgba(7,6,26,.12) 78%,rgba(7,6,26,.34));box-shadow:inset 1px 0 0 rgba(255,255,255,.09)}
html.claro .flute{--au:radial-gradient(32% 48% at var(--fa) 40%,rgba(58,119,255,.44),transparent 70%),radial-gradient(30% 52% at var(--fb) 60%,rgba(185,131,237,.52),transparent 70%),radial-gradient(30% 36% at var(--mx) var(--fc),rgba(100,73,245,.18),transparent 72%)}
html.claro .flute i::after{background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.2) 20%,transparent 45%,rgba(60,40,160,.04) 78%,rgba(60,40,160,.11));box-shadow:inset 1px 0 0 rgba(255,255,255,.9)}
.close h2{font-family:var(--disp);font-weight:600;font-size:clamp(38px,5vw,76px);line-height:1.02;letter-spacing:-.028em;margin:20px auto 0;max-width:16ch}
.close h2 em{font-style:normal;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,#9B9CFD,#B983ED 55%,#E9D3FD)}
.close .lead{margin:22px auto 0;text-align:center}
.cbox{position:relative;max-width:640px;margin:44px auto 0;text-align:left}
/* Campo de correo = Botón Lexia · Anillo del UI System llevado a campo: forma cruce, borde en degradado que recorre el contorno (2,4 s) y su brillo detrás */
.pillwrap{position:relative;isolation:isolate}
.pglow{position:absolute;inset:-2px;z-index:0;border-radius:18px 0 18px 0;background:conic-gradient(from var(--lx-anillo-angulo),var(--lx-azure-50),var(--lx-iris-60),var(--lx-orquidea-40),var(--lx-iris-60),var(--lx-azure-50));filter:blur(16px);opacity:.5;animation:lx-anillo-recorre var(--lx-dur-anillo) linear infinite;transition:opacity .3s;pointer-events:none}
.pill{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:8px;border-radius:18px 0 18px 0;background:var(--lx-anillo-cara)}
.pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--lx-anillo-angulo),var(--lx-azure-50),var(--lx-iris-60),var(--lx-orquidea-40),var(--lx-iris-60),var(--lx-azure-50));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:lx-anillo-recorre var(--lx-dur-anillo) linear infinite;pointer-events:none}
.pillwrap:focus-within .pglow,.pillwrap:hover .pglow{opacity:.75}
.pill>*{position:relative}
.pill input{flex:1;min-width:0;height:52px;border:0;background:transparent;padding:0 14px;font:400 16px var(--mono);color:var(--tx);outline:none}
.pill input::placeholder{color:var(--tx3)}
.light-under{position:absolute;left:12%;right:12%;bottom:-22px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(136,208,255,.35),transparent);filter:blur(8px);pointer-events:none}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--out)}
.cbox.step2 .more{grid-template-rows:1fr}
.more>div{overflow:hidden}
.more .inner{margin-top:14px;padding:26px;border-radius:24px;display:grid;gap:14px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f label{display:block;font-size:13px;font-weight:500;color:var(--tx2);margin-bottom:6px}
.f input,.f select{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--s1);font:400 15px var(--sans);color:var(--tx)}
.f select option{color:#161433}
.f input:focus,.f select:focus{outline:none;border-color:var(--iris40);box-shadow:0 0 0 3px rgba(100,73,245,.25)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--tx2)}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--iris);flex:none}
.err{color:#FFB3B8;font-size:13.5px;min-height:18px;text-align:left}
.steps3{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.steps3 span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--tx2)}
.steps3 b{font:500 11px var(--mono);color:var(--iris40)}
.okbox{display:none;margin:40px auto 0;max-width:620px;padding:32px;border-radius:28px;text-align:center}
.close.sent .cbox,.close.sent .steps3{display:none}
.close.sent .okbox{display:block;animation:fadeup .7s var(--out) both}
.already{margin-top:22px;font-size:14px;color:var(--tx3)}

/* ---------- 10 · Preguntas ---------- */
.faq .g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:68px;font:600 18px var(--sans);cursor:pointer}
summary::-webkit-details-marker{display:none}
summary i{width:11px;height:11px;border-right:2px solid var(--iris40);border-bottom:2px solid var(--iris40);transform:rotate(45deg);transition:transform .3s var(--ease);flex:none}
details[open] summary i{transform:rotate(-135deg)}
details p{margin:0 0 22px;color:var(--tx2);font-size:16.5px;line-height:1.55;max-width:60ch}

footer{border-top:1px solid var(--line);padding-block:64px 40px;color:var(--tx2)}
footer .g{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
footer h2{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
footer a{display:block;text-decoration:none;padding:5px 0;font-size:15px}
footer a:hover{color:var(--tx)}
.endorse{display:flex;align-items:center;gap:14px;margin-top:24px;font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--tx3)}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--tx3);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}

/* Entrada al hacer scroll (visible en reposo si no hay script) */
.rev{transition:opacity .9s var(--out),transform .9s var(--out)}
.revs .rev:not(.in){opacity:0;transform:translateY(28px)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .in,.what .top,.how .grid,.ana-grid,.quiz .g,.trust .g,.faq .g{grid-template-columns:minmax(0,1fr)}
  .hero .in{min-height:0;padding-block:120px 120px}
  .hero,.hero .in{min-height:0}
  .stage{height:420px}
  .prods{grid-template-columns:minmax(0,1fr)}
  footer .g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eq{grid-template-columns:minmax(0,1fr);gap:28px}
  .eq .rv{margin-bottom:0}
  .ficha{position:relative;right:auto;top:auto;width:auto;margin:14px 0 0}
}
@media (max-width:980px),(prefers-reduced-motion:reduce){
  .how{height:auto}
  .how .sticky{position:relative;height:auto;min-height:0;overflow:visible}
  .how .grid{height:auto;padding-block:100px}
  .step{color:var(--tx)}
  .step .sub{max-height:none;opacity:1;margin-top:6px}
  .screen.single{display:none}
  .screens-m .scr{position:relative;opacity:1;transform:none;margin-top:16px;border-radius:24px;background:var(--bg2);border:1px solid var(--line);padding-bottom:64px}
}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){.screens-m{display:none}}
@media (max-width:640px){
  .two,.seals{grid-template-columns:minmax(0,1fr)}
  .prod{padding:28px;min-height:540px}
  .prod .art{width:62%}
  .qcard,.vault{padding:26px}
  .result{grid-template-columns:minmax(0,1fr)}
  .vault .top{grid-template-columns:minmax(0,1fr)}
  .tr{grid-template-columns:1.1fr .9fr;padding:0 16px}
  .tr .b{display:none}
  .sbar{padding:14px 16px;height:auto;flex-wrap:wrap;row-gap:10px}
  .sbar .lx-anillo{margin-left:0!important;order:5}
  .screens-m .scr{overflow:hidden}
  footer .g{grid-template-columns:minmax(0,1fr)}
  .pill{flex-wrap:wrap}
  .pill .lx-boton{width:100%}
  .odos{grid-template-columns:minmax(0,1fr)}
  .odo{flex-direction:row;justify-content:space-between;align-items:center;padding:12px 0}
  .odo+.odo{border-left:0;border-top:1px solid var(--line)}
  .ov{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .revs .rev:not(.in){opacity:1;transform:none}
  .chart .barg{transform:none}
}

/* ---------- v1.7 · Calidad: revisión con las reglas de UI UX Pro Max (accesibilidad, táctil, formulario, cifras) ---------- */
/* Saltar al contenido: aparece solo con el foco del teclado */
.skip{position:fixed;z-index:100;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);padding:12px 18px;border-radius:12px;background:var(--bg1);color:var(--tx);font:500 15px var(--sans);text-decoration:none;box-shadow:0 0 0 2px var(--iris40),0 12px 30px -12px rgba(0,0,0,.5);transform:translateY(-200%);transition:transform .2s var(--out)}
.skip:focus{transform:none}
main:focus{outline:none}
/* El elemento con foco nunca queda debajo de la barra fija */
a,button,input,select,textarea,summary,[tabindex]{scroll-margin-top:96px;scroll-margin-bottom:24px}
/* Toque inmediato, sin la espera del doble toque */
a,button,input,select,label,summary{touch-action:manipulation}
/* Respuesta al presionar: escala breve, se suelta al levantar el dedo */
@media (prefers-reduced-motion:no-preference){
  .lx-boton{transition:background-color var(--lx-dur-rapida) var(--lx-curva-productiva),color var(--lx-dur-rapida) var(--lx-curva-productiva),transform .12s var(--out)}
  .lx-boton:active{transform:scale(.97)}
  .tab:active,.opt:active,.seal:active,.eqi:active{transform:scale(.98)}
}
/* Cifras con ancho fijo: no saltan cuando cambian */
.ov,.odo,.chart text,#rPct,.steps3 b,.ticker .tk b,.ctrl output{font-variant-numeric:tabular-nums}
/* Cinta de informes: se detiene bajo el puntero */
.ticker:hover .tk{animation-play-state:paused}
/* Índice lateral: el rombo activo crece con transform, sin recalcular el diseño */
.rail a i{transition:background .3s,border-color .3s,transform .3s}
.rail a.on i{width:8px;height:8px;transform:rotate(45deg) scale(1.25)}
/* Una sola escala tipográfica: ninguna etiqueta bajo 12 px (como el antetítulo) */
.chip,.lab,.tagp,.ficha .k,.opt .k,.ol,.duo .pn,.hero .ebc{font-size:12px}
.step .who,.marker,.note{font-size:12px}
/* Tema claro: el texto inactivo del selector Tú | Lexia llega a 4,5:1 */
html.claro .duo .seg span{color:var(--tx2)}
/* Formulario: opcional marcado y error junto a su campo */
.f .opc{font-weight:400;color:var(--tx3)}
.f input[aria-invalid="true"]{border-color:var(--crit);box-shadow:0 0 0 3px rgba(250,77,86,.18)}
.pill:has(input[aria-invalid="true"])::before{background:var(--crit)}
.consent input[aria-invalid="true"]{outline:2px solid var(--crit);outline-offset:2px}
#okT:focus{outline:none}
/* Control del umbral: área de toque de 24 px sin mover la línea */
.ctrl input[type=range]{height:24px;margin-top:12px}
/* Pantallas con barra móvil: alto real visible */
@supports (height:100svh){.hero{min-height:max(760px,100svh)}}
/* Logo de la barra y enlaces dentro de una frase: área de toque de 44 px sin cambiar el dibujo ni la línea */
.nav>a[href="#inicio"]{display:flex;align-items:center;min-height:44px}
.already .lnk{padding:13px 2px}
/* Móvil: objetivos táctiles de 44 px y campos de 16 px para que iOS no acerque la vista */
@media (max-width:720px){
  /* «Ingresar» en móvil: se ve el ícono y el texto queda solo para lectores de pantalla (antes se ocultaban los dos) */
  .nav .login span.ic{display:inline-flex}
  .nav .login span:not(.ic){display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .consent{min-height:44px}
  .nav .theme,.nav .login{min-width:44px;height:44px;justify-content:center}
  .nav .lx-boton{height:44px}
  .tab{padding-block:12.5px}
  .f input,.f select{font-size:16px}
  footer a{padding:12.5px 0}
  .ctrl input[type=range]{height:44px;margin-top:2px}
}
/* Menos transparencia si el sistema lo pide: el vidrio pasa a superficie sólida */
@media (prefers-reduced-transparency:reduce){
  .nav,html.claro .nav,.lg,html.claro .lg{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,html.claro .nav{background:var(--bg1)}
  .lg,html.claro .lg{background:var(--bg2)}
}