/* ============================================================
   19 · Capa premium de movimiento (sin sección propia; ver 19-premium.js)
   Curvas: --ease-pm = ease-out fuerte (entradas), --ease-pm-io = ease-in-out
   fuerte (lo que se mueve o se descubre en pantalla). Lo de mouse va en
   (hover:hover). Sin prefers-reduced-motion, a pedido del dueño.
   ============================================================ */
:root{--ease-pm:cubic-bezier(.23,1,.32,1);--ease-pm-io:cubic-bezier(.77,0,.175,1)}

/* ---------- 1. títulos: cada palabra sube desde su propia máscara ---------- */
/* el relleno vertical evita cortar tildes de mayúsculas y descendentes */
.pm-p{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .1em;margin:-.12em 0 -.1em}
.pm-p.pm-bloque{display:block}
.pm-p > .pm-i{display:inline-block;transform:translateY(110%) rotate(5deg);transform-origin:0 100%;opacity:0;
  transition:transform 1.1s var(--ease-pm) var(--pm-d,0s),opacity .7s var(--ease-pm) var(--pm-d,0s)}
.pm-p.pm-bloque > .pm-i{display:block}
.pm-vis .pm-p > .pm-i{transform:none;opacity:1}

/* ---------- 2. barra de progreso de lectura ---------- */
.pm-progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;
  transform:scaleX(var(--pm-avance,0));transform-origin:0 50%;
  background:linear-gradient(90deg,#1B5FE0,#3B8BFF 55%,#5FD0FF);box-shadow:0 0 12px rgba(59,139,255,.8)}

/* ---------- 3. profundidad: se levantan en 3D al entrar (una vez) ----------
   base.js pone .vis; aquí solo cambia el punto de partida y la curva. */
.js .pm-prof:is(.rv,.rv-escala),
.js #proyectos .pr-item.pm-prof{transform-origin:50% 100%;
  transition:opacity .9s var(--ease-pm) var(--rv-delay,0s),transform 1.25s var(--ease-pm) var(--rv-delay,0s)}
.js .pm-prof:is(.rv,.rv-escala):not(.vis){transform:perspective(1100px) translate3d(0,72px,0) rotateX(18deg) scale(.94)}
.js .pm-prof.pm-prof-suave:is(.rv,.rv-escala):not(.vis){transform:perspective(1600px) translate3d(0,56px,0) rotateX(9deg) scale(.965)}

/* ---------- 5. servicios: la maqueta se arma pieza por pieza ---------- */
.js #servicios .sv-equipos :is(.eq-laptop,.eq-cel,.eq-card,.eq-graf,.eq-estado){opacity:0;
  transition:opacity .9s var(--ease-pm) var(--pm-e,0s),translate 1.3s var(--ease-pm) var(--pm-e,0s),scale 1.3s var(--ease-pm) var(--pm-e,0s)}
.js #servicios .sv-equipos .eq-laptop{translate:0 12%;--pm-e:.25s}
.js #servicios .sv-equipos .eq-cel{translate:-45% 10%;--pm-e:.55s}
.js #servicios .sv-equipos .eq-card{translate:0 60%;--pm-e:.8s}
.js #servicios .sv-equipos .eq-card:nth-child(2){--pm-e:.88s}
.js #servicios .sv-equipos .eq-card:nth-child(3){--pm-e:.96s}
.js #servicios .sv-equipos .eq-card:nth-child(4){--pm-e:1.04s}
.js #servicios .sv-equipos .eq-graf{scale:.88;--pm-e:1.05s}
.js #servicios .sv-equipos .eq-estado{scale:.88;--pm-e:1.3s}
.js #servicios .sv-equipos.vis :is(.eq-laptop,.eq-cel,.eq-card,.eq-graf,.eq-estado){opacity:1;translate:0 0;scale:1}
/* la línea de la gráfica espera a que su tarjeta aparezca */
.js #servicios .sv-equipos .eq-graf-lin{transition-delay:1.35s}

/* ---------- 6. telón: el medio se descubre de abajo hacia arriba y se asienta ----------
   Los lados y el fondo se abren de más (-200px) para no cortar sombras; al terminar,
   .pm-listo quita el recorte por completo. */
.js .pm-telon{clip-path:inset(100% -200px 0 -200px);transition:clip-path 1.3s var(--ease-pm-io) .1s}
.js .pm-telon.pm-abierto{clip-path:inset(-200px -200px -200px -200px)}
.js .pm-telon.pm-listo{clip-path:none}
.js .pm-telon > picture{display:block;height:100%} /* un <picture> en línea no acepta transformaciones */
.js .pm-telon > :is(img,picture,video,svg,.pd-pant){scale:1.16;transition:scale 2s var(--ease-pm) .1s}
.js .pm-telon.pm-abierto > :is(img,picture,video,svg,.pd-pant){scale:1}

/* ---------- 7. números: dígitos de ancho fijo para que no bailen al contar ---------- */
.pm-num{font-variant-numeric:tabular-nums}

/* ---------- 8. costuras: la línea entre secciones se dibuja desde el centro ---------- */
.js .sec.pm-costura::before{transform:translateX(-50%) scaleX(0);transition:transform 1.5s var(--ease-pm-io)}
.js .sec.pm-costura::after{opacity:0;transition:opacity 1.6s var(--ease-pm) .3s}
.js .sec.pm-costura.pm-en::before{transform:translateX(-50%) scaleX(1)}
.js .sec.pm-costura.pm-en::after{opacity:1}

/* encabezados: etiqueta que se escribe → título palabra por palabra → texto */
.js .cab.rv .eyebrow{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease-pm-io) .05s}
.js .cab.rv.vis .eyebrow{clip-path:inset(0 0 0 0)}
.js .cab.rv > p:not(.eyebrow){opacity:0;translate:0 14px;transition:opacity 1s var(--ease-pm) .45s,translate 1s var(--ease-pm) .45s}
.js .cab.rv.vis > p:not(.eyebrow){opacity:1;translate:0 0}

/* ---------- fondos con paralaje ligado al scroll (sin JS; lo calcula el navegador) ---------- */
@supports (animation-timeline: view()){
  #proceso .pc-fondo picture,#argo-ia .ia-fondo picture,#cotizar .ct-fondo picture,#contacto .ci-fondo > img{
    display:block;animation:pm-paralaje linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  /* base.css pausa las animaciones de secciones fuera de pantalla; esta no gasta nada sin scroll */
  .en-pausa :is(.pc-fondo,.ia-fondo,.ct-fondo) picture{animation-play-state:running!important}
}
@keyframes pm-paralaje{from{translate:0 -6%;scale:1.14}to{translate:0 6%;scale:1.14}}

/* ---------- 4. luz que sigue al cursor dentro de las tarjetas ---------- */
.pm-luz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .35s var(--ease-pm);mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--pm-x,50%) var(--pm-y,50%),rgba(59,139,255,.2),rgba(95,208,255,.06) 35%,transparent 65%)}
.pm-borde{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;padding:1px;
  transition:opacity .35s var(--ease-pm);
  background:radial-gradient(260px circle at var(--pm-x,50%) var(--pm-y,50%),rgba(120,190,255,.95),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover){
  .pm-tarjeta:hover > .pm-luz,.pm-tarjeta:hover > .pm-borde{opacity:1}
}

/* ---------- 10. resplandor que sigue al cursor por toda la página ---------- */
.pm-cursor{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .6s var(--ease-pm);mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(46,123,255,.14),rgba(46,123,255,.045) 40%,transparent 70%);
  will-change:transform}
.pm-cursor.on{opacity:1}
@media (hover:none){ .pm-cursor{display:none} }

/* ---------- 9. botones magnéticos: usan `translate` (el hover ya usa transform) ---------- */
.pm-iman{translate:var(--pm-tx,0) var(--pm-ty,0)}
.pm-iman.pm-suelta{transition-duration:.16s,.7s,.2s,.2s,.2s,.25s,.2s}

/* ---- 3D: las piezas de video entran girando en perspectiva, como pantallas que se acomodan ---- */
@media (prefers-reduced-motion:no-preference){
  .js #servicios .sv-video{transform:perspective(1400px) rotateX(22deg) translateY(40px) scale(.94);opacity:0;transform-origin:50% 100%;
    transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity .9s ease}
  .js #servicios .sv-video.vis{transform:none;opacity:1}
  .js #estudio .es-video{transform:perspective(1400px) rotateY(-16deg) rotateX(6deg) scale(.95);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .js #estudio .es-escena.vis .es-video{transform:perspective(1400px) rotateY(0) rotateX(0) scale(1)}
  .js #movimiento .mv-pieza{transform:perspective(1100px) rotateY(var(--giro,14deg)) translateZ(-40px);opacity:0;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .8s ease}
  .js #movimiento .mv-pieza:nth-child(2){--giro:0deg;transition-delay:.08s}
  .js #movimiento .mv-pieza:nth-child(3){--giro:-14deg;transition-delay:.16s}
  .js #movimiento .mv-pieza.vis{transform:none;opacity:1}
}