/* LAB IA: hero con red neuronal y cerebro de soluciones (traídos del micrositio Beyond Intelligence). */
.page-lab .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Hero ---------- */
.page-lab .bi-hero{min-height:min(56vw,860px);overflow:hidden;padding-bottom:90px}
.page-lab .bi-hero>header{z-index:5!important}
.bi-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.bi-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6%;width:84%;margin:4.5vw auto 0}
.bi-hero-copy{animation:hero-enter .85s ease-out both;transform-origin:left center}
.bi-eyebrow{font-size:14px;letter-spacing:.23em;font-weight:600;color:#8fc0ff}
.bi-hero-copy h1{font-size:clamp(46px,6vw,104px);line-height:.98;font-weight:600;letter-spacing:-.055em;margin-top:18px}
.bi-hero-copy h1 span{background:linear-gradient(90deg,#fff 0%,#8fc0ff 55%,#087bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bi-hero-copy>p:not(.bi-eyebrow){font-size:clamp(17px,1.5vw,23px);line-height:1.3;max-width:560px;margin-top:28px;color:#d4dfee}

/* Logo LAB IA con anillos */
.bi-orbit{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center;display:grid;place-items:center}
.bi-core{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#2f95ff55 0%,#087bff1f 40%,transparent 70%);filter:blur(6px)}
.bi-ring{position:absolute;border-radius:50%;border:1px solid #4a9bff40}
.bi-ring-1{inset:0;border-style:dashed;animation:bi-spin 60s linear infinite}
.bi-ring-2{inset:14%;border-color:#4a9bff55;animation:bi-spin 40s linear infinite reverse}
.bi-ring-3{inset:28%;border-color:#4a9bff70}
.bi-dot{position:absolute;inset:0;animation:bi-spin 18s linear infinite}
.bi-dot::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#ff9600;box-shadow:0 0 18px #ff9600}
.bi-dot-2{inset:14%;animation-duration:26s;animation-direction:reverse}
.bi-dot-2::before{background:#8fc0ff;box-shadow:0 0 18px #8fc0ff;width:9px;height:9px;margin-left:-4.5px;top:-4.5px}
.bi-logo{position:relative;width:82%;animation:float 9s ease-in-out infinite}
.bi-logo .bi-wordmark{display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px #087bff99)}
.bi-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%) no-repeat;background-size:250% 100%;-webkit-mask:url(assets/lab-ia-wordmark.png) center/100% 100% no-repeat;mask:url(assets/lab-ia-wordmark.png) center/100% 100% no-repeat;animation:bi-shine 7s ease-in-out infinite}
/* Las animaciones del logo solo corren mientras el hero está en pantalla (clase puesta por JS). */
.bi-orbit *{animation-play-state:paused}
.bi-orbit.is-playing *{animation-play-state:running}
@keyframes bi-spin{to{transform:rotate(360deg)}}
@keyframes bi-shine{0%,60%{background-position:150% 0}90%,100%{background-position:-50% 0}}
.bi-scroll{position:absolute;z-index:3;left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;border:1px solid #ffffff50;border-radius:50%;display:grid;place-items:center;color:#fff;animation:scroll-cue-down 2.2s ease-in-out infinite}
.bi-scroll svg{width:20px;height:20px}
@keyframes scroll-cue-down{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(8px);opacity:1}}

/* ---------- Soluciones: cerebro de IA que acompaña el scroll y muestra las cifras ---------- */
.page-lab .bi-topics{position:relative;margin-top:-1px;border-radius:48px;padding:7.1vw 0 40px;background:radial-gradient(ellipse at 12% 18%,#087bff12 0%,transparent 40%),radial-gradient(ellipse at 90% 80%,#6a5cff10 0%,transparent 42%),radial-gradient(#087bff1c 1px,transparent 1.4px) 0 0/26px 26px,#fff}
.bi-heading{text-align:center;width:84%;max-width:900px;margin:0 auto 20px}
.bi-heading>p{font-size:14px;letter-spacing:.23em;color:#aaa;font-weight:600}
.bi-heading h2{font-size:clamp(30px,3.4vw,52px);line-height:1.08;color:#087bff;letter-spacing:-.05em;margin-top:18px}
.bi-heading>span{display:block;font-size:clamp(16px,1.3vw,20px);line-height:1.4;color:#6b7a8c;margin-top:20px}
.bi-brain-scroll{position:relative;height:calc(var(--steps,5) * 75vh + 25vh)}
.bi-brain-sticky{position:sticky;top:0;height:100vh;width:84%;max-width:1240px;margin:auto;overflow:hidden}
.bi-brain-stage{position:absolute;top:50%;left:0;width:52%;aspect-ratio:1;max-height:88vh;translate:0 -50%;transition:left 1s cubic-bezier(.65,0,.25,1)}
.bi-brain-sticky.is-flip .bi-brain-stage{left:48%}
.bi-brain-glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--bc,#087bff) 22%,transparent) 0%,color-mix(in srgb,var(--bc,#087bff) 8%,transparent) 45%,transparent 70%);filter:blur(10px);transition:background .8s}
.bi-brain{position:relative;display:block;width:100%;height:100%}
.bi-brain-cards{position:absolute;top:50%;left:54%;width:42%;translate:0 -50%;transition:left 1s cubic-bezier(.65,0,.25,1)}
.bi-brain-sticky.is-flip .bi-brain-cards{left:4%}
.bi-brain-cards .bi-topic{position:absolute;top:50%;left:0;right:0;translate:0 -50%;opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.bi-brain-cards .bi-topic.is-active{opacity:1;transform:none;pointer-events:auto;transition-delay:.35s}
.bi-topic{padding:38px 36px 40px;border-radius:30px;border:1px solid #dbe8fa;border-top:4px solid var(--tc,#dbe8fa);background:#ffffffe6;backdrop-filter:blur(10px);box-shadow:0 24px 60px #061a3a14}
.bi-topic-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bi-ico{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:18px;background:linear-gradient(140deg,var(--tc,#087bff),color-mix(in srgb,var(--tc,#087bff) 55%,#fff));box-shadow:0 10px 24px color-mix(in srgb,var(--tc,#087bff) 35%,transparent)}
.bi-ico svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bi-topic em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--tc,#087bff)}
.bi-topic strong{display:block;margin-top:22px;font-size:clamp(64px,7vw,112px);font-weight:600;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--tc,#087bff)}
.bi-topic h3{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.04em;line-height:1.1;margin-top:10px;color:#061323}
.bi-topic p{font-size:17px;line-height:1.55;color:#6b7a8c;margin-top:14px}

/* En pantallas angostas el cerebro no acompaña el scroll: queda arriba y las cifras en lista. */
@media(max-width:900px){
  .bi-brain-scroll{height:auto}
  .bi-brain-sticky{position:static;height:auto;width:calc(100% - 32px);overflow:visible}
  .bi-brain-stage{position:relative;top:auto;left:auto!important;translate:none;width:min(100%,380px);margin:0 auto}
  .bi-brain-cards{position:static;width:auto;translate:none;display:grid;gap:14px}
  .bi-brain-cards .bi-topic{position:static;translate:none;opacity:1;transform:none;pointer-events:auto}
  .bi-topic{padding:28px 24px}
  .bi-topic strong{font-size:64px}
  .bi-topic h3{font-size:24px}
  .bi-topic p{font-size:15px}
  .page-lab .bi-topics{padding:60px 0 60px}
}
@media(max-width:760px){
  .page-lab .bi-hero{min-height:0;padding-bottom:100px}
  .bi-hero-grid{grid-template-columns:1fr;margin:30px auto 0;gap:30px;width:88%}
  .bi-orbit{max-width:320px;justify-self:center}
  .bi-heading{width:88%}
  .page-lab .bi-topics{border-radius:30px}
}
@media(prefers-reduced-motion:reduce){
  .bi-hero-copy,.bi-ring,.bi-dot,.bi-logo,.bi-shine,.bi-scroll{animation:none!important}
}