/* Selected local adaptations; full source mapping and notices in ../THIRD_PARTY_NOTICES.md. */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --motion-ease: cubic-bezier(.22,1,.36,1);
}
.reading-progress { position:fixed; inset:0 0 auto; height:2px; z-index:90; pointer-events:none; }
.reading-progress span { display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--motion-ease); }
.nav-links { transform-origin:top center; }
.js .nav-links.is-closing { display:grid; pointer-events:none; }
dialog { transform-origin:center; }
dialog[data-closing] { pointer-events:none; }
button,.pill,.text-link { transition:background-color 160ms ease, color 160ms ease, filter 160ms ease; }
button:focus-visible,.pill:focus-visible { box-shadow:0 0 0 5px #0068d915; }
/* The existing phone stays put; only its changing content slides. */
.app-motion-screen { min-height:310px; }
.app-motion-screen #app-screen-title { min-height:97px; }
.app-motion-screen .screen-detail { min-height:63px; }
.app-motion-screen .screen-feature { min-height:158px; }
.demo-phone { min-height:510px; }
.step-motion-track { display:flex; gap:7px; height:10px; align-items:center; margin-top:16px; }
.step-motion-track i { display:block; width:5px; height:5px; border-radius:20px; background:#8997a5; transition:width 420ms var(--motion-ease),background-color 260ms ease; }
.step-motion-track i[data-state="active"] { width:41px; background:#253f59; }
.step-motion-track i[data-state="past"] { background:#253f59; }
.stage-picker { position:relative; }
.selection-indicator { position:absolute; left:-7px; top:0; width:3px; border-radius:3px; background:var(--blue); pointer-events:none; transition:transform 250ms var(--motion-ease),height 250ms var(--motion-ease); }
.pipeline-stage::after { transition:color 250ms ease,opacity 250ms ease; }
.pipeline-stage[data-passed="true"]::after { color:#bddaff; }
.connector-progress { position:absolute; bottom:-3px; left:0; height:3px; width:100%; background:#bddaff; transform-origin:left; transform:scaleX(0); transition:transform 420ms var(--motion-ease); }
.pipeline-stage[data-passed="true"] .connector-progress { transform:scaleX(1); }
.motion-check { display:inline-block; width:20px; height:20px; margin-left:8px; color:#0055ad; vertical-align:middle; }
.motion-check path { stroke-dasharray:24; stroke-dashoffset:0; }
.motion-check[hidden] { display:none; }
.basket { min-height:350px; }
@media(max-width:760px) {
  :root { --stagger-dur:380ms; --stagger-distance:8px; --stagger-stagger:30ms; }
}
@media(prefers-reduced-motion:reduce) {
  .reading-progress span,.step-motion-track i,.selection-indicator,.connector-progress { transition:none!important; }
}


/* v13 — portada (data-home-v13). Las páginas de servicio conservan el menú en flujo de v11/v12.
   Menú Servicios como panel flotante sobre la página: no empuja el contenido (posición absoluta bajo la cabecera, que
   no cambia de alto). Entrada y salida solo con opacidad y translate (el navegador las compone) mediante transiciones
   CSS: se invierten solas desde el punto en que estén si se abre y cierra rápido. @starting-style da el punto de
   partida al pasar de display:none a grid; transition-behavior: allow-discrete mantiene el panel visible mientras se
   desvanece. Sin JavaScript el menú sigue en flujo y visible (reglas bajo .js). */
.js body[data-home-v13] .nav-inner { position:static; }
.js body[data-home-v13] .nav-links {
  position:absolute; top:100%; left:0; right:0; z-index:1; width:auto; margin:0;
  gap:6px 32px; padding:14px max(32px,calc((100% - 1120px)/2)) 30px;
  background:#f5f5f7; box-shadow:0 28px 36px -30px #10182873, 0 1px 0 #d7dbe0;
  max-height:calc(100svh - 56px); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; translate:0 -8px;
  transition:opacity 170ms ease-in, translate 200ms ease-in, display 200ms allow-discrete;
}
.js body[data-home-v13] .nav-links.is-open {
  opacity:1; translate:0 0;
  transition:opacity 240ms var(--motion-ease), translate 320ms var(--motion-ease), display 0s allow-discrete;
}
@starting-style { .js body[data-home-v13] .nav-links.is-open { opacity:0; translate:0 -8px; } }
/* Enlaces escalonados (50 ms + 40 ms por enlace) al abrir; al cerrar se van juntos y deprisa. */
.js body[data-home-v13] .nav-links a { opacity:0; translate:0 -6px; transition:opacity 120ms ease-in, translate 140ms ease-in; }
.js body[data-home-v13] .nav-links.is-open a {
  opacity:1; translate:0 0;
  transition:opacity 260ms var(--motion-ease) var(--link-delay,50ms), translate 340ms var(--motion-ease) var(--link-delay,50ms);
}
@starting-style { .js body[data-home-v13] .nav-links.is-open a { opacity:0; translate:0 -6px; } }
body[data-home-v13] .nav-links a:nth-child(2) { --link-delay:90ms; }
body[data-home-v13] .nav-links a:nth-child(3) { --link-delay:130ms; }
body[data-home-v13] .nav-links a:nth-child(4) { --link-delay:170ms; }
body[data-home-v13] .nav-links a:nth-child(5) { --link-delay:210ms; }
body[data-home-v13] .nav-links a:nth-child(6) { --link-delay:250ms; }
/* Si el teclado entra en el menú durante el escalonado, los enlaces quedan en su estado final al instante. */
.js body[data-home-v13] .nav-links.is-open:focus-within a { transition-duration:0s; transition-delay:0s; }
/* Velo ligero sobre la página mientras el panel está abierto (solo opacidad; sin backdrop-filter). Un clic en él
   cierra el menú (site.js). La cabecera (z-index 20) queda por encima. */
.js body[data-home-v13]::after {
  content:""; position:fixed; inset:0; z-index:19; background:#0c121c38;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 200ms ease, visibility 0s linear 200ms;
}
.js body[data-home-v13]:has(.nav-links.is-open)::after { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 260ms ease, visibility 0s; }
body[data-home-v13] .menu-toggle span { display:inline-block; transition:transform 260ms var(--motion-ease); }
@media(max-width:760px) {
  .js body[data-home-v13] .nav-links { grid-template-columns:1fr; gap:0; padding:4px 20px 18px; }
}
/* Consulta: la barra de desplazamiento conserva su hueco aunque el diálogo bloquee el scroll de la página
   (body.modal-open { overflow:hidden }), así el contenido no salta en horizontal al abrir y cerrar. */
html:has(> body[data-home-v13]) { scrollbar-gutter:stable; }
@keyframes v13-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes v13-backdrop-out { from { opacity:1; } to { opacity:0; } }
body[data-home-v13] dialog[open]::backdrop { animation:v13-backdrop-in 180ms ease-out both; }
body[data-home-v13] dialog[open][data-closing]::backdrop { animation:v13-backdrop-out 130ms ease-in both; }
@media(prefers-reduced-motion:reduce) {
  body[data-home-v13] dialog[open]::backdrop,
  body[data-home-v13] dialog[open][data-closing]::backdrop { animation:none!important; }
}


/* v17 — microinteracciones de botones y enlaces de acción (las siete páginas de Alphyx).
   Solo transform (translate/scale/rotate) y opacity, más los cambios de color que ya existían. Todo lo que depende del
   hover va bajo (hover:hover) and (pointer:fine); la pulsación funciona también al tocar. Con movimiento reducido no hay
   desplazamientos, escalas, giros ni brillo: queda el cambio de color y el anillo de foco (estático, inmediato: la
   transición de box-shadow del foco se retiró arriba). Sin will-change permanente, sin bucles ni reproducción automática.
   Ningún efecto cambia cajas de diseño: las capas nuevas son pseudo-elementos absolutos sin eventos de puntero.
   La flecha que avanza adapta la idea «learn more hover» de Transitions.dev (desplazamiento corto, 350 ms, mismo easing;
   bajo sus términos, no MIT: ver ../THIRD_PARTY_NOTICES.md). */

/* Flecha de los enlaces «Explorar el ejemplo», «Abrir …» y «Ver la tienda»: glifo generado con texto alternativo vacío
   (no cambia el nombre accesible), visible también sin JavaScript y con movimiento reducido. */
.pilot-link::after,.pw-open::after,.at-link::after,.sp-link::after,.ta-link::after,.aa-link::after,.me-link::after {
  content:"›" / ""; display:inline-block; margin-left:.3em; font-size:1.2em; line-height:1; pointer-events:none;
}
.intro-link span { display:inline-block; }

@media (prefers-reduced-motion:no-preference) {
  /* Pulsación: escala breve (entrada ~90 ms, vuelta 220 ms). Sustituye al filter:brightness en estos controles. */
  .pill,.menu-toggle,.dialog-close,.me-seg,.me-step {
    transition-property:background-color,color,border-color,filter,translate,scale,rotate;
    transition-duration:160ms,160ms,160ms,160ms,240ms,220ms,320ms;
    transition-timing-function:ease,ease,ease,ease,var(--motion-ease),var(--motion-ease),var(--motion-ease);
  }
  .pill:active,.menu-toggle:active,.dialog-close:active,.me-seg:active,.me-step:active {
    scale:.97; filter:none;
    transition-duration:160ms,160ms,160ms,160ms,240ms,90ms,320ms;
    transition-timing-function:ease,ease,ease,ease,var(--motion-ease),ease-out,var(--motion-ease);
  }
  /* Flecha que avanza: también con el foco de teclado (el anillo de foco sigue siendo el indicador principal). */
  .pilot-link::after,.pw-open::after,.at-link::after,.sp-link::after,.ta-link::after,.aa-link::after,.me-link::after,
  .intro-link span { transition:translate 350ms var(--motion-ease); }
  .pilot-link:focus-visible::after,.pw-open:focus-visible::after,.at-link:focus-visible::after,.sp-link:focus-visible::after,
  .ta-link:focus-visible::after,.aa-link:focus-visible::after,.me-link:focus-visible::after { translate:3px 0; }
  .intro-link:focus-visible span { translate:0 3px; }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* Píldoras: leve elevación + velo de brillo (solo opacidad) bajo el texto. Sin sombra animada. */
  .pill { position:relative; isolation:isolate; }
  .pill::before {
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg,#ffffff24,#fff0 55%); opacity:0; transition:opacity 220ms ease;
  }
  .pill.outline::before { background:linear-gradient(180deg,#ffffffd9,#fff0 72%); }
  .night .pill.outline::before,.detail-hero .pilot-hero-link::before,.at-hero .at-hero-link::before {
    background:linear-gradient(180deg,#ffffff1c,#fff0 62%);
  }
  .pill:hover { translate:0 -1.5px; }
  .pill:hover::before { opacity:1; }
  .pill:active { translate:0 0; }
  /* Brillo que sigue al cursor, solo en las píldoras rellenas: mancha radial recortada por la píldora y movida con
     transform; motion.js escribe --glow-x/--glow-y desde el coordinador de cuadros solo mientras el puntero está
     encima (data-glow). Sin JavaScript o con movimiento reducido no aparece. */
  .pill:not(.outline) { overflow:clip; }
  .pill:not(.outline)::after {
    content:""; position:absolute; left:-60px; top:-60px; width:120px; height:120px; z-index:-1; border-radius:50%;
    pointer-events:none; background:radial-gradient(closest-side,#ffffff24,#fff0);
    transform:translate(var(--glow-x,0px),var(--glow-y,0px)); opacity:0; transition:opacity 260ms ease;
  }
  .pill[data-glow]:hover::after { opacity:1; }

  /* Flecha que avanza al pasar el puntero. */
  .pilot-link:hover::after,.pw-open:hover::after,.at-link:hover::after,.sp-link:hover::after,.ta-link:hover::after,
  .aa-link:hover::after,.me-link:hover::after { translate:3px 0; }
  .intro-link:hover span { translate:0 3px; }

  /* Subrayado que se dibuja de izquierda a derecha (scaleX) en menú, navegación de producto y footer. Sustituye al salto
     de text-decoration solo con puntero fino; los créditos del footer conservan su subrayado permanente. */
  .nav-links a,.nav-overview,.product-links>a:not(.pill),.footer-top a:not(.wordmark),.footer-services a { position:relative; }
  .nav-links a::after,.nav-overview::after,.product-links>a:not(.pill)::after,.footer-top a:not(.wordmark)::after,
  .footer-services a::after {
    content:""; position:absolute; left:0; right:0; top:calc(50% + .72em); height:1px; background:currentColor;
    pointer-events:none; transform:scaleX(0); transform-origin:left center; transition:transform 200ms var(--motion-ease);
  }
  .nav-links a::after { top:auto; bottom:-1px; }
  .nav-links a:hover,.nav-overview:hover,.product-links>a:not(.pill):hover,.footer-top a:not(.wordmark):hover,
  .footer-services a:hover { text-decoration:none; }
  .nav-links a:hover::after,.nav-overview:hover::after,.product-links>a:not(.pill):hover::after,
  .footer-top a:not(.wordmark):hover::after,.footer-services a:hover::after,
  .nav-links a:focus-visible::after,.nav-overview:focus-visible::after,.product-links>a:not(.pill):focus-visible::after,
  .footer-top a:not(.wordmark):focus-visible::after,.footer-services a:focus-visible::after { transform:scaleX(1); }

  /* «Servicios» y cierre del diálogo: fondo propio de hover (pseudo-elemento, solo opacidad); la × gira 90°. */
  .menu-toggle { position:relative; isolation:isolate; }
  .dialog-close { isolation:isolate; }
  .menu-toggle::before,.dialog-close::before {
    content:""; position:absolute; z-index:-1; pointer-events:none; opacity:0; transition:opacity 180ms ease;
  }
  .menu-toggle::before { inset:5px -6px; border-radius:99px; background:#e7e8ec; }
  .dialog-close::before { inset:0; border-radius:50%; background:#e2e4e9; }
  .menu-toggle:hover::before,.dialog-close:hover::before { opacity:1; }
  .dialog-close:hover { rotate:90deg; }
}

/* Pantallas táctiles: el color de hover de las píldoras no se queda pegado después de un toque. */
@media (hover:none) {
  .pill:hover { background:var(--blue); }
  .pill.outline:hover,.night .outline:hover,.detail-hero .pilot-hero-link:hover,.at-hero .at-hero-link:hover { background:transparent; }
}

/* v18 — tarjetas de «servicios relacionados». Mismo lenguaje que v17: transform/opacity, hover solo con puntero fino,
   pulsación también al tocar, nada con movimiento reducido salvo el halo por opacidad. Al pasar el puntero la tarjeta se
   ilumina: halo luminoso (::after) y sombra (::before) que solo cambian de opacidad, brillo radial que sigue al cursor
   (el mismo trabajo del coordinador de v17: motion.js escribe --glow-x/--glow-y solo mientras hay puntero encima,
   data-glow), elevación de 3 px, acercamiento de la imagen (1,04, recortada por .related-media) y flecha que avanza.
   Con :focus-visible, el mismo estado iluminado sin brillo que siga a nada. Ningún efecto cambia cajas de diseño. */
.related-card::before,.related-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.related-card::before{z-index:-1;box-shadow:0 18px 34px -18px #191b2066,0 3px 10px -4px #191b201f}
.related-card::after{z-index:2;box-shadow:inset 0 0 0 1px #0068d952,0 0 0 4px #0068d917}
.related-surface::after{
  content:"";position:absolute;left:-150px;top:-150px;width:300px;height:300px;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#9ccbff47,#9ccbff1a 55%,#9ccbff00);transform:translate(var(--glow-x,0px),var(--glow-y,0px));opacity:0;
}
.related-card:focus-visible::before,.related-card:focus-visible::after{opacity:1}
@media (hover:hover) and (pointer:fine) {
  .related-card:hover::before,.related-card:hover::after{opacity:1}
  .related-card[data-glow]:hover .related-surface::after{opacity:1}
}
@media (prefers-reduced-motion:no-preference) {
  .related-card{transition:translate 320ms var(--motion-ease),scale 220ms var(--motion-ease)}
  .related-card::before,.related-card::after{transition:opacity 240ms ease}
  .related-surface::after{transition:opacity 260ms ease}
  .related-media img{transition:scale 520ms var(--motion-ease)}
  .related-arrow{transition:translate 350ms var(--motion-ease)}
  .related-card:focus-visible{translate:0 -3px}
  .related-card:focus-visible .related-media img{scale:1.04}
  .related-card:focus-visible .related-arrow{translate:2px -2px}
  /* Pulsación: escala breve, también al tocar (entrada ~90 ms, vuelta 220 ms). */
  .related-card:active{scale:.98;transition-duration:320ms,90ms;transition-timing-function:var(--motion-ease),ease-out}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .related-card:hover{translate:0 -3px}
  .related-card:hover .related-media img{scale:1.04}
  .related-card:hover .related-arrow{translate:2px -2px}
  .related-card:active{translate:0 -1px}
}