/* ============================================================
   Klinaria — Landing v2.  Claro, minimalista, "Apple/Shopify".
   La luz es la norma; lo oscuro es excepción (cierre + escenarios
   contenidos del orbe). Degradado SOLO en Kena. Profundidad por
   bordes y luz; sin sombras duras ni glassmorphism.
   ============================================================ */

:root{
  --tinta:#16323A; --tinta-deep:#0B1A1F;
  --teal:#0E9A93; --teal-vivo:#2BBFB6; --teal-hi:#5FE0D6;
  --coral:#F2785C;
  --hueso:#FBFAF7; --teal-palido:#E6F4F2; --linea:#E5E1D8; --gris:#7A8A86;
  /* Kena (sub-marca) */
  --k-fucsia:#E879F9; --k-lavanda:#A78BFA; --k-violeta:#7C3AED; --k-indigo:#4F46E5;
  --k-fondo:#0F0B1E;
  /* degradado Kena adaptado por contexto */
  --kena-grad-light:linear-gradient(90deg,#C026D3,#7C3AED 55%,#4F46E5);
  --kena-grad-dark:linear-gradient(90deg,#F0ABFC,#E879F9 45%,#A78BFA);
  --f:"Outfit",system-ui,sans-serif;
  --f-dato:"Outfit",system-ui,sans-serif;
  --f-kena:"Quicksand","Outfit",sans-serif;
  --e-in:cubic-bezier(.2,.7,.3,1);
  --e-out:cubic-bezier(.4,0,.2,1);
  --e-live:cubic-bezier(.34,1.2,.5,1);
  --r-card:14px; --r-panel:20px; --r-stage:28px; --r-pill:999px;
  --txt:#16323A; --txt-soft:#3A4A47; --txt-mut:#5A6A66;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f); color:var(--txt);
  background:var(--hueso); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* lienzo del orbe: overlay fijo y transparente; el orbe solo se dibuja
   dentro de la "stage" activa (no es el fondo de la página) */
.orb-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:5;
  pointer-events:none;
}
body.no-webgl .orb-canvas{display:none}

a{color:inherit}
img,svg{display:block}
::selection{background:var(--teal);color:#fff}

:focus-visible{outline:2.5px solid var(--teal); outline-offset:3px; border-radius:4px}
.on-dark :focus-visible, .theme-dark :focus-visible{outline-color:var(--teal-hi)}

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:1000;
  background:var(--teal); color:#fff; padding:10px 16px; border-radius:10px;
  font-weight:600; transition:top .2s;
}
.skip-link:focus{top:16px}

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--f-dato); font-size:clamp(11px,1.1vw,13px); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:10px;
}
.on-dark .eyebrow, .theme-dark .eyebrow{color:var(--teal-vivo)}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.55}
.dato{font-family:var(--f-dato); font-variant-numeric:tabular-nums}

h1,h2,h3{font-weight:500; letter-spacing:-.025em; line-height:1.05; text-wrap:balance; color:var(--txt)}
.on-dark h1,.on-dark h2,.on-dark h3,.theme-dark h1,.theme-dark h2,.theme-dark h3{color:#fff}
.display{font-size:clamp(2.5rem,6vw,5.2rem); letter-spacing:-.03em}
.h2{font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:-.022em}
.lead{font-size:clamp(1.05rem,1.6vw,1.4rem); line-height:1.5; color:var(--txt-soft); font-weight:400; max-width:46ch}
.on-dark .lead, .theme-dark .lead{color:#CBD7D5}
.muted{color:var(--txt-mut)}

/* Kena wordmark — legible por contexto */
.kena-word{
  font-family:var(--f-kena); font-weight:700; letter-spacing:.005em;
  background:var(--kena-grad-light); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.on-dark .kena-word, .theme-dark .kena-word, .kena-word--on-dark{
  background:var(--kena-grad-dark); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .kena-word{color:#7C3AED; -webkit-text-fill-color:initial}
  .on-dark .kena-word,.theme-dark .kena-word{color:#C4B5FD}
}
.chip-ai{
  display:inline-flex; align-items:center; font-family:var(--f-dato); font-weight:500;
  font-size:11px; letter-spacing:.06em; color:#fff; padding:2px 7px; border-radius:7px;
  background:linear-gradient(90deg,#D026D3,#7C3AED); vertical-align:super; line-height:1.2;
  margin-left:3px;
}

/* ---------- layout ---------- */
.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,56px)}
section{position:relative}
.sect{padding:clamp(96px,15vh,176px) 0}

/* secciones (claro domina; oscuro = puntuación) */
#kena, #producto, #modulos, #suscripcion, #financiacion, #migracion, #seguridad, #faq{background:var(--hueso)}
#problema{background:#F5F6F2}
#multisede{background:#E6F4F2}
.hero{background:var(--hueso)}
#dia-kena, #diferencia, #cierre{background:#0A0A16}
#footer{background:#08121A}

/* divisores sutiles entre secciones claras/tintadas */
#problema, #kena, #financiacion, #seguridad, #faq, #multisede{border-top:1px solid var(--linea)}

/* ---------- navegación ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background-color .4s var(--e-out), border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(251,250,247,.82); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--linea); padding-top:13px; padding-bottom:13px;
}
.nav.scrolled.dark{
  background:rgba(10,12,24,.74); border-bottom-color:rgba(255,255,255,.08);
}
.nav .brand{height:30px; display:flex; align-items:center}
.nav .brand img{height:30px; width:auto}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{
  font-size:14.5px; font-weight:500; padding:8px 14px; border-radius:var(--r-pill);
  color:rgba(22,50,58,.74); text-decoration:none; transition:color .2s, background .2s;
}
.nav.dark .nav-links a{color:rgba(255,255,255,.8)}
.nav-links a:hover{color:var(--tinta); background:rgba(22,50,58,.06)}
.nav.dark .nav-links a:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav-links a.nav-kena{font-family:var(--f-kena); font-weight:600; color:var(--k-violeta)}
.nav.dark .nav-links a.nav-kena{color:#C4B5FD}
.nav-cta{margin-left:8px}
.nav-links a.nav-cta{border-radius:13px; color:#fff}
.nav-links a.nav-cta:hover{color:#fff; background:#0CA89F}
.nav-burger{display:none; background:none; border:0; color:var(--tinta); cursor:pointer; padding:8px}
.nav.dark .nav-burger{color:#fff}

/* ---------- botones (siempre teal) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f); font-size:15.5px; font-weight:600; line-height:1;
  padding:14px 24px; border-radius:13px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--e-live), background-color .2s, border-color .2s, color .2s;
  will-change:transform;
}
.btn svg{width:17px; height:17px}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:#0CA89F}
.btn-primary:active{transform:scale(.97)}
/* sobre oscuro: control en teal, texto blanco */
.theme-dark .btn-primary, .on-dark .btn-primary{background:var(--teal); color:#fff}
.theme-dark .btn-primary:hover, .on-dark .btn-primary:hover{background:#12B3AA}
.btn-ghost{background:transparent; color:var(--tinta); border-color:var(--linea)}
.btn-ghost:hover{border-color:var(--teal); background:var(--teal-palido)}
.on-dark .btn-ghost, .theme-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.on-dark .btn-ghost:hover, .theme-dark .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.07)}
.btn-lg{font-size:17px; padding:17px 30px}
.btn-mag{position:relative}

/* etiquetas / fuentes */
.tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--f-dato);
  font-size:12px; letter-spacing:.04em; color:var(--txt-mut);
  border:1px solid var(--linea); border-radius:var(--r-pill); padding:5px 12px;
}
.tag .dot{width:6px; height:6px; border-radius:50%; background:var(--teal)}
.fuente{font-family:var(--f-dato); font-size:11.5px; color:var(--gris); letter-spacing:.01em}
.on-dark .fuente, .theme-dark .fuente{color:#9FB0AD}
.estim{
  font-family:var(--f-dato); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal); background:var(--teal-palido); padding:3px 8px; border-radius:6px; white-space:nowrap;
}

/* ---------- escenario del orbe (panel oscuro contenido) ---------- */
.orb-stage{
  position:relative; border-radius:var(--r-stage);
  background:radial-gradient(120% 120% at 50% 28%, #1A1430 0%, #0F0B1E 68%);
  border:1px solid rgba(124,58,237,.20); overflow:hidden;
}
/* fallback sin WebGL: póster de degradado dentro de la stage */
body.no-webgl .orb-stage::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(42% 42% at 50% 46%, rgba(240,171,252,.55), rgba(124,58,237,.30) 46%, rgba(15,11,30,0) 72%);
}
/* cierre: la stage es transparente (la sección ya es oscura) */
.orb-stage.bare{background:transparent; border:none}
body.no-webgl .orb-stage.bare::after{background:radial-gradient(40% 40% at 50% 46%, rgba(240,171,252,.5), rgba(124,58,237,.26) 46%, transparent 72%)}

/* ============================================================
   S1 · HERO
   ============================================================ */
.hero{min-height:100svh; display:flex; align-items:center; padding:130px 0 70px}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,64px); align-items:center; width:100%}
.hero-copy{max-width:600px}
.hero h1{margin:22px 0 0}
.hero .lead{margin:26px 0 0; max-width:50ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.hero-meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px}
.hero-meta .item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--txt-mut)}
.hero-meta .item svg{width:16px;height:16px;color:var(--teal)}
.hero-stage{aspect-ratio:1/1; width:100%; max-width:520px; margin-inline:auto; min-height:380px}
.scroll-ind{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-dato); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris);
}
.scroll-ind .mouse{width:22px; height:34px; border:1.5px solid #C9C3B6; border-radius:12px; position:relative}
.scroll-ind .mouse::after{content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px;
  background:var(--teal); transform:translateX(-50%); animation:scrolldot 1.8s var(--e-out) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,9px)}100%{opacity:0;transform:translate(-50%,12px)}}

/* ============================================================
   S2 · PROBLEMA — tarjetas claras
   ============================================================ */
.problem-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:54px}
.pcard{background:#fff; border:1px solid var(--linea); border-radius:var(--r-panel); padding:30px 28px}
.pcard .big{font-size:clamp(2.4rem,4.4vw,3.4rem); font-weight:500; letter-spacing:-.02em; line-height:1; color:var(--tinta)}
.pcard .big.dato{font-family:var(--f-dato); font-weight:500; font-size:clamp(2rem,3.6vw,2.7rem)}
.pcard .lab{margin-top:12px; font-size:14.5px; color:var(--txt-mut); max-width:24ch}
.pcard .src{margin-top:14px}
.coral{color:var(--coral)}

/* ============================================================
   S3 · KENA — copy claro + escenario oscuro contenido
   ============================================================ */
.kena-stage{display:grid; grid-template-columns:.96fr 1.04fr; gap:clamp(32px,5vw,60px); align-items:center}
.kena-copy h2{margin:18px 0 0}
.kena-copy .lead{margin-top:22px; max-width:42ch}
.kena-quote{font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:500; letter-spacing:-.02em; line-height:1.28; margin:30px 0 0; color:var(--tinta)}
.kena-quote em{font-style:normal; color:var(--teal)}
.aviso{ /* parte de Kena — tarjeta clara */
  margin-top:34px; border:1px solid #E7DFF6; border-radius:var(--r-panel);
  background:linear-gradient(180deg,#FBF8FF,#FFFFFF); padding:22px 24px;
}
.aviso .head{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.aviso .head .av{width:34px;height:34px;border-radius:10px;overflow:hidden;flex:none}
.aviso .head .nm{font-family:var(--f-kena); font-weight:700; font-size:16px}
.aviso .head .when{margin-left:auto; font-family:var(--f-dato); font-size:11px; color:#9C93BE}
.aviso p{font-size:15px; line-height:1.5; color:var(--txt-soft)}
.aviso .act{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.aviso .btn{padding:10px 17px; font-size:14px}

/* panel oscuro con el orbe + nodos */
.kena-panel{aspect-ratio:1/1; width:100%; min-height:420px}
.nodes{position:absolute; inset:0}
.node{
  position:absolute; display:flex; align-items:center; gap:9px;
  background:rgba(18,16,34,.82); border:1px solid rgba(167,139,250,.30); border-radius:var(--r-pill);
  padding:9px 15px 9px 13px; font-size:13.5px; font-weight:500; white-space:nowrap; color:#EDE9FB;
  backdrop-filter:blur(6px); z-index:6;
}
.node svg{width:17px; height:17px; color:var(--k-lavanda)}
.node .pt{width:7px;height:7px;border-radius:50%;background:var(--teal-vivo);box-shadow:0 0 8px var(--teal-vivo)}

/* ============================================================
   S4 · PRODUCTO — carril de capturas (pin centrado + cover-flow)
   ============================================================ */
#producto{padding:clamp(80px,11vh,120px) 0 clamp(90px,13vh,150px); overflow:hidden}
.prod-intro{text-align:center; max-width:680px}
.prod-intro .lead{margin-inline:auto}
.prod-rail{margin-top:8px; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:26px}
.prod-rail-head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.rail-ctx{font-size:13px; letter-spacing:.06em; color:var(--txt-mut)}
.rail-ctx b{color:var(--teal); font-weight:500}
.rail-arrows{display:flex; gap:8px}
.rail-arrow{width:42px; height:42px; border-radius:50%; border:1px solid var(--linea); background:#fff; color:var(--tinta);
  font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s var(--e-out)}
.rail-arrow:hover{border-color:var(--teal); background:var(--teal-palido); color:var(--teal)}
.rail-arrow:disabled{opacity:.35; cursor:default}
.prod-track{display:flex; gap:34px; padding-left:max(calc(50vw - 430px), clamp(20px,5vw,56px)); will-change:transform}
.shot{flex:0 0 auto; width:min(72vw,820px); transition:opacity .35s var(--e-out), transform .35s var(--e-out); will-change:transform,opacity}
.shot.dim{opacity:.45}
/* progreso clicable */
.prod-progress{display:flex; gap:8px; margin:0 auto; padding:0 clamp(20px,5vw,56px); align-items:center; justify-content:center; flex-wrap:wrap; max-width:560px}
.pdot{width:26px; height:5px; border:0; padding:0; border-radius:3px; background:var(--linea); cursor:pointer; transition:.25s var(--e-out)}
.pdot:hover{background:#C9C3B6}
.pdot.active{background:var(--teal); width:42px}
/* fallback nativo (móvil / sin animación) */
.rail-native .prod-rail{min-height:0; display:block}
.rail-native .prod-rail-head, .rail-native .prod-progress{display:none}
.rail-native .prod-track{overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:4px clamp(20px,5vw,56px) 16px; gap:20px}
.rail-native .shot{scroll-snap-align:center; width:86vw; opacity:1; transform:none}
.frame{
  border:1px solid var(--linea); border-radius:16px; overflow:hidden; background:#fff;
}
.frame .bar{display:flex; align-items:center; gap:8px; padding:11px 16px; background:#F3F1EC; border-bottom:1px solid var(--linea)}
.frame .bar .dots{display:flex; gap:6px}
.frame .bar .dots i{width:11px;height:11px;border-radius:50%;background:#D6D1C6;display:block}
.frame .bar .addr{margin-left:8px; font-family:var(--f-dato); font-size:12px; color:#8B948F;
  background:#fff; border:1px solid var(--linea); border-radius:7px; padding:4px 12px; flex:1; max-width:340px}
.frame .viewport{position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--hueso)}
.frame .viewport iframe{position:absolute; top:0; left:0; border:0;
  width:1440px; height:900px; transform-origin:top left; background:var(--hueso)}
/* placeholder/skeleton de marca (nunca aparece vacío) */
.frame .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg,#F4F2EC,#FBFAF7); color:var(--gris)}
.frame .ph .ph-mark{width:40px; height:40px; opacity:.85}
.frame .ph .ph-t{font-family:var(--f-dato); font-size:12px; letter-spacing:.08em; color:#8B948F}
.frame .ph .ph-bars{display:flex; gap:7px; width:60%; max-width:240px}
.frame .ph .ph-bars span{flex:1; height:6px; border-radius:3px; background:#E5E1D8}
.frame .ph .ph-bars span:nth-child(2){flex:.6} .frame .ph .ph-bars span:nth-child(3){flex:.8}
.shot .cap{display:flex; align-items:flex-start; gap:14px; margin-top:20px; padding-right:10px}
.shot .cap .lab{font-family:var(--f-dato); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); padding-top:3px; white-space:nowrap}
.shot .cap h3{font-size:clamp(1.2rem,2vw,1.6rem); margin-bottom:4px}
.shot .cap p{font-size:15px; color:var(--txt-mut); max-width:46ch}

/* ============================================================
   S5 · DIFERENCIADOR — tarjetas claras, mini-demos oscuras
   ============================================================ */
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px}
.diff{border:1px solid var(--linea); border-radius:var(--r-panel); padding:30px 28px 32px; background:#fff;
  display:flex; flex-direction:column}
.diff .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--teal-palido);color:var(--teal);margin-bottom:20px}
.diff .ico svg{width:23px;height:23px}
.diff h3{font-size:1.4rem; margin-bottom:12px}
.diff p{font-size:14.5px; color:var(--txt-mut); line-height:1.55}
.diff .demo{margin-top:22px; border-top:1px solid var(--linea); padding-top:20px}
/* mini ventana de IA (oscura, contenida) */
.ai-win{background:#0E0B1C; border:1px solid rgba(124,58,237,.22); border-radius:12px; overflow:hidden}
.ai-win .q{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; color:#B9C6C3}
.ai-win .q .cur{display:inline-block; width:2px; height:15px; background:var(--teal-vivo); animation:caret 1s steps(1) infinite; vertical-align:middle}
@keyframes caret{50%{opacity:0}}
.ai-win .a{padding:14px; font-size:13px; line-height:1.5; color:#D7E0DE}
.ai-win .a .rec{display:flex; align-items:center; gap:10px; padding:10px; border:1px solid rgba(43,191,182,.3); border-radius:9px; background:rgba(43,191,182,.07); margin-top:8px}
.ai-win .a .rec .k{width:26px;height:26px;border-radius:7px;background:var(--teal-palido);display:grid;place-items:center;flex:none}
.ai-win .a .rec .k svg{width:15px;height:15px;color:var(--teal)}
.ai-win .a .rec b{font-size:13.5px;color:#fff}
.review{background:#0E0B1C;border:1px solid rgba(124,58,237,.22);border-radius:12px;padding:14px}
.review .stars{color:#E0A93B;font-size:13px;letter-spacing:2px}
.review .txt{font-size:13px;color:#D7E0DE;margin:8px 0 12px;line-height:1.5}
.review .reply{border-left:2px solid var(--teal-vivo);padding-left:12px;font-size:12.5px;color:#B9C6C3;line-height:1.5}
.review .reply .by{display:flex;align-items:center;gap:7px;font-family:var(--f-kena);font-weight:700;color:#fff;font-size:12.5px;margin-bottom:4px}
.copilot .qbar{display:flex;align-items:center;gap:9px;background:#0E0B1C;border:1px solid rgba(124,58,237,.22);border-radius:var(--r-pill);padding:11px 16px;font-size:13.5px;color:#D7E0DE}
.copilot .qbar svg{width:16px;height:16px;color:var(--k-lavanda)}
.copilot .ans{margin-top:14px;display:flex;align-items:flex-end;gap:14px}
.copilot .ans .num{font-size:2.4rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--tinta)}
.theme-dark .copilot .ans .num{color:#fff}
.copilot .spark{display:flex;align-items:flex-end;gap:4px;height:46px}
.copilot .spark i{width:8px;background:var(--teal);border-radius:3px;opacity:.85}

/* ============================================================
   S6 · FINANCIACIÓN
   ============================================================ */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px}
.step{border:1px solid var(--linea); border-radius:var(--r-card); padding:22px 20px; background:#fff; position:relative}
.step .n{font-family:var(--f-dato); font-size:11px; color:var(--teal); letter-spacing:.08em}
.step h4{font-size:1.05rem; font-weight:600; margin:10px 0 7px}
.step p{font-size:13.5px; color:var(--txt-mut); line-height:1.45}
.step .conn{position:absolute; right:-9px; top:50%; transform:translateY(-50%); color:#C9C3B6; z-index:2}
.step .conn svg{width:16px;height:16px}
.finance-note{margin-top:26px; display:flex; gap:12px; align-items:flex-start; padding:16px 20px;
  border:1px solid var(--linea); border-radius:var(--r-card); background:var(--teal-palido)}
.finance-note svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:1px}
.finance-note p{font-size:13.5px; color:#3C5550; line-height:1.5}

/* ============================================================
   S7 · MULTISEDE
   ============================================================ */
.multi{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.multi-vis{position:relative; aspect-ratio:1.1; min-height:340px}
.sede-node{position:absolute; background:#fff; border:1px solid var(--linea); border-radius:var(--r-card); padding:14px 16px; min-width:150px}
.sede-node .nm{font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px}
.sede-node .nm .pt{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.sede-node .row{display:flex; justify-content:space-between; font-size:12px; color:var(--txt-mut); margin-top:8px}
.sede-node .row .v{font-family:var(--f-dato); color:var(--tinta)}
.sede-node.hub{background:var(--tinta); border-color:var(--tinta); color:#fff; z-index:3}
.sede-node.hub .nm{color:#fff} .sede-node.hub .row{color:#9FB0AD} .sede-node.hub .row .v{color:#fff}

/* ============================================================
   S8 · CONFIANZA
   ============================================================ */
.trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:54px}
.trust{border:1px solid var(--linea); border-radius:var(--r-panel); padding:28px 26px; background:#fff}
.trust .ico{width:42px;height:42px;border-radius:11px;background:var(--teal-palido);color:var(--teal);display:grid;place-items:center;margin-bottom:18px}
.trust .ico svg{width:21px;height:21px}
.trust h3{font-size:1.15rem; font-weight:600; margin-bottom:9px}
.trust p{font-size:13.5px; color:var(--txt-mut); line-height:1.5}

/* ============================================================
   S9 · CIERRE (oscuro)
   ============================================================ */
.close-sect{min-height:100svh; display:flex; align-items:center; text-align:center; padding:120px 0}
.close-inner{max-width:780px; margin:0 auto; display:flex; flex-direction:column; align-items:center}
.close-orb{width:min(60vw,340px); height:min(60vw,340px); margin-bottom:8px}
.close-inner h2{font-size:clamp(2.3rem,5.5vw,4.6rem); margin:20px 0 0}
.close-inner .lead{margin:22px auto 0; text-align:center}
.close-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.close-inner .fuente{color:#AEB9C7}

/* ============================================================
   S10 · FOOTER (oscuro)
   ============================================================ */
.footer{padding:64px 0 48px}
.footer-top{display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap}
.footer-brand{max-width:300px}
.footer-brand .brand-row{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.footer-brand .brand-row .brand{height:30px; margin:0}
.footer-brand .brand-sep{width:1px; height:22px; background:rgba(255,255,255,.18)}
.footer-brand .brand-kena{height:22px}
.footer-brand .kena-lockup{display:inline-flex; align-items:center; gap:8px}
.footer-brand .kena-lockup img{width:24px; height:24px; border-radius:7px}
.footer-brand .kena-lockup .kena-word{font-size:18px}
.footer-brand p{font-size:13.5px; color:#9FB0AD; line-height:1.55}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap}
.fcol h4{font-family:var(--f-dato); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7E908D; margin-bottom:16px}
.fcol a{display:block; font-size:14px; color:#C8D6D4; text-decoration:none; padding:5px 0; transition:color .2s}
.fcol a:hover{color:#fff}
.footer-bot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px; color:#7E908D}
.footer-bot .legal{display:flex; gap:20px; flex-wrap:wrap}
.footer-bot a{text-decoration:none}

/* ---------- reveals ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--e-in), transform .7s var(--e-in)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-copy{max-width:none}
  .hero-stage{order:-1; max-width:380px; min-height:320px}
  .hero{padding-top:120px}
  .kena-stage{grid-template-columns:1fr; gap:36px}
  .kena-panel{max-width:460px; margin:0 auto; min-height:380px}
  .diff-grid{grid-template-columns:1fr; gap:18px}
  .multi{grid-template-columns:1fr; gap:36px}
  .flow{grid-template-columns:1fr 1fr}
  .step .conn{display:none}
}
@media (max-width:720px){
  .nav-links{position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(251,250,247,.97); backdrop-filter:blur(16px); border:1px solid var(--linea);
    border-radius:16px; padding:12px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s}
  .nav.dark .nav-links{background:rgba(10,14,22,.97); border-color:rgba(255,255,255,.1)}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:12px 16px}
  .nav-burger{display:block}
  .nav-cta{display:none}
  .flow{grid-template-columns:1fr}
  .problem-grid{grid-template-columns:1fr 1fr}
  .shot{width:86vw}
  .frame .viewport{aspect-ratio:9/13}
  .hero-meta{gap:14px}
}
@media (max-width:440px){
  .problem-grid{grid-template-columns:1fr}
}

/* ============================================================
   NUEVAS SECCIONES v3
   ============================================================ */

/* barra de progreso de lectura */
.read-progress{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--teal),var(--teal-vivo)); z-index:300; pointer-events:none}

/* nav: sección activa (scroll-spy) */
.nav-links a.active{color:var(--tinta); background:rgba(14,154,147,.10)}
.nav.dark .nav-links a.active{color:#fff; background:rgba(255,255,255,.12)}
.nav-links a.nav-kena.active{color:var(--k-violeta)}

/* CTA intermedio centrado */
.cta-mid{display:flex; justify-content:center; margin-top:50px}

/* ---------- D · UN DÍA CON KENA ---------- */
.dia-head{max-width:680px}
.timeline{margin-top:54px; display:grid; gap:16px}
.tl-item{display:grid; grid-template-columns:92px 1fr; gap:32px; align-items:start}
.tl-time{font-family:var(--f-dato); font-size:15px; color:var(--teal); padding-top:20px; text-align:right; font-weight:500}
.tl-card{border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:20px 22px; position:relative}
.tl-card::before{content:""; position:absolute; left:-21px; top:26px; width:11px; height:11px; border-radius:50%;
  background:var(--k-violeta); box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--linea)}
.tl-card .hd{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.tl-card .hd .av{width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none}
.tl-card .hd .nm{font-family:var(--f-kena); font-weight:700; font-size:14px}
.tl-card p{font-size:14.5px; color:var(--txt-soft); line-height:1.5}
.tl-card p b{color:var(--tinta); font-weight:600}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px}
.pillars .pillar:nth-child(2){order:3}
.pillars .pillar:nth-child(3){order:2}
.pillar{border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:26px 24px; display:flex; flex-direction:column}
.pillar .ico{width:42px;height:42px;border-radius:11px;background:#F3EEFE;color:var(--k-violeta);display:grid;place-items:center;margin-bottom:16px}
.pillar .ico svg{width:21px;height:21px}
.pillar h4{font-size:1.15rem; font-weight:600; margin-bottom:8px}
.pillar p{font-size:13.5px; color:var(--txt-mut); line-height:1.5}
.autonomy{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap}
.autonomy .lvl{font-family:var(--f-dato); font-size:11px; padding:4px 9px; border-radius:7px; border:1px solid var(--linea); color:var(--txt-mut)}
.autonomy .lvl.on{background:var(--teal-palido); border-color:transparent; color:var(--teal)}

/* ---------- A · TODO LO QUE INCLUYE ---------- */
.mod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px}
.mod{display:flex; gap:13px; align-items:flex-start; padding:18px 18px; border:1px solid var(--linea); border-radius:var(--r-card); background:#fff; transition:border-color .2s, transform .2s}
.mod:hover{border-color:#CFE7E3; transform:translateY(-2px)}
.mod .ico{width:34px;height:34px;border-radius:9px;background:var(--teal-palido);color:var(--teal);display:grid;place-items:center;flex:none}
.mod .ico svg{width:18px;height:18px}
.mod h4{font-size:14.5px; font-weight:600; margin-bottom:3px}
.mod p{font-size:12.5px; color:var(--txt-mut); line-height:1.4}

/* ---------- B · UNA SUSCRIPCIÓN, NO SEIS ---------- */
.swap{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,4vw,48px); align-items:center; margin-top:56px}
.stack{display:grid; gap:9px}
.stack .tool{display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--linea); border-radius:var(--r-card); background:#fff; color:var(--tinta); font-size:14px; font-weight:500}
.stack .tool .tn{flex:1; color:var(--txt-mut)}
.stack .tool-foot{padding:6px 4px 0; font-size:13px; color:var(--gris); line-height:1.5; max-width:34ch}
.one-teaser{display:inline-block; margin-top:20px; font-family:var(--f-dato); font-size:13px; font-weight:500; color:var(--teal); text-decoration:none; transition:.2s}
.one-teaser:hover{color:#0CA89F; transform:translateY(2px)}
.stack .tool .tp{font-family:var(--f-dato); font-weight:500; color:var(--gris); font-variant-numeric:tabular-nums; white-space:nowrap}
.stack .tool .d{width:8px;height:8px;border-radius:2px;background:#D9D3C8; flex:none}
.stack .tool-total{display:flex; align-items:center; gap:12px; padding:16px; border:1.5px solid var(--tinta); border-radius:var(--r-card); background:var(--tinta); color:#fff; margin-top:3px}
.stack .tool-total .tn{flex:1; font-weight:600; font-size:14.5px}
.stack .tool-total .tp.total{font-family:var(--f-dato); font-size:1.5rem; font-weight:500; color:#fff; letter-spacing:-.01em}
.stack .tool-total .tp.total small{font-size:.85rem; color:#9FB0AD; margin-left:2px}
.swap-arrow{display:grid; place-items:center; color:var(--teal); animation:arrowpulse 2s ease-in-out infinite}
@keyframes arrowpulse{0%,100%{transform:translateX(0); opacity:.7}50%{transform:translateX(5px); opacity:1}}
.swap-arrow svg{width:30px;height:30px}
.one-card{border:1.5px solid var(--teal); border-radius:var(--r-panel); background:linear-gradient(180deg,#F0FAF8,#fff); padding:30px 28px; text-align:center; box-shadow:0 0 36px rgba(14,154,147,.14)}
.one-card .mk{height:42px; margin:0 auto 16px}
.one-card h3{font-size:1.4rem; margin-bottom:10px}
.one-card .one-price{display:flex; align-items:baseline; justify-content:center; gap:7px; margin-bottom:10px}
.one-card .one-price .op{font-size:2.6rem; font-weight:600; letter-spacing:-.02em; color:var(--tinta); line-height:1}
.one-card .one-price .opm{font-size:13.5px; color:var(--txt-mut)}
.one-card p{font-size:14px; color:var(--txt-soft); line-height:1.5}
.one-card .lst{display:flex; flex-direction:column; gap:7px; margin-top:18px; text-align:left}
.one-card .lst span{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--txt-soft)}
.one-card .lst svg{width:15px;height:15px;color:var(--teal);flex:none}

/* ---------- C · VERTICALES (marquee informativo en una línea) ---------- */
.vert-marquee{margin-top:48px; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.vert-track{display:flex; gap:16px; width:max-content; animation:marq var(--marq-dur,40s) linear infinite}
.vert-marquee:hover .vert-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(var(--marq,-50%))}}
.vchip{display:inline-flex; align-items:center; gap:13px; padding:15px 24px; border:1px solid var(--linea); border-radius:16px; background:#fff; font-size:16px; font-weight:600; color:var(--tinta); white-space:nowrap; transition:transform .25s var(--e-out), border-color .25s}
.vchip:hover{transform:translateY(-3px); border-color:#CFE7E3}
.vchip .ico{width:40px;height:40px;border-radius:11px;background:var(--teal-palido);color:var(--teal);display:grid;place-items:center;flex:none}
.vchip .ico svg{width:21px;height:21px}

/* ---------- G · MIGRACIÓN ---------- */
.mig{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.mig-steps{display:grid; gap:14px; margin-top:28px}
.mig-steps .s{display:flex; gap:14px; align-items:flex-start}
.mig-steps .s .n{width:30px;height:30px;border-radius:9px;background:var(--teal-palido);color:var(--teal);font-family:var(--f-dato);font-size:13px;display:grid;place-items:center;flex:none}
.mig-steps .s h4{font-size:15px;font-weight:600;margin-bottom:2px}
.mig-steps .s p{font-size:13.5px;color:var(--txt-mut);line-height:1.45}
.mig-from{border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:26px 24px}
.mig-from .t{font-family:var(--f-dato); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin-bottom:16px}
.mig-from .src{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--linea); font-size:14px; font-weight:500}
.mig-from .src:last-child{border-bottom:0}
.mig-from .src .ok{font-family:var(--f-dato); font-size:11px; color:var(--teal)}

/* ---------- E · PRECIOS ---------- */
.precio-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; margin-top:54px; align-items:stretch}
.precio-main{border:1.5px solid var(--teal); border-radius:var(--r-panel); background:#fff; padding:36px 34px; display:flex; flex-direction:column}
.precio-badge{align-self:flex-start; font-family:var(--f-dato); font-size:11px; letter-spacing:.06em; color:var(--teal); background:var(--teal-palido); padding:5px 11px; border-radius:7px; margin-bottom:18px}
.precio-main .amt{display:flex; align-items:baseline; gap:8px}
.precio-main .amt .n{font-size:clamp(3rem,6vw,4.2rem); font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--tinta)}
.precio-main .amt .u{font-size:1.05rem; color:var(--txt-mut)}
.precio-main .sub{font-size:14.5px; color:var(--txt-soft); margin-top:10px}
.precio-incl{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin:24px 0}
.precio-incl span{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--txt-soft)}
.precio-incl svg{width:15px;height:15px;color:var(--teal);flex:none}
.precio-side{display:grid; gap:16px}
.precio-alt{border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:24px 24px}
.precio-alt .lab{font-family:var(--f-dato); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
.precio-alt .v{font-size:1.6rem; font-weight:500; letter-spacing:-.02em; margin:8px 0 4px; color:var(--tinta)}
.precio-alt p{font-size:13px; color:var(--txt-mut); line-height:1.45}
.precio-note{font-family:var(--f-dato); font-size:11.5px; color:var(--gris); margin-top:20px; text-align:center}

/* ---------- F · FAQ ---------- */
.faq{max-width:820px; margin:48px auto 0; border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; gap:16px;
  font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:500; color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{margin-left:auto; flex:none; width:26px; height:26px; position:relative; transition:transform .3s}
.faq summary .pm::before, .faq summary .pm::after{content:""; position:absolute; inset:50% 4px auto 4px; height:2px; background:var(--teal); border-radius:2px}
.faq summary .pm::after{transform:rotate(90deg); transition:transform .3s}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .ans{padding:0 4px 24px; font-size:15px; color:var(--txt-soft); line-height:1.6; max-width:68ch}

/* ---------- H · FORMULARIO DE DEMO ---------- */
.demo-form{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:560px; margin:36px auto 0; text-align:left}
.demo-form .full{grid-column:1/-1}
.demo-form label{display:block; font-size:12.5px; color:#AEB9C7; margin-bottom:6px; font-weight:500}
.demo-form input, .demo-form select{width:100%; padding:13px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:#fff; font-family:var(--f); font-size:15px; transition:border-color .2s, background .2s}
.demo-form input::placeholder{color:#7E8AA0}
.demo-form input:focus, .demo-form select:focus{outline:none; border-color:var(--teal-vivo); background:rgba(255,255,255,.08)}
.demo-form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E8AA0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.demo-form .submit{grid-column:1/-1; margin-top:6px}
.demo-form .submit .btn{width:100%; justify-content:center}
.form-ok{grid-column:1/-1; display:none; padding:16px; border-radius:12px; background:rgba(43,191,182,.12); border:1px solid rgba(43,191,182,.3); color:var(--teal-hi); font-size:14px; text-align:center}
.form-ok.show{display:block}

/* responsive nuevas secciones */
@media (max-width:1000px){
  .pillars{grid-template-columns:1fr; gap:14px}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .swap{grid-template-columns:1fr; gap:24px}
  .swap-arrow{transform:rotate(90deg)}
  .mig{grid-template-columns:1fr; gap:32px}
  .precio-wrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .tl-item{grid-template-columns:60px 1fr; gap:24px}
  .tl-card::before{left:-16px}
  .tl-time{font-size:13px}
  .mod-grid{grid-template-columns:1fr}
  .precio-incl{grid-template-columns:1fr}
  .demo-form{grid-template-columns:1fr}
}

/* ---------- bandas oscuras: tarjetas con profundidad por borde ---------- */
.theme-dark .tl-card{background:#17171F; border-color:rgba(255,255,255,.09)}
.theme-dark .tl-card::before{background:var(--k-lavanda); box-shadow:0 0 0 4px #0A0A16, 0 0 0 5px rgba(255,255,255,.14)}
.theme-dark .tl-card p{color:#C9D4D2}
.theme-dark .tl-card p b{color:#fff}
.theme-dark .tl-time{color:var(--teal-vivo)}
.theme-dark .pillar{background:#17171F; border-color:rgba(255,255,255,.09)}
.theme-dark .pillar h4{color:#fff}
.theme-dark .pillar p{color:#AFC0BD}
.theme-dark .pillar .ico{background:rgba(167,139,250,.18); color:#C4B5FD}
.theme-dark .autonomy .lvl{border-color:rgba(255,255,255,.16); color:#AFC0BD}
.theme-dark .autonomy .lvl.on{background:rgba(43,191,182,.18); border-color:transparent; color:var(--teal-hi)}
/* diferenciador oscuro: las tarjetas suben un escalón de luz */
.theme-dark .diff{background:#17171F; border-color:rgba(255,255,255,.09)}
.theme-dark .diff p{color:#C9D4D2}
.theme-dark .diff .ico{background:rgba(43,191,182,.16); color:var(--teal-hi)}
.theme-dark .diff .demo{border-top-color:rgba(255,255,255,.10)}
.theme-dark .estim{color:var(--teal-hi); background:rgba(43,191,182,.14)}

/* ============================================================
   v5 INTERACTIVO — simuladores, chat de Kena, chips de confianza
   ============================================================ */

/* chip de confianza (B4) — hecho/estimación como firma de marca */
.conf{position:relative; display:inline-flex; align-items:center; gap:7px; cursor:default;
  font-family:var(--f-dato); font-size:11.5px; letter-spacing:.02em; color:var(--txt-mut);
  border:1px solid var(--linea); border-radius:var(--r-pill); padding:5px 11px; background:#fff}
.conf::before{content:""; width:7px; height:7px; border-radius:50%}
.conf-est::before{background:var(--coral)}
.conf-val::before{background:var(--teal)}
.conf-tip{position:absolute; bottom:calc(100% + 8px); left:0; width:max-content; max-width:240px;
  background:var(--tinta); color:#fff; font-family:var(--f); font-size:12px; line-height:1.4; letter-spacing:0;
  padding:8px 11px; border-radius:9px; opacity:0; transform:translateY(4px); pointer-events:none; transition:.18s var(--e-out); z-index:5}
.conf:hover .conf-tip, .conf:focus .conf-tip, .conf:focus-visible .conf-tip{opacity:1; transform:none}
.theme-dark .conf{background:#17171F; border-color:rgba(255,255,255,.12); color:#AFC0BD}

/* sliders (teal, accesibles) */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:var(--linea); outline-offset:4px; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--teal); border:3px solid #fff; box-shadow:0 0 0 1px var(--linea); cursor:grab}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--teal); border:3px solid #fff; cursor:grab}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}

/* B2 · simulador "dinero sobre la mesa" */
.sim{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center; margin-top:48px;
  border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:clamp(24px,4vw,40px)}
.sim-controls{display:grid; gap:24px}
.sim-row label{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; font-weight:500; color:var(--txt-soft); margin-bottom:10px}
.sim-row output{font-size:16px; color:var(--teal); font-weight:500}
.sim-result{text-align:center; border-left:1px solid var(--linea); padding-left:clamp(20px,3vw,40px)}
.sim-lab{font-size:13.5px; color:var(--txt-mut)}
.sim-num{font-size:clamp(2.6rem,5vw,3.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.05; color:var(--coral); margin:8px 0 14px}
.sim-break{font-family:var(--f-dato); font-size:11.5px; color:var(--gris); line-height:1.5; margin-top:14px}
@media (max-width:760px){ .sim{grid-template-columns:1fr} .sim-result{border-left:0; border-top:1px solid var(--linea); padding-left:0; padding-top:24px} }

/* B6 · simulador de cuotas */
.fin-sim{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,44px); align-items:center; margin-top:40px;
  border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:clamp(22px,3vw,32px)}
.fin-sim-controls{display:grid; gap:22px}
.fin-lenders{display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--linea); padding-left:clamp(18px,3vw,32px)}
.fin-lenders .sim-lab{font-size:13px; color:var(--txt-mut)}
.lender-list{display:grid; gap:10px}
.lender{border:1px solid var(--linea); border-radius:12px; padding:12px 14px; background:#fff; display:grid; gap:3px; transition:.2s var(--e-out)}
.lender.best{border-color:var(--teal); background:var(--teal-palido)}
.lender .ln{display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:var(--tinta)}
.lender .lbest{font-size:10px; font-weight:600; color:#fff; background:var(--teal); padding:2px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em}
.lender .lc{font-size:1.35rem; font-weight:600; color:var(--tinta); letter-spacing:-.015em}
.lender .lt{font-size:12px; color:var(--txt-mut)}
@media (max-width:760px){ .fin-sim{grid-template-columns:1fr} .fin-lenders{border-left:0; border-top:1px solid var(--linea); padding-left:0; padding-top:20px} }

/* B1 · chat de Kena */
.chat-wrap{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,60px); align-items:center}
.chat-intro{max-width:440px}
.chat-prompts{display:flex; flex-direction:column; gap:10px; margin-top:28px; align-items:flex-start}
.cprompt{font-family:var(--f); font-size:14.5px; font-weight:500; color:var(--tinta); cursor:pointer;
  background:#fff; border:1px solid var(--linea); border-radius:13px; padding:11px 18px; text-align:left; transition:.18s var(--e-out)}
.cprompt:hover{border-color:var(--teal); background:var(--teal-palido); transform:translateY(-1px)}
.cprompt::before{content:"“"; color:var(--k-violeta); font-weight:700; margin-right:4px}
.chat-panel{border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; overflow:hidden; display:flex; flex-direction:column; height:min(72vh,560px)}
.chat-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--linea); background:linear-gradient(180deg,#FBF8FF,#fff)}
.chat-head .av{width:36px;height:36px;border-radius:10px;overflow:hidden;flex:none}
.chat-head .who{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.chat-head .nm{font-family:var(--f-kena); font-weight:700; font-size:16px}
.chat-status{flex-basis:100%; font-family:var(--f-dato); font-size:11px; color:var(--gris); display:flex; align-items:center; gap:6px}
.chat-status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal)}
.chat-voice{margin-left:auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--linea); background:#fff; color:var(--teal); cursor:pointer; display:grid; place-items:center; flex:none; transition:.2s}
.chat-voice:hover{background:var(--teal-palido)}
.chat-voice svg{width:18px;height:18px}
.chat-voice.listening{background:var(--teal); color:#fff; animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,154,147,.45)}50%{box-shadow:0 0 0 7px rgba(14,154,147,0)}}
.chat-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth}
.cmsg{display:flex; gap:10px; max-width:88%}
.cmsg.user{align-self:flex-end}
.cmsg .cav{width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none}
.cmsg .cbody{font-size:14.5px; line-height:1.5}
.cmsg.kena .cbody{background:#F3EEFE; color:var(--tinta); border-radius:4px 14px 14px 14px; padding:11px 14px}
.cmsg.user .cbody{background:var(--teal); color:#fff; border-radius:14px 14px 4px 14px; padding:11px 14px}
.ctext{margin:0}
.ctyping{display:flex; gap:4px; padding:4px 2px}
.ctyping span{width:7px; height:7px; border-radius:50%; background:var(--k-lavanda); animation:typing 1s infinite}
.ctyping span:nth-child(2){animation-delay:.15s} .ctyping span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.cc-card{margin-top:10px; background:#fff; border:1px solid #E7DFF6; border-radius:12px; padding:13px 14px; font-size:13px; color:var(--tinta)}
.cc-t{font-weight:600; margin-bottom:8px}
.cc-row{display:flex; justify-content:space-between; gap:10px; padding:4px 0}
.cc-row.sub{color:var(--txt-mut); font-size:12px}
.cc-ok{color:var(--teal); font-weight:600}
.cc-stars{color:#E0A93B; letter-spacing:2px}
.cc-reply{margin-top:8px; border-left:2px solid var(--teal); padding-left:10px; color:var(--txt-soft); line-height:1.5}
.cc-big{font-family:var(--f-dato); font-size:1.8rem; color:var(--tinta); font-weight:500}
.cc-spark{display:flex; align-items:flex-end; gap:4px; height:36px; margin:8px 0}
.cc-spark i{width:9px; background:var(--teal); border-radius:3px; opacity:.85}
.cc-conf{display:flex; align-items:center; gap:7px; font-family:var(--f-dato); font-size:11px; color:var(--gris)}
.cc-dot{width:7px;height:7px;border-radius:50%} .cc-dot.val{background:var(--teal)}
.chat-input{display:flex; gap:10px; padding:14px; border-top:1px solid var(--linea)}
.chat-input input{flex:1; border:1px solid var(--linea); border-radius:var(--r-pill); padding:12px 16px; font-family:var(--f); font-size:15px; color:var(--tinta)}
.chat-input input:focus{outline:none; border-color:var(--teal)}
.chat-send{width:46px; height:46px; border-radius:50%; border:0; background:var(--teal); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none; transition:.2s}
.chat-send:hover{background:#0CA89F} .chat-send svg{width:19px;height:19px}
@media (max-width:1000px){ .chat-wrap{grid-template-columns:1fr; gap:32px} .chat-intro{max-width:none} .chat-prompts{flex-direction:row; flex-wrap:wrap} .chat-panel{height:min(70vh,520px)} }

/* (B3 selector retirado — verticales solo informativas) */

/* B7 · CTA flotante */
.float-cta{position:fixed; right:20px; bottom:20px; z-index:180; display:inline-flex; align-items:center; gap:8px;
  background:var(--teal); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  padding:14px 22px; border-radius:14px; box-shadow:0 6px 24px rgba(14,154,147,.32);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none; transition:.32s var(--e-live)}
.float-cta.show{opacity:1; transform:none; pointer-events:auto}
.float-cta:hover{background:#0CA89F}
.float-cta::before{content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:pulse 1.6s infinite}
@media (max-width:720px){ .float-cta{right:14px; bottom:14px; padding:12px 18px; font-size:14px} }

/* banner de cookies */
.cookie-bar{position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:260; width:min(680px,calc(100vw - 28px));
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  background:var(--tinta); color:#fff; border-radius:16px; padding:16px 20px; transition:transform .4s var(--e-out)}
.cookie-bar.show{transform:translate(-50%,0)}
.cookie-bar p{font-size:13.5px; color:#D7E0DE; line-height:1.45; flex:1; min-width:220px}
.cookie-bar a{color:var(--teal-hi)}
.cookie-acts{display:flex; gap:10px}
.cookie-bar .btn{padding:10px 18px; font-size:14px}
.cookie-bar .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}

/* formulario: consentimiento + microtexto */
.demo-form .consent{display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer; margin-top:4px}
.demo-form .consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--teal)}
.demo-form .consent span{font-size:12.5px; color:#AEB9C7; line-height:1.45}
.demo-form .consent a{color:var(--teal-hi)}
.form-micro{font-family:var(--f-dato); font-size:11px; color:#8FA0AD; text-align:center; margin-top:2px}

/* ---------- pilares dinámicos (Un día con Kena) ---------- */
.wave{display:flex; align-items:center; justify-content:center; gap:3px; height:50px; margin:auto 0}
.wave i{flex:1; min-width:0; border-radius:3px; height:30%;
  background:linear-gradient(180deg,#F0ABFC,#A78BFA 55%,#7C3AED);
  animation:wv 1.2s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:.18s; animation-duration:1.5s}
.wave i:nth-child(3n+1){animation-delay:.38s}
.wave i:nth-child(5n){animation-delay:.58s; animation-duration:1.35s}
.wave i:nth-child(7n){animation-delay:.12s}
@keyframes wv{0%,100%{height:16%}50%{height:92%}}
.notif-stack{position:relative; margin:auto 0; height:118px}
.notif{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:10px;
  background:rgba(42,40,54,.72); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:9px 13px 9px 9px; font-size:12.5px; color:#EDEAF6;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transform-origin:top center;
  transition:transform .55s var(--e-live), opacity .5s var(--e-out)}
.notif[data-depth="0"]{transform:translateY(0) scale(1); opacity:1; z-index:30}
.notif[data-depth="1"]{transform:translateY(13px) scale(.95); opacity:.72; z-index:20}
.notif[data-depth="2"]{transform:translateY(24px) scale(.9); opacity:.4; z-index:10}
.notif.enter{transform:translateY(-12px) scale(.82); opacity:0}
.notif.gone{transform:translateY(34px) scale(.85); opacity:0; z-index:5}
.notif .ni{width:26px;height:26px;border-radius:8px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.notif .ni img{width:100%;height:100%;display:block}
.notif:nth-child(2){animation-delay:2s} .notif:nth-child(3){animation-delay:4s}
@keyframes notifIn{0%{opacity:0;transform:translateX(12px)}5%{opacity:1;transform:none}30%{opacity:1;transform:none}36%{opacity:0;transform:translateX(-8px)}100%{opacity:0;transform:translateX(-8px)}}
.autonomy-switch{display:flex; flex-direction:column; gap:5px; margin-top:auto; align-items:stretch;
  background:rgba(255,255,255,.05); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:5px}
.aut-opt{font-family:var(--f); font-size:13px; font-weight:500; color:#CDC7E0; background:transparent; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; transition:.2s; text-align:left}
.aut-opt:hover{color:#fff} .aut-opt.on{background:linear-gradient(135deg,#E879F9,#A78BFA 55%,#7C3AED); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.42)}
.aut-desc{margin-top:14px; margin-bottom:auto; font-size:13px; color:#C9D4D2; line-height:1.5; min-height:2.6em}

/* ---------- multisede: vida en la torre de control ---------- */
@media (prefers-reduced-motion:no-preference){
  .multi-vis .sede-node:not(.hub){animation:bob 5.5s ease-in-out infinite}
  .multi-vis .sede-node:nth-of-type(3){animation-delay:.9s}
  .multi-vis .sede-node:nth-of-type(4){animation-delay:1.8s}
  .sede-node.hub::after{content:""; position:absolute; inset:-7px; border-radius:18px; border:1.5px solid var(--teal); opacity:0; animation:hubpulse 2.8s ease-out infinite; pointer-events:none}
  .sede-node .pt{animation:dotpulse 2.4s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hubpulse{0%{opacity:.55; transform:scale(1)}100%{opacity:0; transform:scale(1.14)}}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(14,154,147,.5)}50%{box-shadow:0 0 0 5px rgba(14,154,147,0)}}

/* precio: más llamativo y justificado */
.precio-justify{font-size:13.5px; color:var(--txt-mut); line-height:1.5; margin:-8px 0 4px; max-width:44ch}
.precio-main{position:relative; overflow:hidden}
.precio-main::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--teal),var(--teal-vivo),var(--teal)); background-size:200% 100%; animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
/* tarifa fundadora: bloque oscuro con detalles Kena y resplandor */
.precio-alt.founder{background:#0A0A16; border:1px solid rgba(167,139,250,.4); position:relative; overflow:hidden; box-shadow:0 0 44px rgba(124,58,237,.28)}
.precio-alt.founder::before{content:""; position:absolute; top:-45%; right:-25%; width:80%; height:130%; pointer-events:none;
  background:radial-gradient(circle, rgba(168,139,250,.4), transparent 68%); animation:founderGlow 5s ease-in-out infinite}
@keyframes founderGlow{0%,100%{opacity:.55; transform:scale(1)}50%{opacity:1; transform:scale(1.12)}}
.precio-alt.founder .founder-badge{position:relative; z-index:1; background:linear-gradient(135deg,#E879F9,#7C3AED); color:#fff; display:inline-block; margin-bottom:14px}
.founder-title{position:relative; z-index:1; font-family:var(--f); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#C4B5FD; margin-bottom:10px}
.precio-alt.founder .v{position:relative; z-index:1; font-size:2.1rem; background:linear-gradient(135deg,#F0ABFC,#A78BFA); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.precio-alt.founder .v .vm{font-size:1rem; -webkit-text-fill-color:#9C93BE; color:#9C93BE}
.precio-alt.founder p{position:relative; z-index:1; color:#C9C4DE}
.precio-alt.founder p b{color:#fff}
.founder-badge{display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:linear-gradient(135deg,#E879F9,#7C3AED); padding:4px 10px; border-radius:7px; margin-bottom:12px}

.multi-links{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.multi-links .ln{stroke:rgba(124,58,237,.30); stroke-width:.4; stroke-dasharray:1.6 2; fill:none}

/* ---------- Klinaria Esencial (plan de entrada, subordinado) ---------- */
.esencial-card{margin-top:30px; border:1px solid var(--linea); border-radius:var(--r-panel); background:#fff; padding:clamp(26px,3vw,38px)}
.es-head{display:flex; justify-content:space-between; gap:24px; align-items:flex-start; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--linea)}
.es-headtext{max-width:48ch}
.es-title{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.es-sub{font-size:14.5px; color:var(--txt-mut); margin-top:8px; line-height:1.5}
.es-price{text-align:right; flex:none}
.es-amt{font-size:clamp(1.9rem,3.4vw,2.3rem); font-weight:600; letter-spacing:-.02em; color:var(--tinta); line-height:1}
.es-amt .es-m{font-size:1rem; color:var(--txt-mut); font-weight:400; margin-left:2px}
.es-note{display:block; font-size:11.5px; color:var(--gris); margin-top:6px}
.es-cols{display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(24px,4vw,48px); padding:24px 0}
.es-incl h4, .es-excl h4{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px}
.es-incl h4{color:var(--teal)} .es-excl h4{color:var(--gris)}
.es-incl ul, .es-excl ul{list-style:none; display:grid; gap:10px}
.es-incl li, .es-excl li{position:relative; padding-left:26px; font-size:14px; line-height:1.5}
.es-incl li{color:var(--txt-soft)} .es-excl li{color:var(--gris)}
.es-incl li::before{content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%; background:var(--teal-palido);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E9A93' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.es-excl li::before{content:""; position:absolute; left:2px; top:11px; width:11px; height:2px; border-radius:2px; background:#C9C3B6}
.es-foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--linea)}
.es-bridge{font-size:14px; color:var(--txt-soft); max-width:52ch; line-height:1.5}
.es-bridge a{color:var(--teal); text-decoration:none} .es-bridge a:hover{text-decoration:underline}
@media (max-width:760px){ .es-cols{grid-template-columns:1fr; gap:24px} .es-price{text-align:left} .es-foot .btn{width:100%; justify-content:center} }

/* ---------- respaldo Limme Labs (footer) ---------- */
.backed{position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
  margin-top:54px; padding:40px 20px; border-top:1px solid rgba(255,255,255,.10)}
.backed::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:340px; height:170px; background:radial-gradient(60% 80% at 50% 0%, rgba(43,252,158,.16), transparent 70%); pointer-events:none}
.backed-eyebrow{position:relative; font-family:var(--f-dato); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#7E908D}
.backed-logo{position:relative; display:inline-flex; transition:transform .3s var(--e-out), filter .3s}
.backed-logo img{height:34px; width:auto; filter:drop-shadow(0 0 22px rgba(43,252,158,.28))}
.backed-logo:hover{transform:translateY(-2px)}
.backed-tag{position:relative; font-size:13px; color:#9FB0AD}

/* entorno sin rAF/transiciones (capturas): fija estados al instante */
html.no-anim *, html.no-anim *::before, html.no-anim *::after{
  transition-duration:1ms !important; animation-duration:1ms !important;
  animation-delay:0s !important; animation-iteration-count:1 !important;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .scroll-ind .mouse::after{animation:none}
  .vert-track{animation:none !important; transform:none !important}
  .vert-marquee{overflow-x:auto}
  .wave i, .notif{animation:none !important}
  .notif{opacity:1; transform:none}
}