/* ============================================================
   BERELIAN TECHNOLOGIES — v8 · experiencia 3D continua
   ============================================================ */
:root {
  --b0: #050810; --b1: #07111F; --b2: #0B1220;
  --w0: #FCFCFA; --w1: #F7F6F3;
  --v0: #7857FF; --v1: #9A82FF; --v2: #C9BDFF; --v3: #EDE8FF; --v-tx: #6A46F0;
  --cy: #38A6E0;
  --tx: #15151C; --mu: #6B6B78; --mono-d: #8A93A5; --mono-l: #7F899B;
  --ln: #E4E3DF; --lnd: rgba(255,255,255,.09);
  --e: cubic-bezier(.16,1,.3,1);
  --z-nav: 900; --z-ask: 1200; --z-veil: 1400; --z-slide: 1500; --z-chat: 1600; --z-loader: 3000;
  --mx: 0; --my: 0;   /* ratón normalizado -1..1, lo pone el JS */
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body { margin: 0; background: var(--b0); color: #fff; font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
img, svg, canvas { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 36px; }
.wrap > * { min-width: 0; }
@media (max-width: 640px) { .wrap { padding: 0 22px; } }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--v0); outline-offset: 3px; }
h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -.015em; }
button { font-family: inherit; cursor: pointer; }
.lbl { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mu); }
.on-dark .lbl, .dark .lbl { color: var(--mono-d); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 5000; background: var(--b1); color: #fff; padding: 12px 20px; }
.skip:focus { left: 0; }

/* símbolo B reutilizable (geometría real del logo, viewBox 1050×647) */
.bsvg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- reveal ---------- */
.js .js .rv { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .7s var(--e), transform .7s var(--e), filter .7s var(--e); }
.js .js .rv.in { opacity: 1; transform: none; filter: none; }
.d1 { transition-delay: .08s } .d2 { transition-delay: .16s } .d3 { transition-delay: .24s } .d4 { transition-delay: .32s }
.mask { overflow: hidden; }
.mask > * { display: block; transform: translateY(105%); transition: transform .95s var(--e); }
.mask.in > * { transform: none; }

/* ============================================================
   LOADER — la B se ensambla por capas
   ============================================================ */
#loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--b0); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 26px; perspective: 1100px; animation: ldFailsafe .5s var(--e) forwards 2.1s; }
@keyframes ldFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#loader.gone { pointer-events: none; animation: ldOut .5s var(--e) forwards; }
#loader.skip { display: none; }
@keyframes ldOut { to { opacity: 0; visibility: hidden; } }
.ld-b { position: relative; width: min(300px, 62vw); aspect-ratio: 1050/647; transform-style: preserve-3d; }
.ld-b .lyr { position: absolute; inset: 0; opacity: 0; }
.ld-b .lyr svg { fill: var(--f, #fff); }
.ld-b .l-shadow { --f: rgba(120,87,255,.55); transform: translateZ(-36px) translate(10px,14px); filter: blur(14px); animation: ldIn .6s var(--e) forwards .10s; }
.ld-b .l-base   { --f: #0E1424; transform: translateZ(-12px); animation: ldIn .6s var(--e) forwards .22s; }
.ld-b .l-chrome { --f: transparent; transform: translateZ(0); animation: ldIn .6s var(--e) forwards .38s; }
.ld-b .l-chrome svg { fill: none; stroke: #DDE3EE; stroke-width: 7; stroke-linejoin: round; }
.ld-b .l-glass  { --f: rgba(255,255,255,.92); transform: translateZ(12px); animation: ldIn .6s var(--e) forwards .54s; }
.ld-b .l-violet { --f: rgba(120,87,255,.55); transform: translateZ(24px); mix-blend-mode: screen; animation: ldIn .6s var(--e) forwards .70s; }
.ld-b .l-sweep  { transform: translateZ(30px); opacity: 1; animation: none; }
.ld-b .l-sweep svg { fill: url(#sweepGrad); }
@keyframes ldIn { 0% { opacity: 0; transform: translateZ(-160px) rotateX(38deg) scale(.6); } 100% { opacity: 1; } }
.ld-sweep-rect { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%); background-size: 300% 100%; background-position: 120% 0; mask: url(assets/berelian-b.svg) center / contain no-repeat; -webkit-mask: url(assets/berelian-b.svg) center / contain no-repeat; animation: sweep 1.1s var(--e) forwards .95s; pointer-events: none; }
@keyframes sweep { to { background-position: -120% 0; } }
.ld-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(.8rem, 1.6vw, .95rem); letter-spacing: .5em; padding-left: .5em; opacity: 0; animation: ldT .5s var(--e) forwards 1.05s; }
.ld-sub { font-family: 'IBM Plex Mono', monospace; font-size: clamp(.52rem, 1vw, .6rem); letter-spacing: .28em; padding-left: .28em; color: var(--mono-d); opacity: 0; animation: ldT .5s var(--e) forwards 1.2s; }
@keyframes ldT { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
#loader.zoom .ld-b { animation: ldZoom .75s cubic-bezier(.7,0,.84,0) forwards; }
#loader.zoom .ld-name, #loader.zoom .ld-sub { animation: ldFade .3s forwards; }
@keyframes ldZoom { to { transform: translateZ(900px); opacity: 0; } }
@keyframes ldFade { to { opacity: 0 } }

/* ============================================================
   NAV — cambia de oscuro a claro según la escena
   ============================================================ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: 18px 0; border-bottom: 1px solid transparent; transition: padding .35s var(--e), background .35s var(--e), border-color .35s var(--e); }
#nav.light { background: rgba(252,252,250,.8); backdrop-filter: blur(20px) saturate(150%); border-bottom-color: var(--ln); padding: 10px 0; }
#nav.dark-s { background: rgba(5,8,16,.64); backdrop-filter: blur(20px) saturate(150%); border-bottom-color: var(--lnd); padding: 10px 0; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-logo { height: 40px; width: auto; display: block; filter: invert(1); transition: height .35s var(--e), filter .35s var(--e); }
#nav.light .nav-logo { filter: none; height: 32px; }
#nav.dark-s .nav-logo { height: 32px; }
.nav-menu { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-family: 'Space Grotesk', sans-serif; font-size: .86rem; }
.nav-menu a { color: #fff; opacity: .82; position: relative; padding-bottom: 3px; transition: color .35s, opacity .2s; }
#nav.light .nav-menu a { color: var(--tx); }
.nav-menu a::after { content: ''; position: absolute; left: var(--ux, 50%); bottom: 0; height: 1px; width: 0; background: var(--v0); transition: width .3s var(--e), left .3s var(--e); }
.nav-menu a:hover { opacity: 1; } .nav-menu a:hover::after { width: 100%; left: 0; }
.nav-r { display: flex; align-items: center; gap: 10px; }
.nav-ask { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .8rem; white-space: nowrap; color: #fff; border: 1.5px solid rgba(255,255,255,.5); padding: 9px 16px; border-radius: 100px; background: transparent; transition: border-color .25s, background .25s, color .35s; }
#nav.light .nav-ask { color: var(--tx); border-color: rgba(21,21,28,.45); }
.nav-ask:hover { border-color: var(--v0); background: rgba(120,87,255,.12); }
.nav-btn { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .84rem; background: #fff; color: var(--b1); padding: 10px 18px; border-radius: 100px; white-space: nowrap; transition: background .25s, color .35s, transform .25s var(--e); }
#nav.light .nav-btn { background: var(--b1); color: #fff; }
.nav-btn:hover { background: var(--v0); color: #fff; transform: translateY(-1px); }
.burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; font-size: 1.3rem; }
#nav.light .burger { color: var(--tx); }
@media (max-width: 1100px) { .nav-ask { display: none; } }
@media (max-width: 900px) { .nav-menu { display: none; } .burger { display: block; } .nav-logo { height: 30px !important; } }
.mob { position: fixed; inset: 0; z-index: 890; background: var(--b0); display: none; flex-direction: column; justify-content: center; padding: 40px; gap: 24px; }
.mob.open { display: flex; }
.mob a { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 6vw, 1.9rem); color: #fff; }

/* ============================================================
   BOTONES — contraste garantizado en cualquier fondo
   ============================================================ */
.btn { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .93rem; padding: 14px 26px; border-radius: 100px; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid transparent; background: transparent; color: inherit; text-decoration: none; line-height: 1.2; transition: background .25s, color .25s, border-color .25s, transform .25s var(--e); will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn.f  { background: #fff; color: var(--b1); }              .btn.f:hover  { background: var(--v0); color: #fff; }
.btn.o  { border-color: rgba(255,255,255,.55); color: #fff; } .btn.o:hover  { border-color: #fff; background: rgba(255,255,255,.08); }
.btn.d  { background: var(--b1); color: #fff; }              .btn.d:hover  { background: var(--v0); }
.btn.ol { border-color: rgba(21,21,28,.45); color: var(--tx); } .btn.ol:hover { border-color: var(--tx); background: var(--w1); }

/* panel lateral de cristal (servicio expandido + formulario) */
.veil { position: fixed; inset: 0; background: rgba(5,8,16,.55); backdrop-filter: blur(6px); z-index: var(--z-veil); opacity: 0; pointer-events: none; transition: opacity .4s; }
.veil.on { opacity: 1; pointer-events: auto; }
.slide { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: rgba(252,252,250,.94); backdrop-filter: blur(24px); color: var(--tx); z-index: var(--z-slide); transform: translateX(100%); visibility: hidden; transition: transform .55s var(--e), visibility 0s linear .55s, box-shadow .55s; box-shadow: none; display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.6); }
.slide.open { transform: none; visibility: visible; transition: transform .55s var(--e), visibility 0s, box-shadow .55s; box-shadow: -30px 0 80px -30px rgba(0,0,0,.6); }
.slide-h { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--ln); }
.slide-h h3 { font-size: 1.15rem; font-weight: 600; }
.slide-x { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--mu); width: 38px; height: 38px; border-radius: 50%; }
.slide-x:hover { background: var(--w1); color: var(--tx); }
.slide-b { padding: 26px 28px; overflow-y: auto; flex: 1; }
.slide-b .sd-what { color: var(--mu); font-size: .95rem; margin: 0 0 20px; }
.slide-b .sd-h { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--v-tx); margin: 22px 0 10px; }
.slide-b ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 7px; }
.slide-b li { font-size: .92rem; padding-left: 16px; position: relative; color: var(--tx); }
.slide-b li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--v0); }
.slide-b .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.slide-b .steps div { border: 1px solid var(--ln); border-radius: 10px; padding: 12px; font-size: .8rem; background: #fff; }
.slide-b .steps b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: var(--mu); margin-bottom: 4px; font-weight: 400; }
.fld { margin-bottom: 14px; }
.fld label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }
.fld input, .fld textarea, .fld select { width: 100%; border: 1px solid var(--ln); border-radius: 10px; padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: .94rem; background: #fff; color: var(--tx); transition: border-color .2s; }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--v0); outline: none; }
.fld textarea { min-height: 100px; resize: vertical; }
.slide-foot { font-size: .84rem; color: var(--mu); margin-top: 16px; }
.slide-foot a { color: var(--v-tx); }


footer.ft { background: var(--b0); color: #fff; padding: 60px 0 30px; border-top: 1px solid var(--lnd); }
.ft-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.ft-logo { height: 36px; width: auto; filter: invert(1); margin-bottom: 14px; display: block; }
.ft-top p { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--mono-d); margin: 0; line-height: 1.9; }
.ft-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.ft-col h2 { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mono-l); margin: 0 0 12px; font-weight: 500; }
.ft-col a, .ft-col button { display: block; font-size: .86rem; margin-bottom: 8px; color: #fff; opacity: .86; background: none; border: 0; padding: 0; font-family: inherit; text-align: left; transition: color .2s, opacity .2s; }
.ft-col a:hover, .ft-col button:hover { opacity: 1; color: var(--v1); }
.ft-bot { border-top: 1px solid var(--lnd); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: .66rem; color: var(--mono-l); }
@media (max-width: 640px) { .ft-bot { flex-direction: column; } .final { padding: 100px 0 90px; } }
/* ============================================================
   CHATBOT — Pregunta a Berelian (cristal violeta + panel lateral)
   ============================================================ */
#askBtn { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-ask); width: 60px; height: 60px; border-radius: 18px; border: 1px solid rgba(201,189,255,.4); background: linear-gradient(140deg, #1E1650, #0B1220); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px -18px rgba(120,87,255,.7); transition: transform .3s var(--e), opacity .3s; animation: breathe 4.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow: 0 20px 50px -18px rgba(120,87,255,.55) } 50% { box-shadow: 0 20px 64px -12px rgba(120,87,255,.9) } }
#askBtn:hover { transform: translateY(-3px) scale(1.04); }
#askBtn .crystal { width: 26px; height: 26px; background: linear-gradient(135deg, var(--v2), var(--v0)); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
#askBtn .tip { position: absolute; right: 70px; white-space: nowrap; font-family: 'Space Grotesk', sans-serif; font-size: .8rem; font-weight: 600; background: #fff; color: var(--b1); padding: 8px 14px; border-radius: 100px; opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .25s var(--e); pointer-events: none; box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); }
#askBtn:hover .tip, #askBtn:focus-visible .tip { opacity: 1; transform: none; }
body.chat-open #askBtn { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { #askBtn { right: 16px; bottom: 16px; width: 54px; height: 54px; } #askBtn .tip { display: none; } }

#chat { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--w0); color: var(--tx); z-index: var(--z-chat); transform: translateX(100%); visibility: hidden; transition: transform .55s var(--e), visibility 0s linear .55s; display: flex; flex-direction: column; }
#chat.open { transform: none; visibility: visible; transition: transform .55s var(--e), visibility 0s; box-shadow: -30px 0 80px -30px rgba(0,0,0,.6); }
.ch-h { padding: 18px 20px; border-bottom: 1px solid var(--ln); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.ch-h .t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-h .ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(140deg, #1E1650, #0B1220); display: flex; align-items: center; justify-content: center; }
.ch-h .ic i { width: 16px; height: 16px; background: linear-gradient(135deg, var(--v2), var(--v0)); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); display: block; }
.ch-h h3 { font-size: 1rem; font-weight: 600; }
.ch-h small { display: block; font-size: .74rem; color: var(--mu); }
.ch-h .st { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #1F7A45; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ch-h .st i { width: 6px; height: 6px; border-radius: 50%; background: #2F9D5B; }
.ch-x { border: 0; background: transparent; font-size: 1.4rem; color: var(--mu); width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.ch-x:hover { background: var(--w1); color: var(--tx); }
.ch-b { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ch-welcome h4 { font-size: 1.12rem; font-weight: 600; margin-bottom: 4px; }
.ch-welcome p { color: var(--mu); font-size: .88rem; margin: 0 0 14px; }
.ch-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-sug button { border: 1px solid var(--ln); background: #fff; border-radius: 100px; padding: 8px 14px; font-size: .82rem; color: var(--tx); transition: border-color .2s, background .2s; }
.ch-sug button:hover { border-color: var(--v0); background: var(--v3); }
.msg { max-width: 88%; padding: 11px 15px; border-radius: 14px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.msg.u { align-self: flex-end; background: var(--b1); color: #fff; border-bottom-right-radius: 4px; }
.msg.a { align-self: flex-start; background: #fff; border: 1px solid var(--ln); border-bottom-left-radius: 4px; }
.msg.a.err { border-color: #E0B4B4; color: #7A2E2E; background: #FFF6F6; }
.msg.typing i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--v0); margin-right: 3px; animation: dots 1.2s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .2s } .msg.typing i:nth-child(3) { animation-delay: .4s }
@keyframes dots { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }
.msg .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.msg .acts a, .msg .acts button { font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 600; border: 1px solid var(--v-tx); color: var(--v-tx); background: transparent; padding: 6px 12px; border-radius: 100px; }
.msg .acts a:hover, .msg .acts button:hover { background: var(--v3); }
.ch-f { padding: 12px 14px 14px; border-top: 1px solid var(--ln); background: #fff; }
.ch-row { display: flex; gap: 8px; align-items: flex-end; }
.ch-row textarea { flex: 1; border: 1px solid var(--ln); border-radius: 14px; padding: 11px 14px; font-family: 'Inter', sans-serif; font-size: .92rem; resize: none; max-height: 120px; min-height: 44px; background: var(--w0); color: var(--tx); }
.ch-row textarea:focus { border-color: var(--v0); outline: none; }
.ch-send { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--b1); color: #fff; font-size: 1rem; flex-shrink: 0; transition: background .2s; }
.ch-send:hover { background: var(--v0); }
.ch-send:disabled { opacity: .4; cursor: default; }
.ch-note { font-size: .7rem; color: var(--mu); margin: 8px 0 0; text-align: center; }


/* ============================================================
   A · HISTORIA INICIAL — hero fijo: la B se abre en información
   Una sola escena sticky. JS calcula --p (0→1) y coloca los fragmentos.
   ============================================================ */
.story { position: relative; height: 470vh; background: var(--b0); }
.story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1400px; }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.fog { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 1; }
.fog.f1 { width: 70vw; height: 60vh; left: 30%; top: 12%; background: radial-gradient(circle, rgba(120,87,255,.16), transparent 70%); animation: fogA 26s ease-in-out infinite alternate; }
.fog.f2 { width: 50vw; height: 50vh; left: -10%; top: 50%; background: radial-gradient(circle, rgba(56,166,224,.07), transparent 70%); animation: fogB 32s ease-in-out infinite alternate; }
@keyframes fogA { to { transform: translate3d(-6vw, 4vh, 0) scale(1.08); } }
@keyframes fogB { to { transform: translate3d(8vw, -5vh, 0) scale(1.12); } }
.story .grid { opacity: calc(.5 * (1 - var(--p, 0) * 2)); }
.story-light { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(154,130,255,.42), rgba(120,87,255,.12) 45%, transparent 70%); filter: blur(10px); z-index: 2; pointer-events: none; transition: opacity .4s; }

/* la B de fragmentos */
.bfr { position: absolute; left: 50%; top: 50%; width: min(520px, 70vw); aspect-ratio: 1050/647; transform-style: preserve-3d; z-index: 3; will-change: transform; }
.pc { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform, opacity, filter; }
.pc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc .g2 { fill: #0A0E1A; transform: translate(7px, 9px); }
.pc .g1 { fill: #232A3C; transform: translate(3.5px, 4.5px); }
.pc .fc { fill: url(#faceGrad); stroke: rgba(255,255,255,.55); stroke-width: 2.4; stroke-linejoin: round; }
.pc.imp .fc { stroke: rgba(201,189,255,.95); }
.bfr-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.75) 50%, transparent 64%); background-size: 320% 100%; mask: url(assets/berelian-b.svg) center / contain no-repeat; -webkit-mask: url(assets/berelian-b.svg) center / contain no-repeat; mix-blend-mode: overlay; animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%,55% { background-position: 130% 0 } 100% { background-position: -130% 0 } }

/* conexiones SVG entre fragmentos */
.fr-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.fr-lines line { stroke: var(--v2); stroke-width: 1; stroke-linecap: round; transition: opacity .5s; }
.fr-lines line.hot { stroke: #fff; stroke-width: 1.6; }

/* textos del hero */
.hero-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% - var(--p, 0) * 260px)); opacity: calc(1 - var(--p, 0) * 9); z-index: 5; pointer-events: none; }
.hero-copy .wrap > div { max-width: 560px; pointer-events: auto; }
.hero-copy h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.04; font-weight: 500; margin: 16px 0 0; }
.hero-copy h1 .g { background: linear-gradient(103deg, #fff 6%, var(--v2) 50%, var(--v0) 108%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy .sub { margin: 22px 0 0; color: #A3AAB8; font-size: clamp(.98rem, 1.2vw, 1.05rem); max-width: 480px; }
.hero-copy.gone { visibility: hidden; }

/* capítulos: una palabra y una frase por fase */
.chap { position: absolute; left: 50%; top: 13vh; transform: translateX(-50%); width: min(720px, 90vw); text-align: center; z-index: 5; pointer-events: none; }
.chap > div { position: absolute; left: 0; right: 0; top: 0; opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity .55s var(--e), filter .55s var(--e), transform .55s var(--e); }
.chap > div.on { opacity: 1; filter: none; transform: none; }
.chap .n { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .3em; color: var(--mono-d); }
.chap h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; margin: 12px 0 14px; text-shadow: 0 0 40px rgba(5,8,16,.9); }
.chap p { color: #A3AAB8; font-size: clamp(.95rem, 1.3vw, 1.05rem); max-width: 520px; margin: 0 auto; text-shadow: 0 0 24px rgba(5,8,16,.95); }

/* salida (Acción) */
.output { position: absolute; left: 50%; top: 58%; width: min(300px, 70vw); transform: translate(-50%,-50%) translateZ(0) rotateX(calc((1 - var(--o, 0)) * 25deg)) scale(calc(.85 + var(--o, 0) * .15)); opacity: var(--o, 0); z-index: 4; border-radius: 16px; padding: 22px 22px 20px; background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(120,87,255,.1)); border: 1px solid rgba(201,189,255,.4); backdrop-filter: blur(10px); box-shadow: 0 30px 80px -30px rgba(120,87,255,.7), inset 0 1px 0 rgba(255,255,255,.25); pointer-events: none; }
.output .ok { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .24em; color: var(--v2); display: flex; align-items: center; gap: 8px; }
.output .ok i { width: 7px; height: 7px; border-radius: 50%; background: #5BD69B; box-shadow: 0 0 10px #5BD69B; }
.output b { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; margin: 12px 0 10px; }
.output .ln { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 8px; }
.output .ln.s { width: 62%; } .output .ln.m { width: 84%; }

/* barra de fases */
.phases { position: absolute; left: 50%; bottom: 5.5vh; transform: translateX(-50%); display: flex; gap: clamp(12px, 3vw, 30px); z-index: 5; opacity: clamp(0, (var(--p, 0) - .1) * 8, 1); }
.phases span { font-family: 'IBM Plex Mono', monospace; font-size: clamp(.64rem, 1vw, .72rem); letter-spacing: .16em; text-transform: uppercase; color: var(--mono-l); position: relative; padding-bottom: 6px; transition: color .4s; }
.phases span::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--v0); transition: width .5s var(--e); }
.phases span.lit { color: #fff; } .phases span.lit::after { width: 100%; }
.story .scroll-hint { opacity: calc(1 - var(--p, 0) * 20); }
@media (max-width: 760px), (max-width: 999px) and (orientation: portrait) {
  .story { height: 360vh; }
  .bfr { width: min(340px, 82vw); }
  .hero-copy { top: 92px; transform: translateY(calc(var(--p, 0) * -260px)); }
  .hero-copy h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hero-copy .sub { font-size: .95rem; margin-top: 16px; }
  .hero-copy .cta { margin-top: 22px; }
  .phases { flex-wrap: wrap; justify-content: center; width: 94vw; gap: 8px 14px; }
  .chap { top: 11vh; }
}

/* ============================================================
   NÚCLEO ORUS — componente reutilizable (arquitectura de capas)
   Nunca esfera ni planeta: planos, marcos y arcos que no se tocan.
   ============================================================ */
.oc { position: relative; width: var(--s, 320px); aspect-ratio: 1/1; perspective: 900px; }
.oc-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--my,0) * -3deg + 8deg)) rotateY(calc(var(--mx,0) * 4deg)); transition: transform .8s var(--e); }
.oc-l { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transition: transform 1.2s var(--e), opacity .9s var(--e); }
.oc-hex { width: 92%; height: 92%; margin: -46% 0 0 -46%; animation: ocA 18s ease-in-out infinite alternate; }
.oc-hex svg { width: 100%; height: 100%; overflow: visible; }
.oc-hex polygon { fill: none; stroke: rgba(201,189,255,.38); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.oc-hex polygon.in2 { stroke: rgba(120,87,255,.3); stroke-dasharray: 4 7; }
.oc-arc { border-radius: 50%; border: 1.5px solid transparent; }
.oc-arc.a1 { width: 78%; height: 78%; margin: -39% 0 0 -39%; border-top-color: rgba(201,189,255,.75); border-right-color: rgba(201,189,255,.22); transform: rotateX(68deg); animation: ocB 14s ease-in-out infinite alternate; }
.oc-arc.a2 { width: 62%; height: 62%; margin: -31% 0 0 -31%; border-bottom-color: rgba(154,130,255,.8); border-left-color: rgba(154,130,255,.2); transform: rotateY(62deg); animation: ocC 16s ease-in-out infinite alternate; }
.oc-pl { width: 34%; height: 34%; margin: -17% 0 0 -17%; border: 1px solid rgba(201,189,255,.34); background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(120,87,255,.07) 55%, rgba(56,166,224,.05)); backdrop-filter: blur(2px); }
.oc-pl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.2) 50%, transparent 68%); }
.oc-pl.p1 { transform: translate3d(-44%, -30%, -60px) rotateY(24deg) rotateZ(8deg); animation: ocP1 12s ease-in-out infinite alternate; }
.oc-pl.p2 { transform: translate3d(46%, -18%, 30px) rotateY(-30deg) rotateZ(-6deg); animation: ocP2 13s ease-in-out infinite alternate; }
.oc-pl.p3 { transform: translate3d(4%, 50%, 70px) rotateX(38deg) rotateZ(4deg); width: 28%; height: 28%; margin: -14% 0 0 -14%; animation: ocP3 11s ease-in-out infinite alternate; }
.oc-core { width: 17%; height: 17%; margin: -8.5% 0 0 -8.5%; transform: rotateZ(45deg); background: linear-gradient(135deg, #fff, var(--v2) 40%, var(--v0)); box-shadow: 0 0 34px 8px rgba(120,87,255,.55), 0 0 90px 24px rgba(120,87,255,.25); animation: ocCore 4.8s ease-in-out infinite; }
.oc-core::after { content: ''; position: absolute; inset: 22%; background: rgba(255,255,255,.85); filter: blur(3px); }
.oc-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(120,87,255,.35), transparent 62%); filter: blur(18px); pointer-events: none; }
.oc-nd { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--v2); box-shadow: 0 0 8px 2px rgba(154,130,255,.7); }
@keyframes ocA { from { transform: rotateZ(-8deg) } to { transform: rotateZ(10deg) } }
@keyframes ocB { from { transform: rotateX(68deg) rotateZ(-20deg) } to { transform: rotateX(62deg) rotateZ(25deg) } }
@keyframes ocC { from { transform: rotateY(62deg) rotateZ(10deg) } to { transform: rotateY(48deg) rotateZ(-18deg) } }
@keyframes ocP1 { to { transform: translate3d(-48%, -26%, -40px) rotateY(34deg) rotateZ(3deg); } }
@keyframes ocP2 { to { transform: translate3d(50%, -22%, 50px) rotateY(-20deg) rotateZ(-10deg); } }
@keyframes ocP3 { to { transform: translate3d(0%, 54%, 50px) rotateX(46deg) rotateZ(-2deg); } }
@keyframes ocCore { 0%,100% { transform: rotateZ(45deg) scale(1); } 50% { transform: rotateZ(45deg) scale(1.1); } }
/* montaje al entrar en pantalla */
.oc.build .oc-l { opacity: 0; }
.oc.build .oc-hex { transform: translateZ(-300px) scale(.6); }
.oc.build .oc-pl.p1 { transform: translate3d(-160%, -80%, -200px) rotateY(80deg); }
.oc.build .oc-pl.p2 { transform: translate3d(170%, -60%, 120px) rotateY(-80deg); }
.oc.build .oc-pl.p3 { transform: translate3d(0, 180%, 160px) rotateX(80deg); }
.oc.build.in .oc-l { opacity: 1; }
.oc.build .oc-l { transition-delay: calc(var(--k, 0) * .12s); }
.js .oc.build:not(.in) .oc-l { animation-play-state: paused; }

/* ============================================================
   B · ORUS — presentación del producto
   ============================================================ */
.orus { position: relative; background: var(--b0); color: #fff; padding: 150px 0 130px; overflow: hidden; }
.orus::before { content: ''; position: absolute; inset: 0; background: radial-gradient(45% 55% at 72% 48%, rgba(120,87,255,.18), transparent 65%); pointer-events: none; }
.orus-in { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: center; }
@media (max-width: 940px) { .orus-in { grid-template-columns: 1fr; gap: 20px; } }
.orus h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; font-weight: 500; letter-spacing: -.03em; margin: 18px 0 22px; }
.orus p.t { color: #A3AAB8; font-size: clamp(.98rem, 1.2vw, 1.05rem); max-width: 540px; margin: 0 0 14px; }
.orus .cta { margin-top: 30px; }
.micro { display: inline-flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mono-d); border: 1px solid var(--lnd); border-radius: 100px; padding: 8px 16px; }
.micro i { width: 6px; height: 6px; border-radius: 50%; background: var(--v0); box-shadow: 0 0 8px var(--v0); }
.orus-vis { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }
.concepts { position: absolute; inset: 0; pointer-events: none; }
.concepts span { position: absolute; font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .26em; color: #fff; opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .8s var(--e), transform .8s var(--e), filter .8s var(--e); white-space: nowrap; }
.concepts span::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--v1); vertical-align: middle; margin-right: 10px; }
.concepts span.on { opacity: .95; transform: none; filter: none; }
@media (max-width: 940px) { .orus { padding: 110px 0 90px; } .orus-vis { min-height: 340px; order: -1; } }

/* ============================================================
   Escenas fijas genéricas
   ============================================================ */
.scn { position: relative; background: var(--b0); color: #fff; }
.scn-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.scn-in { position: relative; width: 100%; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
@media (max-width: 940px) { .scn-in { grid-template-columns: 1fr; gap: 18px; align-content: center; } }
.scn h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; margin: 16px 0 18px; }
.scn p.t { color: #A3AAB8; font-size: clamp(.95rem, 1.2vw, 1.04rem); max-width: 480px; margin: 0; }
.steps5 { display: flex; gap: clamp(8px, 1.4vw, 16px); flex-wrap: wrap; margin-top: 28px; }
.steps5 span { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .1em; color: var(--mono-l); padding-bottom: 6px; position: relative; transition: color .4s; }
.steps5 span::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--v0); transition: width .5s var(--e); }
.steps5 span.on { color: #fff; } .steps5 span.on::after { width: 100%; }

/* ============================================================
   C1 · MEMORIA Y CONTINUIDAD — tres planos de profundidad
   ============================================================ */
.mem { height: 220vh; }
.mem-vis { position: relative; height: min(520px, 62vh); perspective: 1100px; }
.mem-space { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(calc(var(--mx,0) * -8px), calc(var(--my,0) * -6px), 0); transition: transform .8s var(--e); }
.mcard { position: absolute; width: 190px; padding: 14px 16px; border-radius: 12px; background: rgba(15,22,40,.78); border: 1px solid rgba(201,189,255,.18); backdrop-filter: blur(6px); transform-style: preserve-3d; will-change: transform, opacity, filter; }
.mcard small { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .16em; color: var(--mono-d); margin-bottom: 7px; }
.mcard b { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.mcard .ln { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 9px; width: 80%; }
.mcard.now { width: 250px; background: linear-gradient(150deg, rgba(120,87,255,.3), rgba(15,22,40,.9)); border-color: rgba(201,189,255,.55); box-shadow: 0 20px 60px -20px rgba(120,87,255,.6); }
.mcard.back { filter: blur(var(--bl, 0px)); }
.mcard.hit { border-color: var(--v1); box-shadow: 0 0 34px -4px rgba(120,87,255,.6); }
.mem-link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mem-link path { fill: none; stroke: var(--v1); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; }
.mem-depth { position: absolute; left: 0; bottom: -4px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .2em; color: var(--mono-l); display: flex; gap: 22px; }
.mem-depth i { display: inline-block; width: 16px; height: 1px; vertical-align: middle; margin-right: 8px; }

/* ============================================================
   C2 · INVESTIGACIÓN — buscar, contrastar, interpretar, sintetizar, integrar
   ============================================================ */
.res { height: 250vh; }
.res .scn-in { grid-template-columns: .8fr 1.2fr; }
.res-vis { position: relative; height: min(520px, 60vh); }
.res-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.res-vis .ray { fill: none; stroke: url(#rayGrad); stroke-width: 1.8; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.res-vis .src { fill: #fff; transition: opacity .4s; }
.res-vis .srcr { fill: none; stroke: rgba(201,189,255,.45); stroke-width: 1; }
.res-vis .syn { fill: var(--v0); filter: drop-shadow(0 0 10px rgba(120,87,255,.9)); }
.res-core { position: absolute; left: 22%; top: 50%; transform: translate(-50%,-50%); }
.res-core .oc-core { transition: box-shadow .4s; }
.res.flash .res-core .oc-core { box-shadow: 0 0 60px 20px rgba(154,130,255,.9), 0 0 140px 40px rgba(120,87,255,.4); }
.res-tag { position: absolute; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: var(--mono-d); transform: translate(-50%, 14px); white-space: nowrap; transition: opacity .4s; }
@media (max-width: 940px) {
  .mem, .res { height: 180vh; }
  .mem-vis, .res-vis { height: 46vh; }
  .mcard { width: 150px; padding: 10px 12px; } .mcard.now { width: 190px; } .mcard b { font-size: .8rem; }
  .res .scn-in { grid-template-columns: 1fr; }
  .scn h2 { margin: 10px 0 12px; }
}

/* ============================================================
   D · CREACIÓN — piezas → núcleo → documento multicapa
   ============================================================ */
.cre { height: 270vh; }
.cre .scn-in { grid-template-columns: .78fr 1.22fr; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 420px; }
.chip { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .14em; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(201,189,255,.3); background: rgba(15,22,40,.8); color: #E6E1FF; opacity: 0; will-change: transform, opacity; }
.cre-vis { position: relative; height: min(560px, 66vh); perspective: 1400px; display: flex; align-items: center; justify-content: flex-end; }
.cre-core { position: absolute; left: 0; top: 50%; transform: translate(-30%, -50%); z-index: 3; }
.doc { position: relative; width: min(470px, 100%); height: 100%; transform-style: preserve-3d; transform: rotateY(calc(-10deg + var(--mx,0) * 2deg)) rotateX(calc(3deg - var(--my,0) * 1.5deg)); transition: transform .8s var(--e); }
.page { position: absolute; inset: 0; border-radius: 14px; }
.page.pb2 { transform: translate3d(22px, 18px, -34px); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.page.pb1 { transform: translate3d(11px, 9px, -17px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.page.pf { background: linear-gradient(170deg, #FBFAFF, #EEEBF8); color: var(--tx); padding: 22px 24px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.6) inset; overflow: hidden; }
.doc-top { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: #6B6B78; border-bottom: 1px solid #E2DFEA; padding-bottom: 10px; }
.doc-top .st { color: var(--v-tx); }
.doc-kind { display: flex; gap: 12px; margin: 12px 0 4px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: #6E6D7A; }
.doc-kind span.on { color: var(--tx); font-weight: 500; border-bottom: 1px solid var(--v0); }
.blk-d { margin-top: 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--e), transform .6s var(--e); }
.blk-d.on { opacity: 1; transform: none; }
.blk-d h5 { margin: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .2em; color: #6B6B78; font-weight: 500; }
.sk { height: 7px; border-radius: 4px; background: #DAD6E6; margin-top: 6px; transition: width .7s var(--e), transform .7s var(--e), background .5s; }
.doc.raw .sk { transform: translateX(calc(var(--j, 0) * 1px)) rotate(calc(var(--r, 0) * 1deg)); background: #E4E1EC; }
.lead-d { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--tx); }
.lead-d .sk { background: #BDB4E6; height: 9px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metrics div { border: 1px solid #E2DFEA; border-radius: 8px; padding: 8px; background: #fff; }
.metrics .v { height: 12px; width: 60%; border-radius: 4px; background: var(--v2); margin-top: 6px; }
.tbl { border: 1px solid #E2DFEA; border-radius: 8px; overflow: hidden; }
.tbl div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 7px 9px; border-top: 1px solid #EEEBF3; }
.tbl div:first-child { border-top: 0; background: #F4F2FA; }
.tbl i { height: 6px; border-radius: 3px; background: #D5D1E2; align-self: center; }
.risk { border-left: 3px solid #E0A23B; background: #FFF7EA; border-radius: 6px; padding: 8px 10px; }
.risk .sk { background: #EFD9B0; }
.checks div { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.checks b { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--v0); flex-shrink: 0; }
.checks .sk { margin: 0; flex: 1; }
.srcs-d { display: flex; gap: 6px; }
.srcs-d span { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .1em; color: var(--v-tx); border: 1px solid #DCD5F7; border-radius: 100px; padding: 3px 8px; }
.cre-foot { margin-top: 18px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1rem, 1.5vw, 1.2rem); color: #fff; max-width: 440px; }
.cre-foot b { color: var(--v2); font-weight: 500; }
@media (max-width: 940px) {
  .cre { height: 210vh; }
  .cre .scn-in { grid-template-columns: 1fr; }
  .cre-vis { height: 50vh; justify-content: center; }
  .cre-core { transform: translate(-40%, -50%); }
  .doc { width: min(300px, 80vw); }
  .page.pf { padding: 14px 16px; }
  .chips { margin-top: 14px; } .cre-foot { display: none; }
  .blk-d { margin-top: 8px; }
  .tbl div:nth-child(n+3), .checks div:nth-child(n+3) { display: none; }
}

/* ============================================================
   E1 · COMPRENDE · ANALIZA · PREPARA · ACTÚA — un sistema, 4 estados
   ============================================================ */
.cap { height: 280vh; }
.cap .scn-in { grid-template-columns: .85fr 1.15fr; }
.cap-words { position: relative; min-height: 250px; }
.cw { position: absolute; left: 0; top: 0; opacity: 0; filter: blur(6px); transform: translateY(16px); transition: opacity .55s var(--e), filter .55s var(--e), transform .55s var(--e); }
.cw.on { opacity: 1; filter: none; transform: none; }
.cw .n { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .26em; color: var(--mono-d); }
.cw h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 10px 0 16px; }
.cw p { color: #A3AAB8; font-size: clamp(.98rem, 1.3vw, 1.06rem); max-width: 420px; margin: 0; }
.cap-dots { display: flex; gap: 10px; margin-top: 30px; }
.cap-dots i { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); transition: background .4s; }
.cap-dots i.on { background: var(--v0); }
.cap-vis { position: relative; height: min(520px, 62vh); }
.cap-core { position: absolute; left: 42%; top: 50%; transform: translate(-50%,-50%); z-index: 2; }
.cap-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cap-vis .rel { stroke: var(--v2); stroke-width: 1; opacity: 0; transition: opacity .6s var(--e); }
.cap.s1 .cap-vis .rel { opacity: .5; }
.cdot { position: absolute; left: 42%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(201,189,255,.8); transform: translate(var(--ox), var(--oy)) rotate(45deg); transition: transform 1.1s var(--e), opacity .6s, background .5s; }
.cap.s1 .cdot, .cap.s2 .cdot, .cap.s3 .cdot { transform: translate(var(--ix), var(--iy)) rotate(45deg); }
.cap.s1 .cdot.k { background: var(--v1); }
.cap.s2 .cdot, .cap.s3 .cdot { opacity: .25; }
.cap-out { position: absolute; left: 42%; top: 50%; width: 150px; padding: 14px; border-radius: 10px; background: linear-gradient(170deg, #FBFAFF, #EEEBF8); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); transform: translate(-50%,-50%) scale(.2); opacity: 0; transition: transform 1.1s var(--e), opacity .6s; z-index: 3; }
.cap-out small { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: var(--v-tx); }
.cap-out .sk { height: 6px; border-radius: 3px; background: #D5D1E2; margin-top: 7px; }
.cap.s2 .cap-out { opacity: 1; transform: translate(calc(-50% + 150px), -50%) scale(1); }
.cap.s3 .cap-out { opacity: 1; transform: translate(calc(-50% + 330px), -50%) scale(.9); }
.cap-edge { position: absolute; left: 80%; top: 8%; bottom: 8%; border-left: 1px dashed rgba(201,189,255,.35); opacity: 0; transition: opacity .6s; }
.cap-edge span { position: absolute; top: -4px; left: 12px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: var(--mono-d); white-space: nowrap; }
.cap.s3 .cap-edge { opacity: 1; }
.cap.s3 .cap-edge::after { content: ''; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #5BD69B; box-shadow: 0 0 10px #5BD69B; }

/* ============================================================
   E2 · INTEGRACIONES — única sección con herramientas
   ============================================================ */
.intg { background: var(--b1); color: #fff; padding: 130px 0 120px; position: relative; overflow: hidden; }
.intg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 20% 60%, rgba(120,87,255,.18), transparent 65%); pointer-events: none; }
.intg-vis { position: relative; height: 470px; margin-top: 50px; perspective: 1200px; }
.intg-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intg-vis .cn { fill: none; stroke: rgba(201,189,255,.22); stroke-width: 1.2; transition: stroke .35s, stroke-width .35s; }
.intg-vis .cn.hot { stroke: var(--v1); stroke-width: 2; }
.intg-vis .cn.soon { stroke-dasharray: 4 6; }
.intg-core { position: absolute; left: 16%; top: 50%; transform: translate(-50%,-50%); }
.tools { position: absolute; left: 58%; right: 0; top: 0; bottom: 0; transform-style: preserve-3d; transform: rotateY(calc(-8deg + var(--mx,0) * 3deg)); transition: transform .8s var(--e); }
.tool { position: absolute; left: 0; width: min(330px, 100%); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px; background: rgba(15,22,40,.82); border: 1px solid rgba(201,189,255,.2); backdrop-filter: blur(6px); transform: translate3d(var(--x,0), -50%, var(--z,0px)); transition: transform .45s var(--e), border-color .35s, background .35s, box-shadow .35s; cursor: default; }
.tool b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .95rem; }
.tool small { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: var(--mono-d); text-align: right; }
.tool:hover, .tool:focus-visible, .tool.hot { border-color: var(--v1); background: rgba(120,87,255,.16); box-shadow: 0 0 34px -6px rgba(120,87,255,.55); transform: translate3d(calc(var(--x,0) + 10px), -50%, calc(var(--z,0px) + 30px)); }
.tool.soon { border-style: dashed; }
.tool.soon small { color: var(--v2); }
.intg-note { color: #8A93A5; font-size: .86rem; margin-top: 26px; max-width: 620px; }
@media (max-width: 940px) {
  .cap { height: 210vh; } .cap .scn-in { grid-template-columns: 1fr; } .cap-vis { height: 40vh; } .cap-words { min-height: 190px; }
  .cap-core { left: 30%; } .cdot { left: 30%; } .cap-out { left: 30%; width: 120px; }
  .cap.s2 .cap-out { transform: translate(calc(-50% + 90px), -50%) scale(1); } .cap.s3 .cap-out { transform: translate(calc(-50% + 170px), -50%) scale(.85); } .cap-edge { left: 78%; }
  .intg { padding: 90px 0; } .intg-vis { height: auto; margin-top: 30px; perspective: none; }
  .intg-vis svg, .intg-core { display: none; }
  .tools { position: static; transform: none; display: grid; gap: 10px; }
  .tool { position: static; width: 100%; transform: none !important; }
}

/* ---- repuesto: reglas base perdidas al reutilizar la v8 ---- */
section.blk { padding: 118px 0; position: relative; }
.head { max-width: 760px; }
.head h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; margin: 14px 0 0; }
.head .lead { color: var(--mu); font-size: clamp(.98rem, 1.2vw, 1.04rem); margin: 20px 0 0; max-width: 620px; }
.dark .head .lead { color: #A3AAB8; }
#halo { position: absolute; top: 0; left: 0; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2; transition: opacity .5s var(--e); will-change: transform; background: radial-gradient(circle, rgba(186,172,255,.05), transparent 68%); }
.scroll-hint .bar { width: 1px; height: 34px; background: linear-gradient(var(--mono-d), transparent); animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 0%,100% { opacity: .3; transform: scaleY(.65); transform-origin: top } 50% { opacity: 1; transform: scaleY(1) } }
@media (max-width: 640px) { section.blk { padding: 76px 0; } }

/* ============================================================
   F1 · ORUS → BERELIAN — el núcleo se reduce, la B se reconstruye alrededor
   ============================================================ */
.returnscn { position: relative; height: 220vh; background: var(--b0); }
.return-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1400px; }
.back-core { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%,-50%) translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(var(--cs, 1)); will-change: transform; }
.bfr.b2 { z-index: 3; }
.back-txt { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); text-align: center; width: min(760px, 92vw); z-index: 5; }
.back-txt .lbl { opacity: var(--t, 0); }
.back-txt h2 { font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 12px 0 0; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 20px)); }
.back-glow { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(120,87,255,.3), transparent 65%); filter: blur(20px); opacity: var(--g, .3); }

/* ============================================================
   F2 · COMPAÑÍA — tres ámbitos (no son servicios: sin CTA)
   ============================================================ */
.light { background: var(--w1); color: var(--tx); }
.co-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 900px) { .co-top { grid-template-columns: 1fr; gap: 20px; } }
.co-top p { color: var(--mu); font-size: clamp(.98rem, 1.2vw, 1.05rem); margin: 0 0 14px; }
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 70px; border-top: 1px solid var(--ln); }
@media (max-width: 900px) { .areas { grid-template-columns: 1fr; } }
.area { padding: 34px 30px 10px 0; }
.area + .area { border-left: 1px solid var(--ln); padding-left: 30px; }
@media (max-width: 900px) { .area + .area { border-left: 0; border-top: 1px solid var(--ln); padding-left: 0; } }
.area .n { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .2em; color: var(--v-tx); }
.area h3 { font-size: 1.3rem; font-weight: 600; margin: 10px 0 8px; letter-spacing: -.01em; }
.area p { color: var(--mu); font-size: .94rem; margin: 0; max-width: 330px; }
.mini { position: relative; height: 120px; margin-bottom: 18px; perspective: 600px; }
.mini i { position: absolute; transition: transform 1.2s var(--e), opacity .8s var(--e); }
/* inteligencia aplicada: dispersos → ordenados */
.mini.m1 i { width: 10px; height: 10px; border-radius: 2px; background: var(--v1); left: 50%; top: 50%; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.in .mini.m1 i, .mini.m1.in i { transform: translate(var(--ox), var(--oy)) rotate(0deg); background: var(--v0); }
/* software: capas que se ensamblan */
.mini.m2 i { left: 20%; width: 60%; height: 20px; border-radius: 6px; border: 1px solid rgba(120,87,255,.45); background: rgba(237,232,255,.7); transform: translate3d(var(--x), 0, 0) rotateX(55deg); }
.in .mini.m2 i, .mini.m2.in i { transform: translate3d(0, 0, 0) rotateX(55deg); }
/* integración: dos estructuras que desarrollan un puente */
.mini.m3 .s { top: 30%; width: 60px; height: 60px; border: 1.5px solid var(--v1); border-radius: 12px; background: rgba(237,232,255,.6); }
.mini.m3 .s.a { left: 6%; } .mini.m3 .s.b { right: 6%; }
.mini.m3 .br { top: calc(30% + 29px); left: calc(6% + 62px); right: calc(6% + 62px); height: 2px; background: linear-gradient(90deg, var(--v0), var(--v1)); transform: scaleX(0); transform-origin: left; }
.in .mini.m3 .br, .mini.m3.in .br { transform: scaleX(1); transition-delay: .4s; }

/* ============================================================
   F3 · VISIÓN — descanso visual
   ============================================================ */
.vision { position: relative; background: var(--b0); color: #fff; padding: 170px 0; text-align: center; overflow: hidden; }
.vision-b { position: absolute; left: 50%; top: 50%; width: min(1100px, 130vw); aspect-ratio: 1050/647; transform: translate(-50%,-50%); opacity: .045; fill: #fff; pointer-events: none; }
.vision-light { position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(120,87,255,.22), transparent 65%); filter: blur(30px); animation: vl 9s ease-in-out infinite alternate; }
@keyframes vl { to { transform: translate(-46%,-54%) scale(1.15); } }
.vision h2 { position: relative; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; max-width: 860px; margin: 16px auto 26px; }
.vision p { position: relative; color: #A3AAB8; max-width: 600px; margin: 0 auto 14px; font-size: clamp(.98rem, 1.2vw, 1.06rem); }
@media (max-width: 640px) { .vision { padding: 110px 0; } }

/* ============================================================
   F4 · EQUIPO + F5 · PRINCIPIOS
   ============================================================ */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; perspective: 1000px; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.member { border: 1px solid var(--ln); border-radius: 18px; padding: 30px 30px 28px; background: #fff; transform: rotateY(calc(var(--tx2, 0) * 3deg)) rotateX(calc(var(--ty2, 0) * -2deg)); transition: transform .5s var(--e), box-shadow .4s; }
.member:hover { box-shadow: 0 24px 50px -30px rgba(120,87,255,.45); }
.member h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; }
.member .role { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--v-tx); margin: 0 0 14px; }
.member p { color: var(--mu); font-size: .94rem; margin: 0; }
.status { display: inline-flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); border: 1px solid var(--ln); border-radius: 100px; padding: 8px 16px; margin-top: 24px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--v0); }
.princ { margin-top: 56px; border-top: 1px solid var(--ln); }
.pr { display: grid; grid-template-columns: 70px 1fr 1.3fr; gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--ln); position: relative; }
.pr::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--v0); transition: width .9s var(--e); }
.pr.in::before { width: 56px; }
.pr .n { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--mu); }
.pr h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.pr p { color: var(--mu); margin: 0; font-size: .96rem; }
@media (max-width: 760px) { .pr { grid-template-columns: 40px 1fr; } .pr p { grid-column: 2; } }

/* ============================================================
   G1 · CONFIANZA Y CONTROL — capas que una acción debe atravesar
   ============================================================ */
.trust { height: 240vh; }
.trust .scn-in { grid-template-columns: .85fr 1.15fr; }
.tlist { margin-top: 26px; display: grid; gap: 12px; max-width: 470px; }
.tli { display: grid; grid-template-columns: 16px 1fr; gap: 12px; opacity: .22; transition: opacity .5s var(--e); }
.tli.on { opacity: 1; }
.tli i { width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--v1); transform: rotate(45deg); }
.tli b { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .98rem; }
.tli span { color: #A3AAB8; font-size: .88rem; }
.tvis { position: relative; height: min(460px, 56vh); perspective: 1200px; }
.tcore { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); z-index: 2; }
.pane { position: absolute; top: 12%; bottom: 12%; width: 18%; border-radius: 12px; border: 1px solid rgba(201,189,255,.25); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(120,87,255,.05)); backdrop-filter: blur(3px); transform: rotateY(-38deg); transition: border-color .4s, box-shadow .4s, background .4s; }
.pane span { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%) rotateY(38deg); font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: var(--mono-d); white-space: nowrap; }
.pane.pa { left: 36%; } .pane.pb { left: 56%; } .pane.pc2 { left: 76%; }
.pane.hot { border-color: var(--v1); background: linear-gradient(160deg, rgba(154,130,255,.2), rgba(120,87,255,.1)); box-shadow: 0 0 40px -6px rgba(120,87,255,.6); }
.pane.ok { border-color: rgba(91,214,155,.6); }
.act { position: absolute; left: 20%; top: 50%; transform: translate(var(--ax, 0px), -50%); z-index: 4; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .82rem; white-space: nowrap; box-shadow: 0 16px 40px -14px rgba(0,0,0,.9); opacity: var(--ao, 0); }
.act small { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .16em; color: var(--v-tx); font-weight: 400; }
.approve { position: absolute; left: 65%; top: 18%; transform: translateX(-50%) scale(var(--ps, .8)); opacity: var(--po, 0); z-index: 5; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 100px; background: rgba(15,22,40,.95); border: 1px solid var(--v1); font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: #fff; white-space: nowrap; }
.approve b { width: 16px; height: 16px; border-radius: 50%; background: #5BD69B; color: #05210F; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; }
.tstate { position: absolute; right: 0; top: 6%; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: var(--mono-d); }
.tstate i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--c, #E0A23B); vertical-align: middle; }
.closing { background: var(--b0); color: #fff; padding: 140px 0 60px; text-align: center; }
.closing h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
.closing h2 span { color: var(--v2); }
@media (max-width: 940px) {
  .trust { height: 190vh; } .trust .scn-in { grid-template-columns: 1fr; }
  .tvis { height: 34vh; } .tlist { margin-top: 14px; gap: 6px; } .tli span { display: none; }
  .pane { width: 16%; } .act { font-size: .7rem; padding: 8px 10px; } .approve { top: 4%; }
}

/* ============================================================
   G2 · CONTACTO — la B vuelve, ligeramente abierta, con luz dentro
   ============================================================ */
.contact { position: relative; background: var(--b0); color: #fff; padding: 60px 0 130px; text-align: center; overflow: hidden; perspective: 1400px; }
.contact .bfr { position: relative; left: auto; top: auto; margin: 0 auto 50px; width: min(380px, 72vw); transform: rotateY(calc(var(--mx,0) * 4deg)) rotateX(calc(var(--my,0) * -3deg)); transition: transform .8s var(--e); }
.contact .pc { transition: transform 1.4s var(--e); }
.contact.in .pc { transform: translate3d(var(--ox), var(--oy), var(--oz)); }
.contact-light { position: absolute; left: 50%; top: 170px; width: 300px; height: 300px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(201,189,255,.7), rgba(120,87,255,.3) 35%, transparent 68%); filter: blur(14px); opacity: 0; transition: opacity 1.4s var(--e); }
.contact.in .contact-light { opacity: 1; }
.contact h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; margin: 14px auto 18px; max-width: 820px; }
.contact p.t { color: #A3AAB8; max-width: 560px; margin: 0 auto; font-size: clamp(.98rem, 1.2vw, 1.05rem); }
.contact .cta { justify-content: center; margin-top: 34px; }
.contact .mail { margin-top: 24px; font-size: .95rem; color: #A3AAB8; }
.contact .mail a:hover { color: var(--v2); }

/* pie */
.ft-top p { color: var(--mono-d); }

/* ============================================================
   G3 · ASISTENTE DE BERELIAN — el núcleo se expande en ventana
   ============================================================ */
#askBtn { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #231A55, #0B1220 70%); border: 1px solid rgba(201,189,255,.35); animation: askPulse 7s ease-in-out infinite; }
@keyframes askPulse { 0%,86%,100% { box-shadow: 0 16px 40px -16px rgba(120,87,255,.6); } 93% { box-shadow: 0 16px 50px -8px rgba(120,87,255,.95); } }
#askBtn .crystal { width: 16px; height: 16px; clip-path: none; transform: rotate(45deg); background: linear-gradient(135deg, #fff, var(--v2) 45%, var(--v0)); box-shadow: 0 0 16px 3px rgba(120,87,255,.7); }
#askBtn::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid transparent; border-top-color: rgba(201,189,255,.6); border-right-color: rgba(201,189,255,.2); transform: rotateX(60deg); }
#chat { top: auto; bottom: 20px; right: 20px; width: min(420px, calc(100% - 40px)); height: min(640px, calc(100vh - 110px)); border-radius: 22px; overflow: hidden; background: rgba(12,16,28,.92); color: #fff; backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(201,189,255,.18); transform-origin: calc(100% - 29px) calc(100% - 29px); transform: scale(.08); opacity: 0; border-radius: 50%; transition: transform .55s var(--e), opacity .35s var(--e), border-radius .55s var(--e), visibility 0s linear .55s; }
#chat.open { transform: none; opacity: 1; border-radius: 22px; transition: transform .55s var(--e), opacity .35s var(--e), border-radius .55s var(--e), visibility 0s; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
#chat .ch-h, #chat .ch-f { background: transparent; border-color: rgba(255,255,255,.08); }
#chat .ch-h h3 { color: #fff; }
#chat .ch-h small, #chat .ch-note, #chat .ch-welcome p { color: #98A0AE; }
#chat .ch-h .ic { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #231A55, #0B1220 70%); }
#chat .ch-h .ic i { clip-path: none; transform: rotate(45deg); width: 11px; height: 11px; background: linear-gradient(135deg, #fff, var(--v1)); }
#chat .ch-h .st { color: #5BD69B; }
#chat .ch-x { color: #98A0AE; } #chat .ch-x:hover { background: rgba(255,255,255,.08); color: #fff; }
#chat .ch-welcome h4 { color: #fff; }
#chat .ch-sug button { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #E6E1FF; }
#chat .ch-sug button:hover { border-color: var(--v1); background: rgba(120,87,255,.18); }
#chat .msg.u { background: rgba(255,255,255,.12); color: #fff; }
#chat .msg.a { background: transparent; border: 0; color: #E6E8EF; padding-left: 0; }
#chat .msg.a.err { color: #F2B8B8; }
#chat .msg .acts a, #chat .msg .acts button { border-color: var(--v1); color: var(--v2); }
#chat .ch-row textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
#chat .ch-row textarea::placeholder { color: #8A93A5; }
#chat .ch-send { background: var(--v0); }
#chat .ch-b { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
@media (max-width: 640px) { #chat { right: 10px; bottom: 10px; width: calc(100% - 20px); height: calc(100vh - 90px); } }

/* ---- repuesto 2: fondo técnico, botones y scroll ---- */
.grid { position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(900px) rotateX(64deg) translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), -120px); transform-origin: 50% 100%; mask-image: radial-gradient(60% 60% at 50% 60%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(60% 60% at 50% 60%, #000 30%, transparent 75%); }
.cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mono-d); transition: opacity .4s; }
.scroll-hint.gone { opacity: 0; }
@media (max-width: 640px) { .scroll-hint { display: none } }

/* ============================================================
   10/10 · 1 — ESPACIO CONTINUO: luz ambiental por capítulos
   ============================================================ */
#amb { position: fixed; inset: 0; z-index: -1; background: #050810; pointer-events: none; }
#amb i { position: absolute; inset: -10%; opacity: 0; transition: opacity 1.6s var(--e); }
#amb .c-hero   { background: radial-gradient(60% 55% at 70% 40%, #120E2E, transparent 70%), radial-gradient(50% 50% at 10% 90%, #081523, transparent 70%); }
#amb .c-orus   { background: radial-gradient(55% 60% at 60% 45%, #16124A, transparent 72%), radial-gradient(40% 40% at 20% 20%, #0A1A33, transparent 70%); }
#amb .c-deep   { background: radial-gradient(70% 60% at 75% 55%, #0B0A26, transparent 72%), radial-gradient(40% 50% at 15% 30%, #06101F, transparent 70%); }
#amb .c-graph  { background: radial-gradient(70% 60% at 50% 40%, #15171D, transparent 75%), linear-gradient(#0B0C10, #0B0C10); }
#amb .c-trust  { background: radial-gradient(40% 40% at 70% 50%, #0E0B22, transparent 70%); }
#amb .c-end    { background: radial-gradient(55% 50% at 50% 35%, #140F33, transparent 70%); }
body[data-ch="hero"] #amb .c-hero, body[data-ch="orus"] #amb .c-orus, body[data-ch="deep"] #amb .c-deep, body[data-ch="graph"] #amb .c-graph, body[data-ch="trust"] #amb .c-trust, body[data-ch="end"] #amb .c-end { opacity: 1; }
/* las secciones oscuras dejan ver el espacio: sin rectángulos */
body { background: transparent; }
.story, .orus, .scn, .intg, .returnscn, .vision, .closing, .contact, footer.ft, .light { background: transparent !important; }
.orus::before, .intg::before { opacity: .6; }

/* línea de energía Berelian (recurrente) */
.eline { position: absolute; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(154,130,255,.0) 10%, rgba(154,130,255,.75) 50%, rgba(56,166,224,.0) 90%, transparent); background-size: 200% 100%; animation: eflow 9s linear infinite; opacity: .55; z-index: 1; }
@keyframes eflow { from { background-position: 100% 0 } to { background-position: -100% 0 } }
/* microtexto técnico */
.tech { position: absolute; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .22em; color: rgba(138,147,165,.55); pointer-events: none; z-index: 2; white-space: nowrap; }
.tech::before { content: ''; display: inline-block; width: 14px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 8px; }
/* contador de capítulo + progreso vertical (solo escritorio) */
#chapterUI { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 800; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: var(--mono-d); mix-blend-mode: difference; }
#chapterUI .trk { width: 1px; height: 120px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
#chapterUI .trk i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #fff; transform-origin: top; transform: scaleY(var(--sp, 0)); }
#chapterUI .num { writing-mode: vertical-rl; transform: rotate(180deg); }
@media (max-width: 1100px) { #chapterUI { display: none; } }

/* capa de primer plano: fragmentos desenfocados que cruzan delante */
.fg { position: absolute; pointer-events: none; z-index: 6; filter: blur(var(--fb, 8px)); opacity: var(--fo, .5); will-change: transform; }
.fg.shard { width: var(--w, 120px); aspect-ratio: 1.6/1; background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(154,130,255,.25) 50%, rgba(56,166,224,.1)); clip-path: polygon(8% 0, 100% 18%, 86% 100%, 0 72%); }
.fg.dot { width: var(--w, 40px); height: var(--w, 40px); border-radius: 50%; background: radial-gradient(circle, rgba(201,189,255,.8), transparent 65%); }
.fg.pane { width: var(--w, 30vw); height: 70vh; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.05), transparent 60%); border-radius: 20px; }
@media (max-width: 760px) { .fg { display: none; } .tech { display: none; } }
@media (prefers-reduced-motion: reduce) { .eline { animation: none; } }

/* ============================================================
   10/10 · 2 — CORPORATIVO EN GRAFITO (mismo espacio, menos movimiento)
   ============================================================ */
.corp { color: #fff; position: relative; overflow: hidden; }
.corp .lbl { color: var(--mono-d); }
.corp .co-top p, .corp .area p, .corp .member p, .corp .pr p { color: #A3AAB8; }
.corp .areas { border-top-color: var(--lnd); }
.corp .area + .area { border-left-color: var(--lnd); border-top-color: var(--lnd); }
.corp .area .n, .corp .member .role { color: var(--v2); }
.corp .mini.m2 i { background: rgba(120,87,255,.14); border-color: rgba(201,189,255,.45); }
.corp .mini.m3 .s { background: rgba(120,87,255,.12); }
.corp .member { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-color: var(--lnd); backdrop-filter: blur(6px); }
.corp .member:hover { box-shadow: 0 30px 70px -40px rgba(120,87,255,.6); border-color: rgba(201,189,255,.3); }
.corp .status { color: var(--mono-d); border-color: var(--lnd); }
.corp .princ, .corp .pr { border-color: var(--lnd); }
.corp .pr .n { color: var(--mono-d); }
/* B gigantesca en el fondo, casi invisible, deriva muy lenta */
.corp-b { position: absolute; width: min(1300px, 150vw); aspect-ratio: 1050/647; fill: #fff; opacity: .03; pointer-events: none; animation: cbd 40s ease-in-out infinite alternate; }
@keyframes cbd { to { transform: translate3d(-3vw, 2vh, 0) rotate(-2deg); } }

/* ============================================================
   10/10 · 3 — LA B: material, interior vivo, primer plano
   ============================================================ */
.pc .fc { fill-opacity: var(--lum, 1); }
.bfr-inner { position: absolute; inset: 0; pointer-events: none; mask: url(assets/berelian-b.svg) center / contain no-repeat; -webkit-mask: url(assets/berelian-b.svg) center / contain no-repeat;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(120,87,255,.13) 26px 27px), linear-gradient(90deg, transparent, rgba(120,87,255,.16), transparent); background-size: auto, 35% 100%; background-repeat: repeat, no-repeat; animation: innerLight 7s ease-in-out infinite; opacity: var(--io, .9); }
@keyframes innerLight { 0% { background-position: 0 0, -40% 0 } 100% { background-position: 46px 0, 140% 0 } }
.fr-lines circle.nd { fill: #fff; filter: drop-shadow(0 0 6px rgba(154,130,255,.9)); }
.fr-lines circle.pl { fill: #fff; }
.micro-d { position: absolute; left: 0; top: 0; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .2em; color: rgba(201,189,255,.8); pointer-events: none; z-index: 4; white-space: nowrap; transition: opacity .4s; }
.micro-d::before { content: ''; display: inline-block; width: 5px; height: 5px; border: 1px solid currentColor; margin-right: 7px; vertical-align: middle; }
/* resultado con grosor */
.output::before, .output::after { content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: -1; pointer-events: none; }
.output::before { transform: translate(5px, 6px); background: rgba(40,30,90,.85); border: 1px solid rgba(201,189,255,.2); }
.output::after { transform: translate(10px, 12px); background: rgba(12,10,30,.9); filter: blur(1px); }
.output .sheen { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; pointer-events: none; }
.output .sheen::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); animation: osheen 5s ease-in-out infinite; }
@keyframes osheen { 0%,40% { left: -60% } 100% { left: 130% } }

/* ============================================================
   10/10 · 4 — REVEAL DE ORUS construido con el scroll
   ============================================================ */
.orusx { position: relative; height: 240vh; }
.orusx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ox-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) translate3d(var(--ox,0px), 0, 0) scale(var(--os,1)); filter: blur(var(--ofb,0px)); will-change: transform, filter; z-index: 2; }
.ox-core .oc-l { transition: none; }
.ox-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 170px)) scale(calc(.94 + var(--w,0) * .06)); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(3rem, 11vw, 9rem); letter-spacing: -.05em; opacity: calc(var(--w,0) * (1 - var(--c,0))); z-index: 3; pointer-events: none; background: linear-gradient(180deg, #fff 30%, rgba(201,189,255,.6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ox-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + (1 - var(--c,0)) * 30px)); opacity: var(--c,0); z-index: 4; }
.ox-copy .wrap > div { max-width: 560px; }
.ox-copy.off { pointer-events: none; visibility: hidden; }
.ox-light { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%,-50%) translate3d(var(--ox,0px),0,0); border-radius: 50%; background: radial-gradient(circle, rgba(154,130,255,calc(.45 * var(--l,0))), rgba(120,87,255,calc(.12 * var(--l,0))) 40%, transparent 68%); filter: blur(8px); z-index: 1; pointer-events: none; }
@media (max-width: 900px) { .ox-copy { top: auto; bottom: 7vh; transform: translateY(calc((1 - var(--c,0)) * 30px)); } .ox-copy h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); } .ox-copy p.t:nth-of-type(2) { display: none; } }

/* investigación: universo de fuentes (Canvas) */
#resCv { position: absolute; left: 0; top: -12%; width: 118%; height: 124%; pointer-events: none; z-index: 0; }
.res-vis { z-index: 1; }
.res-pulse { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 1.5px solid var(--v1); opacity: 0; pointer-events: none; }
.res.validate .res-pulse { animation: rpulse 1.2s var(--e) forwards; }
@keyframes rpulse { 0% { opacity: .9; transform: scale(.3) } 100% { opacity: 0; transform: scale(2.2) } }

/* creación: el documento gira hasta quedar de frente */
.doc { transform: rotateY(calc(var(--dr, -18) * 1deg + var(--mx,0) * 2deg)) rotateX(calc(var(--dx2, 5) * 1deg)) scale(var(--dsc, .94)) !important; }
.chip { transition: none; }

/* ============================================================
   10/10 · 5 — coreografía del resto de escenas
   ============================================================ */
/* capacidades: texto y núcleo cambian de lado */
@media (min-width: 941px) {
  .cap .cap-words, .cap .cap-dots, .cap .cap-vis { transition: transform 1.1s var(--e); }
  .cap.s1 .cap-words, .cap.s1 .cap-dots { transform: translateX(calc(min(1180px, 100vw) * .56)); }
  .cap.s1 .cap-vis { transform: translateX(calc(min(1180px, 100vw) * -.44)); }
  .cap.s3 .cap-vis { transform: translateX(calc(min(1180px, 100vw) * -.12)) scale(1.08); }
}
/* integraciones: la elegida avanza, las demás retroceden */
.tools.focus .tool:not(.hot) { opacity: .4; transform: translate3d(var(--x,0), -50%, calc(var(--z,0px) - 60px)); }
.tools.focus .tool.hot small { color: #fff; }
.tool { transition: transform .45s var(--e), border-color .35s, background .35s, box-shadow .35s, opacity .35s; }
/* confianza: la capa pide confirmación y se abre */
.req { position: absolute; left: 66%; top: 80%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .18em; color: #F2C77A; border: 1px solid rgba(224,162,59,.55); background: rgba(40,28,8,.85); padding: 7px 11px; border-radius: 100px; white-space: nowrap; opacity: var(--rq, 0); z-index: 5; }
.pane { transform-origin: left center; transition: transform 1s var(--e), border-color .4s, box-shadow .4s, background .4s, opacity .8s; }
.pane.pb.ok { transform: rotateY(-78deg); opacity: .55; }
.pane.pa.ok { border-color: rgba(91,214,155,.45); }
/* memoria: estela al recuperar */
.mcard.hit::after { content: ''; position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--v1); animation: echo 1.4s var(--e) forwards; pointer-events: none; }
@keyframes echo { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(1.18) translateY(-10px) } }
/* principios: palabra gigante detrás */
.pr { overflow: visible; }
.pr::after { content: attr(data-w); position: absolute; right: 0; top: 50%; transform: translate(4%, -50%); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(201,189,255,.1); opacity: 0; transition: opacity 1.2s var(--e), transform 1.2s var(--e); pointer-events: none; z-index: -1; }
.pr.in::after { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 760px) { .pr::after { display: none; } }
/* visión: barrido de luz */
.vision::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(154,130,255,.07), transparent); animation: vsweep 11s ease-in-out infinite; pointer-events: none; }
@keyframes vsweep { 0%,30% { left: -40% } 100% { left: 120% } }
/* chat: reacciona al capítulo y piensa con líneas */
body[data-ch="orus"] #askBtn .crystal, body[data-ch="deep"] #askBtn .crystal { box-shadow: 0 0 22px 6px rgba(154,130,255,.95); }
#askBtn.hablamos .tip { opacity: 1; transform: none; }
#chat .msg.typing { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; width: 70px; }
#chat .msg.typing i { display: block; width: 100%; height: 3px; border-radius: 2px; margin: 0; background: linear-gradient(90deg, var(--v0), var(--v2)); animation: think 1.6s var(--e) infinite; transform-origin: left; }
#chat .msg.typing i:nth-child(2) { animation-delay: .2s } #chat .msg.typing i:nth-child(3) { animation-delay: .4s }
@keyframes think { 0% { transform: scaleX(.25); opacity: .5 } 50% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(.4); opacity: .5 } }
@media (prefers-reduced-motion: reduce) { .vision::after { animation: none; } .mcard.hit::after { animation: none; opacity: 0; } }

@media (max-width: 760px) { .phases span { font-size: .6rem; letter-spacing: .06em; } .phases { gap: 6px 10px; width: 96vw; } }

/* ============================================================
   RENDIMIENTO — mismos efectos, en versión que no obliga a redibujar
   (cada regla sustituye un efecto caro por uno equivalente y barato)
   ============================================================ */
/* 1. Cristal esmerilado → superficies algo más opacas (el backdrop se recalcula en cada fotograma de scroll) */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#nav.dark-s { background: rgba(5,8,16,.9); } #nav.light { background: rgba(252,252,250,.94); }
.mcard { background: rgba(14,20,36,.94); } .tool { background: rgba(14,20,36,.95); }
.pane { background: linear-gradient(160deg, rgba(40,36,80,.55), rgba(20,18,50,.4)); }
.oc-pl { background: linear-gradient(135deg, rgba(190,180,255,.2), rgba(120,87,255,.12) 55%, rgba(56,166,224,.08)); }
.output { background: linear-gradient(150deg, rgba(58,48,120,.96), rgba(28,22,70,.96)); }
#chat { background: rgba(12,16,28,.985); } .slide { background: rgba(252,252,250,.995); } .veil { background: rgba(5,8,16,.7); }
.corp .member { background: rgba(18,20,30,.92); }
/* 2. Desenfoques grandes → degradados radiales que ya son suaves (sin filtro) */
.fog, .story-light, .ox-light, .core-glow, .oc-glow, .vision-light, .contact-light, .back-glow { filter: none !important; }
.fog.f1 { background: radial-gradient(closest-side, rgba(120,87,255,.13), rgba(120,87,255,.05) 55%, transparent); }
.fog.f2 { background: radial-gradient(closest-side, rgba(56,166,224,.06), transparent); }
.story-light { background: radial-gradient(closest-side, rgba(154,130,255,.32), rgba(120,87,255,.1) 55%, transparent); }
.oc-glow { background: radial-gradient(closest-side, rgba(120,87,255,.3), rgba(120,87,255,.08) 60%, transparent); }
.vision-light { background: radial-gradient(closest-side, rgba(120,87,255,.16), transparent); }
.contact-light { background: radial-gradient(closest-side, rgba(201,189,255,.55), rgba(120,87,255,.2) 45%, transparent); }
.fg { filter: none !important; }
.fg.shard { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(154,130,255,.1) 50%, transparent); }
.fg.dot { background: radial-gradient(closest-side, rgba(201,189,255,.35), transparent); }
/* 3. Fusiones de color y máscaras animadas → estáticas o por transform */
#chapterUI { mix-blend-mode: normal; color: #8A93A5; }
#chapterUI .trk i { background: var(--v1); }
.bfr-inner { animation: none; } .bfr-sheen { animation: none; background-position: 60% 0; opacity: .7; }
.contact .pc, .returnscn .pc { will-change: auto; }
/* 4. Animaciones infinitas que repintan → versiones con transform/opacity */
.eline { animation: none; background: linear-gradient(90deg, transparent, rgba(154,130,255,.45) 50%, transparent); overflow: hidden; }
.eline::after { content: ''; position: absolute; top: 0; left: 0; width: 25%; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: eflow2 6s linear infinite; will-change: transform; }
@keyframes eflow2 { from { transform: translateX(-100%) } to { transform: translateX(500%) } }
#askBtn { animation: none; box-shadow: 0 16px 40px -16px rgba(120,87,255,.6); }
#askBtn::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,87,255,.5), transparent); opacity: 0; animation: askGlow 7s ease-in-out infinite; pointer-events: none; }
@keyframes askGlow { 0%,80%,100% { opacity: 0 } 90% { opacity: 1 } }
.vision::after { animation: none; left: 0; width: 30%; transform: translateX(-120%); animation: vsweep2 11s ease-in-out infinite; will-change: transform; }
@keyframes vsweep2 { 0%,30% { transform: translateX(-120%) } 100% { transform: translateX(420%) } }
.vision-light { animation: vl 12s ease-in-out infinite alternate; will-change: transform; }
.fog { will-change: transform; }
.output .sheen::after { will-change: transform; left: 0; transform: translateX(-160%); animation: osheen2 5s ease-in-out infinite; }
@keyframes osheen2 { 0%,40% { transform: translateX(-160%) } 100% { transform: translateX(330%) } }
/* 5. Capas fijas: que el compositor las mueva sin repintar */
#amb i { will-change: opacity; }
#amb { contain: strict; }
/* 6. Texto nítido: nada de desenfoque en las entradas ni centrados a medio píxel */
.js .rv { filter: none !important; transform: translateY(14px); }
.js .rv.in { transform: none; }
.chap > div { filter: none !important; }
.cw { filter: none !important; }
.hero-copy { top: 0; bottom: 0; display: flex; align-items: center; transform: translate3d(0, calc(var(--p, 0) * -260px), 0); }
.hero-copy > .wrap { width: 100%; }
.ox-copy { top: 0; bottom: 0; display: flex; align-items: center; transform: translate3d(0, calc((1 - var(--c,0)) * 30px), 0); }
.ox-copy > .wrap { width: 100%; }
.ox-word { text-rendering: geometricPrecision; }
@media (max-width: 760px), (max-width: 999px) and (orientation: portrait) {
  .hero-copy { align-items: flex-start; padding-top: 92px; }
}
@media (max-width: 900px) { .ox-copy { align-items: flex-end; padding-bottom: 7vh; } }
/* 7. Móvil: menos capas en movimiento */
@media (max-width: 760px) {
  .bfr-inner, .bfr-sheen, .eline, .fog, .grid, #amb .c-orus, #amb .c-deep, #amb .c-trust { display: none; }
  .oc-l { animation: none !important; }
}

/* fragmentos: la capa mide solo su trozo */
.pc { inset: auto; }

/* ============================================================
   LOGO DE ORUS por piezas (reveal) — solo transform + opacidad
   ============================================================ */
.cat { position: relative; width: min(360px, 60vw); aspect-ratio: 738/819; }
.cat .cp { position: absolute; background-image: url(assets/orus-cat.webp); background-repeat: no-repeat; will-change: transform, opacity; opacity: 0; }
.cat-glint { position: absolute; inset: 0; pointer-events: none; mask: url(assets/orus-cat.webp) center / contain no-repeat; -webkit-mask: url(assets/orus-cat.webp) center / contain no-repeat; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.cat.done .cat-glint { opacity: 1; animation: catGlint 1.4s var(--e) forwards; }
@keyframes catGlint { to { background-position: -130% 0; } }
.ox-word { transform: translate(-50%, calc(-50% + min(300px, 44vw))) scale(calc(.94 + var(--w,0) * .06)); }
@media (max-width: 900px) { .cat { width: min(250px, 62vw); } }

/* B entera e intacta en reposo: tapa las juntas de los fragmentos hasta que empiezan a separarse */
.bwhole { position: absolute; inset: 0; pointer-events: none; will-change: opacity; transform: translateZ(8px); }
.bwhole svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bwhole .g2 { fill: #0A0E1A; transform: translate(7px, 9px); }
.bwhole .g1 { fill: #232A3C; transform: translate(3.5px, 4.5px); }
.bwhole .fc { fill: url(#faceGrad); stroke: rgba(255,255,255,.55); stroke-width: 2.4; stroke-linejoin: round; }

/* ---- botón del chat: la B de Berelian ---- */
#askBtn .crystal { display: none; }
#askBtn .bmini { width: 40px; height: auto; fill: url(#faceGrad); filter: drop-shadow(0 0 6px rgba(154,130,255,.7)); position: relative; z-index: 1; }
#askBtn::after { display: none; }
#chat .ch-h .ic .bmini { width: 22px; height: auto; fill: url(#faceGrad); }
/* ---- icono de ORUS en los accesos al producto ---- */
.cat-ic { width: 20px; height: auto; margin-right: 8px; vertical-align: -5px; display: inline-block; }
.nav-btn { display: inline-flex; align-items: center; }
.nav-btn .cat-ic { width: 18px; margin-right: 7px; }
.cat-link { display: flex !important; align-items: center; }
.cat-link .cat-ic { width: 16px; }
@media (max-width: 420px) { .nav-btn .cat-ic { display: none; } }
/* ---- ORUS en el centro de Integraciones ---- */
.icat { position: relative; width: min(190px, 34vw); animation: icatF 6s ease-in-out infinite; will-change: transform; }
.icat img { display: block; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.icat-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,87,255,.35), rgba(56,166,224,.1) 55%, transparent); animation: icatG 6s ease-in-out infinite; will-change: opacity; }
@keyframes icatF { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes icatG { 0%,100% { opacity: .75 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .icat, .icat-glow { animation: none; } }

/* escenas: el fundido lo gestiona el compositor */
.story-stage, .orusx-stage, .scn-stage, .return-stage { will-change: opacity; }
/* Creación: en fase de estructura se intuye el esqueleto del documento (no una hoja en blanco) */
.blk-d { opacity: .14; }
.blk-d.on { opacity: 1; }
#stars { will-change: transform; }
.rip { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 1px solid rgba(201,189,255,.55); pointer-events: none; animation: rip 1.2s var(--e) forwards; will-change: transform, opacity; }
@keyframes rip { from { transform: scale(.1); opacity: .9 } to { transform: scale(1); opacity: 0 } }

/* ============================================================
   SERVICIOS — panel de navegación con profundidad
   ============================================================ */
.svc-trig { display: inline-flex; align-items: center; gap: 7px; }
.svc-plus { position: relative; width: 8px; height: 8px; display: inline-block; transition: transform .45s var(--e); }
.svc-plus::before, .svc-plus::after { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; margin-top: -.5px; background: currentColor; opacity: .8; }
.svc-plus::after { transform: rotate(90deg); transition: transform .45s var(--e); }
.svc-trig:hover { opacity: 1; text-shadow: 0 0 14px rgba(154,130,255,.5); }
.svc-trig:hover .svc-plus, body.svc-open .svc-plus { transform: rotate(90deg); }
body.svc-open .svc-plus::after { transform: rotate(0deg); }
.svc-ov { position: fixed; inset: 0; z-index: 1700; display: none; perspective: 1600px; }
.svc-ov.show, .svc-ov:target { display: block; }
.svc-bd { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 10%, rgba(10,14,30,.55), rgba(3,5,10,.86)); opacity: 0; transition: opacity .5s var(--e); }
.svc-ov.open .svc-bd { opacity: 1; }
.svc-back { position: absolute; left: 50%; top: 84px; width: min(1240px, 94vw); height: min(84vh, 800px); transform: translate(-50%, 16px) scale(.965); border-radius: 26px; background: linear-gradient(180deg, rgba(120,87,255,.12), rgba(56,166,224,.04)); border: 1px solid rgba(255,255,255,.04); opacity: 0; transition: opacity .6s var(--e) .08s, transform .7s var(--e) .08s; }
.svc-ov.open .svc-back { opacity: 1; transform: translate(-50%, 26px) scale(.98); }
.svc-panel { position: absolute; left: 50%; top: 76px; width: min(1240px, 94vw); height: min(84vh, 800px); margin-left: calc(min(1240px, 94vw) / -2); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, #0E121C, #080A11 60%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 60px 120px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(120,87,255,.06); transform-origin: 50% 0; opacity: 0; transform: translateY(-20px) rotateX(-2deg) scale(.985); transition: opacity .55s var(--e), transform .65s var(--e); will-change: transform, opacity; }
.svc-ov.open .svc-panel { opacity: 1; transform: none; }
.svc-ov.closing .svc-panel { transition: opacity .38s var(--e) .08s, transform .42s var(--e) .08s; opacity: 0; transform: translateY(-10px) scale(.975); }
.svc-ov.closing .svc-grid, .svc-ov.closing .svc-head, .svc-ov.closing .svc-foot { opacity: 0; transition: opacity .15s; }
/* fondo que cambia de estructura, no de color */
.svc-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; transition: opacity .5s; }
.svc-bg::before { content: ''; position: absolute; inset: 0; transition: opacity .6s var(--e); }
.svc-panel[data-s="ai"] .svc-bg::before { background: repeating-radial-gradient(circle at 78% 55%, transparent 0 38px, rgba(154,130,255,.07) 38px 39px); }
.svc-panel[data-s="automation"] .svc-bg::before { background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(154,130,255,.06) 46px 47px); }
.svc-panel[data-s="knowledge"] .svc-bg::before { background: linear-gradient(160deg, transparent 60%, rgba(154,130,255,.05) 60% 61%, transparent 61% 70%, rgba(154,130,255,.05) 70% 71%, transparent 71% 80%, rgba(154,130,255,.05) 80% 81%, transparent 81%); }
.svc-panel[data-s="research"] .svc-bg::before { background: radial-gradient(rgba(201,189,255,.14) 1px, transparent 1.5px) 0 0 / 34px 34px; mask: radial-gradient(60% 70% at 75% 55%, #000, transparent); -webkit-mask: radial-gradient(60% 70% at 75% 55%, #000, transparent); }
.svc-panel[data-s="analysis"] .svc-bg::before { background: repeating-linear-gradient(-12deg, transparent 0 60px, rgba(154,130,255,.05) 60px 61px); }
.svc-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 34px 18px; border-bottom: 1px solid rgba(255,255,255,.06); transition: opacity .3s; }
.svc-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -.02em; margin: 6px 0 8px; color: #fff; }
.svc-intro { color: #A3AAB8; font-size: .95rem; max-width: 620px; margin: 0; }
.svc-x { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #A3AAB8; border: 1px solid rgba(255,255,255,.1); transition: color .2s, border-color .2s, transform .3s var(--e); flex-shrink: 0; }
.svc-x:hover { color: #fff; border-color: rgba(201,189,255,.4); transform: rotate(90deg); }
/* índice (40 %) + detalle (60 %) */
.svc-grid { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 38% 62%; grid-template-rows: repeat(5, auto) 1fr; transition: opacity .3s; }
.svc-row { grid-column: 1; display: grid; grid-template-columns: 36px 1fr; align-items: baseline; gap: 4px 10px; padding: 17px 24px 17px 34px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; color: #fff; cursor: pointer; position: relative; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--e), transform .45s var(--e), color .3s; transition-delay: calc(.12s + var(--i, 0) * .05s); }
.svc-ov.open .svc-row { opacity: .62; transform: none; }
.svc-ov.open .svc-row.on, .svc-ov.open .svc-row:hover, .svc-ov.open .svc-row:focus-visible { opacity: 1; }
.svc-row::before { content: ''; position: absolute; left: 34px; bottom: -1px; height: 1px; width: 0; background: var(--v1); transition: width .45s var(--e); }
.svc-row.on::before { width: calc(100% - 58px); }
.svc-n { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .14em; color: var(--mono-d); }
.svc-t { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.25; transition: transform .35s var(--e); }
.svc-row:hover .svc-t, .svc-row.on .svc-t { transform: translateX(6px); }
.svc-ts { display: none; }
.svc-sys { grid-column: 2; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .2em; color: var(--v2); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s var(--e); height: 0; overflow: visible; }
.svc-row:hover .svc-sys, .svc-row.on .svc-sys { opacity: .8; }
.svc-art { grid-column: 2; grid-row: 1 / -1; position: relative; padding: 26px 36px 26px 34px; border-left: 1px solid rgba(255,255,255,.06); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 26px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .42s var(--e), transform .42s var(--e), visibility 0s linear .42s; }
.svc-art > * { grid-column: 1; }
.svc-art.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--e) .08s, transform .5s var(--e) .08s, visibility 0s; }
.svc-art.leaving { opacity: 0; visibility: visible; transform: translateY(-12px); transition: opacity .3s var(--e), transform .35s var(--e); }
.svc-top { display: flex; align-items: baseline; gap: 14px; }
.svc-big { font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 300; color: rgba(201,189,255,.35); line-height: 1; }
.svc-kick { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mono-d); }
.svc-h { margin: 14px 0 12px; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: #fff; overflow: hidden; }
.svc-h span { display: block; transform: translateY(105%); transition: transform .55s var(--e) .12s; }
.svc-art.on .svc-h span { transform: none; }
.svc-p { color: #B3B9C5; font-size: .93rem; margin: 0 0 10px; line-height: 1.6; }
.svc-lbl { font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--v2); margin: 8px 0 8px; }
.svc-apps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-apps li { font-size: .78rem; color: #D5D9E2; border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 5px 11px; }
.svc-cta { justify-self: start; align-self: start; }
.svc-vis { grid-column: 2; grid-row: 1 / 7; align-self: center; height: min(300px, 40vh); position: relative; }
.svc-foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 34px; border-top: 1px solid rgba(255,255,255,.06); color: #A3AAB8; font-size: .9rem; transition: opacity .3s; }
.svc-foot .btn { padding: 11px 20px; font-size: .86rem; }
/* ---- visuales (solo se animan con el panel abierto y el servicio activo) ---- */
.vz { position: absolute; inset: 0; }
.vz, .vz * { animation-play-state: paused; }
.svc-ov.open .svc-art.on .vz, .svc-ov.open .svc-art.on .vz * { animation-play-state: running; }
.vz span { font-family: 'IBM Plex Mono', monospace; font-size: .58rem; letter-spacing: .16em; color: #C9BDFF; white-space: nowrap; }
/* 01 núcleo */
.v-core .vc { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; transform: rotate(45deg); background: linear-gradient(135deg, #fff, var(--v2) 40%, var(--v0)); box-shadow: 0 0 30px 8px rgba(120,87,255,.5); }
.v-core .vr { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(201,189,255,.18); }
.v-core .r1 { width: 110px; height: 110px; margin: -55px; } .v-core .r2 { width: 220px; height: 220px; margin: -110px; border-style: dashed; }
.v-core .vl { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(130px) rotate(calc(var(--a) * -1)); translate: -50% -50%; opacity: .9; animation: vconv 4.5s var(--e) infinite; animation-delay: var(--d); }
@keyframes vconv { 0%,15% { transform: rotate(var(--a)) translateX(130px) rotate(calc(var(--a) * -1)); opacity: .9 } 70% { transform: rotate(var(--a)) translateX(14px) rotate(calc(var(--a) * -1)) scale(.6); opacity: 0 } 100% { transform: rotate(var(--a)) translateX(130px) rotate(calc(var(--a) * -1)); opacity: 0 } }
/* 02 flujo */
.v-flow .vf-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(201,189,255,.1), rgba(201,189,255,.5), rgba(201,189,255,.1)); }
.v-flow .vf-st { position: absolute; top: calc(50% + 14px); transform: translateX(-50%); }
.v-flow .vf-st::before { content: ''; position: absolute; left: 50%; top: -18px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #0E121C; border: 1px solid var(--v1); }
.v-flow .vf-p { position: absolute; left: 6%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px rgba(154,130,255,.8); animation: vflow 4.4s linear infinite; animation-delay: var(--d); opacity: 0; }
@keyframes vflow { 0% { transform: translateX(0); opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { transform: translateX(min(370px, 26vw)); opacity: 0 } }
.v-flow .vf-p.hold { background: #F2C77A; box-shadow: 0 0 14px rgba(224,162,59,.8); animation: vhold 5s var(--e) infinite; }
@keyframes vhold { 0% { transform: translateX(0); opacity: 0 } 10% { opacity: 1 } 40%,65% { transform: translateX(min(206px, 14.5vw)); } 100% { transform: translateX(min(370px, 26vw)); opacity: 0 } }
.v-flow .vf-ok { position: absolute; left: 71%; top: calc(50% - 44px); transform: translateX(-50%); color: #F2C77A; border: 1px solid rgba(224,162,59,.5); padding: 4px 8px; border-radius: 100px; animation: vok 5s var(--e) infinite; opacity: 0; }
@keyframes vok { 0%,38% { opacity: 0 } 45%,62% { opacity: 1 } 70%,100% { opacity: 0 } }
/* 03 profundidad */
.v-depth { perspective: 700px; }
.v-depth .vd-c { position: absolute; left: calc(30% + var(--x)); top: calc(22% + var(--y)); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(201,189,255,.2); background: rgba(20,24,40,.9); transform: translateZ(var(--z)); opacity: .5; }
.v-depth .vd-c.pick { left: 30%; top: 20%; border-color: var(--v1); color: #fff; opacity: 0; animation: vpick 5s var(--e) infinite; }
@keyframes vpick { 0%,15% { transform: translateZ(-240px); opacity: 0 } 25% { opacity: .5 } 60%,85% { transform: translate(8%, 170%) translateZ(40px); opacity: 1 } 100% { transform: translate(8%, 170%) translateZ(40px); opacity: 0 } }
.v-depth .vd-q { position: absolute; left: 34%; bottom: 8%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(201,189,255,.5); background: rgba(120,87,255,.2); color: #fff; }
.v-depth .vd-l { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-depth .vd-l path { fill: none; stroke: var(--v1); stroke-width: .6; stroke-dasharray: 40; stroke-dashoffset: 40; animation: vline 5s var(--e) infinite; }
@keyframes vline { 0%,55% { stroke-dashoffset: 40 } 70%,90% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0; opacity: 0 } }
/* 04 expansión */
.v-exp svg { position: absolute; inset: 0 0 30px; width: 100%; height: calc(100% - 30px); }
.v-exp .ve-r { fill: none; stroke: rgba(201,189,255,.5); stroke-width: 1.2; stroke-dasharray: 400; stroke-dashoffset: 400; animation: vray 5s var(--e) infinite; animation-delay: var(--d); }
.v-exp .ve-p { fill: #fff; opacity: 0; animation: vpt 5s var(--e) infinite; animation-delay: var(--d); }
@keyframes vray { 0% { stroke-dashoffset: 400; opacity: 1 } 30% { stroke-dashoffset: 0; opacity: 1 } 55%,100% { stroke-dashoffset: 0; opacity: .08 } }
@keyframes vpt { 0%,22% { opacity: 0 } 32% { opacity: 1 } 55%,100% { opacity: .15 } }
.v-exp .ve-r.keep { animation-name: vrayk; } .v-exp .ve-p.keep { animation-name: vptk; }
@keyframes vrayk { 0% { stroke-dashoffset: 400 } 30%,100% { stroke-dashoffset: 0; stroke: #C9BDFF } }
@keyframes vptk { 0%,22% { opacity: 0 } 32%,100% { opacity: 1 } }
.v-exp .ve-c { fill: var(--v0); filter: drop-shadow(0 0 8px rgba(120,87,255,.9)); }
.ve-steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; }
.ve-steps span { opacity: .35; animation: vstep 5s var(--e) infinite; } .ve-steps span:nth-child(2) { animation-delay: 1.2s } .ve-steps span:nth-child(3) { animation-delay: 2.4s } .ve-steps span:nth-child(4) { animation-delay: 3.6s }
@keyframes vstep { 0%,10% { opacity: .35 } 18%,30% { opacity: 1; color: #fff } 40%,100% { opacity: .35 } }
/* 05 trayectorias */
.v-traj svg { position: absolute; inset: 0 0 34px; width: 100%; height: calc(100% - 34px); overflow: visible; }
.v-traj .vt { fill: none; stroke: rgba(201,189,255,.3); stroke-width: 1.4; stroke-dasharray: 420; stroke-dashoffset: 420; animation: vtd 5.5s var(--e) infinite; }
.v-traj .vt.b { animation-delay: .2s } .v-traj .vt.c { animation-delay: .4s }
.v-traj .vt.sel { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(154,130,255,.8)); }
@keyframes vtd { 0% { stroke-dashoffset: 420 } 40%,100% { stroke-dashoffset: 0 } }
.v-traj .vt-o { fill: var(--v0); } .v-traj text { font-family: 'IBM Plex Mono', monospace; font-size: 11px; fill: #C9BDFF; }
.vt-tags { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.vt-tags span { border: 1px solid rgba(201,189,255,.3); border-radius: 100px; padding: 4px 9px; opacity: 0; animation: vtag 5.5s var(--e) infinite; }
.vt-tags span:nth-child(2) { animation-delay: .15s } .vt-tags span:nth-child(3) { animation-delay: .3s } .vt-tags span:nth-child(4) { animation-delay: .45s }
@keyframes vtag { 0%,45% { opacity: 0; transform: translateY(6px) } 55%,92% { opacity: 1; transform: none } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .vz, .vz * { animation: none !important; } .v-depth .vd-c.pick, .v-flow .vf-ok, .vt-tags span, .v-exp .ve-p { opacity: 1; } .v-exp .ve-r, .v-traj .vt, .v-depth .vd-l path { stroke-dashoffset: 0; } }
/* ---- sin JavaScript: todos los servicios visibles y legibles ---- */
html:not(.js) .svc-panel, .svc-ov:target .svc-panel { opacity: 1; transform: none; }
html:not(.js) .svc-bd { opacity: 1; }
html:not(.js) .svc-grid { display: block; overflow-y: auto; }
html:not(.js) .svc-row { opacity: 1; transform: none; }
html:not(.js) .svc-art { opacity: 1; visibility: visible; transform: none; display: block; border-left: 0; }
html:not(.js) .svc-h span { transform: none; }
/* ---- móvil: pantalla completa + acordeón ---- */
@media (max-width: 900px) {
  .svc-panel { top: 0; left: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; border: 0; }
  .svc-back { display: none; }
  .svc-head { padding: 22px 20px 14px; } .svc-intro { font-size: .88rem; }
  .svc-grid { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .svc-row { grid-template-columns: 32px 1fr; padding: 18px 20px; }
  .svc-row::before { left: 20px; } .svc-row.on::before { width: calc(100% - 40px); }
  .svc-t { display: none; } .svc-ts { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.12rem; }
  .svc-sys { display: none; }
  .svc-art { display: none; border-left: 0; padding: 4px 20px 24px; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; overflow: visible; }
  .svc-art > * { grid-column: 1; }
  .svc-art.on { display: grid; }
  .svc-top { display: none; }
  .svc-vis { grid-column: 1; grid-row: auto; height: 170px; margin: 4px 0 16px; order: -1; }
  .svc-foot { padding: 14px 20px; font-size: .84rem; }
  .v-core .r2 { width: 160px; height: 160px; margin: -80px; }
  .v-core .vl { font-size: .5rem; }
  @keyframes vconv { 0%,15% { transform: rotate(var(--a)) translateX(95px) rotate(calc(var(--a) * -1)); opacity: .9 } 70% { transform: rotate(var(--a)) translateX(10px) rotate(calc(var(--a) * -1)) scale(.6); opacity: 0 } 100% { opacity: 0 } }
}
.svc-grid.hov .svc-row:not(:hover):not(.on) { opacity: .42; }
/* ajuste de espacio: que todo el detalle quepa sin desplazarse */
.svc-panel { top: 70px; height: min(88vh, 860px); }
.svc-back { top: 78px; height: min(88vh, 860px); }
.svc-head { padding: 22px 34px 14px; }
.svc-head h2 { margin: 4px 0 6px; }
.svc-intro { font-size: .9rem; }
.svc-art { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); padding: 20px 32px 20px 30px; }
.svc-h { margin: 10px 0 10px; font-size: clamp(1.25rem, 1.8vw, 1.65rem); }
.svc-p { font-size: .88rem; line-height: 1.55; margin-bottom: 8px; }
.svc-apps { margin-bottom: 14px; gap: 5px; }
.svc-apps li { font-size: .72rem; padding: 4px 9px; }
.svc-big { font-size: 2.1rem; }
.svc-vis { height: min(260px, 36vh); }
.svc-row { padding: 15px 24px 15px 34px; }
.svc-row:focus { outline: none; }
.svc-row:focus-visible { outline: 2px solid var(--v0); outline-offset: -2px; }
.svc-h { overflow: visible; }
.svc-h span { transform: translateY(18px); opacity: 0; clip-path: inset(0 0 100% 0); transition: transform .55s var(--e) .1s, opacity .4s var(--e) .1s, clip-path .6s var(--e) .1s; }
.svc-art.on .svc-h span { transform: none; opacity: 1; clip-path: inset(-20% -5% -20% -5%); }
.v-flow .vf-st { font-size: .52rem; letter-spacing: .1em; }
.v-flow .vf-st:nth-of-type(odd) { top: calc(50% + 14px); }
.v-flow .vf-st:nth-of-type(even) { top: calc(50% - 30px); }
.v-flow .vf-st:nth-of-type(even)::before { top: auto; bottom: -12px; }
@keyframes vflow { 0% { transform: translateX(0); opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { transform: translateX(var(--tw, 300px)); opacity: 0 } }
@keyframes vhold { 0% { transform: translateX(0); opacity: 0 } 10% { opacity: 1 } 40%,65% { transform: translateX(calc(var(--tw, 300px) * .7)); } 100% { transform: translateX(var(--tw, 300px)); opacity: 0 } }
.v-flow .vf-ok { left: 76%; top: calc(50% - 62px); }
/* capítulos: la que sale se va rápido, la que entra llega después (sin superponerse) */
.chap > div { transition: opacity .22s var(--e), transform .3s var(--e); }
.chap > div.on { transition: opacity .5s var(--e) .2s, transform .6s var(--e) .2s; }
.cw { transition: opacity .22s var(--e), transform .3s var(--e); }
.cw.on { transition: opacity .5s var(--e) .2s, transform .6s var(--e) .2s; }