/* Vista previa local: movimiento editorial y microinteracciones. */
:root {
  --scroll-progress: 0%;
  --pointer-x: 50%;
  --pointer-y: 30%;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

body::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: var(--scroll-progress);
  height: 3px;
  background: linear-gradient(90deg, #176ab3, #65b9ff);
  box-shadow: 0 0 14px rgba(23, 106, 179, .45);
  pointer-events: none;
}

.site-header {
  transition: min-height .35s var(--motion-ease), box-shadow .35s, background .35s;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 35px rgba(23, 52, 96, .09);
  backdrop-filter: blur(16px) saturate(145%);
}

.site-header.is-scrolled .header-inner { min-height: 68px; }
.header-inner { transition: min-height .35s var(--motion-ease); }
.brand img { transition: transform .45s var(--motion-ease), filter .45s; }
.brand:hover img { transform: rotate(-5deg) scale(1.08); filter: drop-shadow(0 8px 9px rgba(23, 106, 179, .22)); }

.nav > a:not(.nav-contact) { position: relative; }
.nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: #176ab3;
  transition: right .3s var(--motion-ease);
}
.nav > a:not(.nav-contact):hover::after { right: 0; }

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}

.hero::before {
  width: 520px;
  height: 520px;
  left: calc(var(--pointer-x) - 620px);
  top: calc(var(--pointer-y) - 360px);
  background: radial-gradient(circle, rgba(71, 163, 245, .18), rgba(71, 163, 245, 0) 68%);
  transition: left 1.2s var(--motion-ease), top 1.2s var(--motion-ease);
}

.hero::after {
  width: 440px;
  height: 440px;
  right: -190px;
  bottom: -220px;
  border: 1px solid rgba(23, 106, 179, .12);
  box-shadow: 0 0 0 45px rgba(23, 106, 179, .025), 0 0 0 90px rgba(23, 106, 179, .018);
  animation: orbital-drift 10s ease-in-out infinite alternate;
}

.motion-enabled .hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
}

.motion-enabled.is-ready .hero-copy > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .75s var(--motion-ease), transform .75s var(--motion-ease);
}
.motion-enabled.is-ready .hero-copy > :nth-child(1) { transition-delay: .08s; }
.motion-enabled.is-ready .hero-copy > :nth-child(2) { transition-delay: .16s; }
.motion-enabled.is-ready .hero-copy > :nth-child(3) { transition-delay: .25s; }
.motion-enabled.is-ready .hero-copy > :nth-child(4) { transition-delay: .34s; }
.motion-enabled.is-ready .hero-copy > :nth-child(5) { transition-delay: .43s; }

.motion-enabled .hero-panel {
  opacity: 0;
  transform: translateY(32px) scale(.985);
  transform-style: preserve-3d;
}

.motion-enabled.is-ready .hero-panel {
  opacity: 1;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0) scale(1);
  transition: opacity .9s .3s var(--motion-ease), transform .28s ease-out, box-shadow .35s;
}

.hero-panel:hover { box-shadow: 0 30px 65px rgba(22, 60, 120, .2); }
.hero-panel::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: -60% 0 auto;
  height: 65%;
  background: linear-gradient(180deg, transparent, rgba(132, 205, 255, .11), transparent);
  transform: skewY(-7deg);
  animation: panel-scan 6s 1.3s ease-in-out infinite;
  pointer-events: none;
}

.panel-steps > div {
  transition: transform .35s var(--motion-ease), background .35s, padding .35s;
}
.panel-steps > div.is-active {
  background: linear-gradient(90deg, rgba(140, 197, 255, .12), transparent);
  transform: translateX(8px);
  padding-inline: 11px 5px;
}
.panel-steps > div.is-active i {
  animation: dot-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 7px rgba(140, 197, 255, .11);
}

.button,
.nav-contact {
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--motion-ease), background .25s, box-shadow .28s;
}
.button::before,
.nav-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .65s var(--motion-ease);
}
.button:hover::before,
.nav-contact:hover::before { transform: translateX(130%); }
.button:hover,
.nav-contact:hover { box-shadow: 0 12px 28px rgba(23, 86, 163, .2); }
.button span,
.nav-contact span,
.text-link span,
.contact-action > span:last-child { transition: transform .3s var(--motion-ease); }
.button:hover span,
.nav-contact:hover span,
.contact-action:hover > span:last-child { transform: translate(3px, -3px); }
.text-link:hover span { transform: translateY(4px); }

.motion-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-item {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--motion-ease), box-shadow .35s, border-color .35s;
}
.service-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#176ab3, #65b9ff);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--motion-ease);
}
.service-item:hover {
  transform: translateY(-7px);
  border-color: #b5d5f3;
  box-shadow: 0 22px 46px rgba(23, 52, 96, .12);
}
.service-item:hover::before { transform: scaleY(1); }
.service-item h3 { transition: color .25s, transform .3s var(--motion-ease); }
.service-item:hover h3 { color: #176ab3; transform: translateX(4px); }

.client-logo {
  position: relative;
  transition: transform .35s var(--motion-ease), box-shadow .35s, filter .35s;
}
.client-logo > img {
  display: block;
  width: auto;
  max-width: 58%;
  max-height: 38px;
  object-fit: contain;
}
.client-logo.oracle > img { max-width: 48%; max-height: 30px; }
.client-logo.uber > img { max-width: 34%; max-height: 38px; }
.client-logo.paypal > img { max-width: 46%; max-height: 36px; }
.client-logo.copec > img { max-width: 46%; max-height: 34px; }
.client-logo:hover {
  z-index: 1;
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 18px 35px rgba(23, 52, 96, .11);
  filter: saturate(1.15);
}

.method-aside,
.contact-card {
  transition: transform .45s var(--motion-ease), box-shadow .45s;
}
.method-aside:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(23, 52, 96, .11); }
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px rgba(5, 28, 65, .28); }
.cert-list span { transition: color .25s, background .25s, border-color .25s, transform .25s; }
.cert-list span:hover { color: #fff; background: #176ab3; border-color: #176ab3; transform: translateY(-3px); }

@keyframes panel-scan {
  0%, 18% { top: -75%; opacity: 0; }
  30% { opacity: 1; }
  62% { top: 120%; opacity: .85; }
  75%, 100% { top: 120%; opacity: 0; }
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(.85); }
  50% { transform: scale(1.35); }
}
@keyframes orbital-drift {
  to { transform: translate(-32px, -20px) rotate(8deg); }
}

@media (max-width: 800px) {
  .site-header.is-scrolled .header-inner { min-height: 62px; }
  .hero::before { opacity: .65; }
  .motion-enabled.is-ready .hero-panel { transform: translateY(0); }
  .service-item:hover,
  .client-logo:hover,
  .method-aside:hover,
  .contact-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .hero::after,
  .hero-panel::after,
  .panel-steps > div.is-active i { animation: none; }
  .motion-enabled .hero-copy > *,
  .motion-enabled .hero-panel,
  .motion-enabled [data-reveal] { opacity: 1; transform: none; transition: none; }
  .service-item,
  .client-logo,
  .method-aside,
  .contact-card { transition: none; }
}