:root{
  --bg:#050817;
  --bg-deep:#02040d;
  --text:#f7f8ff;
  --muted:rgba(235,240,255,.72);
  --line:rgba(255,255,255,.12);
  --purple:#7b3cff;
  --violet:#9d4dff;
  --blue:#2c7cff;
  --cyan:#37d7ff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 72% 22%,rgba(47,96,255,.12),transparent 28%),
    radial-gradient(circle at 35% 32%,rgba(119,55,255,.11),transparent 27%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
}

#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:fixed;pointer-events:none;filter:blur(54px);z-index:0}
.nebula-a{width:48vw;height:48vw;right:-12vw;top:5vh;background:radial-gradient(circle,rgba(75,90,255,.22),rgba(98,42,255,.09) 40%,transparent 70%)}
.nebula-b{width:38vw;height:38vw;left:-10vw;bottom:-12vw;background:radial-gradient(circle,rgba(49,151,255,.11),rgba(124,47,255,.08) 42%,transparent 72%)}


.shooters{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

.shooter{
  --angle: 24deg;
  position:absolute;
  width:240px;
  height:10px;
  opacity:0;
  transform:rotate(var(--angle));
  transform-origin:100% 50%;
  will-change:transform,opacity;
}

/* Cola: fina, recta y siempre alineada con la cabeza */
.shooter::before{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:220px;
  height:2px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(126,164,255,0) 0%,
    rgba(126,164,255,.04) 16%,
    rgba(126,164,255,.18) 42%,
    rgba(184,214,255,.62) 76%,
    rgba(255,255,255,.96) 100%
  );
  box-shadow:
    0 0 4px rgba(108,154,255,.30),
    0 0 10px rgba(108,154,255,.18);
}

/* Cabeza brillante */
.shooter::after{
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 16px rgba(123,181,255,.75);
}

/* Mismo ángulo visual; distintas alturas y tiempos */
.s1{--angle:24deg;top:15%;left:-280px;animation:meteorClean 7.5s linear infinite 1.2s}
.s2{--angle:24deg;top:31%;left:-300px;animation:meteorClean 10.5s linear infinite 5.8s}
.s3{--angle:24deg;top:8%;left:-260px;animation:meteorClean 13s linear infinite 9.4s}
.s4{--angle:24deg;top:50%;left:-310px;animation:meteorClean 15s linear infinite 13.5s}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 5.5vw;
  background:linear-gradient(180deg,rgba(2,4,13,.7),rgba(2,4,13,.22),transparent);
  backdrop-filter:blur(8px)
}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:1.45rem;font-weight:700;letter-spacing:.04em}
.brand-mark{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 210deg,var(--purple),var(--violet),var(--cyan),var(--blue),var(--purple));box-shadow:0 0 30px rgba(85,67,255,.28);position:relative}
.brand-mark:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#050817}
.nav{display:flex;gap:32px}
.nav a{color:rgba(245,247,255,.84);text-decoration:none;font-size:.98rem}
.nav a:hover{color:#fff}
.status-pill{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);padding:11px 18px;border-radius:999px;color:#fff;backdrop-filter:blur(10px)}
.status-pill.large{font-size:1.05rem;padding:14px 24px;display:inline-flex}

main{position:relative;z-index:2}
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:5vw;padding:120px 6vw 70px}
.hero-copy{max-width:660px;animation:heroCopyIn 1s cubic-bezier(.2,.75,.2,1) both .1s}
.hero-visual{position:relative;min-height:640px;display:grid;place-items:center;isolation:isolate;animation:heroVisualIn 1.2s cubic-bezier(.2,.75,.2,1) both .25s}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(116,73,255,.38);border-radius:999px;color:#c9d5ff;background:rgba(41,44,94,.18);font-size:.9rem}
.eyebrow span{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));box-shadow:0 0 14px rgba(88,116,255,.9)}
h1{font-size:clamp(3.8rem,6.7vw,7rem);line-height:.92;letter-spacing:-.06em;margin:24px 0 24px;font-weight:800}
h1 span{display:block}
.gradient-text{background:linear-gradient(90deg,var(--violet),var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.55;color:var(--muted);max-width:590px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 24px;border-radius:16px;text-decoration:none;font-weight:600;font-size:1rem;border:0;cursor:pointer;font-family:inherit}
.primary{color:white;background:linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));box-shadow:0 12px 36px rgba(74,65,255,.24)}
.secondary{color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}

.visual-glow{position:absolute;width:68%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(78,120,255,.18),rgba(124,63,255,.13) 35%,transparent 68%);filter:blur(30px);z-index:-3}
.horizon{position:absolute;left:50%;bottom:8%;width:86%;height:18%;transform:translateX(-50%);border-radius:50%;border-top:1px solid rgba(82,147,255,.55);background:radial-gradient(ellipse at center top,rgba(54,106,255,.14),transparent 62%);box-shadow:0 -6px 32px rgba(50,85,255,.08)}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(120,110,255,.28);box-shadow:0 0 24px rgba(79,82,255,.06);animation:orbitSpin 14s linear infinite;transform-origin:center center}
.orbit-1{width:74%;height:36%;transform:rotate(-16deg)}
.orbit-2{width:60%;height:26%;transform:rotate(18deg);animation-duration:19s;animation-direction:reverse}
.orbit-3{width:48%;height:18%;transform:rotate(-28deg);animation-duration:11s}
.orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 16px rgba(87,134,255,.95);left:50%;top:-5px}

.o-wrap{position:relative;width:min(520px,72vw);aspect-ratio:1;transform-style:preserve-3d;animation:floatO 8s ease-in-out infinite}
.o-ring{position:absolute;inset:16%;border-radius:50%;transform-style:preserve-3d;animation:ringBreath 5.5s ease-in-out infinite 2.2s}
.seg{position:absolute;width:44%;height:44%;background:linear-gradient(135deg,rgba(183,106,255,.95),rgba(67,87,255,.95) 55%,rgba(55,215,255,.9));box-shadow:inset 0 0 20px rgba(255,255,255,.2),0 0 28px rgba(87,85,255,.2);border:1px solid rgba(255,255,255,.22)}
.seg:after{content:"";position:absolute;inset:14%;background:#070b1c;border-radius:50%;box-shadow:inset 0 0 25px rgba(18,32,71,.65)}
.seg.a{left:0;top:0;border-radius:100% 22% 24% 24%;transform:rotate(-5deg);animation:assembleA 2s ease both .1s}
.seg.b{right:0;top:0;border-radius:22% 100% 24% 24%;transform:rotate(5deg);animation:assembleB 2s ease both .25s}
.seg.c{left:0;bottom:0;border-radius:24% 24% 24% 100%;transform:rotate(5deg);animation:assembleC 2s ease both .4s}
.seg.d{right:0;bottom:0;border-radius:24% 24% 100% 24%;transform:rotate(-5deg);animation:assembleD 2s ease both .55s}

.node{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:linear-gradient(180deg,rgba(30,32,78,.88),rgba(15,18,47,.84));border:1px solid rgba(139,102,255,.45);box-shadow:0 0 28px rgba(72,79,255,.14);font-size:1.45rem;backdrop-filter:blur(8px);animation:nodeFloat 4.8s ease-in-out infinite, nodePulse 2.8s ease-in-out infinite}
.n1{left:1%;top:28%}.n2{right:5%;top:13%;animation-delay:.5s,.2s}.n3{right:-1%;top:48%;animation-delay:1s,.4s}.n4{right:8%;bottom:8%;animation-delay:1.5s,.6s}.n5{left:8%;bottom:10%;animation-delay:2s,.8s}

.story{
  min-height:78vh;display:flex;align-items:center;padding:90px 8vw;border-top:1px solid rgba(255,255,255,.05);
  opacity:0;transform:translateY(70px) scale(.985);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1)
}
.story.is-visible{opacity:1;transform:translateY(0) scale(1)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:center}
.split.reverse .story-copy{order:2}.split.reverse .story-visual{order:1}
.story-copy{max-width:720px}
.section-kicker{font-size:.78rem;letter-spacing:.24em;color:#8ea6ff;display:inline-block;margin-bottom:14px}
.story h2{font-size:clamp(2.4rem,4.8vw,4.9rem);line-height:1.02;letter-spacing:-.05em;margin:0 0 18px}
.story h2 em{font-style:normal;background:linear-gradient(90deg,var(--violet),var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.story p{font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:720px}
.story-visual{position:relative;min-height:420px;display:grid;place-items:center}

.idea-visual,.network-visual,.device-visual,.final-visual{border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 60px rgba(8,10,30,.32);overflow:hidden}
.idea-visual{min-height:420px}
.idea-core{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--cyan),var(--blue) 45%,rgba(123,60,255,.85) 70%,transparent 72%);box-shadow:0 0 40px rgba(77,120,255,.45);animation:pulseCore 3s ease-in-out infinite}
.idea-ring{position:absolute;border:1px solid rgba(134,137,255,.35);border-radius:50%}
.idea-ring.r1{width:280px;height:280px;animation:orbitSpin 18s linear infinite}
.idea-ring.r2{width:360px;height:180px;transform:rotate(18deg);animation:orbitSpin 14s linear infinite reverse}
.idea-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 18px rgba(87,134,255,.85)}
.idea-dot.d1{top:24%;left:24%;animation:dotOrbit1 5s ease-in-out infinite}
.idea-dot.d2{top:30%;right:22%;animation:dotOrbit2 6s ease-in-out infinite}
.idea-dot.d3{bottom:20%;left:46%;animation:dotOrbit3 7s ease-in-out infinite}

.network-visual{min-height:420px}
.network-node{position:absolute;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 18px rgba(87,134,255,.85);transform:scale(.8);opacity:.55}
.network-node.a{left:14%;top:50%}.network-node.b{left:34%;top:22%}.network-node.c{left:54%;top:54%}.network-node.d{left:78%;top:28%}.network-node.e{left:48%;top:78%}
.network-line{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(106,110,255,.2),rgba(69,213,255,.75),rgba(106,110,255,.2));transform-origin:left center;opacity:.25}
.network-line.l1{width:110px;left:16%;top:48%;transform:rotate(-32deg)}
.network-line.l2{width:130px;left:35%;top:26%;transform:rotate(32deg)}
.network-line.l3{width:138px;left:55%;top:48%;transform:rotate(-28deg)}
.network-line.l4{width:126px;left:35%;top:61%;transform:rotate(45deg)}
.network-line.l5{width:220px;left:17%;top:49%;transform:rotate(7deg)}
.story.is-visible .network-node{animation:netPulse 2.2s ease-in-out infinite}
.story.is-visible .network-node.b{animation-delay:.25s}.story.is-visible .network-node.c{animation-delay:.5s}.story.is-visible .network-node.d{animation-delay:.75s}.story.is-visible .network-node.e{animation-delay:1s}
.story.is-visible .network-line{animation:lineGlow 3s ease-in-out infinite}

.device-visual{min-height:470px}
.device-phone{position:relative;width:240px;height:460px;border-radius:36px;background:linear-gradient(180deg,#0f1330,#090d20);border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);padding:16px 16px 18px;overflow:hidden;animation:phoneFloat 5.5s ease-in-out infinite}
.device-notch{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:94px;height:16px;border-radius:16px;background:#03050d}
.device-top{display:flex;justify-content:space-between;color:#d6e2ff;font-size:.78rem;padding-top:10px}
.device-brand{margin-top:18px;font-weight:700;letter-spacing:.08em}
.device-search{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);color:#b8c8ff;font-size:.86rem}
.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.device-grid span{padding:14px 10px;border-radius:16px;background:linear-gradient(180deg,rgba(30,34,78,.95),rgba(20,24,54,.92));font-size:.85rem;text-align:center;border:1px solid rgba(130,112,255,.22)}
.device-banner{margin-top:18px;border-radius:22px;padding:18px;background:linear-gradient(135deg,rgba(122,60,255,.95),rgba(54,109,255,.95),rgba(55,215,255,.9));box-shadow:0 12px 40px rgba(78,90,255,.3)}
.device-banner small{display:block;letter-spacing:.18em;font-size:.65rem;opacity:.85;margin-bottom:10px}
.device-banner strong{font-size:1.1rem;line-height:1.2}
.floating-card{position:absolute;padding:16px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.26)}
.floating-card small{display:block;color:#b7c9ff;margin-bottom:8px}
.floating-card strong{display:block;font-size:1.1rem}
.card-a{top:14%;left:4%;width:190px;animation:cardFloat 6.2s ease-in-out infinite}
.card-b{bottom:12%;right:4%;width:180px;animation:cardFloat 5.6s ease-in-out infinite reverse}
.bars{display:flex;gap:7px;align-items:flex-end;height:54px;margin-top:14px}
.bars i{display:block;width:10px;border-radius:999px;background:linear-gradient(180deg,var(--violet),var(--cyan));animation:barDance 2.2s ease-in-out infinite}
.bars i:nth-child(1){height:22px}.bars i:nth-child(2){height:34px;animation-delay:.2s}.bars i:nth-child(3){height:42px;animation-delay:.4s}.bars i:nth-child(4){height:28px;animation-delay:.6s}.bars i:nth-child(5){height:48px;animation-delay:.8s}

.final-visual{min-height:420px}
.pulse-ring{position:absolute;border-radius:50%;border:1px solid rgba(122,150,255,.25)}
.pr1{width:130px;height:130px;animation:pulseWave 3.6s ease-out infinite}
.pr2{width:220px;height:220px;animation:pulseWave 3.6s ease-out infinite 1s}
.pr3{width:320px;height:320px;animation:pulseWave 3.6s ease-out infinite 2s}
.final-core{width:98px;height:98px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue),var(--cyan));box-shadow:0 0 34px rgba(87,134,255,.65);animation:pulseCore 3s ease-in-out infinite}
.contact{min-height:68vh}

@keyframes heroCopyIn{from{opacity:0;transform:translate3d(-45px,18px,0)}to{opacity:1;transform:none}}
@keyframes heroVisualIn{from{opacity:0;transform:translate3d(55px,18px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes floatO{0%,100%{transform:translateY(0) rotateY(-8deg)}50%{transform:translateY(-14px) rotateY(-2deg)}}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes assembleA{from{opacity:0;transform:translate(-90px,-80px) rotate(-22deg) scale(.75)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes assembleB{from{opacity:0;transform:translate(90px,-80px) rotate(22deg) scale(.75)}to{opacity:1;transform:rotate(5deg)}}
@keyframes assembleC{from{opacity:0;transform:translate(-90px,90px) rotate(22deg) scale(.75)}to{opacity:1;transform:rotate(5deg)}}
@keyframes assembleD{from{opacity:0;transform:translate(90px,90px) rotate(-22deg) scale(.75)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes orbitSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes ringBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(87,94,255,0));transform:scale(1)}50%{filter:drop-shadow(0 0 22px rgba(87,94,255,.36));transform:scale(1.025)}}
@keyframes nodePulse{0%,100%{box-shadow:0 0 18px rgba(72,79,255,.12)}50%{box-shadow:0 0 34px rgba(72,114,255,.42)}}
@keyframes meteorClean{0%,76%{opacity:0;transform:translate3d(0,0,0) rotate(var(--angle))}78%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate3d(calc(100vw + 650px),420px,0) rotate(var(--angle))}}67%{opacity:1}76%{opacity:1}100%{opacity:0;transform:translate3d(140vw,0,0) rotate(-32deg)}}
@keyframes pulseCore{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(77,120,255,.35)}50%{transform:scale(1.08);box-shadow:0 0 44px rgba(77,120,255,.6)}}
@keyframes dotOrbit1{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-12px)}}
@keyframes dotOrbit2{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
@keyframes dotOrbit3{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}
@keyframes netPulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.16);opacity:1}}
@keyframes lineGlow{0%,100%{opacity:.22;box-shadow:0 0 0 rgba(79,160,255,0)}50%{opacity:.85;box-shadow:0 0 18px rgba(79,160,255,.34)}}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes barDance{0%,100%{transform:scaleY(.8);opacity:.75}50%{transform:scaleY(1.15);opacity:1}}
@keyframes pulseWave{0%{transform:scale(.6);opacity:0}35%{opacity:.7}100%{transform:scale(1.18);opacity:0}}

@media (max-width:980px){
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:120px}
  .hero-copy{text-align:center;margin:0 auto}
  .hero-copy p{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-visual{min-height:520px}
  .split{grid-template-columns:1fr;gap:28px}
  .split.reverse .story-copy,.split.reverse .story-visual{order:initial}
  .brand{font-size:1.2rem}.status-pill{padding:10px 14px}
  .story,.contact{padding:72px 22px;min-height:auto}
  .story-copy,.story p{text-align:center;margin-inline:auto}
  .story-visual{min-height:340px}
  .card-a{left:0}.card-b{right:0}
}
@media (max-width:640px){
  .topbar{padding:18px 18px}
  .hero{padding:110px 18px 50px}
  .eyebrow{font-size:.78rem}
  .hero-copy p{font-size:1rem}
  .hero-visual{min-height:420px}
  .o-wrap{width:min(420px,92vw)}
  .node{width:48px;height:48px;border-radius:14px;font-size:1.1rem}
  .story p{font-size:1rem}
  .cta{width:100%}
  .hero-actions{width:100%}
  .device-visual{min-height:520px}
  .device-phone{width:220px;height:430px}
  .card-a{top:4%;left:50%;transform:translateX(-50%);width:180px}
  .card-b{bottom:4%;right:50%;transform:translateX(50%);width:170px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .story{opacity:1;transform:none}
}

/* ===== V5 · Scroll storytelling estilo V1 ===== */
.story{
  overflow:hidden;
  opacity:1;
  transform:none;
}
.story .story-copy{
  opacity:0;
  transform:translate3d(0,52px,0);
  filter:blur(8px);
}
.story .story-visual{
  opacity:0;
  transform:translate3d(0,70px,0) scale(.92);
  filter:blur(10px);
}
.story.is-visible .story-copy{
  animation:storyCopyReveal .95s cubic-bezier(.2,.75,.2,1) both .08s;
}
.story.is-visible .story-visual{
  animation:storyVisualReveal 1.05s cubic-bezier(.2,.75,.2,1) both .28s;
}

/* Idea: el núcleo se forma al entrar en pantalla */
.idea-core,
.idea-ring,
.idea-dot{animation:none!important}
.story.is-visible .idea-core{animation:ideaCoreReveal 1.1s cubic-bezier(.2,.8,.2,1) both .52s, pulseCore 3s ease-in-out infinite 1.7s!important}
.story.is-visible .idea-ring.r1{animation:ringReveal 1.2s ease both .7s, orbitSpin 18s linear infinite 1.9s!important}
.story.is-visible .idea-ring.r2{animation:ringRevealTilt 1.2s ease both .88s, orbitSpin 14s linear infinite reverse 2.1s!important}
.story.is-visible .idea-dot.d1{animation:dotReveal  .55s ease both 1.05s, dotOrbit1 5s ease-in-out infinite 1.7s!important}
.story.is-visible .idea-dot.d2{animation:dotReveal  .55s ease both 1.2s, dotOrbit2 6s ease-in-out infinite 1.85s!important}
.story.is-visible .idea-dot.d3{animation:dotReveal  .55s ease both 1.35s, dotOrbit3 7s ease-in-out infinite 2s!important}

/* Red: nodos primero, líneas después */
.network-node,.network-line{animation:none!important;opacity:0}
.story.is-visible .network-node.a{animation:networkNodeReveal .5s ease both .55s, netPulse 2.2s ease-in-out infinite 1.5s!important}
.story.is-visible .network-node.b{animation:networkNodeReveal .5s ease both .72s, netPulse 2.2s ease-in-out infinite 1.67s!important}
.story.is-visible .network-node.c{animation:networkNodeReveal .5s ease both .89s, netPulse 2.2s ease-in-out infinite 1.84s!important}
.story.is-visible .network-node.d{animation:networkNodeReveal .5s ease both 1.06s, netPulse 2.2s ease-in-out infinite 2.01s!important}
.story.is-visible .network-node.e{animation:networkNodeReveal .5s ease both 1.23s, netPulse 2.2s ease-in-out infinite 2.18s!important}
.story.is-visible .network-line.l1{animation:networkLineReveal .65s ease both 1.1s, lineGlow 3s ease-in-out infinite 1.9s!important}
.story.is-visible .network-line.l2{animation:networkLineReveal .65s ease both 1.22s, lineGlow 3s ease-in-out infinite 2.02s!important}
.story.is-visible .network-line.l3{animation:networkLineReveal .65s ease both 1.34s, lineGlow 3s ease-in-out infinite 2.14s!important}
.story.is-visible .network-line.l4{animation:networkLineReveal .65s ease both 1.46s, lineGlow 3s ease-in-out infinite 2.26s!important}
.story.is-visible .network-line.l5{animation:networkLineReveal .65s ease both 1.58s, lineGlow 3s ease-in-out infinite 2.38s!important}

/* Plataforma: teléfono y tarjetas entran por capas */
.device-phone,.floating-card{animation:none!important}
.story.is-visible .device-phone{animation:phoneReveal 1s cubic-bezier(.2,.75,.2,1) both .55s, phoneFloat 5.5s ease-in-out infinite 1.7s!important}
.story.is-visible .card-a{animation:cardRevealLeft .8s cubic-bezier(.2,.75,.2,1) both 1.05s, cardFloat 6.2s ease-in-out infinite 1.9s!important}
.story.is-visible .card-b{animation:cardRevealRight .8s cubic-bezier(.2,.75,.2,1) both 1.22s, cardFloat 5.6s ease-in-out infinite reverse 2.05s!important}

/* Cierre: anillos aparecen uno detrás de otro */
.pulse-ring,.final-core{animation:none!important;opacity:0}
.story.is-visible .final-core{animation:finalCoreReveal .8s ease both .55s, pulseCore 3s ease-in-out infinite 1.45s!important}
.story.is-visible .pr1{animation:pulseWave 3.6s ease-out infinite .9s!important}
.story.is-visible .pr2{animation:pulseWave 3.6s ease-out infinite 1.7s!important}
.story.is-visible .pr3{animation:pulseWave 3.6s ease-out infinite 2.5s!important}

@keyframes storyCopyReveal{
  from{opacity:0;transform:translate3d(0,52px,0);filter:blur(8px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes storyVisualReveal{
  from{opacity:0;transform:translate3d(0,70px,0) scale(.92);filter:blur(10px)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes ideaCoreReveal{from{opacity:0;transform:scale(.25) rotate(-35deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ringReveal{from{opacity:0;transform:scale(.4) rotate(-28deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ringRevealTilt{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(18deg)}}
@keyframes dotReveal{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes networkNodeReveal{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(.8)}}
@keyframes networkLineReveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:.55;clip-path:inset(0 0 0 0)}}
@keyframes phoneReveal{from{opacity:0;transform:translate3d(0,90px,0) rotateY(-18deg) scale(.82)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}}
@keyframes cardRevealLeft{from{opacity:0;transform:translate3d(-80px,35px,0) scale(.84)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes cardRevealRight{from{opacity:0;transform:translate3d(80px,35px,0) scale(.84)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes finalCoreReveal{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}

@media (max-width:980px){
  .story .story-copy,.story .story-visual{filter:none}
}