/* =========================================================
   JHONAS Motion Next
   Modern, section-specific motion. No flashlight effect.
   Layout dimensions remain untouched.
   ========================================================= */

.motion-next{overflow-x:hidden}

/* Shared: only opacity/transform, no spacing changes */
.motion-next .motion-in{
  opacity:0;
  transform:translateY(22px);
}
.motion-next .motion-in.is-in{
  opacity:1;
  transform:none;
  transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   HERO — kinetic grid + morphing energy + depth
   Represents ideas turning into solutions
   ========================================================= */
.motion-hero{isolation:isolate;overflow:hidden}
.hero-field{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 77% 25%,rgba(22,140,255,.20),transparent 25%),
    radial-gradient(circle at 61% 68%,rgba(95,86,255,.12),transparent 22%);
}
.hero-field::before{
  content:"";position:absolute;inset:-10%;
  background:
    repeating-linear-gradient(90deg,rgba(64,167,255,.055) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(64,167,255,.045) 0 1px,transparent 1px 54px);
  transform:perspective(900px) rotateX(66deg) translateY(16%);
  transform-origin:center 70%;
  animation:heroGridDrift 14s linear infinite;
  mask-image:linear-gradient(to top,#000 0 54%,transparent 84%);
}
.hero-field::after{
  content:"";position:absolute;width:420px;height:420px;right:3%;top:7%;
  border-radius:42% 58% 63% 37% / 47% 37% 63% 53%;
  background:conic-gradient(from 0deg,rgba(22,140,255,.20),rgba(117,103,255,.10),rgba(22,140,255,.03),rgba(22,140,255,.20));
  filter:blur(28px);
  animation:heroMorph 9s ease-in-out infinite alternate,heroRotate 18s linear infinite;
}
.motion-hero .hero-grid,.motion-hero .value-strip{position:relative;z-index:1}
.hero-motion-copy{opacity:0;transform:translateX(-28px)}
.hero-motion-copy.is-in{opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.hero-motion-visual{
  opacity:0;transform:translateX(32px) scale(.985);
  transform-style:preserve-3d;will-change:transform;
}
.hero-motion-visual.is-in{opacity:1;transform:none;transition:opacity .8s ease .1s,transform .8s cubic-bezier(.2,.8,.2,1) .1s}
.hero-motion-visual .code-window{transition:transform .2s ease,box-shadow .2s ease}
.hero-motion-visual .brand-orbit{animation:badgeLevitate 4.8s ease-in-out infinite}
.motion-hero .hero h1 em{display:inline-block;animation:headlineChromatic 5.5s ease-in-out infinite}
.motion-hero .hero-actions .btn-primary{position:relative;overflow:hidden}
.motion-hero .hero-actions .btn-primary::after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);
  transform:translateX(-120%);animation:heroCTAFlow 4.5s ease-in-out infinite;
}

/* Value strip = live telemetry */
.motion-hero .value-grid>div{position:relative}
.motion-hero .value-grid>div::before{
  content:"";position:absolute;left:50%;bottom:-10px;width:5px;height:5px;border-radius:50%;
  background:#168cff;transform:translateX(-50%) scale(0);opacity:0;
}
.motion-hero .value-grid>div:hover::before{animation:telemetryPing .65s ease forwards}

/* =========================================================
   SERVICES — each icon animates semantically
   Cards use activation wave, not generic tilt
   ========================================================= */
.motion-services{overflow:hidden;isolation:isolate}
.service-wave{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 10% 45%,rgba(22,140,255,.07),transparent 28%),
    radial-gradient(ellipse at 90% 60%,rgba(82,118,255,.06),transparent 26%);
}
.service-wave::after{
  content:"";position:absolute;left:-18%;top:38%;width:136%;height:100px;
  border:1px solid rgba(22,140,255,.09);border-radius:50%;
  transform:rotate(-4deg) scaleY(.45);
  animation:serviceWaveMove 8s ease-in-out infinite alternate;
}
.motion-services>.container{position:relative;z-index:1}
.service-motion-card{
  position:relative;overflow:hidden;opacity:0;transform:translateY(24px) scale(.985);
}
.service-motion-card.is-in{opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.service-motion-card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#168cff,#75a8ff,#8b73ff);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.service-motion-card:hover::before{transform:scaleX(1)}

/* semantic service icons */
[data-motion-icon="code"]{animation:codeBracket 4s ease-in-out infinite}
[data-motion-icon="monitor"]{animation:monitorPulse 4.6s ease-in-out infinite}
[data-motion-icon="gear"]{animation:gearTurn 7s linear infinite}
[data-motion-icon="plug"]{animation:plugConnect 4.8s ease-in-out infinite}
[data-motion-icon="target"]{animation:targetLock 4.4s ease-in-out infinite}
[data-motion-icon="bolt"]{animation:boltFlash 3.8s ease-in-out infinite}
[data-motion-icon="shield"]{animation:shieldGuard 5s ease-in-out infinite}
[data-motion-icon="users"]{animation:usersBreathe 5s ease-in-out infinite}

/* =========================================================
   PROCESS — animated data path through 4 steps
   ========================================================= */
.motion-process{overflow:hidden;isolation:isolate}
.process-flow-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.process-flow-bg::before{
  content:"";position:absolute;left:7%;right:7%;top:57%;height:2px;
  background:linear-gradient(90deg,transparent 0 4%,rgba(22,140,255,.15) 18%,rgba(22,140,255,.35) 50%,rgba(22,140,255,.15) 82%,transparent 96%);
}
.process-flow-bg::after{
  content:"";position:absolute;top:calc(57% - 4px);left:6%;width:10px;height:10px;border-radius:50%;
  background:#168cff;box-shadow:0 0 14px rgba(22,140,255,.65);
  animation:processPacket 6.8s cubic-bezier(.4,0,.2,1) infinite;
}
.motion-process>.container{position:relative;z-index:1}
.process-motion-card{opacity:0;transform:translateY(18px)}
.process-motion-card.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.process-motion-card:nth-child(1).is-in{transition-delay:.05s}
.process-motion-card:nth-child(2).is-in{transition-delay:.16s}
.process-motion-card:nth-child(3).is-in{transition-delay:.27s}
.process-motion-card:nth-child(4).is-in{transition-delay:.38s}
[data-motion-icon="chat"]{animation:chatTyping 3.8s ease-in-out infinite}
[data-motion-icon="document"]{animation:documentFlip 4.6s ease-in-out infinite}
[data-motion-icon="rocket"]{animation:rocketLaunch 5.2s ease-in-out infinite}

/* =========================================================
   PROJECTS — live showcase / radar / project icons animate semantically
   ========================================================= */
.motion-projects{overflow:hidden;isolation:isolate}
.project-radar{
  position:absolute;width:540px;height:540px;right:-160px;top:-180px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle,rgba(22,140,255,.09) 0 1px,transparent 1px 54px);
  opacity:.55;
}
.project-radar::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(22,140,255,.22),transparent 18%,transparent 100%);
  animation:radarSweep 8s linear infinite;
}
.motion-projects>.container{position:relative;z-index:1}
.project-motion-card{opacity:0;transform:translateY(20px)}
.project-motion-card.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.project-motion-card{position:relative;overflow:hidden}
.project-motion-card::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,#168cff,#5dc4ff,#7a6dff);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.project-motion-card:hover::after{transform:scaleX(1)}
[data-motion-icon="qr"]{animation:qrScan 3.6s ease-in-out infinite}
[data-motion-icon="json"]{animation:jsonFold 4.2s ease-in-out infinite}
[data-motion-icon="password"]{animation:lockSecure 4.5s ease-in-out infinite}
[data-motion-icon="image"]{animation:imageFrame 5s ease-in-out infinite}
[data-motion-icon="mask"]{animation:maskPulse 5s ease-in-out infinite}
[data-motion-icon="asterisk"]{animation:asteriskSpin 7s linear infinite}
[data-motion-icon="dashboard"]{animation:dashboardBars 4.8s ease-in-out infinite}
[data-motion-icon="memory"]{animation:memoryBounce 4s ease-in-out infinite}
[data-motion-icon="apps"]{animation:appsGrid 5s ease-in-out infinite}
[data-motion-icon="demo"]{animation:demoFlask 4.6s ease-in-out infinite}
[data-motion-icon="game"]{animation:gameNudge 4s ease-in-out infinite}
[data-motion-icon="star"]{animation:starTwinkle 3.8s ease-in-out infinite}

/* =========================================================
   ABOUT — network topology background + principle-specific icons
   ========================================================= */
.motion-about{overflow:hidden;isolation:isolate}
.about-network{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 15% 30%,rgba(22,140,255,.11) 0 2px,transparent 3px),
    radial-gradient(circle at 28% 66%,rgba(22,140,255,.10) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 22%,rgba(22,140,255,.08) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 72%,rgba(117,103,255,.08) 0 2px,transparent 3px);
  background-size:220px 180px,260px 220px,300px 210px,250px 190px;
  animation:networkDrift 18s linear infinite;
}
.motion-about>.container{position:relative;z-index:1}
.about-motion-principles{opacity:0;transform:translateX(20px)}
.about-motion-principles.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
[data-motion-icon="chart"]{animation:chartGrow 4.8s ease-in-out infinite}

/* =========================================================
   CONTACT — moving mountain light / horizon / send & WhatsApp
   ========================================================= */
.motion-contact{overflow:hidden;isolation:isolate}
.contact-horizon{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.contact-horizon::before{
  content:"";position:absolute;left:-20%;right:-20%;bottom:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),rgba(82,184,255,.28),rgba(255,255,255,.12),transparent);
  animation:horizonFlow 8s linear infinite;
}
.contact-horizon::after{
  content:"";position:absolute;right:8%;top:18%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,140,255,.17),transparent 68%);
  animation:contactAurora 6.5s ease-in-out infinite alternate;
}
.motion-contact .cta-grid{position:relative;z-index:1}
.contact-motion-copy{opacity:0;transform:translateX(-18px)}
.contact-motion-copy.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.contact-motion-actions{opacity:0;transform:translateY(18px)}
.contact-motion-actions.is-in{opacity:1;transform:none;transition:opacity .7s ease .12s,transform .7s ease .12s}
[data-motion-icon="send"]{animation:sendArrow 4s ease-in-out infinite}
[data-motion-icon="whatsapp"]{animation:whatsappBubble 4.4s ease-in-out infinite}

/* Buttons/tabs/arrows: distinct small mechanics */
.motion-projects .tab{transition:transform .2s ease,box-shadow .2s ease}
.motion-projects .tab:hover{transform:translateY(-2px) scale(1.015)}
.motion-projects .carousel-arrow{transition:transform .2s ease}
.motion-projects .carousel-arrow:hover{transform:translateY(-50%) scale(1.1)}
[data-motion-icon="chevron-left"]{transition:transform .2s ease}
[data-motion-icon="chevron-right"]{transition:transform .2s ease}
.carousel-arrow.prev:hover [data-motion-icon="chevron-left"]{transform:translateX(-2px)}
.carousel-arrow.next:hover [data-motion-icon="chevron-right"]{transform:translateX(2px)}

/* KEYFRAMES — intentionally different per meaning */
@keyframes heroGridDrift{to{background-position:54px 0,0 54px}}
@keyframes heroMorph{0%{border-radius:42% 58% 63% 37%/47% 37% 63% 53%;transform:translate(0,0) scale(.95)}100%{border-radius:58% 42% 35% 65%/38% 55% 45% 62%;transform:translate(-18px,14px) scale(1.06)}}
@keyframes heroRotate{to{rotate:360deg}}
@keyframes badgeLevitate{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes headlineChromatic{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 12px rgba(22,140,255,.28))}}
@keyframes heroCTAFlow{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
@keyframes telemetryPing{0%{transform:translateX(-50%) scale(.2);opacity:0}45%{opacity:1}100%{transform:translateX(-50%) scale(2.2);opacity:0}}

@keyframes serviceWaveMove{from{transform:translateX(-3%) rotate(-4deg) scaleY(.45)}to{transform:translateX(5%) rotate(3deg) scaleY(.6)}}
@keyframes codeBracket{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(-3deg)}}
@keyframes monitorPulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 9px rgba(22,140,255,.34))}}
@keyframes gearTurn{to{transform:rotate(360deg)}}
@keyframes plugConnect{0%,100%{transform:translateX(0)}45%{transform:translateX(-2px)}55%{transform:translateX(3px)}65%{transform:translateX(0)}}
@keyframes targetLock{0%,100%{transform:scale(1)}45%{transform:scale(.92)}55%{transform:scale(1.08)}}
@keyframes boltFlash{0%,100%{filter:brightness(1)}48%{filter:brightness(1)}52%{filter:brightness(1.8)}58%{filter:brightness(1)}}
@keyframes shieldGuard{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes usersBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

@keyframes processPacket{0%{left:6%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:94%;opacity:0}}
@keyframes chatTyping{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}55%{transform:translateY(1px)}}
@keyframes documentFlip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(12deg)}}
@keyframes rocketLaunch{0%,100%{transform:translateY(0) rotate(0)}55%{transform:translateY(-5px) rotate(-4deg)}65%{transform:translateY(1px) rotate(1deg)}}

@keyframes radarSweep{to{transform:rotate(360deg)}}
@keyframes qrScan{0%,100%{filter:brightness(1)}45%{filter:brightness(1)}55%{filter:brightness(1.35)}}
@keyframes jsonFold{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.92)}}
@keyframes lockSecure{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) scale(1.03)}}
@keyframes imageFrame{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@keyframes maskPulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 8px rgba(22,140,255,.22))}}
@keyframes asteriskSpin{to{transform:rotate(360deg)}}
@keyframes dashboardBars{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
@keyframes memoryBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes appsGrid{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes demoFlask{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes gameNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@keyframes starTwinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}

@keyframes networkDrift{to{background-position:220px 180px,-260px 220px,300px -210px,-250px -190px}}
@keyframes chartGrow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}}

@keyframes horizonFlow{from{transform:translateX(-20%)}to{transform:translateX(20%)}}
@keyframes contactAurora{from{transform:translateY(-10px) scale(.95)}to{transform:translateY(12px) scale(1.08)}}
@keyframes sendArrow{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(3px) translateY(-2px)}}
@keyframes whatsappBubble{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Mobile/tablet: same layout, lighter motion */
@media(max-width:900px){
  .hero-motion-visual{transform:none!important}
  .process-flow-bg::after{animation-duration:8.5s}
}
@media(pointer:coarse){
  .hero-motion-visual{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .motion-next *, .motion-next *::before, .motion-next *::after{
    animation:none!important;transition-duration:.01ms!important;
  }
  .motion-in,.hero-motion-copy,.hero-motion-visual,.service-motion-card,.process-motion-card,.project-motion-card,.about-motion-principles,.contact-motion-copy,.contact-motion-actions{
    opacity:1!important;transform:none!important;
  }
}


/* =========================================================
   Semantic Motion Refinement
   ========================================================= */

/* HOME — animate the actual narrative:
   problema -> idea -> tecnología -> solución -> resultado */
.hero-semantic-flow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.hero-semantic-flow::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 77% 25%,rgba(22,140,255,.16),transparent 23%),
    radial-gradient(circle at 60% 68%,rgba(117,103,255,.10),transparent 22%);
}
.flow-node{
  position:absolute;
  padding:6px 10px;
  border:1px solid rgba(102,194,255,.18);
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.2px;
  color:rgba(203,232,255,.72);
  background:rgba(8,29,52,.40);
  backdrop-filter:blur(5px);
  opacity:.38;
  transform:scale(.94);
  animation:flowNodeActivate 8s ease-in-out infinite;
}
.flow-problem{left:51%;top:25%;animation-delay:0s}
.flow-idea{left:60%;top:17%;animation-delay:1.2s}
.flow-tech{left:71%;top:30%;animation-delay:2.4s}
.flow-solution{left:66%;top:55%;animation-delay:3.6s}
.flow-result{left:79%;top:64%;animation-delay:4.8s}

.flow-line{
  position:absolute;height:1px;
  background:linear-gradient(90deg,rgba(22,140,255,.05),rgba(61,184,255,.48),rgba(22,140,255,.05));
  transform-origin:left center;
  opacity:.38;
}
.fl1{left:55%;top:27%;width:112px;transform:rotate(-24deg)}
.fl2{left:64%;top:21%;width:132px;transform:rotate(25deg)}
.fl3{left:73%;top:34%;width:138px;transform:rotate(72deg)}
.fl4{left:70%;top:57%;width:130px;transform:rotate(16deg)}

.flow-packet{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:#47b8ff;box-shadow:0 0 14px rgba(71,184,255,.8);
  opacity:0;
}
.packet-1{animation:semanticPacketA 8s linear infinite}
.packet-2{animation:semanticPacketB 8s linear infinite 4s}

/* ICONS — hover motion by meaning, not continuous generic motion */
[data-motion-icon]{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease;
}
[data-motion-icon="code"]:hover,
.service-motion-card:hover [data-motion-icon="code"]{
  animation:codeTypeHover .7s ease;
}
[data-motion-icon="monitor"]:hover,
.service-motion-card:hover [data-motion-icon="monitor"]{
  animation:monitorWakeHover .8s ease;
}
[data-motion-icon="gear"]:hover,
.service-motion-card:hover [data-motion-icon="gear"]{
  animation:gearSpinHover .8s cubic-bezier(.2,.8,.2,1);
}
[data-motion-icon="plug"]:hover,
.service-motion-card:hover [data-motion-icon="plug"]{
  animation:plugSnapHover .72s ease;
}
[data-motion-icon="target"]:hover,
.value-grid>div:hover [data-motion-icon="target"]{
  animation:targetLockHover .7s ease;
}
[data-motion-icon="users"]:hover,
.value-grid>div:hover [data-motion-icon="users"],
.about-motion-principles>div:hover [data-motion-icon="users"]{
  animation:usersGatherHover .8s ease;
}
[data-motion-icon="bolt"]:hover,
.value-grid>div:hover [data-motion-icon="bolt"]{
  animation:boltStrikeHover .6s ease;
}
[data-motion-icon="shield"]:hover,
.value-grid>div:hover [data-motion-icon="shield"],
.about-motion-principles>div:hover [data-motion-icon="shield"]{
  animation:shieldProtectHover .75s ease;
}
[data-motion-icon="chat"]:hover,
.process-motion-card:hover [data-motion-icon="chat"]{
  animation:chatPopHover .75s ease;
}
[data-motion-icon="document"]:hover,
.process-motion-card:hover [data-motion-icon="document"]{
  animation:documentTurnHover .8s ease;
}
[data-motion-icon="rocket"]:hover,
.process-motion-card:hover [data-motion-icon="rocket"]{
  animation:rocketLiftHover .85s ease;
}
[data-motion-icon="chart"]:hover,
.about-motion-principles>div:hover [data-motion-icon="chart"]{
  animation:chartRiseHover .8s ease;
}
[data-motion-icon="qr"]:hover,
.project-motion-card:hover [data-motion-icon="qr"]{
  animation:qrReadHover .75s ease;
}
[data-motion-icon="json"]:hover,
.project-motion-card:hover [data-motion-icon="json"]{
  animation:jsonBracketHover .75s ease;
}
[data-motion-icon="password"]:hover,
.project-motion-card:hover [data-motion-icon="password"]{
  animation:lockClickHover .7s ease;
}
[data-motion-icon="image"]:hover,
.project-motion-card:hover [data-motion-icon="image"]{
  animation:imageFocusHover .8s ease;
}
[data-motion-icon="mask"]:hover,
.project-motion-card:hover [data-motion-icon="mask"]{
  animation:maskRevealHover .8s ease;
}
[data-motion-icon="asterisk"]:hover,
.project-motion-card:hover [data-motion-icon="asterisk"]{
  animation:asteriskBurstHover .85s ease;
}
[data-motion-icon="dashboard"]:hover,
.project-motion-card:hover [data-motion-icon="dashboard"]{
  animation:dashboardMetricsHover .85s ease;
}
[data-motion-icon="memory"]:hover,
.project-motion-card:hover [data-motion-icon="memory"]{
  animation:memoryFlipHover .8s ease;
}
[data-motion-icon="apps"]:hover,
.tab:hover [data-motion-icon="apps"]{
  animation:appsExpandHover .75s ease;
}
[data-motion-icon="demo"]:hover,
.tab:hover [data-motion-icon="demo"]{
  animation:demoMixHover .8s ease;
}
[data-motion-icon="game"]:hover,
.tab:hover [data-motion-icon="game"]{
  animation:gamePressHover .72s ease;
}
[data-motion-icon="star"]:hover,
.tab:hover [data-motion-icon="star"]{
  animation:starSparkHover .7s ease;
}
[data-motion-icon="send"]:hover,
.btn:hover [data-motion-icon="send"]{
  animation:sendFlyHover .72s ease;
}
[data-motion-icon="whatsapp"]:hover,
.btn:hover [data-motion-icon="whatsapp"]{
  animation:whatsappPingHover .75s ease;
}
[data-motion-icon="chevron-left"]:hover,
.carousel-arrow.prev:hover [data-motion-icon="chevron-left"]{
  animation:chevronLeftHover .55s ease;
}
[data-motion-icon="chevron-right"]:hover,
.carousel-arrow.next:hover [data-motion-icon="chevron-right"]{
  animation:chevronRightHover .55s ease;
}

/* CONVERSEMOS — animated mountain weather only inside this section */
.motion-contact .contact-horizon{
  overflow:hidden;
}
.mountain-wind{
  position:absolute;left:-30%;width:70%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,240,255,.22),rgba(255,255,255,.04),transparent);
  filter:blur(.2px);
  opacity:.0;
}
.wind-1{top:26%;animation:windPass 7s ease-in-out infinite}
.wind-2{top:42%;animation:windPass 9s ease-in-out infinite 2.2s}

.snow-layer{
  position:absolute;inset:-15% -10% 0 -10%;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.78) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(220,240,255,.54) 0 1.2px,transparent 1.7px),
    radial-gradient(circle,rgba(255,255,255,.34) 0 .8px,transparent 1.2px);
  background-size:46px 46px,72px 72px,32px 32px;
  background-position:0 0,21px 8px,12px 17px;
  opacity:.22;
}
.snow-a{animation:snowFallA 10s linear infinite}
.snow-b{
  opacity:.12;
  background-size:86px 86px,58px 58px,40px 40px;
  animation:snowFallB 14s linear infinite;
}
.motion-contact:hover .snow-layer{opacity:.28}
.motion-contact .contact-horizon::after{
  animation:contactAurora 6.5s ease-in-out infinite alternate, mountainLight 8s ease-in-out infinite;
}

/* Semantic keyframes */
@keyframes flowNodeActivate{
  0%,12%,100%{opacity:.28;transform:scale(.94);border-color:rgba(102,194,255,.12)}
  18%,28%{opacity:1;transform:scale(1.05);border-color:rgba(102,194,255,.42);box-shadow:0 0 22px rgba(22,140,255,.14)}
  36%{opacity:.38;transform:scale(.98)}
}
@keyframes semanticPacketA{
  0%{left:54%;top:27%;opacity:0}
  8%{opacity:1}
  25%{left:63%;top:20%;opacity:1}
  45%{left:73%;top:33%;opacity:1}
  67%{left:70%;top:56%;opacity:1}
  89%{left:82%;top:66%;opacity:1}
  100%{left:82%;top:66%;opacity:0}
}
@keyframes semanticPacketB{
  0%{left:54%;top:27%;opacity:0}
  10%{opacity:.7}
  35%{left:64%;top:20%;opacity:.7}
  60%{left:73%;top:33%;opacity:.7}
  82%{left:70%;top:56%;opacity:.7}
  100%{left:82%;top:66%;opacity:0}
}

@keyframes codeTypeHover{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}}
@keyframes monitorWakeHover{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.45) drop-shadow(0 0 10px rgba(22,140,255,.3))}}
@keyframes gearSpinHover{to{transform:rotate(180deg)}}
@keyframes plugSnapHover{0%,100%{transform:translateX(0)}35%{transform:translateX(-4px)}55%{transform:translateX(4px)}70%{transform:translateX(0)}}
@keyframes targetLockHover{0%,100%{transform:scale(1)}40%{transform:scale(.9)}60%{transform:scale(1.12)}}
@keyframes usersGatherHover{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes boltStrikeHover{0%,100%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.08);filter:brightness(1.7)}55%{transform:scale(.96);filter:brightness(1)}}
@keyframes shieldProtectHover{0%,100%{transform:scale(1)}50%{transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(22,140,255,.25))}}
@keyframes chatPopHover{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}60%{transform:translateY(1px)}}
@keyframes documentTurnHover{0%,100%{transform:rotateY(0)}50%{transform:rotateY(18deg)}}
@keyframes rocketLiftHover{0%,100%{transform:translateY(0) rotate(0)}55%{transform:translateY(-7px) rotate(-5deg)}70%{transform:translateY(1px) rotate(1deg)}}
@keyframes chartRiseHover{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
@keyframes qrReadHover{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45) contrast(1.08)}}
@keyframes jsonBracketHover{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
@keyframes lockClickHover{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px)}60%{transform:translateY(1px)}}
@keyframes imageFocusHover{0%,100%{transform:scale(1)}50%{transform:scale(1.06) rotate(2deg)}}
@keyframes maskRevealHover{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 8px rgba(22,140,255,.24))}}
@keyframes asteriskBurstHover{0%{transform:rotate(0) scale(1)}60%{transform:rotate(150deg) scale(1.08)}100%{transform:rotate(180deg) scale(1)}}
@keyframes dashboardMetricsHover{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.92)}65%{transform:scaleY(1.08)}}
@keyframes memoryFlipHover{0%,100%{transform:rotateY(0)}50%{transform:rotateY(16deg)}}
@keyframes appsExpandHover{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes demoMixHover{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes gamePressHover{0%,100%{transform:translateY(0)}50%{transform:translateY(2px) scale(.97)}}
@keyframes starSparkHover{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.14);filter:brightness(1.6)}}
@keyframes sendFlyHover{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-3px)}}
@keyframes whatsappPingHover{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes chevronLeftHover{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes chevronRightHover{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

@keyframes windPass{
  0%{transform:translateX(-15%) scaleX(.7);opacity:0}
  18%{opacity:.35}
  55%{opacity:.2}
  100%{transform:translateX(190%) scaleX(1.05);opacity:0}
}
@keyframes snowFallA{
  from{background-position:0 -30px,21px -80px,12px -50px}
  to{background-position:55px 450px,5px 520px,42px 390px}
}
@keyframes snowFallB{
  from{background-position:0 -100px,25px -30px,10px -70px}
  to{background-position:-60px 470px,65px 420px,-20px 520px}
}
@keyframes mountainLight{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

/* Keep reduced motion behavior */
@media(prefers-reduced-motion:reduce){
  .flow-node,.flow-packet,.mountain-wind,.snow-layer,[data-motion-icon]{
    animation:none!important;
  }
}


/* =========================================================
   Semantic Motion v2
   ========================================================= */

/* Asterisk: no continuous rotation. Hover only. */
[data-motion-icon="asterisk"]{
  animation:none!important;
}
[data-motion-icon="asterisk"]:hover,
.project-motion-card:hover [data-motion-icon="asterisk"]{
  animation:asteriskBurstHover .85s ease!important;
}

/* HOME: remove packet animation completely */
.flow-packet{display:none!important}

/* HOME: second-brain / neural communication background */
.neural-brain{
  position:absolute;
  right:4%;
  top:8%;
  width:48%;
  height:72%;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  filter:drop-shadow(0 0 16px rgba(22,140,255,.08));
}
.neural-brain::before,
.neural-brain::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(95,181,255,.12);
}
.neural-brain::before{
  width:78%;
  height:88%;
  right:2%;
  top:4%;
  transform:rotate(-9deg);
  border-radius:48% 52% 46% 54% / 42% 48% 52% 58%;
  animation:brainBreath 7s ease-in-out infinite;
}
.neural-brain::after{
  width:56%;
  height:64%;
  right:13%;
  top:17%;
  transform:rotate(12deg);
  border-color:rgba(117,103,255,.10);
  animation:brainBreath 9s ease-in-out infinite reverse;
}

.brain-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4bbdff;
  box-shadow:0 0 0 5px rgba(75,189,255,.06),0 0 18px rgba(75,189,255,.55);
  animation:brainNodePulse 3.6s ease-in-out infinite;
}
.b1{left:18%;top:28%}.b2{left:38%;top:17%;animation-delay:.5s}.b3{left:63%;top:26%;animation-delay:1s}
.b4{left:28%;top:56%;animation-delay:1.5s}.b5{left:57%;top:63%;animation-delay:2s}.b6{left:78%;top:48%;animation-delay:2.5s}

.brain-link{
  position:absolute;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(75,189,255,.06),rgba(75,189,255,.45),rgba(117,103,255,.12));
  overflow:hidden;
}
.brain-link::after{
  content:"";
  position:absolute;
  top:-1px;
  left:-30%;
  width:28%;
  height:3px;
  background:linear-gradient(90deg,transparent,#69c7ff,transparent);
  animation:signalTravel 2.8s linear infinite;
}
.bl1{left:20%;top:30%;width:140px;transform:rotate(-19deg)}
.bl2{left:40%;top:20%;width:150px;transform:rotate(17deg)}
.bl3{left:31%;top:54%;width:175px;transform:rotate(-2deg)}
.bl4{left:58%;top:30%;width:130px;transform:rotate(39deg)}
.bl5{left:60%;top:61%;width:120px;transform:rotate(-31deg)}
.bl6{left:29%;top:31%;width:130px;transform:rotate(48deg)}
.bl2::after{animation-delay:.5s}.bl3::after{animation-delay:1s}.bl4::after{animation-delay:1.5s}.bl5::after{animation-delay:2s}.bl6::after{animation-delay:2.5s}

/* IDE typing simulation */
.original-code-lines{display:none!important}
.typing-code{
  min-width:220px;
}
.typing-line{
  display:block;
  width:0;
  overflow:hidden;
  white-space:nowrap;
  border-right:1px solid rgba(93,214,255,.75);
  opacity:0;
}
.typing-line.t1{animation:typeLine1 7.6s steps(14,end) infinite}
.typing-line.t2{animation:typeLine2 7.6s steps(24,end) infinite}
.typing-line.t3{animation:typeLine3 7.6s steps(22,end) infinite}
.typing-line.t4{animation:typeLine4 7.6s steps(15,end) infinite}

@keyframes brainBreath{
  0%,100%{transform:scale(.98) rotate(-6deg);opacity:.45}
  50%{transform:scale(1.04) rotate(4deg);opacity:.8}
}
@keyframes brainNodePulse{
  0%,100%{transform:scale(.75);opacity:.45}
  50%{transform:scale(1.2);opacity:1}
}
@keyframes signalTravel{
  from{left:-30%}
  to{left:115%}
}

@keyframes typeLine1{
  0%,4%{width:0;opacity:1}
  16%,78%{width:8.5ch;opacity:1}
  82%,100%{width:8.5ch;opacity:0}
}
@keyframes typeLine2{
  0%,17%{width:0;opacity:0}
  18%{opacity:1}
  38%,78%{width:23ch;opacity:1}
  82%,100%{width:23ch;opacity:0}
}
@keyframes typeLine3{
  0%,39%{width:0;opacity:0}
  40%{opacity:1}
  59%,78%{width:20ch;opacity:1}
  82%,100%{width:20ch;opacity:0}
}
@keyframes typeLine4{
  0%,60%{width:0;opacity:0}
  61%{opacity:1}
  76%,78%{width:9ch;opacity:1}
  82%,100%{width:9ch;opacity:0}
}

@media(max-width:900px){
  .neural-brain{
    width:64%;
    right:-8%;
    opacity:.52;
  }
}
@media(max-width:620px){
  .neural-brain{display:none}
}


/* =========================================================
   Semantic Motion v3 — fine tuning
   ========================================================= */

/* Hide J floating icon next to IDE */
.hero-motion-visual .brand-orbit{
  display:none !important;
}

/* Make the hero "second brain" clearer and less "moving point on line" */
.hero-semantic-flow{
  opacity:.92;
}
.hero-semantic-flow::before{
  content:"";
  position:absolute;
  right:2%;
  top:4%;
  width:46%;
  height:80%;
  background:
    radial-gradient(circle at 30% 35%, rgba(75,189,255,.10), transparent 18%),
    radial-gradient(circle at 66% 28%, rgba(75,189,255,.08), transparent 16%),
    radial-gradient(circle at 52% 64%, rgba(117,103,255,.07), transparent 18%),
    radial-gradient(circle at 78% 52%, rgba(75,189,255,.08), transparent 16%);
  filter:blur(10px);
  animation:brainAuraShift 12s ease-in-out infinite alternate;
}

/* Flow labels animation */
.flow-node{
  font-size:9px;
  padding:7px 11px;
  color:rgba(219,241,255,.82);
  border-color:rgba(122,209,255,.22);
  background:rgba(8,29,52,.48);
  animation:flowWordPulse 7s ease-in-out infinite;
}
.flow-problem{left:50%;top:24%;animation-delay:0s}
.flow-idea{left:61%;top:16%;animation-delay:1.1s}
.flow-tech{left:72%;top:31%;animation-delay:2.2s}
.flow-solution{left:66%;top:55%;animation-delay:3.3s}
.flow-line{
  opacity:.28;
  background:linear-gradient(90deg,rgba(22,140,255,.04),rgba(91,198,255,.30),rgba(117,103,255,.10));
  animation:flowLineGlow 6s ease-in-out infinite;
}
.fl2{animation-delay:1s}
.fl3{animation-delay:2s}
.fl4{animation-delay:3s}

/* Neural brain: remove travelling dot effect, use pulsing connections instead */
.brain-link{
  opacity:.45;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(75,189,255,.08),rgba(75,189,255,.36),rgba(117,103,255,.15));
  animation:brainLinkPulse 4.8s ease-in-out infinite;
}
.brain-link::after{
  display:none !important;
}
.bl2{animation-delay:.5s}
.bl3{animation-delay:1s}
.bl4{animation-delay:1.5s}
.bl5{animation-delay:2s}
.bl6{animation-delay:2.5s}

.neural-brain{
  opacity:.82;
  filter:drop-shadow(0 0 16px rgba(22,140,255,.12));
}
.neural-brain::before{
  width:82%;
  height:90%;
  right:0%;
  top:3%;
}
.neural-brain::after{
  width:60%;
  height:66%;
  right:12%;
  top:16%;
}
.brain-node{
  width:9px;
  height:9px;
  box-shadow:0 0 0 6px rgba(75,189,255,.05),0 0 22px rgba(75,189,255,.58);
}

/* IDE typing: finish, wait, then fade/restart */
.typing-line{
  border-right:1px solid rgba(93,214,255,.75);
}
.typing-line.t1{animation:typeLine1_v3 9.2s steps(14,end) infinite}
.typing-line.t2{animation:typeLine2_v3 9.2s steps(24,end) infinite}
.typing-line.t3{animation:typeLine3_v3 9.2s steps(22,end) infinite}
.typing-line.t4{animation:typeLine4_v3 9.2s steps(15,end) infinite}

@keyframes typeLine1_v3{
  0%,3%{width:0;opacity:1}
  13%,72%{width:8.5ch;opacity:1}
  82%,90%{width:8.5ch;opacity:1}
  95%,100%{width:8.5ch;opacity:0}
}
@keyframes typeLine2_v3{
  0%,14%{width:0;opacity:0}
  15%{opacity:1}
  30%,72%{width:23ch;opacity:1}
  82%,90%{width:23ch;opacity:1}
  95%,100%{width:23ch;opacity:0}
}
@keyframes typeLine3_v3{
  0%,31%{width:0;opacity:0}
  32%{opacity:1}
  47%,72%{width:20ch;opacity:1}
  82%,90%{width:20ch;opacity:1}
  95%,100%{width:20ch;opacity:0}
}
@keyframes typeLine4_v3{
  0%,48%{width:0;opacity:0}
  49%{opacity:1}
  60%,72%{width:9ch;opacity:1}
  82%,90%{width:9ch;opacity:1}
  95%,100%{width:9ch;opacity:0}
}

/* Maintain icon hover semantics across all pages */
[data-motion-icon]{
  transform-origin:center center;
}
.project-motion-card [data-motion-icon="asterisk"],
[data-motion-icon="asterisk"]{
  animation:none !important;
}
.project-motion-card:hover [data-motion-icon="asterisk"],
[data-motion-icon="asterisk"]:hover{
  animation:asteriskBurstHover .85s ease !important;
}

/* Extra hover visibility */
.project-card:hover img[data-motion-icon],
.card:hover img[data-motion-icon],
.process-motion-card:hover img[data-motion-icon],
.tab:hover img[data-motion-icon],
.btn:hover img[data-motion-icon]{
  filter:drop-shadow(0 6px 10px rgba(22,140,255,.16));
}

@keyframes flowWordPulse{
  0%,100%{transform:scale(.96) translateY(0);opacity:.46;box-shadow:0 0 0 rgba(22,140,255,0)}
  18%{transform:scale(1.02) translateY(-1px);opacity:.95;box-shadow:0 0 18px rgba(22,140,255,.10)}
  30%{transform:scale(.98);opacity:.68}
}
@keyframes flowLineGlow{
  0%,100%{opacity:.18;filter:brightness(1)}
  50%{opacity:.42;filter:brightness(1.16)}
}
@keyframes brainLinkPulse{
  0%,100%{opacity:.22;filter:brightness(1)}
  50%{opacity:.62;filter:brightness(1.24)}
}
@keyframes brainAuraShift{
  0%{transform:translateY(-4px) scale(.98)}
  100%{transform:translateY(8px) scale(1.03)}
}

/* Keep contact mountain weather active and scoped */
.motion-contact.weather-active .snow-layer,
.motion-contact.weather-active .mountain-wind{
  opacity:inherit;
}

@media(max-width:900px){
  .flow-node{
    font-size:8px;
  }
}


/* =========================================================
   Semantic Motion v4
   ========================================================= */

/* HOME: disable all obsolete hero/radar/flow layers */
.hero-field,
.hero-semantic-flow,
.flow-node,
.flow-line,
.flow-packet,
.neural-brain{
  display:none!important;
}
.motion-hero::before,
.motion-hero::after{
  content:none!important;
}
.motion-hero{
  background:
    radial-gradient(circle at 76% 29%,rgba(20,101,173,.10),transparent 26%),
    linear-gradient(115deg,#071a31,#0b2c50)!important;
}

/* Second brain / IA background: versión estática, más orgánica y profesional */
.second-brain-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  opacity:.92;
  isolation:isolate;
}
.second-brain-bg::before,
.second-brain-bg::after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:50%;
  pointer-events:none;
}
/* halo general */
.second-brain-bg::before{
  right:-6%;
  top:-8%;
  width:58%;
  height:116%;
  background:
    radial-gradient(circle at 28% 42%, rgba(66,165,255,.18), transparent 0 10%, transparent 11%),
    radial-gradient(circle at 64% 24%, rgba(66,165,255,.12), transparent 0 8%, transparent 9%),
    radial-gradient(circle at 74% 68%, rgba(87,118,255,.14), transparent 0 10%, transparent 11%),
    radial-gradient(circle at 48% 50%, rgba(23,118,255,.18), transparent 0 42%, rgba(23,118,255,.06) 58%, transparent 74%),
    radial-gradient(circle at 50% 50%, rgba(8,45,88,.0) 0 36%, rgba(8,45,88,.18) 55%, transparent 78%);
  filter:blur(1px);
  opacity:.72;
}
/* velo suave para integrar al hero */
.second-brain-bg::after{
  right:6%;
  top:8%;
  width:42%;
  height:76%;
  background:
    radial-gradient(circle at 50% 50%, rgba(80,174,255,.08), transparent 58%),
    radial-gradient(circle at 32% 50%, rgba(31,124,221,.14), transparent 65%),
    radial-gradient(circle at 68% 50%, rgba(31,124,221,.10), transparent 66%);
  opacity:.9;
}
.brain-lobe{
  position:absolute;
  top:10%;
  width:22.5%;
  height:63%;
  border-radius:48% 52% 46% 54% / 38% 46% 54% 62%;
  border:1px solid rgba(88,194,255,.14);
  background:
    linear-gradient(180deg, rgba(18,45,87,.10), rgba(7,20,40,.02)),
    radial-gradient(circle at 24% 28%, rgba(93,206,255,.24), transparent 0 7%, transparent 8%),
    radial-gradient(circle at 70% 30%, rgba(93,206,255,.16), transparent 0 8%, transparent 9%),
    radial-gradient(circle at 36% 54%, rgba(93,206,255,.10), transparent 0 10%, transparent 11%),
    radial-gradient(circle at 66% 68%, rgba(120,131,255,.12), transparent 0 11%, transparent 12%),
    radial-gradient(circle at 48% 48%, rgba(20,118,255,.10), transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(120,210,255,.04),
    0 0 40px rgba(16,102,190,.08);
  filter:drop-shadow(0 0 18px rgba(25,122,223,.08));
}
.brain-lobe::before,
.brain-lobe::after{
  content:"";
  position:absolute;
  inset:auto;
  border-radius:999px;
  background:rgba(95,204,255,.16);
  box-shadow:0 0 0 1px rgba(95,204,255,.08), 0 0 10px rgba(95,204,255,.10);
}
.brain-lobe::before{width:6px;height:6px;left:20%;top:24%}
.brain-lobe::after{width:5px;height:5px;right:22%;bottom:24%}
.brain-left{right:29.5%;transform:rotate(-8deg)}
.brain-right{right:7%;transform:scaleX(-1) rotate(-8deg)}

/* puente central más claro */
.brain-left .bridge,
.brain-right .bridge{display:none}

.synapse{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#56c4ff;
  box-shadow:0 0 0 4px rgba(86,196,255,.05), 0 0 12px rgba(86,196,255,.22);
}
.s1{right:46%;top:25%}.s2{right:39%;top:18%}.s3{right:33.2%;top:35%}
.s4{right:44.5%;top:54%}.s5{right:29%;top:63%}
.s6{right:20%;top:27%}.s7{right:13%;top:43%}
.s8{right:20.8%;top:59%}.s9{right:9%;top:67%}

.neural-connection{
  position:absolute;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(84,191,255,.08), rgba(84,191,255,.34), rgba(116,122,255,.10));
  opacity:.88;
}
.nc1{right:39%;top:26%;width:120px;transform:rotate(-28deg)}
.nc2{right:31.8%;top:36%;width:133px;transform:rotate(18deg)}
.nc3{right:41.4%;top:54.5%;width:150px;transform:rotate(3deg)}
.nc4{right:28.4%;top:62.5%;width:133px;transform:rotate(-24deg)}
.nc5{right:19.2%;top:28%;width:116px;transform:rotate(29deg)}
.nc6{right:13%;top:44.2%;width:110px;transform:rotate(25deg)}
.nc7{right:24.5%;top:57.6%;width:145px;transform:rotate(-17deg)}
.nc8{right:35.8%;top:23%;width:212px;transform:rotate(8deg)}
/* IDE result words: semantic processing sequence */
.result-word{
  display:inline-block;
  transform-origin:left center;
  animation:resultThink 6.8s ease-in-out infinite;
}
.rw1{animation-delay:0s}
.rw2{animation-delay:.65s}
.rw3{animation-delay:1.3s}
.rw4{animation-delay:1.95s}

/* Preserve v3 typing wait, but make cursor feel natural */
.typing-line{
  border-right-color:rgba(93,214,255,.78);
}
.typing-line.t4{
  animation-name:typeLine4_v4!important;
}
@keyframes typeLine4_v4{
  0%,48%{width:0;opacity:0}
  49%{opacity:1}
  60%,84%{width:9ch;opacity:1}
  90%,100%{width:9ch;opacity:0}
}

/* GLOBAL ICON POLICY:
   absolutely no icon auto-animation; every semantic icon moves ONLY on hover */
img[data-motion-icon]{
  animation:none!important;
  transform-origin:center center;
}

/* Service/value/process/about/project/button semantic hover */
.service-motion-card:hover [data-motion-icon="code"],
.service-motion-page .service-hero:hover [data-motion-icon="code"],
[data-motion-icon="code"]:hover{animation:codeTypeHover .7s ease!important}

.service-motion-card:hover [data-motion-icon="monitor"],
.service-motion-page .service-hero:hover [data-motion-icon="monitor"],
[data-motion-icon="monitor"]:hover{animation:monitorWakeHover .8s ease!important}

.service-motion-card:hover [data-motion-icon="gear"],
.service-motion-page .service-hero:hover [data-motion-icon="gear"],
[data-motion-icon="gear"]:hover{animation:gearSpinHover .8s cubic-bezier(.2,.8,.2,1)!important}

.service-motion-card:hover [data-motion-icon="plug"],
.service-motion-page .service-hero:hover [data-motion-icon="plug"],
[data-motion-icon="plug"]:hover{animation:plugSnapHover .72s ease!important}

.value-grid>div:hover [data-motion-icon="target"],
[data-motion-icon="target"]:hover{animation:targetLockHover .7s ease!important}

.value-grid>div:hover [data-motion-icon="users"],
.about-motion-principles>div:hover [data-motion-icon="users"],
[data-motion-icon="users"]:hover{animation:usersGatherHover .8s ease!important}

.value-grid>div:hover [data-motion-icon="bolt"],
[data-motion-icon="bolt"]:hover{animation:boltStrikeHover .6s ease!important}

.value-grid>div:hover [data-motion-icon="shield"],
.about-motion-principles>div:hover [data-motion-icon="shield"],
[data-motion-icon="shield"]:hover{animation:shieldProtectHover .75s ease!important}

.process-motion-card:hover [data-motion-icon="chat"],
[data-motion-icon="chat"]:hover{animation:chatPopHover .75s ease!important}
.process-motion-card:hover [data-motion-icon="document"],
[data-motion-icon="document"]:hover{animation:documentTurnHover .8s ease!important}
.process-motion-card:hover [data-motion-icon="rocket"],
[data-motion-icon="rocket"]:hover{animation:rocketLiftHover .85s ease!important}

.about-motion-principles>div:hover [data-motion-icon="chart"],
[data-motion-icon="chart"]:hover{animation:chartRiseHover .8s ease!important}

.project-motion-card:hover [data-motion-icon="qr"],
.catalog-card:hover [data-motion-icon="qr"],
[data-motion-icon="qr"]:hover{animation:qrReadHover .75s ease!important}
.project-motion-card:hover [data-motion-icon="json"],
.catalog-card:hover [data-motion-icon="json"],
[data-motion-icon="json"]:hover{animation:jsonBracketHover .75s ease!important}
.project-motion-card:hover [data-motion-icon="password"],
.catalog-card:hover [data-motion-icon="password"],
[data-motion-icon="password"]:hover{animation:lockClickHover .7s ease!important}
.project-motion-card:hover [data-motion-icon="image"],
.catalog-card:hover [data-motion-icon="image"],
[data-motion-icon="image"]:hover{animation:imageFocusHover .8s ease!important}
.project-motion-card:hover [data-motion-icon="mask"],
.catalog-card:hover [data-motion-icon="mask"],
[data-motion-icon="mask"]:hover{animation:maskRevealHover .8s ease!important}
.project-motion-card:hover [data-motion-icon="asterisk"],
.catalog-card:hover [data-motion-icon="asterisk"],
[data-motion-icon="asterisk"]:hover{animation:asteriskBurstHover .85s ease!important}
.project-motion-card:hover [data-motion-icon="dashboard"],
.catalog-card:hover [data-motion-icon="dashboard"],
[data-motion-icon="dashboard"]:hover{animation:dashboardMetricsHover .85s ease!important}
.project-motion-card:hover [data-motion-icon="memory"],
.catalog-card:hover [data-motion-icon="memory"],
[data-motion-icon="memory"]:hover{animation:memoryFlipHover .8s ease!important}

.tab:hover [data-motion-icon="apps"],[data-motion-icon="apps"]:hover{animation:appsExpandHover .75s ease!important}
.tab:hover [data-motion-icon="demo"],[data-motion-icon="demo"]:hover{animation:demoMixHover .8s ease!important}
.tab:hover [data-motion-icon="game"],[data-motion-icon="game"]:hover{animation:gamePressHover .72s ease!important}
.tab:hover [data-motion-icon="star"],[data-motion-icon="star"]:hover{animation:starSparkHover .7s ease!important}

.btn:hover [data-motion-icon="send"],[data-motion-icon="send"]:hover{animation:sendFlyHover .72s ease!important}
.btn:hover [data-motion-icon="whatsapp"],[data-motion-icon="whatsapp"]:hover{animation:whatsappPingHover .75s ease!important}
.carousel-arrow.prev:hover [data-motion-icon="chevron-left"]{animation:chevronLeftHover .55s ease!important}
.carousel-arrow.next:hover [data-motion-icon="chevron-right"]{animation:chevronRightHover .55s ease!important}

/* CONVERSEMOS — exact weather behavior restored from v2 */
.motion-contact .contact-horizon{
  overflow:hidden;
}
.mountain-wind{
  position:absolute;left:-30%;width:70%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,240,255,.22),rgba(255,255,255,.04),transparent);
  filter:blur(.2px);
  opacity:0;
}
.wind-1{top:26%;animation:windPass 7s ease-in-out infinite!important}
.wind-2{top:42%;animation:windPass 9s ease-in-out infinite 2.2s!important}

.snow-layer{
  position:absolute;inset:-15% -10% 0 -10%;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.78) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(220,240,255,.54) 0 1.2px,transparent 1.7px),
    radial-gradient(circle,rgba(255,255,255,.34) 0 .8px,transparent 1.2px);
  background-size:46px 46px,72px 72px,32px 32px;
  background-position:0 0,21px 8px,12px 17px;
  opacity:.22;
}
.snow-a{animation:snowFallA 10s linear infinite!important}
.snow-b{
  opacity:.12;
  background-size:86px 86px,58px 58px,40px 40px;
  animation:snowFallB 14s linear infinite!important;
}
.motion-contact:hover .snow-layer{opacity:.28}
.motion-contact .contact-horizon::after{
  animation:contactAurora 6.5s ease-in-out infinite alternate,mountainLight 8s ease-in-out infinite!important;
}

/* PROJECTS PAGE motion */
.projects-motion-page .projects-page-hero{
  position:relative;
  overflow:hidden;
}
.projects-motion-page .projects-page-hero::after{
  content:"";position:absolute;right:-100px;top:-140px;width:420px;height:420px;border-radius:48% 52% 58% 42%;
  background:radial-gradient(circle,rgba(22,140,255,.09),transparent 66%);
  animation:projectPageAura 8s ease-in-out infinite alternate;
  pointer-events:none;
}
.projects-motion-page .catalog-card{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.projects-motion-page .catalog-card:hover{
  transform:translateY(-5px);
  border-color:rgba(22,140,255,.25);
  box-shadow:0 18px 40px rgba(11,35,67,.11);
}
.projects-motion-page .catalog-card img[data-motion-icon]{
  transition:filter .22s ease;
}
.projects-motion-page .catalog-card:hover img[data-motion-icon]{
  filter:drop-shadow(0 8px 12px rgba(22,140,255,.15));
}

/* SERVICE PAGES motion */
.service-motion-page .service-motion-hero{
  position:relative;
  overflow:hidden;
}
.service-motion-page .service-motion-hero::after{
  content:"";position:absolute;right:-70px;top:-130px;width:460px;height:460px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(22,140,255,.11),transparent 58%),
    conic-gradient(from 90deg,rgba(22,140,255,.06),transparent,rgba(117,103,255,.05),transparent);
  animation:serviceHeroField 12s ease-in-out infinite alternate;
  pointer-events:none;
}
.service-hero-motion-icon{
  position:absolute;
  right:9%;
  top:50%;
  width:96px;
  height:96px;
  transform:translateY(-50%);
  opacity:.16;
  filter:brightness(0) invert(1);
  pointer-events:auto;
  z-index:2;
}
.service-motion-page .service-hero:hover .service-hero-motion-icon{
  opacity:.3;
}
.service-list-motion .motion-service-item{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.service-list-motion .motion-service-item:hover{
  transform:translateX(5px);
  border-color:rgba(22,140,255,.22);
  box-shadow:0 10px 28px rgba(11,35,67,.07);
}
.service-cta-motion{
  position:relative;
  overflow:hidden;
}
.service-cta-motion::after{
  content:"";position:absolute;inset:auto -5% -90px auto;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,140,255,.08),transparent 68%);
  animation:serviceCtaPulse 7s ease-in-out infinite alternate;
  pointer-events:none;
}

/* animations */
@keyframes lobeBreathe{
  0%{transform:scale(.98) rotate(-7deg);opacity:.46}
  100%{transform:scale(1.04) rotate(-3deg);opacity:.75}
}
@keyframes synapsePulse{
  0%,100%{transform:scale(.72);opacity:.42}
  50%{transform:scale(1.18);opacity:1}
}
@keyframes connectionThink{
  0%,100%{opacity:.12;filter:brightness(.9)}
  50%{opacity:.56;filter:brightness(1.25)}
}
@keyframes resultThink{
  0%,100%{transform:translateX(0);opacity:.72}
  15%{transform:translateX(3px);opacity:1}
  30%{transform:translateX(0);opacity:.8}
}
@keyframes projectPageAura{
  from{transform:translate(-12px,-6px) scale(.96)}
  to{transform:translate(16px,12px) scale(1.06)}
}
@keyframes serviceHeroField{
  from{transform:rotate(-6deg) scale(.95)}
  to{transform:rotate(7deg) scale(1.06)}
}
@keyframes serviceCtaPulse{
  from{transform:translate(-15px,8px) scale(.95)}
  to{transform:translate(18px,-8px) scale(1.06)}
}

/* v2 weather keyframes restored */
@keyframes windPass{
  0%{transform:translateX(-15%) scaleX(.7);opacity:0}
  18%{opacity:.35}
  55%{opacity:.2}
  100%{transform:translateX(190%) scaleX(1.05);opacity:0}
}
@keyframes snowFallA{
  from{background-position:0 -30px,21px -80px,12px -50px}
  to{background-position:55px 450px,5px 520px,42px 390px}
}
@keyframes snowFallB{
  from{background-position:0 -100px,25px -30px,10px -70px}
  to{background-position:-60px 470px,65px 420px,-20px 520px}
}
@keyframes mountainLight{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

@media(max-width:900px){
  .second-brain-bg{opacity:.48}
  .service-hero-motion-icon{right:5%;opacity:.10}
}
@media(max-width:620px){
  .second-brain-bg{display:none}
  .service-hero-motion-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  .brain-lobe,.synapse,.neural-connection,.result-word,
  .projects-motion-page .projects-page-hero::after,
  .service-motion-page .service-motion-hero::after,
  .service-cta-motion::after,
  .mountain-wind,.snow-layer{
    animation:none!important;
  }
}


/* =========================================================
   Semantic Motion v5 — audited hover-only icons + soft weather
   ========================================================= */

/* Hard rule: no SVG UI/project/social icon auto-animates. */
img[data-motion-icon]{
  animation:none!important;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    filter .22s ease,
    opacity .22s ease;
  transform-origin:center center;
}

/* Project page and landing project icons */
.catalog-card:hover [data-motion-icon="qr"],
.project-card:hover [data-motion-icon="qr"],
[data-motion-icon="qr"]:hover{animation:qrReadHover .75s ease!important}

.catalog-card:hover [data-motion-icon="json"],
.project-card:hover [data-motion-icon="json"],
[data-motion-icon="json"]:hover{animation:jsonBracketHover .75s ease!important}

.catalog-card:hover [data-motion-icon="password"],
.project-card:hover [data-motion-icon="password"],
[data-motion-icon="password"]:hover{animation:lockClickHover .7s ease!important}

.catalog-card:hover [data-motion-icon="image"],
.project-card:hover [data-motion-icon="image"],
[data-motion-icon="image"]:hover{animation:imageFocusHover .8s ease!important}

.catalog-card:hover [data-motion-icon="mask"],
.project-card:hover [data-motion-icon="mask"],
[data-motion-icon="mask"]:hover{animation:maskRevealHover .8s ease!important}

.catalog-card:hover [data-motion-icon="asterisk"],
.project-card:hover [data-motion-icon="asterisk"],
[data-motion-icon="asterisk"]:hover{animation:asteriskBurstHover .85s ease!important}

.catalog-card:hover [data-motion-icon="dashboard"],
.project-card:hover [data-motion-icon="dashboard"],
[data-motion-icon="dashboard"]:hover{animation:dashboardMetricsHover .85s ease!important}

.catalog-card:hover [data-motion-icon="memory"],
.project-card:hover [data-motion-icon="memory"],
[data-motion-icon="memory"]:hover{animation:memoryFlipHover .8s ease!important}

.catalog-card:hover [data-motion-icon="game"],
.project-card:hover [data-motion-icon="game"],
[data-motion-icon="game"]:hover{animation:gamePressHover .72s ease!important}

/* Services — landing and individual service pages */
.service-motion-card:hover [data-motion-icon="code"],
.service-motion-hero:hover [data-motion-icon="code"],
[data-motion-icon="code"]:hover{animation:codeTypeHover .7s ease!important}

.service-motion-card:hover [data-motion-icon="monitor"],
.service-motion-hero:hover [data-motion-icon="monitor"],
[data-motion-icon="monitor"]:hover{animation:monitorWakeHover .8s ease!important}

.service-motion-card:hover [data-motion-icon="gear"],
.service-motion-hero:hover [data-motion-icon="gear"],
[data-motion-icon="gear"]:hover{animation:gearSpinHover .8s cubic-bezier(.2,.8,.2,1)!important}

.service-motion-card:hover [data-motion-icon="plug"],
.service-motion-hero:hover [data-motion-icon="plug"],
[data-motion-icon="plug"]:hover{animation:plugSnapHover .72s ease!important}

/* Process / values / about */
.process-motion-card:hover [data-motion-icon="chat"],
[data-motion-icon="chat"]:hover{animation:chatPopHover .75s ease!important}
.process-motion-card:hover [data-motion-icon="document"],
[data-motion-icon="document"]:hover{animation:documentTurnHover .8s ease!important}
.process-motion-card:hover [data-motion-icon="rocket"],
[data-motion-icon="rocket"]:hover{animation:rocketLiftHover .85s ease!important}

.value-grid>div:hover [data-motion-icon="target"],
[data-motion-icon="target"]:hover{animation:targetLockHover .7s ease!important}
.value-grid>div:hover [data-motion-icon="users"],
.principles>div:hover [data-motion-icon="users"],
[data-motion-icon="users"]:hover{animation:usersGatherHover .8s ease!important}
.value-grid>div:hover [data-motion-icon="bolt"],
[data-motion-icon="bolt"]:hover{animation:boltStrikeHover .6s ease!important}
.value-grid>div:hover [data-motion-icon="shield"],
.principles>div:hover [data-motion-icon="shield"],
[data-motion-icon="shield"]:hover{animation:shieldProtectHover .75s ease!important}
.principles>div:hover [data-motion-icon="chart"],
[data-motion-icon="chart"]:hover{animation:chartRiseHover .8s ease!important}

/* Tabs, arrows, actions */
.tab:hover [data-motion-icon="apps"],
[data-motion-icon="apps"]:hover{animation:appsExpandHover .75s ease!important}
.tab:hover [data-motion-icon="demo"],
[data-motion-icon="demo"]:hover{animation:demoMixHover .8s ease!important}
.tab:hover [data-motion-icon="game"],
[data-motion-icon="game"]:hover{animation:gamePressHover .72s ease!important}
.tab:hover [data-motion-icon="star"],
[data-motion-icon="star"]:hover{animation:starSparkHover .7s ease!important}
.btn:hover [data-motion-icon="send"],
[data-motion-icon="send"]:hover{animation:sendFlyHover .72s ease!important}
.btn:hover [data-motion-icon="whatsapp"],
[data-motion-icon="whatsapp"]:hover{animation:whatsappPingHover .75s ease!important}
.carousel-arrow.prev:hover [data-motion-icon="chevron-left"],
[data-motion-icon="chevron-left"]:hover{animation:chevronLeftHover .55s ease!important}
.carousel-arrow.next:hover [data-motion-icon="chevron-right"],
[data-motion-icon="chevron-right"]:hover{animation:chevronRightHover .55s ease!important}

/* Footer / contact auxiliary icons */
.footer-phone:hover [data-motion-icon="mobile"],
[data-motion-icon="mobile"]:hover{animation:mobileRingHover .72s ease!important}

.socials a:hover [data-motion-icon="github"],
[data-motion-icon="github"]:hover{animation:githubHover .72s ease!important}
.socials a:hover [data-motion-icon="linkedin"],
[data-motion-icon="linkedin"]:hover{animation:linkedinHover .72s ease!important}
.socials a:hover [data-motion-icon="instagram"],
[data-motion-icon="instagram"]:hover{animation:instagramHover .72s ease!important}
.socials a:hover [data-motion-icon="tiktok"],
[data-motion-icon="tiktok"]:hover{animation:tiktokHover .72s ease!important}
.socials a:hover [data-motion-icon="facebook"],
[data-motion-icon="facebook"]:hover{animation:facebookHover .72s ease!important}
.socials a:hover [data-motion-icon="youtube"],
[data-motion-icon="youtube"]:hover{animation:youtubeHover .72s ease!important}

/* Weather: intentionally softer than v4, matching the visual feel requested from v2.
   No hover intensity increase. */
.motion-contact .snow-layer{
  opacity:.11!important;
}
.motion-contact .snow-b{
  opacity:.055!important;
}
.motion-contact:hover .snow-layer{
  opacity:.11!important;
}
.motion-contact:hover .snow-b{
  opacity:.055!important;
}
.motion-contact .mountain-wind{
  opacity:0!important;
}
.motion-contact .wind-1{
  animation:windPassSoft 8.5s ease-in-out infinite!important;
}
.motion-contact .wind-2{
  animation:windPassSoft 11s ease-in-out infinite 2.8s!important;
}
.motion-contact .contact-horizon::after{
  opacity:.62!important;
  animation:contactAuroraSoft 8s ease-in-out infinite alternate,mountainLightSoft 10s ease-in-out infinite!important;
}

/* New hover keyframes */
@keyframes mobileRingHover{
  0%,100%{transform:rotate(0) translateX(0)}
  25%{transform:rotate(-6deg) translateX(-1px)}
  50%{transform:rotate(6deg) translateX(1px)}
  75%{transform:rotate(-3deg)}
}
@keyframes githubHover{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12) rotate(-5deg)}
}
@keyframes linkedinHover{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px) scale(1.06)}
}
@keyframes instagramHover{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.1) rotate(6deg)}
}
@keyframes tiktokHover{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(-2px,-2px)}
  70%{transform:translate(2px,1px)}
}
@keyframes facebookHover{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1) translateY(-2px)}
}
@keyframes youtubeHover{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
@keyframes windPassSoft{
  0%{transform:translateX(-15%) scaleX(.65);opacity:0}
  22%{opacity:.13}
  58%{opacity:.08}
  100%{transform:translateX(190%) scaleX(1);opacity:0}
}
@keyframes contactAuroraSoft{
  from{transform:translateY(-5px) scale(.98)}
  to{transform:translateY(6px) scale(1.03)}
}
@keyframes mountainLightSoft{
  0%,100%{opacity:.56}
  50%{opacity:.68}
}

.second-brain-bg, .brain-lobe, .synapse, .neural-connection{animation:none!important;}