/* Catalog scenes: live HTML/CSS animations, one per pillar. They run only while visible (.scene.in)
   and loop on a shared 10 s cycle. Sizes are in container units so each scene scales with its box. */
.scene { --cy: 10s; position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(90% 80% at 80% 0%, rgba(3, 119, 191, .28), transparent 60%), #06101f;
  border: 1px solid rgba(160, 205, 255, .16); box-shadow: 0 40px 100px rgba(5, 10, 24, .35); color: #EAF2FF; font-family: var(--sans); }
.scene * { animation-play-state: paused !important; }
.scene.in * { animation-play-state: running !important; }
.scene .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 180, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 180, 255, .07) 1px, transparent 1px); background-size: 6.25cqw 6.25cqw; }
.scene .lbl { position: absolute; font: 500 2.3cqw/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(159, 220, 255, .75); }
.scene .pill { position: absolute; right: 4%; top: 5%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 2.4cqw; border-radius: 99px; background: rgba(10, 20, 40, .7); border: 1px solid rgba(160, 205, 255, .22); font: 600 2.5cqw/1 var(--sans); }
.scene .pill i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2EE59D; box-shadow: 0 0 2cqw #2EE59D; animation: blink 2s ease-in-out infinite; }
.scene .card { position: absolute; border-radius: 2.4cqw; background: rgba(10, 22, 44, .82); border: 1px solid rgba(160, 205, 255, .18); backdrop-filter: blur(6px); }
@keyframes blink { 50% { opacity: .35; } }
@keyframes pop { 0%, 8% { opacity: 0; transform: translateY(2cqw) scale(.96); } 14%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-1cqw); } }

/* ---------- 01 infraestructura ---------- */
.sc-infra svg.plan { position: absolute; left: 4%; top: 15%; width: 64%; height: auto; overflow: visible; }
.sc-infra .room { fill: rgba(0, 212, 255, 0); stroke: rgba(159, 220, 255, .55); stroke-width: 1.2; animation: roomlight var(--cy) ease-in-out infinite; }
.sc-infra .room:nth-of-type(2) { animation-delay: -7.5s; } .sc-infra .room:nth-of-type(3) { animation-delay: -5s; } .sc-infra .room:nth-of-type(4) { animation-delay: -2.5s; }
@keyframes roomlight { 0%, 18% { fill: rgba(0, 212, 255, 0); } 28%, 55% { fill: rgba(0, 212, 255, .14); } 70%, 100% { fill: rgba(0, 212, 255, 0); } }
.sc-infra .plan text { font: 500 9px var(--mono); fill: rgba(159, 220, 255, .8); letter-spacing: .08em; }
.sc-infra .ring { fill: none; stroke: #00D4FF; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
.sc-infra .dot { fill: #00D4FF; }
.sc-infra g.s2 .ring { animation-delay: -.6s; } .sc-infra g.s3 .ring { animation-delay: -1.2s; } .sc-infra g.s4 .ring { animation-delay: -1.8s; } .sc-infra g.s5 .ring { animation-delay: -.9s; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
.sc-infra .flow { fill: none; stroke: #FFC857; stroke-width: 2; stroke-dasharray: 4 9; animation: flow 1.4s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 200, 87, .8)); }
@keyframes flow { to { stroke-dashoffset: -26; } }
.sc-infra .rack { fill: #0d1d36; stroke: rgba(159, 220, 255, .5); }
.sc-infra .led { fill: #2EE59D; animation: blink 1.1s steps(2) infinite; } .sc-infra .led.b { animation-delay: -.4s; fill: #00D4FF; } .sc-infra .led.c { animation-delay: -.8s; }
.sc-infra .solar { position: absolute; right: 6%; top: 16%; width: 21%; }
.sc-infra .solar svg { width: 100%; height: auto; } .sc-infra .solar rect { fill: #0f2a52; stroke: #4fa8ff; } .sc-infra .solar line { stroke: #4fa8ff; stroke-width: .8; }
.sc-infra .sun { fill: #FFC857; animation: blink 3s ease-in-out infinite; }
.sc-infra .readout { right: 4%; bottom: 6%; width: 32%; padding: 2.6cqw; display: grid; gap: 1.8cqw; }
.sc-infra .readout div { display: flex; justify-content: space-between; align-items: baseline; font: 500 2.4cqw var(--sans); color: rgba(220, 232, 250, .75); }
.sc-infra .readout b { font: 600 3.6cqw var(--sans); color: #fff; letter-spacing: -.02em; }
.sc-infra .bar { height: .9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sc-infra .bar i { display: block; height: 100%; width: 60%; background: linear-gradient(90deg, #FFC857, #2EE59D); animation: solarbar var(--cy) ease-in-out infinite; }
@keyframes solarbar { 0%, 100% { width: 34%; } 50% { width: 72%; } }

/* ---------- 02 seguridad ---------- */
.sc-sec .cam { left: 4%; top: 16%; width: 56%; height: 50%; overflow: hidden; background: linear-gradient(180deg, #0b1a30, #08121f); }
.sc-sec .cam::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.sc-sec .cam .lbl { left: 3.5%; top: 6%; } .sc-sec .rec { position: absolute; right: 4%; top: 6%; font: 600 2.2cqw var(--mono); color: #ff5d5d; }
.sc-sec .rec::before { content: "●"; margin-right: .8cqw; animation: blink 1.2s steps(2) infinite; display: inline-block; }
.sc-sec .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(0deg, rgba(0, 212, 255, .08), transparent); }
.sc-sec .who { position: absolute; bottom: 12%; width: 9%; height: 46%; animation: walk var(--cy) linear infinite; }
.sc-sec .who i { position: absolute; left: 25%; top: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; background: #8fb3d9; }
.sc-sec .who b { position: absolute; left: 8%; right: 8%; top: 26%; bottom: 0; border-radius: 40% 40% 10% 10%; background: #6f93bb; }
.sc-sec .who.w2 { animation-delay: -5s; animation-direction: reverse; height: 40%; }
.sc-sec .who .box { position: absolute; inset: -12% -30% -6%; border: 1.5px solid #2EE59D; border-radius: 3px; box-shadow: 0 0 1.5cqw rgba(46, 229, 157, .5); }
.sc-sec .who .box span { position: absolute; left: -1px; top: -3.4cqw; padding: .4cqw 1cqw; background: #2EE59D; color: #04121f; font: 700 1.9cqw var(--mono); white-space: nowrap; border-radius: 2px; }
@keyframes walk { 0% { left: -12%; } 100% { left: 104%; } }
.sc-sec .door { right: 4%; top: 16%; width: 32%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; }
.sc-sec .reader { position: relative; width: 34%; aspect-ratio: 3 / 4; border-radius: 2cqw; background: #0f2342; border: 1px solid rgba(160, 205, 255, .3); }
.sc-sec .reader::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #ff5d5d; animation: grant var(--cy) steps(1) infinite; }
@keyframes grant { 0%, 38% { background: #ff5d5d; box-shadow: none; } 40%, 70% { background: #2EE59D; box-shadow: 0 0 2cqw #2EE59D; } 72%, 100% { background: #ff5d5d; } }
.sc-sec .badge { position: absolute; top: 18%; left: 8%; width: 22%; aspect-ratio: 5 / 3.2; border-radius: 1.2cqw; background: linear-gradient(135deg, #1565F5, #00D4FF); animation: tap var(--cy) ease-in-out infinite; }
@keyframes tap { 0%, 15% { transform: translate(0, 0) rotate(-12deg); opacity: 0; } 22% { opacity: 1; } 34%, 44% { transform: translate(140%, 55%) rotate(0); opacity: 1; } 56%, 100% { transform: translate(140%, 55%); opacity: 0; } }
.sc-sec .ok { font: 600 2.6cqw var(--sans); color: #2EE59D; animation: okmsg var(--cy) steps(1) infinite; }
@keyframes okmsg { 0%, 39% { opacity: 0; } 40%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
.sc-sec .net { left: 4%; right: 4%; bottom: 6%; height: 22%; }
.sc-sec .net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-sec .net line { stroke: rgba(159, 220, 255, .35); stroke-width: 1; } .sc-sec .net circle.n { fill: #4fa8ff; }
.sc-sec .threat { fill: #ff5d5d; animation: threat var(--cy) ease-in infinite; }
@keyframes threat { 0%, 50% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 74% { transform: translateX(58%); opacity: 1; } 78%, 100% { transform: translateX(58%); opacity: 0; } }
.sc-sec .shield { fill: none; stroke: #00D4FF; stroke-width: 1.6; animation: shield var(--cy) ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes shield { 0%, 72% { stroke: #00D4FF; transform: scale(1); } 76% { stroke: #2EE59D; transform: scale(1.18); } 86%, 100% { stroke: #00D4FF; transform: scale(1); } }
.sc-sec .net .lbl { right: 2%; top: 8%; animation: okmsg var(--cy) steps(1) infinite; animation-delay: 3.6s; color: #2EE59D; }

/* ---------- 03 digital ---------- */
.sc-dig .browser { left: 4%; top: 15%; width: 44%; height: 42%; padding: 2.4cqw; }
.sc-dig .browser .dots { display: flex; gap: .9cqw; margin-bottom: 2cqw; } .sc-dig .browser .dots i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.sc-dig .browser .ln { height: 1.3cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .12); margin: 1.4cqw 0; }
.sc-dig .browser .ln.h { height: 2.6cqw; width: 78%; background: rgba(159, 220, 255, .45); } .sc-dig .browser .ln.s { width: 60%; }
.sc-dig .browser .cta { width: 34%; height: 3.6cqw; border-radius: 3cqw; background: #1565F5; margin-top: 2.4cqw; animation: blink 2.4s ease-in-out infinite; }
.sc-dig .seo { position: absolute; right: 2.4cqw; bottom: 2.4cqw; padding: .9cqw 1.6cqw; border-radius: 2cqw; background: rgba(46, 229, 157, .15); color: #2EE59D; font: 700 2.2cqw var(--mono); }
.sc-dig .chat { right: 4%; top: 15%; width: 44%; height: 50%; padding: 2.4cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.sc-dig .bub { max-width: 82%; padding: 1.5cqw 2cqw; border-radius: 2.4cqw; font: 500 2.4cqw/1.3 var(--sans); opacity: 0; animation: pop var(--cy) ease-out infinite; }
.sc-dig .bub.u { align-self: flex-end; background: #1565F5; border-bottom-right-radius: .6cqw; }
.sc-dig .bub.b { align-self: flex-start; background: rgba(255, 255, 255, .1); border-bottom-left-radius: .6cqw; }
.sc-dig .bub.k { align-self: center; background: rgba(46, 229, 157, .16); color: #2EE59D; font-weight: 700; }
.sc-dig .bub:nth-child(2) { animation-delay: .9s; } .sc-dig .bub:nth-child(3) { animation-delay: 1.8s; } .sc-dig .bub:nth-child(4) { animation-delay: 2.7s; }
.sc-dig .crm { left: 4%; bottom: 6%; width: 54%; height: 27%; padding: 2cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sc-dig .crm .col { position: relative; border-radius: 1.4cqw; background: rgba(255, 255, 255, .05); padding-top: 3.4cqw; }
.sc-dig .crm .col span { position: absolute; left: 1.2cqw; top: 1cqw; font: 500 1.9cqw var(--mono); color: rgba(159, 220, 255, .8); letter-spacing: .06em; text-transform: uppercase; }
.sc-dig .crm .col i { display: block; height: 2.4cqw; margin: 1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .1); }
.sc-dig .lead { position: absolute; left: 2.6cqw; top: 5.4cqw; width: calc((100% - 7.2cqw) / 3 - 2cqw); height: 3.6cqw; border-radius: 1.2cqw; background: linear-gradient(90deg, #00D4FF, #1565F5); box-shadow: 0 0 2cqw rgba(0, 212, 255, .5); animation: lead var(--cy) ease-in-out infinite; }
@keyframes lead { 0%, 30% { transform: translateX(0); opacity: 0; } 34% { opacity: 1; } 46%, 54% { transform: translateX(calc(100% + 3.6cqw)); } 66%, 92% { transform: translateX(calc(200% + 7.2cqw)); opacity: 1; } 98%, 100% { opacity: 0; transform: translateX(calc(200% + 7.2cqw)); } }
.sc-dig .dash { right: 4%; bottom: 6%; width: 36%; height: 27%; padding: 2.2cqw; display: flex; align-items: flex-end; gap: 1.6cqw; }
.sc-dig .dash i { flex: 1; border-radius: .8cqw .8cqw 0 0; background: linear-gradient(0deg, #1565F5, #00D4FF); transform-origin: bottom; animation: grow var(--cy) ease-out infinite; }
.sc-dig .dash i:nth-child(1) { height: 35%; } .sc-dig .dash i:nth-child(2) { height: 52%; animation-delay: .15s; } .sc-dig .dash i:nth-child(3) { height: 44%; animation-delay: .3s; } .sc-dig .dash i:nth-child(4) { height: 70%; animation-delay: .45s; } .sc-dig .dash i:nth-child(5) { height: 88%; animation-delay: .6s; }
@keyframes grow { 0%, 55% { transform: scaleY(.1); } 72%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.sc-dig .chips { position: absolute; left: 4%; top: 59.5%; display: flex; gap: 1.4cqw; }
.sc-dig .chips span { padding: .8cqw 1.6cqw; border-radius: 2cqw; border: 1px solid rgba(160, 205, 255, .25); font: 600 2cqw var(--mono); color: #EAF2FF; background: rgba(10, 22, 44, .8); }
.sc-dig .chips span:nth-child(3) { color: #00D4FF; }

/* ---------- 04 marketing ---------- */
.sc-mkt .cal { left: 4%; top: 15%; width: 52%; height: 54%; padding: 2.2cqw; }
.sc-mkt .cal .lbl { position: static; display: block; margin-bottom: 1.6cqw; }
.sc-mkt .cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: .9cqw; }
.sc-mkt .cells i { aspect-ratio: 1; border-radius: 1cqw; background: rgba(255, 255, 255, .06); position: relative; }
.sc-mkt .cells i.p::after { content: ""; position: absolute; inset: 14%; border-radius: .7cqw; background: linear-gradient(135deg, #1565F5, #00D4FF); transform: scale(0); animation: post var(--cy) ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes post { 0%, 6% { transform: scale(0); } 12%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.sc-mkt .stamp { position: absolute; left: 26%; top: 50%; padding: .9cqw 1.8cqw; border-radius: 2cqw; background: #2EE59D; color: #04121f; font: 700 2.2cqw var(--sans); transform: rotate(-6deg); animation: okmsg var(--cy) steps(1) infinite; animation-delay: -6s; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4); }
.sc-mkt .soc { position: absolute; right: 5%; top: 17%; width: 34%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.sc-mkt .soc b { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 700 2.2cqw var(--mono); background: rgba(255, 255, 255, .08); border: 1px solid rgba(160, 205, 255, .25); animation: hit var(--cy) ease-out infinite; }
.sc-mkt .soc b:nth-child(2) { animation-delay: .25s; } .sc-mkt .soc b:nth-child(3) { animation-delay: .5s; } .sc-mkt .soc b:nth-child(4) { animation-delay: .75s; }
@keyframes hit { 0%, 30% { box-shadow: none; background: rgba(255, 255, 255, .08); } 34% { box-shadow: 0 0 3cqw #00D4FF; background: rgba(0, 212, 255, .35); } 46%, 100% { box-shadow: none; background: rgba(255, 255, 255, .08); } }
.sc-mkt .fly { position: absolute; left: 30%; top: 40%; width: 5%; aspect-ratio: 1; border-radius: .8cqw; background: linear-gradient(135deg, #1565F5, #00D4FF); animation: fly var(--cy) ease-in-out infinite; }
@keyframes fly { 0%, 18% { transform: translate(0, 0) scale(.6); opacity: 0; } 22% { opacity: 1; } 32% { transform: translate(560%, -260%) scale(1); opacity: 1; } 36%, 100% { transform: translate(560%, -260%); opacity: 0; } }
.sc-mkt .comm { right: 5%; top: 33%; width: 34%; padding: 2cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.sc-mkt .comm .bub { padding: 1.3cqw 1.8cqw; border-radius: 2cqw; font: 500 2.2cqw/1.3 var(--sans); opacity: 0; animation: pop var(--cy) ease-out infinite; }
.sc-mkt .comm .bub.q { background: rgba(255, 255, 255, .1); animation-delay: 1.2s; } .sc-mkt .comm .bub.a { background: #1565F5; align-self: flex-end; animation-delay: 2.2s; }
.sc-mkt .kpi { left: 4%; bottom: 6%; width: 52%; height: 22%; padding: 2cqw; }
.sc-mkt .kpi svg { position: absolute; left: 4%; right: 4%; bottom: 14%; width: 92%; height: 58%; }
.sc-mkt .kpi path { fill: none; stroke: #00D4FF; stroke-width: 2.2; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw var(--cy) ease-out infinite; filter: drop-shadow(0 0 4px rgba(0, 212, 255, .6)); }
@keyframes draw { 0%, 40% { stroke-dashoffset: 300; } 70%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 300; } }
.sc-mkt .kpi .lbl { left: 3.6%; top: 12%; }
.sc-mkt .ev { right: 5%; bottom: 6%; width: 34%; height: 22%; display: flex; align-items: center; justify-content: space-around; }
.sc-mkt .ev .qr { width: 26%; aspect-ratio: 1; background: conic-gradient(#fff 0 25%, #0b1a30 0 50%, #fff 0 75%, #0b1a30 0) 0 0 / 34% 34%; border-radius: .6cqw; border: .6cqw solid #fff; }
.sc-mkt .ev .arrow { width: 22%; height: 2px; background: linear-gradient(90deg, transparent, #00D4FF); position: relative; }
.sc-mkt .ev .arrow::after { content: ""; position: absolute; top: -.9cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #00D4FF; box-shadow: 0 0 2cqw #00D4FF; animation: dotrun 2s linear infinite; }
@keyframes dotrun { from { left: 0; } to { left: 100%; } }
.sc-mkt .ev .crm { font: 700 2.4cqw var(--mono); padding: 1cqw 1.6cqw; border-radius: 1.4cqw; border: 1px solid rgba(160, 205, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene.in * { animation: none !important; }
  .sc-dig .bub, .sc-mkt .comm .bub, .sc-sec .ok, .sc-mkt .stamp { opacity: 1; }
  .sc-mkt .cells i.p::after { transform: scale(1); } .sc-mkt .kpi path { stroke-dashoffset: 0; } .sc-dig .lead, .sc-mkt .fly, .sc-sec .badge, .sc-sec .threat { display: none; }
}
.sc-mkt .seochip { position: absolute; left: 4%; top: 71.5%; padding: .8cqw 1.8cqw; border-radius: 2cqw; background: rgba(46, 229, 157, .14); color: #2EE59D; font: 700 2cqw var(--mono); letter-spacing: .08em; border: 1px solid rgba(46, 229, 157, .3); animation: blink 3s ease-in-out infinite; }

/* ---------- NASA × Aexa Tech card: orbit over the Earth ---------- */
.pc.space-card { position: relative; overflow: hidden; }
.pc.space-card .bd { position: relative; z-index: 1; }
.pc.space-card .space { position: absolute; inset: 0; }
.pc.space-card .space svg { width: 100%; height: 100%; display: block; }
.space .st { fill: #cfe6ff; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.space .earth { filter: drop-shadow(0 0 30px rgba(79, 168, 255, .35)); }
.space .city { fill: none; stroke: rgba(255, 200, 120, .35); stroke-width: 1.2; stroke-dasharray: 2 7; }
.space .orbit { fill: none; stroke: rgba(159, 220, 255, .28); stroke-width: 1; stroke-dasharray: 3 6; animation: orbitdash 12s linear infinite; }
@keyframes orbitdash { to { stroke-dashoffset: -180; } }
.space .iss rect { fill: #dfeaff; } .space .iss .pn { fill: #2c6fd6; stroke: #9fdcff; stroke-width: .6; }
.space .beacon { fill: #ff5d5d; animation: blink 1.2s steps(2) infinite; }
.space .aw { fill: rgba(255, 210, 120, .15); stroke: #FFD27A; stroke-width: 1.2; animation: award 6s ease-in-out infinite; }
.space .a2 { animation-delay: .5s; } .space .a3 { animation-delay: 1s; }
@keyframes award { 0%, 8% { fill: rgba(255, 210, 120, .1); filter: none; } 18%, 70% { fill: #FFD27A; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .9)); } 85%, 100% { fill: rgba(255, 210, 120, .1); filter: none; } }
@media (prefers-reduced-motion: reduce) { .space .st, .space .orbit, .space .aw, .space .beacon { animation: none; } }
.pc.space-card .bd { background: linear-gradient(0deg, rgba(5, 10, 24, .82) 0%, rgba(5, 10, 24, .45) 70%, rgba(5, 10, 24, 0) 100%); }