:root{--bg:#03070d;--panel:#07111d;--panel2:#0a1725;--line:#12304a;--text:#f4f8fc;--muted:#8b9aab;--cyan:#16c9ff;--blue:#167dff;--green:#20d98a;--pink:#ff3e73;--purple:#8b5cf6;--max:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(25,113,165,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(25,113,165,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,transparent 88%);z-index:-1}
a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}.top{position:sticky;top:0;z-index:20;background:rgba(3,7,13,.88);backdrop-filter:blur(18px);border-bottom:1px solid #123047}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.5px}.mark{width:42px;height:42px;border:1px solid #1979b1;border-radius:9px;display:grid;place-items:center;color:var(--cyan);font-size:23px;font-weight:950;box-shadow:0 0 28px rgba(0,180,255,.12)}.brand small{display:block;color:#159ed0;font-size:8px;letter-spacing:1px}.links{display:flex;gap:27px;font-size:12px;color:#b4c0cc}.links a:hover{color:#fff}.cta{padding:11px 18px;border-radius:10px;border:1px solid #1e91cf;background:linear-gradient(135deg,#0e91e9,#1368ff);font-size:12px;font-weight:800;box-shadow:0 0 28px rgba(16,153,255,.18)}
.hero{padding:70px 0 28px;background:radial-gradient(circle at 74% 38%,rgba(0,157,255,.22),transparent 33%),linear-gradient(180deg,#071526,#04101c 72%,#03070d)}
.heroGrid{display:grid;grid-template-columns:1fr 1.05fr;gap:42px;align-items:center}.eyebrow,.label{color:#12c5f5;font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.hero h1{font-size:clamp(45px,6vw,76px);line-height:.98;letter-spacing:-4px;margin:16px 0}.hero h1 span,h2 span{color:var(--cyan)}.hero p{color:#9aa9b9;max-width:570px;font-size:16px;line-height:1.65}.actions{display:flex;gap:12px;margin:27px 0}.ghost{padding:12px 18px;border:1px solid #244258;border-radius:10px;font-size:12px;font-weight:800;background:#07111c}.device{position:relative;border:1px solid #14537a;border-radius:22px;background:linear-gradient(145deg,#091b2d,#02070d);padding:12px;box-shadow:0 0 60px rgba(0,145,255,.16),inset 0 0 50px rgba(15,150,255,.05)}.screen{min-height:360px;border-radius:15px;border:1px solid #173c56;background:radial-gradient(circle at 70% 20%,#143d65,#07111b 45%,#04090f);padding:24px}.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{height:80px;border:1px solid #16425e;border-radius:10px;padding:12px;background:#07121f}.stat b{font-size:18px}.chart{height:190px;margin-top:12px;border:1px solid #16425e;border-radius:10px;background:linear-gradient(170deg,rgba(15,132,255,.15),transparent),repeating-linear-gradient(0deg,transparent 0 34px,#12314a 35px)}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.chip{border:1px solid #14334a;background:#07111b;padding:12px 15px;border-radius:9px;font-size:11px;color:#bdc9d4}
section{padding:72px 0}.sectionHead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}.sectionHead h2{font-size:clamp(30px,4vw,48px);line-height:1.02;letter-spacing:-2px;margin:9px 0 0}.sectionHead p{max-width:400px;color:#7f90a2;font-size:13px;line-height:1.55}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{border:1px solid #12344d;background:linear-gradient(145deg,#07131f,#040a11);border-radius:13px;padding:22px;min-height:230px;transition:.25s}.card:hover{transform:translateY(-3px);border-color:#1688c2;box-shadow:0 15px 50px rgba(0,120,220,.09)}.icon{font-size:27px;margin-bottom:20px}.card h3{font-size:17px;margin:0 0 8px}.card p{font-size:11px;line-height:1.55;color:#8191a2}.more{color:#18bdf5;font-size:11px;font-weight:800;margin-top:22px;display:block}.bridge{border:1px solid #126da0;border-radius:15px;padding:24px;background:linear-gradient(90deg,#071827,#08243a,#071827);display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}.bridge strong{font-size:20px}.bridge p{color:#8393a4;font-size:11px;margin:6px 0 0}.arrow{font-size:28px;color:#16c9ff}
.solutionGrid,.priceGrid,.caseGrid,.processGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.solution,.price,.case,.process{border:1px solid #13354d;border-radius:13px;background:#06101a;padding:20px}.solution{text-align:center;min-height:115px}.solution b{display:block;margin-bottom:6px}.solution small{color:#718294}.price{min-height:330px}.price.featured{border-color:#0aaeff;box-shadow:0 0 35px rgba(0,174,255,.12)}.price .amount{font-size:25px;font-weight:900;margin:12px 0}.price ul{padding:0;list-style:none;color:#8797a7;font-size:11px;line-height:2}.price li:before{content:"✓";color:#20d98a;margin-right:7px}.case{padding:0;overflow:hidden}.case .photo{height:135px;background:linear-gradient(135deg,#15395a,#06101a);display:grid;place-items:center;font-size:35px}.case div:last-child{padding:16px}.case p{font-size:11px;color:#8797a7}.processGrid{grid-template-columns:repeat(4,1fr)}.process{min-height:170px}.num{color:#13bde9;font-size:10px;font-weight:900}.process h3{margin-top:28px}.process p{color:#8190a0;font-size:11px;line-height:1.5}.final{border:1px solid #155579;border-radius:18px;padding:38px;background:radial-gradient(circle at 80% 20%,rgba(0,185,255,.18),transparent 35%),#06121f;display:flex;align-items:center;justify-content:space-between;gap:30px}.final h2{margin:0;font-size:34px;letter-spacing:-1px}.wa{background:#20d98a;color:#03120b;padding:14px 23px;border-radius:11px;font-weight:900;font-size:12px;white-space:nowrap}
footer{border-top:1px solid #102538;padding:42px 0 28px;color:#6f8092;font-size:11px}.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}.foot h4{color:#dce5ed;margin:0 0 15px}.foot a{display:block;margin:9px 0}.copy{border-top:1px solid #0f2233;margin-top:30px;padding-top:18px;display:flex;justify-content:space-between}
@media(max-width:900px){.links{display:none}.heroGrid{grid-template-columns:1fr}.grid4,.solutionGrid,.priceGrid,.caseGrid,.processGrid{grid-template-columns:repeat(2,1fr)}.bridge{grid-template-columns:1fr;text-align:center}.arrow{transform:rotate(90deg)}.foot{grid-template-columns:1fr 1fr}.final{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.wrap{width:min(calc(100% - 28px),var(--max))}.nav{height:65px}.hero{padding-top:45px}.hero h1{font-size:46px;letter-spacing:-2.5px}.actions{flex-direction:column}.grid4,.solutionGrid,.priceGrid,.caseGrid,.processGrid{grid-template-columns:1fr}.sectionHead{display:block}.sectionHead p{margin-top:16px}.screen{min-height:270px;padding:14px}.dash{grid-template-columns:1fr}.stat{height:65px}.chart{height:120px}.foot{grid-template-columns:1fr}.copy{display:block}.copy span{display:block;margin-top:8px}}

.links a{transition:color .2s ease}
.links a.active{color:#16c9ff}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Official Somos Software identity assets --- */
.official-logo{
  display:block;
  width:156px;
  height:56px;
  object-fit:contain;
  object-position:left center;
}
.footer-logo{
  width:178px;
  height:64px;
}
.hero-photo-device{
  overflow:hidden;
}
.hero-photo-screen{
  position:relative;
  min-height:360px;
  padding:0 !important;
  overflow:hidden;
  background:#06111d;
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  filter:saturate(.96) contrast(.98) brightness(.84);
  transform:scale(1.015);
}
.hero-photo-gradient{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,10,17,.92) 0%, rgba(4,10,17,.35) 14%, rgba(4,10,17,0) 38%, rgba(4,10,17,.05) 72%, rgba(4,10,17,.55) 100%),
    linear-gradient(180deg, rgba(3,8,14,.35) 0%, transparent 24%, transparent 75%, rgba(3,8,14,.72) 100%);
}
.contact-email{
  display:inline-block;
  margin-top:14px;
  color:#9bb0c2;
  font-size:12px;
}
.cases-hidden{
  display:none !important;
}
.priceGrid{
  grid-template-columns:repeat(5,1fr);
}
@media(max-width:1100px){
  .priceGrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .priceGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .official-logo{width:132px;height:48px}
  .footer-logo{width:170px;height:60px}
  .hero-photo-screen{min-height:310px}
  .priceGrid{grid-template-columns:1fr}
}

/* V1.4 — remove obsolete empty hero artifact; commercial chips remain intact */
.hero > .wrap.heroGrid > .device:not(.hero-photo-device),
.heroGrid > .device:not(.hero-photo-device) {
  display: none !important;
}

/* V1.5 — Full-width technology carousel */
.hero-carousel{
  position:relative;
  width:100%;
  margin:34px 0 0;
  overflow:hidden;
  background:#03080e;
  border-top:1px solid rgba(21,91,130,.45);
  border-bottom:1px solid rgba(21,91,130,.45);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.carousel-track{
  position:relative;
  width:100%;
  aspect-ratio:1536 / 576;
  overflow:hidden;
}
.carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .65s ease;
}
.carousel-slide.is-active{
  opacity:1;
  visibility:visible;
}
.carousel-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.carousel-control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;
  height:42px;
  border:1px solid rgba(38,178,241,.65);
  border-radius:50%;
  background:rgba(3,10,18,.72);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.carousel-control:hover{background:rgba(10,112,173,.7);border-color:#16c9ff}
.carousel-control.prev{left:22px}
.carousel-control.next{right:22px}
.carousel-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
  z-index:4;
}
.carousel-dot{
  width:26px;
  height:4px;
  padding:0;
  border:0;
  border-radius:5px;
  background:rgba(220,235,245,.42);
  cursor:pointer;
  transition:.25s ease;
}
.carousel-dot.is-active{width:42px;background:#16c9ff;box-shadow:0 0 12px rgba(22,201,255,.55)}
.hero .chips{margin-top:16px}
@media(max-width:560px){
  .hero-carousel{margin-top:24px}
  .carousel-track{aspect-ratio:1536 / 576}
  .carousel-control{width:34px;height:34px;font-size:24px}
  .carousel-control.prev{left:10px}
  .carousel-control.next{right:10px}
  .carousel-dots{bottom:8px}
  .carousel-dot{width:18px;height:3px}
  .carousel-dot.is-active{width:30px}
}

/* V1.6 — propuesta de valor, video y oferta comercial */
.chips-expanded{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chips-expanded .chip{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
.video-section{padding-top:28px;padding-bottom:54px}
.video-head{justify-content:center;text-align:center;margin-bottom:24px}
.video-head h2{max-width:900px;margin-left:auto;margin-right:auto}
.video-frame{width:min(75%,900px);margin:0 auto;border:1px solid #14537a;border-radius:20px;overflow:hidden;background:#02070d;box-shadow:0 20px 70px rgba(0,125,220,.16),0 0 0 1px rgba(22,201,255,.04)}
.brand-video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;background:#02070d}
.coming-soon{display:inline-block;margin-top:18px;padding:5px 9px;border:1px solid #1d435b;border-radius:999px;color:#91a1b1;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.priceGrid{grid-template-columns:repeat(3,1fr)}
.price-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding:11px 14px;border-radius:9px;border:1px solid #168ee0;background:linear-gradient(135deg,#119bf0,#176dff);color:#fff;font-size:11px;font-weight:900;box-shadow:0 8px 24px rgba(12,130,255,.16);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.price-cta:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 12px 28px rgba(12,130,255,.24)}
@media(max-width:900px){.chips-expanded{grid-template-columns:repeat(2,1fr)}.video-frame{width:100%}.priceGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.chips-expanded{grid-template-columns:repeat(2,1fr)}.chips-expanded .chip{font-size:10px;padding:9px 7px;white-space:normal}.video-frame{width:100%;border-radius:15px}.priceGrid{grid-template-columns:1fr}}

/* V1.7 — ecosystem bridge + premium motion system */
.network-section{padding:34px 0}
.network-bridge{display:grid;grid-template-columns:minmax(150px,1.15fr) 42px minmax(92px,.7fr) 42px minmax(92px,.7fr) 42px minmax(170px,1.25fr);align-items:center;gap:0;text-align:left;padding:22px 24px;}
.network-node,.social-node{color:#fff;text-decoration:none;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.network-node{min-height:78px;display:flex;flex-direction:column;justify-content:center}
.network-node strong{font-size:15px;letter-spacing:-.2px}
.network-node p{margin:7px 0 0;color:#8194a7;font-size:10px;line-height:1.45}
.social-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:78px;border:1px solid rgba(38,120,165,.32);border-radius:14px;background:rgba(4,15,25,.48);}
.social-node strong{font-size:9px;color:#9fb2c3}
.social-icon{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(22,201,255,.5);border-radius:9px;color:#16c9ff;font-weight:900;font-size:20px;line-height:1}
.instagram-icon{font-size:23px}
.network-arrow{display:grid;place-items:center;color:#16c9ff;font-size:22px;text-shadow:0 0 12px rgba(22,201,255,.45);animation:arrowPulse 2.4s ease-in-out infinite}
.network-node:hover,.social-node:hover{transform:translateY(-3px);color:#16c9ff}
.social-node:hover{border-color:#16c9ff;box-shadow:0 0 28px rgba(22,201,255,.12)}
.hero-status{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.live-dot{width:6px;height:6px;border-radius:50%;background:#20e58b;box-shadow:0 0 12px #20e58b;animation:livePulse 1.8s ease-in-out infinite}
.system-live{margin-left:auto;color:#4d728b;font-size:8px;letter-spacing:1.8px}
.hero:after{content:"";display:block;width:92%;height:1px;margin:20px auto 0;background:linear-gradient(90deg,transparent,#16c9ff,transparent);opacity:.45;animation:techLine 3.2s ease-in-out infinite}
/* Kinetic typography */
.kinetic-word{display:inline-block;opacity:0;filter:blur(10px);transform:translate3d(0,30px,0) scale(.985);animation:wordImpact .72s cubic-bezier(.16,1.28,.32,1) forwards}
.kinetic-word.impact{color:#16c9ff;text-shadow:0 0 20px rgba(22,201,255,.25)}
/* contextual card depth */
.card,.solution,.price,.bridge{--mx:50%;--my:50%;position:relative;overflow:hidden}
.card:after,.solution:after,.price:after{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at var(--mx) var(--my),rgba(22,201,255,.14),transparent 28%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.card:hover:after,.solution:hover:after,.price:hover:after{opacity:1}
.card:hover,.solution:hover,.price:hover{transform:translateY(-3px)}
.scroll-stage{--stage-progress:0}
.scroll-stage .sectionHead{transform:translateY(calc((.5 - var(--stage-progress))*8px));transition:transform .35s ease}
@keyframes wordImpact{0%{opacity:0;filter:blur(10px);transform:translate3d(0,30px,0) scale(.985)}65%{opacity:1;filter:blur(0);transform:translate3d(0,-3px,0) scale(1.012)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes livePulse{50%{opacity:.42;transform:scale(.72)}}
@keyframes techLine{0%,100%{opacity:.22;transform:scaleX(.72)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes arrowPulse{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
@media(max-width:900px){.network-bridge{grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;padding:18px 12px}.network-node strong{font-size:11px}.network-node p{font-size:8px}.social-node{min-height:70px}.system-live{width:100%;margin-left:0}.hero:after{width:100%}}
@media(max-width:560px){.network-section{padding:22px 0}.network-bridge{grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;gap:2px;padding:13px 8px}.network-node{text-align:center;align-items:center;min-height:66px}.network-node strong{font-size:8.5px}.network-node p{display:none}.social-node{min-height:64px;border-radius:10px}.social-node strong{font-size:7px}.social-icon{width:27px;height:27px;font-size:17px}.network-arrow{font-size:15px}.system-live{font-size:7px}.kinetic-word{animation-duration:.62s}}
@media(prefers-reduced-motion:reduce){.kinetic-word{opacity:1;filter:none;transform:none;animation:none}.live-dot,.network-arrow,.hero:after{animation:none}.card:hover,.solution:hover,.price:hover{transform:none}}

/* V1.8 — cinematic phrase animations requested for the commercial narrative */
.motion-words.motion-ready .motion-word{
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  transform:translate3d(0,34px,0) scale(.965);
  transform-origin:center bottom;
  will-change:opacity,transform,filter;
}
.motion-words .motion-word{
  color:inherit;
}
.motion-words.is-visible .motion-word{
  animation:cinematicWord .78s cubic-bezier(.16,1.18,.3,1) forwards;
  animation-delay:calc(.05s + (var(--word-index) * .15s));
}
.motion-slide-right.motion-ready{
  opacity:0;
  filter:blur(7px);
  transform:translate3d(100vw,0,0);
  will-change:opacity,transform,filter;
}
.motion-slide-right.is-visible{
  animation:cinematicSlideRight 1.18s cubic-bezier(.18,.92,.25,1) forwards;
}
#servicios .sectionHead > div:first-child,
#proceso .sectionHead > div:first-child{
  overflow:hidden;
}
@keyframes cinematicWord{
  0%{opacity:0;filter:blur(12px);transform:translate3d(0,34px,0) scale(.965)}
  58%{opacity:1;filter:blur(0);transform:translate3d(0,-4px,0) scale(1.025)}
  78%{transform:translate3d(0,1px,0) scale(.998)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes cinematicSlideRight{
  0%{opacity:0;filter:blur(7px);transform:translate3d(100vw,0,0)}
  68%{opacity:1;filter:blur(0);transform:translate3d(-2.2%,0,0)}
  84%{transform:translate3d(.6%,0,0)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
}
@media(max-width:560px){
  .motion-words.is-visible .motion-word{animation-duration:.68s;animation-delay:calc(.03s + (var(--word-index) * .13s))}
  .motion-slide-right.is-visible{animation-duration:1s}
}
@media(prefers-reduced-motion:reduce){
  .motion-words.motion-ready .motion-word,
  .motion-slide-right.motion-ready{opacity:1;filter:none;transform:none;animation:none}
}



/* V1.10 — requested section titles: restored and kept visible after their scroll reveal. */
.requested-title{
  display:block;
  min-height:1.15em;
  overflow:visible;
}
.requested-title.is-visible{
  will-change:transform,opacity,filter;
}

/* V1.9 — cinematic scroll-triggered motion + hero media entrance + clickable .NET */
/* Slower sequential words: each phrase begins only when its heading reaches the viewport. */
.motion-words.motion-ready .motion-word{
  opacity:0;
  filter:blur(15px);
  transform:translate3d(0,42px,0) scale(.955);
}
.motion-words.is-visible .motion-word{
  animation:cinematicWordSlow 1.08s cubic-bezier(.16,1.12,.28,1) forwards;
  animation-delay:calc(.10s + (var(--word-index) * .30s));
}

/* Full phrase enters from the right only when its section is reached. */
.motion-slide-right.motion-ready{
  /* Keep the heading inside the viewport so IntersectionObserver can detect it. */
  opacity:0;
  filter:blur(3px);
  transform:translate3d(34px,0,0) scale(.992);
  will-change:transform,opacity,filter;
}
.motion-slide-right.is-visible{
  animation:cinematicSlideRightSoft .92s cubic-bezier(.2,.82,.25,1) forwards;
}

/* The hero visual arrives from behind the right edge and settles into its zero position. */
.hero-photo-device{
  opacity:0;
  transform:translate3d(115%,0,0) scale(.86);
  transform-origin:center center;
  will-change:transform,opacity;
}
.hero-photo-device.hero-media-visible{
  animation:heroMediaDesktop 2.85s cubic-bezier(.16,.88,.2,1) .22s forwards;
}

/* Keep the .NET node visibly interactive. */
.bridge-link{
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:10px;
  padding:8px 10px;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease,color .3s ease;
}
.bridge-link:hover,
.bridge-link:focus-visible{
  color:#16c9ff;
  transform:translateX(4px);
  background:rgba(22,201,255,.055);
  box-shadow:0 0 28px rgba(22,201,255,.08);
  outline:none;
}
.bridge-link p{color:#8393a4;transition:color .3s ease}
.bridge-link:hover p,.bridge-link:focus-visible p{color:#a9c5d8}

@keyframes cinematicWordSlow{
  0%{opacity:0;filter:blur(15px);transform:translate3d(0,42px,0) scale(.955)}
  58%{opacity:1;filter:blur(0);transform:translate3d(0,-5px,0) scale(1.028)}
  78%{transform:translate3d(0,1.5px,0) scale(.998)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes cinematicSlideRightSoft{
  0%{opacity:0;filter:blur(3px);transform:translate3d(34px,0,0) scale(.992)}
  62%{opacity:1;filter:blur(0);transform:translate3d(-2px,0,0) scale(1.004)}
  82%{transform:translate3d(1px,0,0) scale(1)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes heroMediaDesktop{
  0%{opacity:0;transform:translate3d(115%,0,0) scale(.86)}
  55%{opacity:1;transform:translate3d(-2.8%,0,0) scale(1.018)}
  78%{opacity:1;transform:translate3d(.7%,0,0) scale(.997)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media(max-width:560px){
  /* Mobile gets a softer, more dimensional entrance rather than a simple horizontal slide. */
  .hero-photo-device{
    transform:translate3d(18%,22px,0) scale(.91) rotate(1.2deg);
  }
  .hero-photo-device.hero-media-visible{
    animation:heroMediaMobile 2.55s cubic-bezier(.16,.88,.22,1) .16s forwards;
  }
  .motion-words.is-visible .motion-word{
    animation-duration:1.02s;
    animation-delay:calc(.08s + (var(--word-index) * .25s));
  }
  .motion-slide-right.is-visible{animation-duration:.82s}
  .bridge-link{padding:10px 8px}
}

@keyframes heroMediaMobile{
  0%{opacity:0;transform:translate3d(18%,22px,0) scale(.91) rotate(1.2deg);filter:saturate(.7) brightness(.78)}
  58%{opacity:1;transform:translate3d(-1.5%,0,0) scale(1.015) rotate(-.2deg);filter:saturate(.95) brightness(.88)}
  82%{transform:translate3d(.4%,0,0) scale(.998) rotate(.08deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-photo-device,
  .hero-photo-device.hero-media-visible,
  .motion-words.motion-ready .motion-word,
  .motion-slide-right.motion-ready{
    opacity:1;
    filter:none;
    transform:none;
    animation:none;
  }
}

/* V2 SEO — contenido editorial / blog */
.content-section{padding:88px 0 96px;background:linear-gradient(180deg,#050c15,#06111c)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.article-card{position:relative;display:flex;flex-direction:column;min-height:290px;padding:25px;border:1px solid #15364d;border-radius:16px;background:linear-gradient(145deg,rgba(9,27,45,.92),rgba(3,10,17,.96));box-shadow:0 18px 55px rgba(0,0,0,.18);overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.article-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(22,201,255,.09),transparent 42%);pointer-events:none}
.article-card:hover{transform:translateY(-5px);border-color:#1978a5;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.article-kicker{position:relative;color:#16c9ff;font-size:9px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:16px}
.article-card h3{position:relative;margin:0;font-size:21px;line-height:1.16;letter-spacing:-.5px;color:#f2f7fb}
.article-card p{position:relative;color:#93a5b6;font-size:13px;line-height:1.65;margin:14px 0 22px}
.article-card a{position:relative;margin-top:auto;color:#16c9ff;text-decoration:none;font-size:12px;font-weight:900}
.article-card a:hover{text-decoration:underline}
.content-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px;padding:20px 22px;border:1px solid #12344a;border-radius:14px;background:#06121d;color:#91a4b5;font-size:12px}
.content-cta .ghost{color:#eaf6ff;text-decoration:none}
.article-page{min-height:100vh;background:radial-gradient(circle at 78% 12%,rgba(0,157,255,.16),transparent 28%),#040a11}
.article-shell{width:min(920px,calc(100% - 32px));margin:0 auto;padding:110px 0 90px}
.article-shell .eyebrow{margin-bottom:15px}
.article-shell h1{font-size:clamp(38px,6vw,68px);line-height:1;letter-spacing:-3px;margin:0 0 22px}
.article-shell .article-intro{max-width:760px;color:#a2b2c1;font-size:18px;line-height:1.7;margin-bottom:38px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.article-meta span{padding:7px 10px;border:1px solid #15364d;border-radius:999px;color:#7f9bb0;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.article-body{padding:34px 0;border-top:1px solid #123149}
.article-body h2{font-size:30px;line-height:1.15;margin:42px 0 14px;color:#eef6fb}
.article-body h3{font-size:21px;margin:28px 0 10px;color:#d9f4ff}
.article-body p,.article-body li{color:#a3b2c0;font-size:16px;line-height:1.8}
.article-body ul{padding-left:22px}
.article-body strong{color:#eaf7ff}
.article-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-top:28px;border-top:1px solid #123149}
.article-footer a{color:#16c9ff;text-decoration:none;font-weight:900;font-size:12px}
@media(max-width:900px){.article-grid{grid-template-columns:repeat(2,1fr)}.content-cta{align-items:flex-start;flex-direction:column}.article-shell{padding-top:88px}}
@media(max-width:560px){.article-grid{grid-template-columns:1fr}.article-card{min-height:245px}.content-section{padding:66px 0 72px}.article-shell{width:min(100% - 28px,920px);padding:74px 0 65px}.article-shell h1{font-size:42px;letter-spacing:-2px}.article-shell .article-intro{font-size:16px}.article-body p,.article-body li{font-size:15px}.article-body h2{font-size:26px}.article-footer{align-items:flex-start;flex-direction:column}}


/* V2.1 — mobile ecosystem bridge: four horizontal positions, desktop unchanged.
   Mobile order: 01 .CL → 02 Facebook → 03 Instagram → 04 .NET. */
@media(max-width:560px){
  .network-bridge{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    padding:12px 8px;
    overflow:visible;
    text-align:center;
  }

  /* The three legacy arrow grid items are decorative on mobile; the arrows are
     rendered between the four real nodes so the four nodes occupy the four columns. */
  .network-arrow{display:none}

  .network-brand,
  .facebook-node,
  .instagram-node,
  .network-net{
    min-width:0;
    width:100%;
    box-sizing:border-box;
    position:relative;
  }

  .network-brand,
  .network-net{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:64px;
    padding:7px 4px;
  }

  .network-brand strong,
  .network-net strong{
    display:block;
    max-width:100%;
    font-size:8px;
    line-height:1.12;
    letter-spacing:-.15px;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .network-brand p,
  .network-net p{display:none}

  .social-node{
    min-height:64px;
    padding:6px 3px;
    border-radius:10px;
    gap:5px;
  }

  .social-node strong{
    font-size:7px;
    line-height:1.1;
    white-space:nowrap;
  }

  .social-icon{
    width:27px;
    height:27px;
    font-size:17px;
    flex:0 0 auto;
  }

  /* Visual separators between the four positions. */
  .network-brand::after,
  .facebook-node::after,
  .instagram-node::after{
    content:"→";
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    color:#16c9ff;
    font-size:14px;
    line-height:1;
    font-weight:900;
    text-shadow:0 0 10px rgba(22,201,255,.45);
    pointer-events:none;
    z-index:5;
  }
}

@media(prefers-reduced-motion:reduce){
  .network-brand::after,
  .facebook-node::after,
  .instagram-node::after{animation:none}
}