/* =====================================================================
   DATAVIA · Motion layer v13
   Scroll suave (Lenis), entradas por palabra, parallax, transiciones
   entre páginas y micro-interacciones. Todo respeta reduced-motion.
   ===================================================================== */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis,html.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
html{scrollbar-gutter:stable}

/* Texto limpio */
body{text-rendering:optimizeLegibility;font-kerning:normal;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#95DFD3;color:#0B1113}
:focus-visible{outline:2px solid #5FBEA0;outline-offset:3px;border-radius:6px}

/* Barra de progreso */
#m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;background:linear-gradient(90deg,#206577,#5FBEA0,#95DFD3);transform-origin:0 50%;transform:scaleX(0)}

/* Cortina entre páginas */
#m-curtain{position:fixed;inset:0;z-index:10000;pointer-events:none;background:#0B1113;transform:scaleY(0);transform-origin:50% 0;display:grid;place-items:center}
#m-curtain span{font:600 12px 'Space Grotesk',system-ui,sans-serif;letter-spacing:.32em;color:#95DFD3;opacity:0;transition:opacity .35s ease}
html.m-enter #m-curtain{transform:scaleY(1)}
html.m-enter #m-curtain span{opacity:1}
html.m-enter.m-entered #m-curtain{transform:scaleY(0);transition:transform .6s var(--ease-io)}
html.m-enter.m-entered #m-curtain span{opacity:0}
html.m-leaving #m-curtain{transform:scaleY(1);transform-origin:50% 100%;transition:transform .4s var(--ease-io);pointer-events:auto}
html.m-leaving #m-curtain span{opacity:1;transition-delay:.15s}

/* La barra fija no desenfoca lo que pasa por detras: ese efecto se recalcula en cada cuadro del scroll. Fondo casi opaco en su lugar. */
.nav-shell .nav,body>.nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(247,250,250,.95)}
/* Navegación: se esconde al bajar, vuelve al subir */
.nav-shell,body>.nav{transition:translate 320ms var(--ease-out)}
.nav-shell.m-hide,body>.nav.m-hide{translate:0 -140%}
.navlinks{position:relative}
.nav-pill{position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:999px;background:var(--paper-2,#ECF4F2);z-index:-1;opacity:0;transition:transform 260ms var(--ease-out),width 260ms var(--ease-out),opacity 200ms ease;pointer-events:none}
.nav-pill.on{opacity:1}
.navlinks a{position:relative;transition:color 200ms ease,background-color 200ms ease}
.navlinks a.active{color:var(--teal)}
.navlinks a:hover{background:transparent}
@media(max-width:980px){.nav-pill{display:none}.navlinks.open a:hover,.navlinks.open a.active{background:var(--paper-2)}
  .navlinks.open{animation:menuIn 250ms var(--ease-out) both}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Botones: flecha que se desplaza */
.btn span,.nav-cta span,.more-link span{display:inline-block;transition:transform 220ms var(--ease-out)}
.btn:hover span,.nav-cta:hover span,.more-link:hover span{transform:translate(3px,-3px)}
.btn,.nav-cta,.cta,.back,.send{transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms var(--ease-out)!important}
.send:hover{background:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cform input,.cform textarea{transition:border-color 200ms ease}

/* Tarjetas: elevación y luz que sigue el cursor */
.m-spot{position:relative;--mx:50%;--my:50%}
.m-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(380px circle at var(--mx) var(--my),var(--spot,rgba(95,190,160,.14)),transparent 62%);transition:opacity 300ms var(--ease-out)}
.m-spot.dark,.m-spot.feature,.qcard.dark,.insight-card.dark,.stat:first-child{--spot:rgba(149,223,211,.12)}
.m-lift{transition:translate 240ms var(--ease-out),box-shadow 240ms var(--ease-out),border-color 200ms ease}
@media(hover:hover) and (pointer:fine){
  .m-spot:hover::after{opacity:1}
  .m-lift:hover{translate:0 -6px;box-shadow:0 26px 50px rgba(0,0,0,.09)}
  .svc-title{display:inline-block;transition:translate 200ms var(--ease-out),color 200ms ease}
  .svc-btn:hover .svc-title{translate:6px 0}
  .svc-item:not(.active) .svc-btn:hover .svc-title{color:var(--mint-soft)}
  .contact-links a span:last-child{transition:transform 200ms var(--ease-out)}
  .contact-links a:hover span:last-child{transform:translate(3px,-3px)}
  .purpose-card .arrow-round{transition:background-color 200ms ease,color 200ms ease,transform 260ms var(--ease-out)}
  .purpose-card:hover .arrow-round{background:var(--ink);color:#fff;transform:rotate(45deg)}
}

/* Servicios: transición entre visuales y barra de tiempo */
.svc-item{position:relative}
.svc-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint-soft);transform:scaleX(0);transform-origin:0 50%;opacity:.9}
.svc-item.timing::after{transform:scaleX(1);transition:transform var(--svc-dur,6s) linear}
.svc-desc{transition:grid-template-rows 350ms var(--ease-out),opacity 250ms ease!important;opacity:0}
.svc-item.active .svc-desc{opacity:1}
.svc-plus{transition:transform 300ms var(--ease-out),background-color 200ms ease,color 200ms ease!important}
.viz{transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)!important;transform:translate3d(0,16px,0) scale(.985)}
.viz.active{transform:none}
.viz>*{transition:opacity .6s var(--ease-out),transform .9s var(--ease-out);opacity:0;transform:translate3d(0,14px,0)}
.viz.active>*{opacity:1;transform:none}
.viz.active>:nth-child(2){transition-delay:.07s}.viz.active>:nth-child(3){transition-delay:.14s}.viz.active>:nth-child(4){transition-delay:.22s}
.viz:not(.active) *{animation-play-state:paused!important}
.viz.active .scatter i{animation:dotIn .9s var(--ease-out) both;animation-delay:calc(var(--k,0)*22ms + .2s)}
@keyframes dotIn{from{scale:0;opacity:0}}

/* Pausa de animaciones fuera de pantalla = scroll más fluido */
.m-off *,.m-off *::before,.m-off *::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:no-preference){
  /* Entradas */
  html.js .reveal,html.js .m-r{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ease-out),transform .95s var(--ease-out)!important;transition-delay:var(--d,0s)!important}
  html.js .reveal.in,html.js .m-r.in{opacity:1;transform:none}
  html.js .reveal.m-done,html.js .m-r.m-done{transition-delay:0s!important}

  /* Revelado con máscara para paneles grandes */
  html.js .m-clip{clip-path:inset(10% 6% 0 6% round 34px);transform:translate3d(0,48px,0) scale(.985);transition:clip-path 1.4s var(--ease-out),transform 1.4s var(--ease-out),opacity 1s var(--ease-out)!important;transition-delay:var(--d,0s)!important}
  html.js .m-clip.in{clip-path:inset(0 0 0 0 round 34px);transform:none}
  html.js .m-clip.m-done{clip-path:none!important}

  /* Títulos palabra por palabra */
  html.js h1:not(.split),html.js h2:not(.split),html.js .stage-title:not(.split){opacity:0}
  .split .w{display:inline-block;transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--wi,0)*45ms + var(--d,0s))}
  html.js .split:not(.in):not(.scrub) .w{opacity:0;transform:translate3d(0,.5em,0)}
  .split.scrub .w{transition:opacity .25s linear;transition-delay:0s}

  /* Barras y gráficos que crecen al aparecer */
  html.js .chart-card .bars,html.js .mini-bars,html.js .story-chart{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.3s var(--ease-out);transition-delay:calc(var(--d,0s) + .25s)}
  html.js .in .chart-card .bars,html.js .chart-card.in .bars,html.js .in .mini-bars,html.js .in .story-chart,html.js .viz.active .mini-bars,html.js .viz.active .story-chart{transform:none}
  html.js .viz:not(.active) .mini-bars{transform:scaleY(.4);transition-delay:0s}
  html.js .step::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;opacity:.45;transition:transform 1.6s var(--ease-out) calc(var(--d,0s) + .2s)}
  html.js .step{position:relative}
  html.js .step.in::after{transform:scaleX(1)}
  html.js .step .n{transition:color .8s ease .4s}
  html.js .step.in .n{color:#2E8B99}

  /* Subpáginas */
  html.js .chart i{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0)*90ms + var(--d,0s) + .25s)}
  html.js .qcard.in .chart i{transform:none}
  html.js .line path{stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);transition:stroke-dashoffset 2s var(--ease-out) calc(var(--d,0s) + .3s)}
  html.js .qcard.in .line path{stroke-dashoffset:0}
  html.js .line circle{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0)*110ms + var(--d,0s) + .3s)}
  html.js .qcard.in .line circle{transform:none;animation:bob 5s ease-in-out calc(var(--i,0)*-1.2s) infinite}
  /* Las barras llevan su ancho final y se revelan con un recorte (antes animaban el ancho: recalculaba el layout en cada cuadro) */
  html.js .track .fill{clip-path:inset(0 100% 0 0 round 20px);transition:clip-path 1.8s var(--ease-out) calc(var(--d,0s) + .3s)}
  html.js .bar.in .track .fill{clip-path:inset(0 0 0 0 round 20px)}
  html.js .way .n{display:inline-block;transition:transform 1.2s var(--ease-out) calc(var(--d,0s) + .1s),opacity 1s ease calc(var(--d,0s) + .1s);transform:translate3d(-24px,0,0);opacity:0}
  html.js .way.in .n{transform:none;opacity:1}
  html.js .way{border-top-color:transparent;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 0 0/0% 1px no-repeat;transition:background-size 1.4s var(--ease-out) var(--d,0s),opacity 1s var(--ease-out),transform 1.15s var(--ease-out)!important}
  html.js .way.in{background-size:100% 1px}

}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  #m-curtain,#m-progress{display:none}
  .viz>*{opacity:1;transform:none}
  
}

/* Menú móvil: hamburguesa a X */
.hamb span{transition:transform 260ms var(--ease-out),opacity 160ms ease}
.hamb.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Accesibilidad y móvil (base compartida) ---------- */
.skip-link{position:fixed;left:16px;top:0;z-index:10001;padding:12px 18px;border-radius:999px;background:#0B1113;color:#fff;font:600 14px 'Space Grotesk',system-ui,sans-serif;text-decoration:none;transform:translateY(-140%);transition:transform 160ms var(--ease-out)}
.skip-link:focus{transform:translateY(12px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[tabindex="-1"]:focus{outline:none}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,summary,label{touch-action:manipulation}
button,.btn,.nav-cta,.send,.cta,.back{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn:active,.nav-cta:active,.cta:active,.back:active,.send:active{transform:scale(.97)}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}

/* ===== Boton fijo "Hablemos" (solo celular): lleva al contacto desde cualquier punto de la pagina ===== */
.sticky-cta{position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:9px;height:50px;padding:0 22px;border-radius:999px;background:var(--black,#0B1113);color:#fff;font:600 15px 'Space Grotesk',sans-serif;box-shadow:0 14px 32px rgba(0,0,0,.24);opacity:0;transform:translateY(22px);pointer-events:none;transition:opacity .25s ease,transform .32s var(--ease-out)}
.sticky-cta.on{opacity:1;transform:none;pointer-events:auto}
.sticky-cta:active{transform:scale(.97)}
@media (max-width:860px){.sticky-cta{display:inline-flex}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:opacity .2s ease}}