/* ==========================================================
   Movimiento del sitio clásico (no se carga en el modo escritorio
   ni en /herramientas/). Lo maneja assets/js/movimiento.js.

   Curvas: --ease-out del tema para entradas; --mv-mueve para cosas
   que se desplazan en pantalla. Solo transform, opacity y clip-path.
   Con "reducir movimiento" queda todo quieto (al final del archivo).
   ========================================================== */

:root{
  --mv-mueve:cubic-bezier(.77,0,.175,1);
  --mv-cajon:cubic-bezier(.32,.72,0,1);
}
@property --mv-entra{syntax:"<length>";inherits:true;initial-value:0px}

/* ---------- 1. Transiciones entre páginas (View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mv-pagina-sale .26s var(--ease-out) both}
::view-transition-new(root){animation:mv-pagina-entra .5s var(--ease-out) both}
@keyframes mv-pagina-sale{to{opacity:0;transform:translateY(-14px) scale(.985)}}
@keyframes mv-pagina-entra{from{opacity:0;transform:translateY(22px)}}
.site-header{view-transition-name:mv-cabecera}
::view-transition-group(mv-cabecera){animation-duration:0s}

/* La captura que se tocó en una tarjeta viaja hasta la portada de la ficha. */
.proyecto-portada .frame,.producto-media-grande > .frame{view-transition-name:mv-foto}
::view-transition-group(mv-foto){animation-duration:.6s;animation-timing-function:var(--mv-mueve)}
::view-transition-old(mv-foto),::view-transition-new(mv-foto){animation-duration:.6s;height:100%;object-fit:cover}
/* La portada de la ficha no espera al revelado: ya llega en movimiento. */
.js .proyecto-portada.reveal.reveal,.js .producto-media-grande.reveal.reveal{opacity:1;transform:none;filter:none}

/* Cambio de tema: el nuevo color se expande en círculo desde el botón. */
/* Mientras tanto, nada lleva nombre propio: así todo queda dentro del círculo. */
html.mv-tema .site-header,html.mv-tema .frame{view-transition-name:none!important}
html.mv-tema::view-transition-old(root){animation:none;z-index:1}
html.mv-tema::view-transition-new(root){animation:mv-circulo .7s var(--mv-mueve) both;z-index:2}
@keyframes mv-circulo{from{clip-path:circle(0 at var(--mv-cx,50%) var(--mv-cy,0))}to{clip-path:circle(var(--mv-r,150vmax) at var(--mv-cx,50%) var(--mv-cy,0))}}

/* ---------- 2. Barra de avance de lectura ---------- */
.mv-avance{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;pointer-events:none;
  background:var(--spark);transform-origin:0 50%;transform:scaleX(var(--mv-p,0))}
@supports (animation-timeline:scroll()){
  .mv-avance{transform:none;animation:mv-avance linear both;animation-timeline:scroll(root)}
  @keyframes mv-avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- 3. Encabezado que se esconde al bajar y vuelve al subir ---------- */
.site-header{transition:translate .45s var(--mv-cajon),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
/* Sube su alto más lo que cuelga debajo (guirnaldas de temporada). */
html.mv-baja .site-header{translate:0 calc(-100% - 72px)}

/* ---------- 4. Títulos que suben por palabras ---------- */
.mv-l{display:inline-block;overflow:clip;overflow-clip-margin:.1em;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mv-w{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;
  transition:transform 1s var(--ease-out);transition-delay:calc(var(--w,0) * 55ms + var(--i,0) * 60ms)}
.js .mv-split.reveal{opacity:1;transform:none}
.in .mv-w,.mv-split.in .mv-w,.no-js .mv-w{transform:none}
/* El subrayado naranjo de "visión digital" se dibuja después del título. */
.mv-split .grad-text{background-size:0 .075em;transition:background-size 1s var(--ease-out) .75s}
.mv-split.in .grad-text,.in .mv-split .grad-text{background-size:100% .075em}

/* Revelado un poco más vivo: sube, se endereza y se enfoca. */
.js .reveal:not(.mv-split){transform:translateY(28px) scale(.985);filter:blur(4px);
  transition:opacity .8s var(--ease-out),transform .9s var(--ease-out),filter .8s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in:not(.mv-split){transform:none;filter:none}
.js .tarjeta.reveal{transform:translateY(44px) scale(.96)}

/* ---------- 5. Hero: capturas que llegan apiladas y siguen al mouse ---------- */
.obra-item{--k:1;translate:calc(var(--mv-px,0) * var(--k) * 1px) calc(var(--mv-py,0) * var(--k) * 1px + var(--mv-entra));
  transition:transform .6s var(--ease-out),--mv-entra 1.1s var(--ease-out),opacity .8s var(--ease-out)}
.obra-item:nth-child(1){--k:.6}
.obra-item:nth-child(2){--k:1.1}
.obra-item:nth-child(3){--k:1.7}
.js .obra .obra-item{--mv-entra:120px;opacity:0}
.js .obra.in .obra-item{--mv-entra:0px;opacity:1}
.js .obra.in .obra-item:nth-child(1){transition-delay:.15s}
.js .obra.in .obra-item:nth-child(2){transition-delay:.3s}
.js .obra.in .obra-item:nth-child(3){transition-delay:.45s}
.js .obra.reveal{opacity:1;transform:none;filter:none}
.obra-item .frame{transition:box-shadow .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .obra-item:hover .frame{box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px var(--accent)}
}

/* Punto de estado del hero: late suave. */
.hero-status{transition:transform .3s var(--ease-out)}

/* ---------- 6. Luz que sigue al cursor ---------- */
.mv-luz{position:relative;isolation:isolate}
.mv-luz::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%)}
.frame.mv-luz::after{background:radial-gradient(circle 320px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%)}
.banda.mv-luz::after{background:radial-gradient(circle 520px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--spark) 18%,transparent),transparent 60%)}
@media (hover:hover) and (pointer:fine){ .mv-luz:hover::after{opacity:1} }

/* Inclinación 3D de las capturas de productos. */
.producto-media{transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.producto-media.mv-inclina{transition:transform .12s linear}

/* ---------- 7. Cinta de plataformas: velocidad e inclinación según el scroll ---------- */
.marquee-track span{display:inline-block;transform:skewX(var(--mv-skew,0deg));transition:color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){ .marquee-track span:hover{color:var(--accent)} }

/* ---------- 8. Servicios: relleno que barre, número que se revuelve ---------- */
.servicio-fila{isolation:isolate}
.servicio-fila::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.servicio-num{display:inline-block;transition:color .25s var(--ease),transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .servicio-fila:hover{background:transparent}
  .servicio-fila:hover::before{transform:scaleX(1)}
  .servicio-fila:hover .servicio-num{color:var(--spark);transform:translateX(6px)}
}
.servicio-preview{scale:.82;rotate:var(--mv-rot,0deg);transition:opacity var(--t) var(--ease),scale .45s var(--ease-out)}
.servicio-preview.visible{scale:1}

/* ---------- 9. Nosotros: paralaje del collage ---------- */
@supports (animation-timeline:view()){
  .collage > img:first-child{animation:mv-par-a linear both;animation-timeline:view();animation-range:cover}
  .collage .collage-b{animation:mv-par-b linear both;animation-timeline:view();animation-range:cover}
  @keyframes mv-par-a{from{translate:0 30px}to{translate:0 -30px}}
  @keyframes mv-par-b{from{translate:0 90px;rotate:4deg}to{translate:0 -70px;rotate:-3deg}}
}

/* ---------- 10. Método: la línea se dibuja con el scroll y los pasos se encienden ---------- */
@supports (animation-timeline:view()){
  .metodo-linea::after{width:100%!important;transform-origin:0 50%;animation:mv-linea linear both;animation-timeline:view();animation-range:entry 30% cover 55%;background:var(--spark);height:2px;top:-.5px}
  @keyframes mv-linea{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.metodo-paso::before{transition:color .5s var(--ease),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 160ms + .2s)}
.metodo-paso.in::before{color:var(--spark)}
.js .metodo-paso:not(.in)::before{transform:translateY(12px)}

/* ---------- 11. Casos: la captura se revela como una cortina ---------- */
.js .caso .caso-media{clip-path:inset(12% 12% 12% 12% round 22px);transition:clip-path 1.2s var(--ease-out)}
.js .caso.in .caso-media{clip-path:inset(0 round 12px)}
.js .caso .caso-media .frame-shot img{scale:1.18;transition:scale 1.6s var(--ease-out)}
.js .caso.in .caso-media .frame-shot img{scale:1}
.js .caso.reveal{transform:none;filter:none}

/* ---------- 12. Destellos naranjos al hacer clic ---------- */
.mv-chispas{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:200}
.mv-chispa{position:absolute;left:0;top:0;width:2px;height:12px;margin:-6px 0 0 -1px;border-radius:2px;background:var(--spark);transform-origin:50% 50%}

/* ---------- 13. Cifras del hero: una línea crece bajo cada una ---------- */
.hero-stats > div{position:relative}
.hero-stats > div::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:56px;background:var(--spark);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms + .3s)}
.hero-stats > div + div::before{left:20px}
.hero-stats > div.in::before{transform:scaleX(1)}

/* ---------- 14. Enlaces con flecha: subrayado que corre ---------- */
.link-bait{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease-out),color var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){ .link-bait:hover{background-size:100% 1px} }

/* Botones: se hunden al presionar. */
.btn:active{transform:scale(.97)}

/* ---------- Reducir movimiento: todo quieto, solo cambios de opacidad ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mv-w{transform:none!important;transition:none}
  .js .reveal:not(.mv-split),.js .tarjeta.reveal{transform:none;filter:none}
  .obra-item{translate:none;--mv-entra:0px}
  .js .obra .obra-item{opacity:1}
  .js .caso .caso-media{clip-path:none}
  .js .caso .caso-media .frame-shot img{scale:1}
  .collage > img,.collage .collage-b,.metodo-linea::after{animation:none!important}
  .metodo-linea::after{transform:none}
  html.mv-baja .site-header{translate:none}
  .servicio-preview{rotate:none}
  .mv-chispas{display:none}
}