/* V7 — “Lo que hago” motion system */
.section-value-motion{
  position:relative;
  overflow:hidden;
  padding:118px 0 92px;
  background:
    radial-gradient(circle at 72% 18%,rgba(72,84,255,.11),transparent 28%),
    radial-gradient(circle at 12% 84%,rgba(55,92,255,.08),transparent 28%),
    linear-gradient(180deg,#07101f 0%,#050b18 100%)!important;
  isolation:isolate;
}
.section-value-motion::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(rgba(112,135,203,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(112,135,203,.035) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2));
}
.section-value-motion::after{
  content:"";
  position:absolute;
  left:-180px;
  bottom:-280px;
  width:680px;
  height:480px;
  z-index:-2;
  border:1px solid rgba(96,95,255,.18);
  border-radius:50%;
  box-shadow:0 0 0 44px rgba(85,95,255,.045),0 0 0 92px rgba(56,86,255,.035);
  transform:rotate(-12deg);
}
.value-ambient{position:absolute;z-index:-2;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none}
.value-ambient-one{right:8%;top:10%;width:350px;height:350px;background:rgba(98,72,255,.22);animation:valueAmbient 8s ease-in-out infinite}
.value-ambient-two{left:32%;bottom:4%;width:280px;height:280px;background:rgba(47,177,255,.13);animation:valueAmbient 10s ease-in-out infinite reverse}
.value-intro{display:grid;grid-template-columns:1.35fr .65fr;gap:72px;align-items:end;margin-bottom:34px}
.value-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px!important}
.value-eyebrow i{position:relative;width:68px;height:1px;background:linear-gradient(90deg,#7794ff,transparent)}
.value-eyebrow i::before{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:#79a2ff;box-shadow:0 0 16px #7593ff}
.value-heading h2{margin:0;font-size:clamp(2.2rem,3.75vw,4.1rem);line-height:1.02;letter-spacing:-.06em;max-width:16ch}
.value-heading h2>span{display:block;white-space:nowrap}
.value-heading em{font-style:normal}
.value-gradient{color:transparent;background:linear-gradient(105deg,#43b8ff 0%,#687dff 46%,#a15cff 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 24px rgba(93,93,255,.12))}
.value-impact{position:relative;color:transparent;background:linear-gradient(105deg,#3fc7ff,#7387ff 50%,#a160ff);-webkit-background-clip:text;background-clip:text;font-style:italic!important;white-space:nowrap}
.value-impact::after{content:"";position:absolute;left:0;right:-10px;bottom:-11px;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,#32baff 12%,#885fff 82%,transparent);transform:skewX(-22deg);box-shadow:0 0 16px rgba(73,128,255,.42)}
.value-summary{max-width:480px;padding-bottom:12px}
.value-summary>p{margin:0;color:#a9b6d0;font-size:1.02rem;line-height:1.75}
.value-kicker{display:flex;align-items:center;gap:12px;margin-top:30px;color:#8da1d4;font-size:.68rem;font-weight:800;letter-spacing:.16em;white-space:nowrap}
.value-kicker span{width:9px;height:9px;border-radius:50%;background:#9b72ff;box-shadow:0 0 0 5px rgba(155,114,255,.08),0 0 16px rgba(155,114,255,.8)}
.value-kicker b{color:#66749a}
.value-system{position:relative;padding-top:48px}
.value-connectors{position:absolute;left:0;top:0;width:100%;height:180px;overflow:visible;pointer-events:none;opacity:.92}
.value-flow-line{animation:valueFlow 5.4s linear infinite}
.value-sequence{position:absolute;left:-76px;top:94px;display:grid;justify-items:center;gap:8px;color:#7787aa}
.value-sequence>span{width:10px;height:10px;border-radius:50%;background:#40caff;box-shadow:0 0 0 6px rgba(64,202,255,.07),0 0 16px #40caff}
.value-sequence small{font-size:.59rem;letter-spacing:.12em;line-height:1.4;writing-mode:horizontal-tb;text-align:center;white-space:nowrap}
.value-sequence i{width:4px;height:4px;border-radius:50%;background:#52658c;animation:valueDots 2s infinite}
.value-sequence i:nth-of-type(2){animation-delay:.3s}.value-sequence i:nth-of-type(3){animation-delay:.6s}.value-sequence i:nth-of-type(4){animation-delay:.9s}
.value-grid-motion{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;z-index:2}
.value-card{
  --card-accent:#7685ff;
  --card-rgb:118,133,255;
  position:relative;
  min-height:400px!important;
  padding:42px 28px 24px!important;
  overflow:visible;
  border-radius:24px!important;
  border:1px solid rgba(var(--card-rgb),.22)!important;
  background:
    radial-gradient(circle at var(--mouse-x,70%) var(--mouse-y,10%),rgba(var(--card-rgb),.12),transparent 32%),
    linear-gradient(160deg,rgba(20,31,61,.86),rgba(8,15,32,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 28px 65px rgba(0,0,0,.22)!important;
  transform-style:preserve-3d;
  transition:opacity .7s cubic-bezier(.2,.72,.2,1),filter .7s cubic-bezier(.2,.72,.2,1),transform .48s cubic-bezier(.2,.75,.2,1),border-color .3s ease,box-shadow .3s ease,background .3s ease!important;
  transition-delay:var(--card-delay)!important;
}
.value-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(var(--card-rgb),.42),transparent 28%,transparent 70%,rgba(var(--card-rgb),.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5;transition:opacity .3s ease}
.value-card::after{content:"";position:absolute;left:8%;right:8%;bottom:-5px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--card-accent),transparent);box-shadow:0 0 16px rgba(var(--card-rgb),.65);opacity:.52;transition:opacity .3s ease,transform .3s ease}
.value-card:hover,.value-card.is-active{transform:translateY(-10px) perspective(900px) rotateX(1.5deg)!important;border-color:rgba(var(--card-rgb),.66)!important;box-shadow:0 32px 78px rgba(0,0,0,.32),0 0 34px rgba(var(--card-rgb),.15),inset 0 1px 0 rgba(255,255,255,.1)!important}
.value-card:hover::before,.value-card.is-active::before{opacity:1}
.value-card:hover::after,.value-card.is-active::after{opacity:1;transform:scaleX(1.05)}
.value-card-featured{transform:translateY(-18px)!important;border-color:rgba(var(--card-rgb),.55)!important;box-shadow:0 34px 82px rgba(0,0,0,.31),0 0 38px rgba(var(--card-rgb),.16),inset 0 1px 0 rgba(255,255,255,.09)!important}
.value-timing{position:absolute;left:24px;top:-14px;padding:6px 12px;border-radius:999px;border:1px solid rgba(153,169,229,.18);background:#0b1429;color:#95a5c9;font-size:.67rem;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.value-hover-tag{position:absolute;right:20px;top:20px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid rgba(142,103,255,.24);background:rgba(78,43,150,.18);color:#a58cff;font-size:.62rem;font-weight:800;letter-spacing:.08em}
.value-hover-tag i{width:6px;height:6px;border-radius:50%;background:#986eff;box-shadow:0 0 10px #986eff}
.value-icon{width:62px!important;height:62px!important;margin:0 0 48px!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(var(--card-rgb),.24),rgba(var(--card-rgb),.07))!important;border:1px solid rgba(var(--card-rgb),.54)!important;color:var(--card-accent)!important;box-shadow:0 0 28px rgba(var(--card-rgb),.2),inset 0 1px 0 rgba(255,255,255,.11);transition:transform .35s ease,box-shadow .35s ease}
.value-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(var(--card-rgb),.6))}
.value-card:hover .value-icon,.value-card.is-active .value-icon{transform:translateY(-3px) rotate(-3deg) scale(1.06);box-shadow:0 0 38px rgba(var(--card-rgb),.36),inset 0 1px 0 rgba(255,255,255,.14)}
.value-card h3{margin:0!important;font-size:1.44rem!important;line-height:1.15;letter-spacing:-.04em}
.value-card p{margin:18px 0 0!important;color:#9aa8c3!important;font-size:.88rem!important;line-height:1.7}
.value-card-footer{position:absolute;left:28px;right:28px;bottom:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px}
.value-card-footer strong{font-family:"Space Grotesk",sans-serif;font-size:1.1rem;color:var(--card-accent)}
.value-card-footer span{height:1px;background:linear-gradient(90deg,rgba(var(--card-rgb),.34),var(--card-accent));position:relative}
.value-card-footer span::after{content:"";position:absolute;right:-2px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--card-accent);box-shadow:0 0 13px rgba(var(--card-rgb),.88)}
.value-scroll-cue{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:52px;color:#7687ad}
.value-scroll-cue>span{width:20px;height:31px;border:1px solid rgba(138,157,225,.35);border-radius:999px;display:flex;justify-content:center;padding-top:5px}
.value-scroll-cue>span i{width:3px;height:7px;border-radius:99px;background:#8fa3e6;animation:valueScroll 1.8s ease-in-out infinite}
.value-scroll-cue small{font-size:.64rem;font-weight:800;letter-spacing:.16em}

.value-card.reveal{opacity:0;transform:translateY(48px) scale(.975);filter:blur(7px)}
.value-card.reveal.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.value-card-featured.reveal.is-visible{transform:translateY(-18px) scale(1)}

@keyframes valueFlow{to{stroke-dashoffset:-580}}
@keyframes valueAmbient{0%,100%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(18px,-12px,0) scale(1.05)}}
@keyframes valueDots{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
@keyframes valueScroll{0%{opacity:0;transform:translateY(0)}45%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

@media(max-width:1180px){
  .value-sequence{display:none}
  .value-intro{grid-template-columns:1fr .7fr;gap:45px}
  .value-heading h2{font-size:clamp(2.5rem,4.4vw,4.4rem)}
  .value-grid-motion{gap:14px}
  .value-card{padding-inline:22px!important}
  .value-card-footer{left:22px;right:22px}
}
@media(max-width:900px){
  .section-value-motion{padding:94px 0 76px}
  .value-intro{grid-template-columns:1fr;gap:24px;margin-bottom:34px}
  .value-summary{max-width:660px}
  .value-kicker{margin-top:18px}
  .value-system{padding-top:28px}
  .value-connectors{display:none}
  .value-grid-motion{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .value-card,.value-card-featured{min-height:360px!important;transform:none!important}
  .value-card.reveal.is-visible,.value-card-featured.reveal.is-visible{transform:none}
}
@media(max-width:640px){
  .section-value-motion{padding:76px 0 62px}
  .value-heading h2{font-size:clamp(2.05rem,8.8vw,3rem);max-width:none}
  .value-heading h2>span{white-space:normal}
  .value-impact{white-space:normal}
  .value-kicker{white-space:normal;line-height:1.5;letter-spacing:.1em}
  .value-grid-motion{grid-template-columns:1fr;gap:22px}
  .value-card{min-height:350px!important;padding:38px 23px 22px!important}
  .value-card-footer{left:23px;right:23px}
  .value-icon{margin-bottom:38px!important}
  .value-scroll-cue small{letter-spacing:.1em;font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){
  .value-flow-line,.value-ambient,.value-sequence i,.value-scroll-cue>span i{animation:none!important}
  .value-card{transition:none!important}
}
