/* Capa de movimiento v4 — mismo lenguaje: tinta, lima, líneas técnicas */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
body{overflow-x:clip}
.vs-progress{position:fixed;inset:0 0 auto 0;height:4px;background:var(--accent);border-bottom:1px solid var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-26}}
@keyframes draw{0%{stroke-dashoffset:420}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
@keyframes rise{from{opacity:0;transform:translateY(32px)}}
@keyframes sweep{to{transform:skewX(-12deg) scaleX(1)}}
@keyframes ping{to{transform:scale(2.8);opacity:0}}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes breathe{50%{box-shadow:0 0 0 22px rgba(199,244,61,.22)}}
@keyframes tick{to{transform:translateX(-50%)}}

/* revelado al scroll */
.mo .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.mo .rv.in{opacity:1;transform:none}

/* hero: entrada escalonada */
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.24s}.hero-copy>:nth-child(4){animation-delay:.34s}.hero-copy>:nth-child(5){animation-delay:.44s}
.hero.hero-split h1 span::after{transform:skewX(-12deg) scaleX(0);transform-origin:0 50%;animation:sweep .9s .7s var(--ease) forwards}
.status-dot,.wordmark-dot{position:relative}
.status-dot::after,.wordmark-dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--ink);animation:ping 1.8s ease-out infinite}

/* hero: escena vectorial */
.hero-vec{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hv-ring{fill:none;stroke:var(--ink);stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:3 9;transform-box:view-box;transform-origin:310px 250px;animation:spin 60s linear infinite}
.hv-ring.r2{stroke-dasharray:14 10;stroke-opacity:.2;animation-duration:90s;animation-direction:reverse}
.hv-ring.r3{stroke-dasharray:2 14;animation-duration:140s}
.hv-orbit{transform-box:view-box;transform-origin:310px 250px;animation:spin 24s linear infinite}
.hv-orbit.o2{animation-duration:38s;animation-direction:reverse}.hv-orbit.o3{animation-duration:55s}
.hv-dot{fill:var(--accent);stroke:var(--ink);stroke-width:1.4}
.hv-sq{fill:var(--ink)}
.hv-line{fill:none;stroke:var(--ink);stroke-opacity:.4;stroke-width:1.3;stroke-dasharray:5 8;animation:dash 1.4s linear infinite}
.hv-pkt{fill:var(--accent);stroke:var(--ink);stroke-width:1.3}
.hv-wave{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 4.5s ease-in-out infinite}
.hv-blob{fill:var(--accent);fill-opacity:.4}
.hv-cross{stroke:var(--ink);stroke-width:1.3;fill:none}
.art-card{animation:float 7s ease-in-out infinite;translate:calc(var(--px,0)*var(--k,10)*1px) calc(var(--py,0)*var(--k,10)*1px);transition:translate .25s ease-out}
.art-card-a{animation-delay:-1s;--k:14}.art-card-b{animation-delay:-3s;--k:-10}.art-card-c{animation-delay:-5s;--k:12}.art-card-d{animation-delay:-2s;--k:-16}
.art-center{animation:breathe 5s ease-in-out infinite;translate:calc(var(--px,0)*-6px) calc(var(--py,0)*-6px);transition:translate .25s ease-out}

/* cinta de servicios */
.ticker{overflow:hidden;background:var(--ink);color:var(--accent);transform:rotate(-1.2deg);margin:26px -2vw 38px}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track>span:not(.tk-sep){font-family:"IBM Plex Mono",monospace;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;padding:15px 0;white-space:nowrap}
.tk-sep{flex:none;width:9px;height:9px;background:var(--accent);transform:rotate(45deg);margin:0 28px;align-self:center}

/* interacciones */
.case-card,.button{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .12s,color .12s}
.case-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.button span{display:inline-block;transition:transform .2s}.button:hover span{transform:translate(3px,-3px)}
.service-feature .text-link{transition:transform .2s}.service-feature:hover .text-link{transform:translateX(6px)}
/* Hover sin reflow: no animar padding/márgenes en filas de grid */
.service-index-row,.problem-row,.proof-strip>div,.client-placeholder{transition:background-color .2s var(--ease)}
.service-index-row>*{transition:transform .25s var(--ease)}
.service-index-row:hover{background:rgba(199,244,61,.35)}
.service-index-row:hover>*{transform:translateX(10px)}
.problem-row>*{transition:transform .25s var(--ease)}
.problem-row:hover{background:rgba(199,244,61,.35)}
.problem-row:hover>*{transform:translateX(10px)}
.proof-strip>div:hover,.client-placeholder:hover{background:var(--accent)}

/* secciones con vida propia */
.section-dark{position:relative;overflow:hidden}
.section-dark>.shell{position:relative;z-index:1}
.contact-panel{position:relative;overflow:hidden}
.contact-panel::before{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;border:1.5px dashed rgba(21,21,21,.35);animation:spin 50s linear infinite}
.contact-panel::after{content:"";position:absolute;left:-90px;bottom:-110px;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(21,21,21,.2);box-shadow:inset 0 0 0 40px rgba(245,243,238,.12)}
.contact-panel>*{position:relative;z-index:1}

/* decoración vectorial de páginas interiores */
.page-hero,.service-hero{position:relative}
.page-hero>:not(.vs-deco),.service-hero>:not(.vs-deco){position:relative;z-index:1}
.vs-deco{position:absolute;right:-20px;top:30px;width:min(340px,30vw);pointer-events:none;z-index:0}
.vd{transform-box:view-box;transform-origin:170px 170px;animation:spin 40s linear infinite}
.vd.r2{animation-duration:70s;animation-direction:reverse}.vd.o1{animation-duration:14s}.vd.o2{animation-duration:22s;animation-direction:reverse}
@media(max-width:900px){.vs-deco{display:none}.ticker{margin:18px -2vw 26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hv-wave{stroke-dashoffset:0}.hero.hero-split h1 span::after{transform:skewX(-12deg)}}

.about-hero{grid-template-columns:1fr}

/* botón lima: texto siempre tinta (también dentro de la sección oscura) */
.button-accent{color:var(--ink)}
.button-accent:hover{background:var(--ink);color:var(--accent)}

/* logo del header */
.wordmark{display:inline-flex;grid-auto-flow:unset;align-items:center;gap:14px;min-width:0}
.wm-mark{display:block;flex:none;width:46px;height:46px}
.wm-mark svg{display:block;width:100%;height:100%;overflow:visible}
.wm-back{transition:transform .18s var(--ease);transform-box:fill-box}
.wordmark:hover .wm-back{transform:translate(2px,2px)}
.wm-ring,.wm-orbit{transform-box:view-box;transform-origin:22px 22px;animation:spin 14s linear infinite}
.wm-ring{animation-duration:40s;animation-direction:reverse}
.wm-text{display:flex;flex-direction:column;line-height:1}
.wm-name{font-family:"Syne",sans-serif;font-size:1.08rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.wm-name strong{font-weight:800}
.wm-sub{display:flex;align-items:center;gap:8px;margin-top:7px;padding-top:6px;border-top:1px solid var(--ink);font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:900px){.wordmark{gap:10px}.wm-mark{width:40px;height:40px}.wm-name{font-size:.92rem}.wm-sub{font-size:.52rem;letter-spacing:.16em}}