/* ==========================================================================
   SecureWork · Motion v1
   Requiere brand/tokens.css. Se activa con atributos data-sw-* (ver MOTION.md).
   Regla de oro: el movimiento explica (llega, se engancha, queda firme).
   ========================================================================== */

/* ---------- 1. Firma: "el enganche" ----------
   Los dos ganchos del símbolo llegan desde lados opuestos y se trancan,
   como el mosquetón de un arnés. Se usa en loader, hero y cierre.        */
.sw-enganche svg, .sw-loader svg { overflow: visible; }  /* los ganchos viajan fuera del recuadro */
.sw-enganche .sw-hook { transform-box: fill-box; transform-origin: center; }

.sw-enganche.is-visible .sw-hook--a {
  animation: sw-gancho-a var(--sw-d-firma) var(--sw-ease-enganche) both;
}
.sw-enganche.is-visible .sw-hook--b {
  animation: sw-gancho-b var(--sw-d-firma) var(--sw-ease-enganche) both;
}
.sw-enganche.is-visible svg {
  animation: sw-clic 380ms var(--sw-ease-rebote) calc(var(--sw-d-firma) * .62) both;
}
@keyframes sw-gancho-a {
  0%   { transform: translate(38%, -38%) rotate(-24deg); opacity: 0; }  /* gancho superior: llega desde arriba-derecha */
  35%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes sw-gancho-b {
  0%   { transform: translate(-38%, 38%) rotate(-24deg); opacity: 0; } /* gancho inferior: llega desde abajo-izquierda */
  35%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes sw-clic {            /* el pequeño "clic" al trancar */
  0%   { transform: scale(1); }
  45%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* Loader: el enganche en bucle (solo si la carga pasa de ~400 ms) */
.sw-loader .sw-hook { transform-box: fill-box; transform-origin: center; }
.sw-loader .sw-hook--a { animation: sw-loop-a 1.6s var(--sw-ease-suave) infinite; }
.sw-loader .sw-hook--b { animation: sw-loop-b 1.6s var(--sw-ease-suave) infinite; }
@keyframes sw-loop-a { 0%,100% { transform: none; } 50% { transform: translate(12%, -12%); } }
@keyframes sw-loop-b { 0%,100% { transform: none; } 50% { transform: translate(-12%, 12%); } }

/* ---------- 2. Aparición al hacer scroll ---------- */
[data-sw-reveal] {
  opacity: 0;
  transform: translateY(var(--sw-desplazamiento));
  transition:
    opacity var(--sw-d-largo) var(--sw-ease-enganche),
    transform var(--sw-d-largo) var(--sw-ease-enganche);
  transition-delay: calc(var(--sw-i, 0) * var(--sw-escalonado));
}
[data-sw-reveal="izq"] { transform: translateX(calc(var(--sw-desplazamiento) * -1.5)); }
[data-sw-reveal="der"] { transform: translateX(calc(var(--sw-desplazamiento) * 1.5)); }
[data-sw-reveal="escala"] { transform: scale(.96); }
[data-sw-reveal].is-visible { opacity: 1; transform: none; }

/* Titulares que entran palabra por palabra (el JS envuelve cada palabra) */
.sw-palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } /* deja ver la 'p' y la 'g' */
.sw-palabra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--sw-d-largo) var(--sw-ease-enganche);
  transition-delay: calc(var(--sw-w, 0) * 45ms);
}
[data-sw-split].is-visible .sw-palabra > span { transform: none; }

/* ---------- 3. Corte diagonal (herencia de la presentación) ----------
   La foto o el panel se "abre" en diagonal al entrar en pantalla.        */
[data-sw-diagonal] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 1000ms var(--sw-ease-enganche);
}
[data-sw-diagonal].is-visible {
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- 4. Micro-interacciones ---------- */
.sw-boton {
  transition:
    background-color var(--sw-d-micro) var(--sw-ease-suave),
    transform var(--sw-d-corto) var(--sw-ease-enganche),
    box-shadow var(--sw-d-corto) var(--sw-ease-suave);
}
.sw-boton:hover { transform: translateY(-2px); }
.sw-boton:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.sw-boton .sw-flecha { display: inline-block; transition: transform var(--sw-d-corto) var(--sw-ease-enganche); }
.sw-boton:hover .sw-flecha { transform: translateX(4px); }

.sw-card {
  transition:
    transform var(--sw-d-medio) var(--sw-ease-enganche),
    box-shadow var(--sw-d-medio) var(--sw-ease-suave),
    border-color var(--sw-d-micro) linear;
}
@media (hover: hover) {
  .sw-card:hover { transform: translateY(-4px); box-shadow: var(--sw-sombra-alta); border-color: var(--sw-accion); }
}

:focus-visible { outline: 2px solid var(--sw-accion, #2DCDB9); outline-offset: 3px; border-radius: 4px; }

/* Punto "en vivo" para disponibilidad / urgencia */
.sw-pulso { position: relative; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.sw-pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  animation: sw-pulso 1.8s var(--sw-ease-salida) infinite;
}
@keyframes sw-pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

/* Cinta continua (marquee) de empresas o estados */
.sw-cinta { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sw-cinta__pista { display: flex; gap: var(--sw-e-7); width: max-content; animation: sw-cinta 40s linear infinite; }
.sw-cinta:hover .sw-cinta__pista { animation-play-state: paused; }
@keyframes sw-cinta { to { transform: translateX(-50%); } }

/* Línea de progreso de los 3 pasos (se llena con --sw-progreso 0→1 desde JS) */
.sw-progreso { height: 2px; background: var(--sw-borde); position: relative; overflow: hidden; }
.sw-progreso::after {
  content: ""; position: absolute; inset: 0; background: var(--sw-accion);
  transform: scaleX(var(--sw-progreso, 0)); transform-origin: left;
}

/* ---------- 5. Accesibilidad: movimiento reducido ----------
   Quien pidió menos movimiento ve todo, en su lugar, sin desplazamientos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-sw-reveal], .sw-palabra > span { opacity: 1 !important; transform: none !important; }
  [data-sw-diagonal] { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%) !important; }
  .sw-cinta__pista { animation: none !important; }
}