/* =============================================================================
   Vault Solutions — Capa cinemática (inspirada en Lusion/oryzo, adaptada al sitio)
   · Cursor propio (punto + anillo con inercia)
   · Botones magnéticos
   · Parallax del hero reactivo a scroll + cursor
   · Titular que sube palabra a palabra
   · Reveals con más cine (desenfoque + desplazamiento)
   Solo MEJORA lo existente. Se desactiva con prefers-reduced-motion y en táctil.
   ============================================================================= */

/* ---------------------------------------------------------- Cursor propio --- */
.has-cc,
.has-cc * {
  cursor: none !important;
}

.cc-dot,
.cc-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 700;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

.cc-dot {
  width: 7px;
  height: 7px;
  background: oklch(0.85 0.17 91);
  box-shadow: 0 0 10px oklch(0.8 0.17 91 / 0.7);
  transition: width .2s var(--ease-out), height .2s var(--ease-out), opacity .3s;
}

.cc-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid oklch(0.78 0.16 91 / 0.6);
  transition: width .28s var(--ease-out), height .28s var(--ease-out),
    border-color .28s, background-color .28s, opacity .3s;
}

.cc-hot .cc-ring {
  width: 66px;
  height: 66px;
  border-color: oklch(0.82 0.16 91 / 0.95);
  background: oklch(0.78 0.16 91 / 0.1);
}

.cc-hot .cc-dot {
  width: 0;
  height: 0;
}

.cc-down .cc-ring {
  width: 25px;
  height: 25px;
  border-color: oklch(0.85 0.17 91);
}

/* ------------------------------------------------------- Botones magnéticos --- */
[data-magnetic] {
  transition: transform .3s var(--ease-out);
  will-change: transform;
}

/* ------------------------------------------------ Titular palabra a palabra --- */
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.split .word__in {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .85s var(--ease-out);
}

.split.is-revealed .word__in {
  transform: translateY(0);
}

/* =============================================================================
   APERTURA Y ENTRADAS — estilo Apple (27-jul-2026)
   Referencia: apple.com/la/mac. Su contenido NACE oculto (opacity 0 +
   translateY 30px) y entra en cascada tanto al abrir la página como al ir
   bajando. Tiempos y curva tomados de su propia hoja de estilos:
     opacity .4s cubic-bezier(0,0,.2,1) · transform .5s cubic-bezier(0,0,.2,1)
   y un escalonado de ~90ms entre elementos (ellos usan 80ms). Los valores
   viven en styles.css como --in-*.

   Dos estados sostienen lo mismo, en relevo:
   · html.si-intro …  → lo pone el guion del <head>, ANTES del primer pintado,
                        para que nada se vea antes de entrar (si esperáramos a
                        este archivo, el contenido ya estaría pintado y el
                        fundido se vería como un parpadeo).
   · .has-reveal .r-up → lo pone cinematic.js al arrancar; releva a si-intro
                        en el mismo fotograma, sin repintar en medio.
   La lista de selectores de abajo debe ser LA MISMA que IN_SEL en
   cinematic.js: si se toca una, se toca la otra.
   ============================================================================= */
html.si-intro .sec-head,
html.si-intro .page-head,
html.si-intro .catalog-head,
html.si-intro .cat-tile,
html.si-intro .flow__step,
html.si-intro .deck,
html.si-intro .deck-hero__more,
html.si-intro .demo,
html.si-intro .paypanel,
html.si-intro .paysec__side,
html.si-intro .support2__copy,
html.si-intro .chat,
html.si-intro .faq-aside,
html.si-intro .faq details,
html.si-intro .pd-rotu,
html.si-intro .pd-cap__in,
html.si-intro .brandstrip {
  opacity: 0;
  transform: translateY(var(--in-shift));
}

.has-reveal .r-up {
  opacity: 0;
  transform: translateY(var(--in-shift));
  transform-origin: 50% 100%;
}

/* Viniendo de ABAJO hacia arriba, la entrada baja desde arriba (la clase la
   pone cinematic.js según la dirección del scroll). */
.has-reveal .r-up.r-from-top {
  transform: translateY(calc(var(--in-shift) * -0.8));
}

.has-reveal .r-up.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--in-fade) var(--in-ease), transform var(--in-move) var(--in-ease);
}

/* -------------------------------------- ENTRADA LATERAL (12-ago-2026) -------
   Los rótulos de la vitrina («PRODUCTOS DESTACADOS», «MÁS LICENCIAS») no suben:
   entran DESLIZANDO desde la izquierda. La razón es que su forma ya apunta hacia
   allí —el corte diagonal de clip-path y el canto dorado del border-left están
   los dos en ese lado—, así que el gesto sigue la pieza en vez de contradecirla.
   Es el mismo lenguaje de la referencia de tienda que pidió el dueño: la
   pestaña se despliega hacia dentro.

   El :not(.is-in) no es adorno. Sin él, esta regla y `.r-up.r-from-top` tienen
   el mismo peso y gana la última escrita, con lo que un rótulo alcanzado
   subiendo entraría por donde no toca. Con :not() pesa más y manda siempre. */
.has-reveal .r-up.r-side:not(.is-in) {
  transform: translateX(calc(var(--in-shift) * -1.8));
}

/* ------------------------------- PARALLAX DE PORTADAS (12-ago-2026) ---------
   La imagen del banner se mueve MENOS que la página, así que al bajar parece
   quedarse atrás dentro de su marco y la caja gana profundidad. El recorte lo
   hace `overflow: hidden` de .pd-banner__caja, que ya estaba.

   El escalado del 14% no es estético: el desplazamiento es de ±6% y sin ese
   margen la imagen dejaría ver el fondo de la caja por arriba o por abajo al
   llegar a los extremos del recorrido. 6+6 = 12 < 14. */
.pd-par {
  will-change: transform;
}

/* ------------------------------------------- Tilt 3D que sigue al cursor ----- */
/* cinematic.js añade .is-tilt y pinta --mx/--my; el propio JS escribe el
   transform (perspectiva + inclinación). Aquí: respuesta inmediata + brillo. */
.is-tilt {
  position: relative;
  transition: transform .14s ease-out !important;
}

.is-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), oklch(1 0 0 / 0.22), transparent 55%);
}

/* Los logos permanecen estables: se eliminan animaciones infinitas para reducir
   trabajo continuo de composición en catálogo y detalle. */
.lic-card__glyph {
  animation: none;
}

/* ----------------------------------------------------------- Hero parallax --- */
.hero__stage {
  will-change: transform;
}

.hero__content {
  will-change: transform;
}

/* En táctil la distancia y el tiempo son menores: la pantalla es corta y el
   dedo va rápido, una entrada larga se sentiría lenta. */
@media (hover: none),
(max-width: 960px) {
  :root {
    --in-shift: 20px;
    --in-fade: 0.32s;
    --in-move: 0.4s;
    --in-step: 70ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .split .word__in {
    transform: none;
    transition: none;
  }

  [data-magnetic] {
    transition: none;
  }

  .has-reveal .r-up {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Incluye .r-side: con movimiento reducido tampoco se desliza. */
  .has-reveal .r-up.r-side:not(.is-in) {
    transform: none;
  }

  /* El parallax no llega a arrancar (cinematic.js sale antes), pero si una
     portada quedó desplazada al activarse el ajuste, vuelve a su sitio. */
  .pd-par {
    transform: none !important;
    will-change: auto;
  }

  /* Red de seguridad: el guion del <head> ya evita poner si-intro con
     movimiento reducido, pero si llegara a estar, nada queda oculto. */
  html.si-intro * {
    opacity: 1 !important;
    transform: none !important;
  }

  .is-tilt::after {
    content: none;
  }

  .lic-card__glyph {
    animation: none !important;
  }
}

@media (hover: none),
(pointer: coarse) {

  .has-cc,
  .has-cc * {
    cursor: auto !important;
  }

  .cc-dot,
  .cc-ring {
    display: none;
  }
}