*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#050506; --bg2:#0b0b0e; --ink:#F6F6F3; --soft:#B7B7B4; --faint:#6a6a6d;
  --kai:#9BE014; --lia:#EBBEA3; --maia:#4FC5DA; --exia:#00FFBA; --tania:#A855F7;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --grad:linear-gradient(90deg,#9BE014 0%,#4FC5DA 52%,#F5860C 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(22px,5vw,80px);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(79,197,218,.06),transparent 55%);pointer-events:none;z-index:0}
::selection{background:rgba(155,224,20,.28)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.0}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);opacity:0;transition:opacity 1s var(--ease) .3s;pointer-events:none}
.nav.show{opacity:1;pointer-events:auto}
.nav.hero-hidden{opacity:0;pointer-events:none}
.brandmark{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:600;font-size:13px;letter-spacing:.02em}
.brandmark .seed{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(79,197,218,.6)}
.brandmark b{font-weight:700}
.brandmark .tm{font-size:9px;vertical-align:super;color:var(--faint)}
.nav .enter{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;border:1px solid var(--line2);border-radius:999px;padding:9px 18px;transition:.3s var(--ease)}
.nav .enter:hover{border-color:var(--ink);background:var(--ink);color:#000}

/* ---- generic act ---- */
.act{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:14vh var(--pad);max-width:1400px;margin:0 auto}
.k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.lead-lg{font-family:'Sora';font-weight:700;letter-spacing:-.04em;line-height:1.04;font-size:clamp(1.9rem,6.4vw,5rem)}
.sub{color:var(--soft);font-size:clamp(1rem,2.2vw,1.35rem);max-width:34ch;line-height:1.5;font-weight:400}

/* reveal */
.rev{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rev.pre{opacity:0;transform:translateY(30px)}
.d1{transition-delay:.12s}.d2{transition-delay:.26s}.d3{transition-delay:.42s}.d4{transition-delay:.58s}.d5{transition-delay:.74s}

/* ---- ACT1 opening panels ---- */
.opening{padding:0}
.panel{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh var(--pad);gap:22px}
.panel .big{font-family:'Sora';font-weight:700;letter-spacing:-.04em;line-height:1.06;font-size:clamp(1.8rem,5.8vw,4.4rem);max-width:17ch}
.panel .whisper{color:var(--faint)}
.logo-reveal .wm{font-family:'Sora';font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:clamp(2.3rem,10vw,7.2rem)}
.logo-reveal .wm .two{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-reveal .wm .tm{font-size:.22em;vertical-align:top;color:var(--faint);-webkit-text-fill-color:var(--faint)}
.logo-reveal .tagline{font-family:'Sora';font-weight:500;font-size:clamp(1rem,2.2vw,1.4rem);color:var(--ink);letter-spacing:-.02em}
.cta{display:inline-flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:#000;background:var(--ink);border-radius:999px;padding:15px 26px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);margin-top:8px}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(255,255,255,.4)}
.cta .arr{transition:transform .35s var(--ease)}
.cta:hover .arr{transform:translateX(4px)}
.cta.ghost{color:var(--ink);background:transparent;border:1px solid var(--line2)}
.cta.ghost:hover{border-color:var(--ink);box-shadow:none;background:rgba(255,255,255,.04)}
.scrollhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.2em;color:var(--faint);animation:hint 2.6s var(--ease) infinite}
@keyframes hint{0%,100%{opacity:.3;transform:translate(-50%,0)}50%{opacity:.9;transform:translate(-50%,6px)}}

/* ---- ACT2 core : fondo negro + manchas de color itinerando ---- */
.core-act{align-items:center;text-align:center}
.corewrap{position:relative;width:min(86vw,430px);aspect-ratio:1;margin:clamp(26px,6vh,66px) auto;display:grid;place-items:center}
.core-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 120px -24px rgba(79,197,218,.30),inset 0 0 46px 12px rgba(0,0,0,.75);animation:breathe 8s var(--ease) infinite}
.blob{position:absolute;width:62%;height:62%;top:19%;left:19%;border-radius:50%;filter:blur(38px);mix-blend-mode:screen}
.b-g{background:radial-gradient(circle,rgba(155,224,20,.95),transparent 64%);animation:roamg 15s ease-in-out infinite}
.b-c{background:radial-gradient(circle,rgba(79,197,218,.92),transparent 64%);animation:roamc 18s ease-in-out infinite}
.b-o{background:radial-gradient(circle,rgba(245,134,12,.9),transparent 64%);animation:roamo 16.5s ease-in-out infinite}
.b-r{background:radial-gradient(circle,rgba(232,162,120,.7),transparent 66%);animation:roamr 20s ease-in-out infinite}
.b-v{background:radial-gradient(circle,rgba(168,85,247,.85),transparent 64%);animation:roamv 17.5s ease-in-out infinite}
@keyframes roamg{0%,100%{transform:translate(-26%,-30%)}33%{transform:translate(20%,-12%)}66%{transform:translate(-4%,20%)}}
@keyframes roamc{0%,100%{transform:translate(28%,-8%)}33%{transform:translate(6%,26%)}66%{transform:translate(30%,16%)}}
@keyframes roamo{0%,100%{transform:translate(-8%,30%)}33%{transform:translate(22%,8%)}66%{transform:translate(-24%,4%)}}
@keyframes roamr{0%,100%{transform:translate(-30%,8%)}33%{transform:translate(-8%,-24%)}66%{transform:translate(16%,28%)}}
@keyframes roamv{0%,100%{transform:translate(6%,-26%)}33%{transform:translate(-20%,10%)}66%{transform:translate(24%,-6%)}}
.corelegend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.corelegend span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--soft);display:inline-flex;align-items:center;gap:8px}
.corelegend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
/* ---- ACT3 generation one ---- */
.gen{text-align:center;align-items:center}
.family{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vw,34px);margin-top:clamp(30px,6vh,64px);width:100%}
.fam{flex:1 1 160px;max-width:260px;display:flex;flex-direction:column;align-items:center;gap:10px}
.fam .botimg{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.fam .nm{font-family:'Sora';font-weight:700;font-size:15px;letter-spacing:.01em}
.fam .rl{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.1em;color:var(--faint)}
.fam .dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}

/* ---- ACT4 reveals ---- */
.reveal{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,5vw,70px);position:relative;overflow:hidden}
.reveal .glow{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;filter:blur(90px);opacity:.16;z-index:0;pointer-events:none}
.reveal.left .glow{right:-10vw;top:50%;transform:translateY(-50%)}
.reveal.right .glow{left:-10vw;top:50%;transform:translateY(-50%)}
.reveal .copy{position:relative;z-index:2}
.reveal.right{grid-template-columns:1fr 1fr}
.reveal.right .fig{order:-1}
.reveal .fig{position:relative;z-index:1;display:flex;justify-content:center}
.reveal .fig .botimg{width:min(46vw,440px);height:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.7))}
.reveal .tag{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.reveal h2{font-size:clamp(1.75rem,4.8vw,3.7rem);margin:16px 0 20px}
.reveal .desc{color:var(--soft);font-size:clamp(1rem,1.7vw,1.2rem);max-width:30ch;line-height:1.55}
.bens{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.ben{font-family:'IBM Plex Mono';font-size:13px;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:9px}
.ben::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.reveal .open{margin-top:38px;display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.06em;color:var(--c);border:1px solid var(--c);border-radius:999px;padding:11px 20px;transition:.3s var(--ease);opacity:.9}
.reveal .open:hover{background:var(--c);color:#04140a;opacity:1}
@media(max-width:820px){
 .reveal{grid-template-columns:1fr;text-align:center;gap:20px;padding-top:16vh;padding-bottom:12vh}
 /* `.reveal.right{grid-template-columns:1fr 1fr}` de mas arriba tiene DOS
    clases, asi que le ganaba en especificidad a la regla movil de al lado y
    las secciones alternas (LIA y EXIA) se quedaban en dos columnas en el
    telefono: el texto salia estrangulado y el robot a un tercio de tamano.
    Se repite el selector completo aqui dentro para que colapsen como las
    otras tres. */
 .reveal.right{grid-template-columns:1fr}
 .reveal.right .fig{order:0}
 .reveal .fig .botimg{width:min(62vw,320px)}
 .reveal .desc,.reveal .sub{margin-left:auto;margin-right:auto}
 .bens{justify-content:center}
}

/* ---- ACT5 how it thinks ---- */
.think{align-items:center;text-align:center}
.flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:clamp(26px,5vh,52px) 0}
.step{font-family:'Sora';font-weight:600;font-size:clamp(1.1rem,2.7vw,1.95rem);letter-spacing:-.03em;color:var(--ink);padding:5px 0;transition:.5s var(--ease)}
.step.dim{color:var(--faint)}
.tick{width:1px;height:clamp(20px,3.4vh,34px);background:linear-gradient(var(--line2),transparent);}
.think .notes{margin-top:clamp(24px,4vh,44px);display:flex;flex-direction:column;gap:8px;color:var(--soft);font-size:clamp(1rem,2vw,1.25rem);max-width:40ch}

/* ---- ACT6 impact ---- */
.impact{align-items:center;text-align:center}
.qgiant{font-family:'Sora';font-weight:700;letter-spacing:-.04em;line-height:1.04;font-size:clamp(1.9rem,6vw,4.5rem);max-width:15ch}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:clamp(34px,6vh,60px) 0 30px;width:100%;max-width:900px;text-align:left}
.case{background:var(--bg);padding:clamp(22px,3vw,34px);display:flex;gap:16px;align-items:flex-start;transition:background .4s var(--ease)}
.case:hover{background:var(--bg2)}
.case .cd{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);margin-top:7px;flex:none}
.case p{font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.45;color:var(--ink)}
.impact .close{font-family:'Sora';font-weight:600;font-size:clamp(1.2rem,2.7vw,1.8rem);letter-spacing:-.03em}
@media(max-width:680px){.cases{grid-template-columns:1fr}}

/* ---- ACT7 responsible ---- */
.resp h2{font-size:clamp(1.7rem,4.6vw,3.5rem);max-width:15ch}
.resp .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(34px,5vh,56px)}
.resp .pt{background:var(--bg);padding:clamp(20px,2.6vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.resp .pt .n{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;color:var(--faint)}
.resp .pt h3{font-family:'Sora';font-weight:600;font-size:clamp(1.05rem,2vw,1.35rem);margin-top:10px;letter-spacing:-.02em}
.resp .micro{margin-top:28px;color:var(--faint);font-size:13.5px;max-width:60ch;line-height:1.6}
@media(max-width:820px){.resp .pts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.resp .pts{grid-template-columns:1fr}}

/* ---- ACT8 future ---- */
.future{align-items:center;text-align:center}
.galaxy{position:relative;width:min(92vw,760px);aspect-ratio:1.15;margin:clamp(24px,4vh,44px) auto}
.galaxy .cring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%}
.galaxy .cring.a{width:44%;height:44%}.galaxy .cring.b{width:74%;height:74%}.galaxy .cring.c{width:100%;height:100%}
.galaxy .cnode{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.galaxy .cnode .seed{width:16px;height:16px;border-radius:50%;background:var(--grad);box-shadow:0 0 26px rgba(79,197,218,.7);margin:0 auto 10px}
.galaxy .cnode b{font-family:'Sora';font-weight:700;font-size:14px;letter-spacing:-.01em}
.galaxy .fnode{position:absolute;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.04em;color:var(--soft);transform:translate(-50%,-50%);white-space:nowrap}
.galaxy .fnode::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--faint);margin-right:7px;vertical-align:middle}
.future .note{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;color:var(--faint);margin-top:12px}

/* ---- final ---- */
.final{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:14vh var(--pad)}
.final .wm{font-family:'Sora';font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:clamp(2.1rem,8.5vw,6.4rem)}
.final .wm .two{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.final .line{font-family:'Sora';font-weight:500;font-size:clamp(1.05rem,2.3vw,1.5rem);letter-spacing:-.02em;color:var(--ink);max-width:22ch}
footer{border-top:1px solid var(--line);padding:34px var(--pad);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;color:var(--faint);font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.05em;position:relative;z-index:1}
footer a:hover{color:var(--ink)}

/* focus + reduced motion */
a:focus-visible,button:focus-visible,.cta:focus-visible{outline:2px solid var(--maia);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .rev,.rev.pre{opacity:1!important;transform:none!important;transition:none!important}
  .core{animation:none!important}
  .pglow{display:none!important}
}

/* gradiente animado (personalidad) */
.logo-reveal .wm .two,.final .wm .two,.gt{background:linear-gradient(90deg,#9BE014,#4FC5DA,#F5860C,#9BE014);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-reveal .wm .two,.final .wm .two{animation:gradmove 9s linear infinite}
.gt{animation:gradmove 13s linear infinite}
@keyframes gradmove{to{background-position:-280% 0}}
/* línea-gradiente en cada eyebrow */
.k{display:inline-flex;align-items:center;gap:11px}
.k::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9BE014,#4FC5DA,#F5860C);flex:none}
.core-act .k,.think .k,.future .k,.gen .k{justify-content:center}
/* pointer glow (color que sigue al cursor) */
.pglow{position:fixed;width:480px;height:480px;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(circle,rgba(79,197,218,.13),rgba(155,224,20,.06) 44%,transparent 68%);mix-blend-mode:screen;will-change:transform}
body.pmove .pglow{opacity:1}
/* ripple de color al click/tap */
.rippl{position:fixed;width:14px;height:14px;left:0;top:0;border-radius:50%;pointer-events:none;z-index:60;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,var(--rc,#4FC5DA),transparent 68%);mix-blend-mode:screen;animation:rippl .8s var(--ease) forwards}
@keyframes rippl{to{transform:translate(-50%,-50%) scale(34);opacity:0}}
/* ambient: robots flotando, galaxia girando, fondo a la deriva */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.fam .botimg{animation:floaty 7s ease-in-out infinite}
.fam:nth-child(2) .botimg{animation-delay:.9s}.fam:nth-child(3) .botimg{animation-delay:1.8s}.fam:nth-child(4) .botimg{animation-delay:2.7s}.fam:nth-child(5) .botimg{animation-delay:3.6s}
.reveal .fig .botimg{animation:floaty 8.5s ease-in-out infinite;transition:filter .5s var(--ease)}
.reveal:hover .fig .botimg{filter:drop-shadow(0 40px 80px rgba(0,0,0,.7)) brightness(1.08)}
.galaxy .cring{animation:spin 90s linear infinite}
.galaxy .cring.b{animation-duration:130s;animation-direction:reverse}
.galaxy .cring.c{animation-duration:190s}
.galaxy .fnode{transition:color .3s var(--ease)}
.galaxy .fnode:hover{color:var(--ink)}
body::before{animation:drift 20s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(0,2.5%) scale(1.05)}}
/* micro-interacción: chips de beneficio y pasos */
.ben{transition:transform .3s var(--ease)}
.ben:hover{transform:translateY(-2px)}
.case{cursor:default}


.navr{display:flex;align-items:center;gap:13px}
.langsw{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.langsw button{background:transparent;border:0;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;padding:8px 12px;cursor:pointer;transition:.25s var(--ease)}
.langsw button.on{background:var(--ink);color:#000}
.langsw button:not(.on):hover{color:var(--ink)}
@media(max-width:520px){.langsw button{padding:7px 10px}.nav .enter{display:none}}


/* LED de color detrás del robot (idle suave, brilla al click) */
.reveal .glow{opacity:0!important}
.reveal .fig{position:relative}
.reveal .led{position:absolute;top:48%;left:50%;width:66%;height:60%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--c),transparent 60%);filter:blur(46px);opacity:.14;transition:opacity .6s var(--ease);z-index:0;pointer-events:none}
.reveal .fig .botimg{position:relative;z-index:1}
.reveal:hover .led{opacity:.42}
.reveal.lit .led{animation:ledflash 2.4s var(--ease)}
@keyframes ledflash{0%{opacity:.2}16%{opacity:1}100%{opacity:.42}}
@keyframes floatsway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-13px) rotate(.7deg)}}
.reveal .fig .botimg{animation:floatsway 8.5s ease-in-out infinite}


/* robots como fondo (definidos una sola vez, transparentes) */
.botimg{background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.fam .botimg{width:100%;aspect-ratio:.56}
.reveal .fig .botimg{aspect-ratio:.5}
.bot-kai{background-image:url(../img/img-01-697d302456.webp)}
.bot-lia{background-image:url(../img/img-02-d29b3e256f.webp)}
.bot-maia{background-image:url(../img/img-03-912add0466.webp)}
.bot-exia{background-image:url(../img/img-04-exia-verde.webp)}
/* El robot verde de EXIA saluda con el brazo en alto, asi que su recorte es
   mas ancho que el de los otros cuatro. Con background-size:contain eso lo
   hace renderizar mas BAJO, y en la fila se veia mas chico que sus vecinos.
   Se le da un 22 % mas de caja, compensado con margenes negativos para que no
   desplace a nadie: el brazo se mete en el hueco que ya habia entre columnas.
   En la seccion grande NO se toca nada: ahi el robot va solo, sin vecinos con
   los que compararse, y cualquier regla propia se desalineaba en movil.
   El aspect-ratio propio mantiene la ALTURA de la caja igual que la de los
   demas: sin el, la columna crecia y el nombre de EXIA quedaba mas abajo
   que los otros cuatro. No se toca transform porque ahi vive la animacion
   de flotado. */
.fam .bot-exia{width:122%;margin-left:-11%;margin-right:-11%;aspect-ratio:.682}

.bot-tania{background-image:url(../img/img-05-7ce8287940.webp)}


/* ---- ACT8 : átomo en movimiento ---- */
.future .atom{position:relative;width:min(92vw,720px);aspect-ratio:1;margin:clamp(24px,4vh,44px) auto}
.atom .orbit-line{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;pointer-events:none}
.atom .ol1{width:38%;height:38%}.atom .ol2{width:66%;height:66%}.atom .ol3{width:94%;height:94%}
.atom .nucleus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:6}
.atom .nseed{width:22px;height:22px;border-radius:50%;background:var(--grad);background-size:200% 200%;box-shadow:0 0 34px 6px rgba(79,197,218,.55);margin:0 auto 10px;animation:npulse 4.5s var(--ease) infinite,gradmove 8s ease infinite}
@keyframes npulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes cspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.atom .nucleus b{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.atom .shell{position:absolute;top:50%;left:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;animation:cspin var(--dur) linear infinite}
.atom .sh1{--d:38%;--dur:26s}
.atom .sh2{--d:66%;--dur:36s;animation-direction:reverse}
.atom .sh3{--d:94%;--dur:48s}
.atom .anode{position:absolute;inset:0;transform:rotate(var(--a))}
.atom .anode .pos{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}
.atom .anode .unt{transform:rotate(calc(-1 * var(--a)))}
.atom .lbl{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--soft);white-space:nowrap;animation:spin var(--dur) linear infinite reverse;transition:color .3s var(--ease)}
.atom .sh1 .lbl{--dur:26s}.atom .sh2 .lbl{--dur:36s;animation-direction:normal}.atom .sh3 .lbl{--dur:48s}
.atom .lbl::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--faint);margin-right:7px;vertical-align:middle}
.atom .lbl:hover{color:var(--ink)}
.atom .eshell{position:absolute;top:50%;left:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;animation:cspin var(--dur) linear infinite;pointer-events:none}
.atom .e1{--d:38%;--dur:6.5s}.atom .e2{--d:66%;--dur:9.5s;animation-direction:reverse}.atom .e3{--d:94%;--dur:12.5s}
.atom .el{position:absolute;top:0;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c);box-shadow:0 0 16px 4px var(--c)}
@media(max-width:600px){.atom .lbl{font-size:10px}}


/* ACT8 átomo v2: textos fijos, sólo puntos orbitando */
.atom .fnode{position:absolute;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--soft);white-space:nowrap;transition:color .3s var(--ease);z-index:4}
.atom .fnode::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--faint);margin-right:7px;vertical-align:middle}
.atom .fnode:hover{color:var(--ink)}
.atom .e1a,.atom .e1b{--d:38%;--dur:6.5s}
.atom .e1b{animation-delay:-3.25s}
.atom .e2a,.atom .e2b{--d:66%;--dur:9.5s;animation-direction:reverse}
.atom .e2b{animation-delay:-4.75s}
.atom .e3a,.atom .e3b{--d:94%;--dur:12.5s}
.atom .e3b{animation-delay:-6.25s}
@media(max-width:600px){.atom .fnode{font-size:9.5px}}


/* ===== v15 · APP LAUNCHER ===== */
.lau-grid{display:flex;flex-wrap:wrap;justify-content:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:760px;margin-top:6px}
@media(max-width:640px){.lau-grid{grid-template-columns:1fr}}
.lau{position:relative;flex:1 1 300px;display:flex;align-items:center;gap:16px;text-align:left;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02);transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.lau:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 18px 50px -18px var(--c)}
.lau .ld{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--c);color:#050506;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;box-shadow:0 0 26px -6px var(--c)}
.lau .lt{min-width:0}
.lau .lt b{display:block;font-size:16px;letter-spacing:.02em;color:var(--ink)}
.lau .lt span{display:block;font-size:12px;color:var(--soft);margin-top:3px;line-height:1.45}
.lau .go{margin-left:auto;flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--faint);transition:color .3s}
.lau:hover .go{color:var(--c)}
.lau-seal{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.8px;color:var(--faint);text-transform:uppercase;margin-top:22px}
/* ===== v15 · ECOSYSTEM DOCK (KI-DS v1) ===== */
:root{--ki-kai:#12B76A;--ki-lia:#EC6BA8;--ki-maia:#1C6FB8;--ki-exia:#00FFBA;--ki-tania:#782CF5}
.ki-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:120;display:flex;align-items:center;gap:4px;background:rgba(10,10,13,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:7px 10px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.ki-dock .hub{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;color:#F6F6F3;text-decoration:none;background:rgba(255,255,255,.06)}
.ki-dock .hub .hm{width:20px;height:20px;border-radius:6px;background:conic-gradient(from 210deg,var(--ki-kai),var(--ki-lia),var(--ki-maia),var(--ki-exia),var(--ki-tania),var(--ki-kai))}
.ki-dock .hub span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.6px}
.ki-dock .sep{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 3px}
.ki-dock .app{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;color:#fff;text-decoration:none;transition:transform .18s}
.ki-dock .app:hover{transform:translateY(-3px)}
.ki-dock .dk{background:var(--ki-kai)}.ki-dock .dl2{background:var(--ki-lia)}.ki-dock .dm{background:var(--ki-maia)}.ki-dock .de{background:var(--ki-exia)}.ki-dock .dt{background:var(--ki-tania)}
/* ═══════════════ v18 · Capa cinematográfica ═══════════════ */
/* — Orbe scroll-driven: se separa en cuatro al avanzar (--sep 0→1) — */
.corewrap{ --sep:0; }
.core-orb{ transition:box-shadow .6s ease; }
/* al separarse, cada blob viaja a su cuadrante y se contrae en un punto nítido */
.corewrap .blob{ transition:none; will-change:transform,filter,opacity; }
.corewrap.sep .b-g{ transform:translate(calc(-78% * var(--sep)), calc(-84% * var(--sep))) scale(calc(1 - .55*var(--sep))); filter:blur(calc(38px - 30px*var(--sep))); }
.corewrap.sep .b-c{ transform:translate(calc(82% * var(--sep)), calc(-70% * var(--sep))) scale(calc(1 - .55*var(--sep))); filter:blur(calc(38px - 30px*var(--sep))); }
.corewrap.sep .b-o{ transform:translate(calc(70% * var(--sep)), calc(80% * var(--sep))) scale(calc(1 - .55*var(--sep))); filter:blur(calc(38px - 30px*var(--sep))); }
.corewrap.sep .b-r{ transform:translate(calc(-80% * var(--sep)), calc(78% * var(--sep))) scale(calc(1 - .55*var(--sep))); filter:blur(calc(38px - 30px*var(--sep))); }
.corewrap.sep .b-v{ transform:translate(calc(-2% * var(--sep)), calc(-96% * var(--sep))) scale(calc(1 - .55*var(--sep))); filter:blur(calc(38px - 30px*var(--sep))); }
.corewrap.sep .core-orb{ box-shadow:0 0 calc(120px - 90px*var(--sep)) -24px rgba(79,197,218,calc(.30 - .24*var(--sep))), inset 0 0 46px 12px rgba(0,0,0,calc(.75 - .5*var(--sep))); }
/* la separación pausa el roaming para que el viaje se lea limpio */
.corewrap.sep .blob{ animation-play-state:paused; }
/* etiquetas que emergen en cada punto cuando --sep alto */
.core-tag{ position:absolute; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:1.8px; opacity:0; transform:translateY(6px); transition:opacity .4s ease,transform .4s ease; pointer-events:none; }
.corewrap.sep.split .core-tag{ opacity:calc(var(--sep)); transform:none; }
.core-tag.t-g{ top:6%; left:8%; color:var(--kai); } .core-tag.t-c{ top:8%; right:6%; color:var(--maia); }
.core-tag.t-o{ bottom:8%; right:8%; color:var(--exia); } .core-tag.t-r{ bottom:6%; left:6%; color:var(--lia); }
.core-tag.t-v{ top:2%; left:50%; transform:translate(-50%,6px); color:var(--tania); }
.corewrap.sep.split .core-tag.t-v{ transform:translate(-50%,0); }

/* — Parallax por capas (fondo/orbe/texto a distinta velocidad) — */
.cine-layer{ will-change:transform; }

/* — Hero shots de los bots (reemplaza botimg planos por tratamiento premium) — */
.reveal .fig{ position:relative; }
.reveal .fig .bothero{ position:relative; width:min(74%,360px); height:auto; margin:0 auto; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); }
.reveal .fig .heroglow{ position:absolute; left:50%; top:52%; width:78%; height:78%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 68%); filter:blur(42px); opacity:.55; z-index:-1; animation:heropulse 7s ease-in-out infinite; }
@keyframes heropulse{ 0%,100%{ opacity:.42; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.62; transform:translate(-50%,-50%) scale(1.06); } }

/* — Tipografía con más rango: display gigante respira más — */
.reveal .copy h2{ letter-spacing:-.02em; line-height:.98; }
.lead-lg{ letter-spacing:-.015em; }

@media (prefers-reduced-motion: reduce){
  .corewrap.sep .b-g,.corewrap.sep .b-c,.corewrap.sep .b-o,.corewrap.sep .b-r,.corewrap.sep .b-v{ transform:none !important; filter:blur(38px) !important; }
  .reveal .fig .heroglow{ animation:none; }
}

@media print{.ki-dock{display:none}}
/* ═══════════════ v17 · Hub inteligente (recomendador + constelación + demo) ═══════════════ */
/* — Recomendador de entrada — */
.reco{ max-width:760px; margin:38px auto 0; opacity:0; transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); }
.reco.in{ opacity:1; transform:none; }
.reco-q{ text-align:center; font-family:"Inter Tight",system-ui,sans-serif; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin-bottom:20px; }
.reco-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.reco-opt{ flex:1 1 200px; max-width:250px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; padding:18px 20px; cursor:pointer; text-align:left; color:var(--ink); font-family:"Inter Tight",system-ui,sans-serif; transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,background .25s; }
.reco-opt:hover{ transform:translateY(-3px); border-color:var(--rc); background:rgba(255,255,255,.05); }
.reco-opt .ro-top{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.reco-opt .ro-dot{ width:9px; height:9px; border-radius:50%; background:var(--rc); box-shadow:0 0 12px var(--rc); }
.reco-opt .ro-ai{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:9px; letter-spacing:1.6px; color:var(--rc); }
.reco-opt b{ display:block; font-size:15px; font-weight:600; letter-spacing:.01em; }
.reco-opt span{ display:block; font-size:12.5px; color:var(--soft); margin-top:4px; line-height:1.4; }
.reco-ans{ text-align:center; margin-top:24px; opacity:0; max-height:0; overflow:hidden; transition:opacity .6s ease,max-height .6s ease; }
.reco-ans.show{ opacity:1; max-height:340px; }
.reco-ans .ra-line{ font-family:"Inter Tight",system-ui,sans-serif; font-size:clamp(1.05rem,2.4vw,1.5rem); font-weight:600; color:var(--ink); line-height:1.3; max-width:560px; margin:0 auto 20px; }
.reco-ans .ra-line em{ font-style:normal; color:var(--rc); }
.reco-ans .ra-go{ display:inline-flex; align-items:center; gap:12px; background:var(--rc); color:#050506; text-decoration:none; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:1.6px; font-weight:600; padding:13px 22px; border-radius:999px; box-shadow:0 0 30px -6px var(--rc); transition:transform .2s; }
.reco-ans .ra-go:hover{ transform:translateY(-2px); }
.reco-ans .ra-alt{ display:block; margin-top:16px; background:none; border:none; cursor:pointer; color:var(--faint); font-family:"Inter Tight",system-ui,sans-serif; font-size:12px; letter-spacing:.04em; text-decoration:underline; text-underline-offset:3px; }
.reco-ans .ra-alt:hover{ color:var(--soft); }

/* — Constelación conectada (cruces) — */
.constel{ position:relative; width:min(820px,92vw); height:min(512px,57.5vw); margin:24px auto 0; }
.constel svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.constel .cx-line{ stroke-width:1.2; fill:none; opacity:.28; stroke-dasharray:5 7; animation:cxdash 26s linear infinite; }
@keyframes cxdash{ to{ stroke-dashoffset:-260; } }
.constel .cx-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-decoration:none; }
.constel .cx-orb{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:15px; font-weight:600; color:#050506; background:var(--c); box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 34px -6px var(--c); transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s; }
.constel .cx-node:hover .cx-orb{ transform:scale(1.12); box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 50px -4px var(--c); }
.constel .cx-lb{ font-family:"Inter Tight",system-ui,sans-serif; font-size:12px; letter-spacing:.02em; color:var(--soft); text-align:center; }
.constel .cx-lb b{ display:block; color:var(--ink); font-size:13.5px; font-weight:700; }
.constel .cx-flow{ position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px rgba(255,255,255,.5); offset-rotate:0deg; opacity:.9; }
.constel-cap{ text-align:center; color:var(--soft); font-family:"Inter Tight",system-ui,sans-serif; font-size:13.5px; line-height:1.5; max-width:560px; margin:26px auto 0; }
.constel-cap em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }
@media(max-width:640px){ .constel{ width:92vw; height:96vw; } .constel .cx-orb{ width:48px; height:48px; font-size:13px; } .constel .cx-lb{ font-size:11px; } .constel .cx-lb b{ font-size:12px; } }

/* — Cruce dentro de cada reveal — */
.reveal .xcross{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:9px 15px; border-radius:999px; border:1px dashed color-mix(in srgb,var(--c) 55%, transparent); background:color-mix(in srgb,var(--c) 8%, transparent); color:var(--ink); text-decoration:none; font-family:"Inter Tight",system-ui,sans-serif; font-size:12.5px; transition:background .25s,transform .25s; }
.reveal .xcross:hover{ transform:translateX(4px); background:color-mix(in srgb,var(--c) 16%, transparent); }
.reveal .xcross .xc-d{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:9px; font-weight:600; color:#050506; }
.reveal .xcross b{ font-weight:600; }

/* — Demo viva (simulada) — */
.demo{ max-width:640px; margin:30px auto 0; background:rgba(10,10,13,.92); border:1px solid var(--line2); border-radius:22px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.demo-top{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.demo-top .d-orb{ width:26px; height:26px; border-radius:7px; background:conic-gradient(from 210deg,var(--kai),var(--lia),var(--maia),var(--exia),var(--kai)); flex:0 0 auto; }
.demo-top .d-tt{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:1.6px; color:var(--ink); }
.demo-top .d-live{ margin-left:auto; display:flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:8px; letter-spacing:1.6px; color:#8fd6a9; }
.demo-top .d-live i{ width:6px; height:6px; border-radius:50%; background:#2FCB6F; box-shadow:0 0 8px #2FCB6F; animation:kiPulse 2.2s ease-in-out infinite; }
.demo-body{ padding:18px; min-height:150px; display:flex; flex-direction:column; gap:12px; }
.demo-msg{ max-width:82%; padding:12px 15px; border-radius:15px; font-family:"Inter Tight",system-ui,sans-serif; font-size:14px; line-height:1.5; animation:dmin .4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes dmin{ from{ opacity:0; transform:translateY(8px); } }
.demo-msg.user{ align-self:flex-end; background:var(--ink); color:#050506; border-bottom-right-radius:5px; }
.demo-msg.ai{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; }
.demo-msg.ai .dm-who{ display:flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:8.5px; letter-spacing:1.4px; color:var(--c,#9BE014); margin-bottom:7px; }
.demo-msg.ai .dm-who i{ width:7px; height:7px; border-radius:50%; background:var(--c,#9BE014); box-shadow:0 0 8px var(--c,#9BE014); }
.demo-msg.ai .dm-cross{ display:inline-flex; align-items:center; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); color:var(--c,#9BE014); text-decoration:none; font-size:12.5px; }
.demo-msg.ai .dm-cross:hover{ text-decoration:underline; text-underline-offset:2px; }
.demo-typing{ align-self:flex-start; display:flex; gap:5px; padding:14px 16px; }
.demo-typing i{ width:7px; height:7px; border-radius:50%; background:var(--soft); animation:dtype 1.3s ease-in-out infinite; }
.demo-typing i:nth-child(2){ animation-delay:.18s; } .demo-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes dtype{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-4px); } }
.demo-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 18px; }
.demo-chip{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer; color:var(--soft); font-family:"Inter Tight",system-ui,sans-serif; font-size:12.5px; transition:border-color .2s,color .2s,transform .2s; }
.demo-chip:hover{ border-color:var(--line2); color:var(--ink); transform:translateY(-2px); }
.demo-chip:disabled{ opacity:.35; cursor:default; transform:none; }
.demo-note{ text-align:center; color:var(--faint); font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:8px; letter-spacing:1.4px; margin:14px auto 0; }

/* ═══ KI SHELL v2 · chrome compartido del ecosistema (KI-DS v2) ═══ */
:root{--ki-kai:#12B76A;--ki-lia:#EC6BA8;--ki-maia:#1C6FB8;--ki-exia:#00FFBA;--ki-tania:#782CF5;--ki-shell-ink:#F6F6F3;--ki-shell-soft:#B7B7B4;--ki-shell-faint:#7a7a7d}
.ki-ambient{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:0}
/* — Barra OS — */
.ki-os{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;height:42px;padding:0 16px;background:rgba(10,10,13,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.ki-os a{text-decoration:none}
.ki-os .km,.ki-foot .km{width:15px;height:15px;border-radius:5px;background:conic-gradient(from 210deg,var(--ki-kai),var(--ki-lia),var(--ki-maia),var(--ki-exia),var(--ki-tania),var(--ki-kai));flex:0 0 auto;display:inline-block}
.ki-os-brand{display:flex;align-items:center;gap:8px;color:#F6F6F3;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:1.8px;font-weight:500;white-space:nowrap}
.ki-os-brand b{font-weight:600}
.ki-os-brand .tm{font-size:7px;vertical-align:top;color:#7a7a7d}
.ki-os-right{display:flex;align-items:center;gap:10px;min-width:0}
.ki-os-active{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:5px 11px 5px 8px;color:#F6F6F3;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:1.4px;white-space:nowrap}
.ki-os-active .adot{width:8px;height:8px;border-radius:50%;background:var(--c,#F6F6F3);box-shadow:0 0 10px var(--c,#F6F6F3)}
.ki-os-active .st{display:flex;align-items:center;gap:5px;color:#8fd6a9;font-size:8px;letter-spacing:1.6px;padding-left:9px;border-left:1px solid rgba(255,255,255,.14)}
.ki-os-active .st i{width:5px;height:5px;border-radius:50%;background:#2FCB6F;box-shadow:0 0 8px #2FCB6F;animation:kiPulse 2.2s ease-in-out infinite}
@keyframes kiPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ki-os-sw{display:flex;align-items:center;gap:5px}
.ki-os-sw a{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:8px;font-weight:600;opacity:.85;transition:transform .18s,opacity .18s}
.ki-os-sw a:hover{transform:translateY(-2px);opacity:1}
.ki-os-sw .k{background:var(--ki-kai)}.ki-os-sw .l{background:var(--ki-lia)}.ki-os-sw .m{background:var(--ki-maia)}.ki-os-sw .e{background:var(--ki-exia)}.ki-os-sw .t{background:var(--ki-tania)}
.ki-os-sw a.on{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 14px var(--ki-glow,rgba(255,255,255,.3))}
/* La "E" de EXIA sobre su verde: en blanco no se lee. Es el unico circulo
   con fondo claro del ecosistema, asi que lleva tinta oscura. */
.ki-dock .de,.ki-os-sw .e{color:#0B0C10}

.ki-os-hub{color:#B7B7B4;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:1.6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);transition:color .2s,border-color .2s;white-space:nowrap}
.ki-os-hub:hover{color:#F6F6F3;border-color:rgba(255,255,255,.3)}
@media(max-width:640px){.ki-os-sw{display:none}.ki-os-active .st span{display:none}}
@media(max-width:430px){.ki-os-brand span b{display:none}}
/* — Footer único · firma del ecosistema — */
.ki-foot{position:relative;z-index:5;background:#0B0B0E;border-top:1px solid rgba(255,255,255,.08);padding:48px 22px 42px;font-family:"Inter Tight",system-ui,sans-serif}
.ki-foot-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;justify-content:space-between}
.ki-foot-brand{max-width:340px}
.ki-foot-logo{display:flex;align-items:center;gap:9px;color:#F6F6F3;font-size:14px;font-weight:700;letter-spacing:.04em}
.ki-foot-logo b{font-weight:800}
.ki-foot-logo .tm{font-size:8px;vertical-align:top;color:#7a7a7d}
.ki-foot-tag{margin:12px 0 0;color:#B7B7B4;font-size:13px;font-weight:500;line-height:1.5}
.ki-foot .ki-pw2{margin-top:14px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:8px;letter-spacing:1.8px;text-transform:uppercase;color:#7a7a7d}
.ki-foot-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ki-foot-links a{display:flex;align-items:center;gap:7px;color:#DADAD6;text-decoration:none;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:1.4px;border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:8px 14px;transition:border-color .2s,transform .2s}
.ki-foot-links a:hover{border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.ki-foot-links i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ki-foot-links .fk i{background:var(--ki-kai)}.ki-foot-links .fl i{background:var(--ki-lia)}.ki-foot-links .fm i{background:var(--ki-maia)}.ki-foot-links .fe i{background:var(--ki-exia)}.ki-foot-links .ftn i{background:var(--ki-tania)}
.ki-foot-links .fh i{background:conic-gradient(from 210deg,var(--ki-kai),var(--ki-lia),var(--ki-maia),var(--ki-exia),var(--ki-tania),var(--ki-kai));border-radius:2.5px}
.ki-foot-meta{display:flex;flex-direction:column;gap:9px;align-items:flex-end;text-align:right}
.ki-foot-meta a{color:#B7B7B4;text-decoration:none;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:1.2px;transition:color .2s}
.ki-foot-meta a:hover{color:#F6F6F3}
.ki-foot-meta span{color:#7a7a7d;font-size:11px}
@media(max-width:760px){.ki-foot-in{flex-direction:column;align-items:flex-start}.ki-foot-meta{align-items:flex-start;text-align:left}}
/* — Conexión entre IA (recomendación) — */
.ki-xwrap{position:relative;z-index:5;padding:8px 22px 34px}
.ki-xlink{display:flex;align-items:center;gap:16px;max-width:720px;margin:0 auto;background:rgba(12,12,15,.96);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px 22px;text-decoration:none;box-shadow:0 18px 50px -20px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .3s}
.ki-xlink:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 22px 60px -18px var(--c)}
.ki-xlink .xd{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--c);color:#050506;display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;box-shadow:0 0 22px -4px var(--c)}
.ki-xlink .xt{min-width:0}
.ki-xlink .xt b{display:block;color:#F6F6F3;font-family:"Inter Tight",system-ui,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.ki-xlink .xt span{display:block;color:#B7B7B4;font-family:"Inter Tight",system-ui,sans-serif;font-size:12px;margin-top:3px;line-height:1.45}
.ki-xlink .xa{margin-left:auto;flex:0 0 auto;color:var(--c);font-size:17px;transition:transform .25s}
.ki-xlink:hover .xa{transform:translateX(4px)}
@media print{.ki-os,.ki-foot,.ki-xwrap{display:none}}

/* ---- Acceso a Mi cuenta -------------------------------------------------
   Fijo arriba a la derecha. Discreto para no competir con la portada, pero
   siempre visible: antes no había forma de llegar a la cuenta desde aquí. */
.ki-cuenta{
  position:fixed; top:16px; right:16px; z-index:9999;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  background:rgba(12,14,20,.55); border:1px solid rgba(255,255,255,.22);
  color:#fff; text-decoration:none; font:600 12.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.3px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.ki-cuenta:hover{ background:rgba(12,14,20,.78); border-color:rgba(255,255,255,.45); transform:translateY(-1px); }
.ki-cuenta:focus-visible{ outline:2px solid #E8760A; outline-offset:2px; }
@media (max-width:560px){
  .ki-cuenta{ top:10px; right:10px; padding:7px 11px; }
  .ki-cuenta span{ display:none; }   /* en móvil basta el icono */
}