/* ============================================================
   SERVICHECK — CAPA PREMIUM (v1)
   Archivo aditivo. No modifica servicheck.css.
   Se puede desactivar quitando el <link> de este archivo.
   ============================================================ */

/* Lenis controla el scroll suave; el smooth-scroll nativo del CSS
   original se desactiva aquí para que no compitan entre sí (esa
   pelea es lo que se sentía "lento"/pesado). */
html{scroll-behavior:auto !important}

/* ---- Scrollbar de marca (WebKit + Firefox) ---- */
html{scrollbar-color:var(--blue) var(--navy-deep);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--navy-deep)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--navy-soft));border-radius:10px;border:2px solid var(--navy-deep)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--blue-2),var(--blue))}

/* ---- Subrayado de nav en hover (crece desde el centro) ---- */
.nav-links a:not(.active){position:relative}
.nav-links a:not(.active)::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:var(--blue-2);transform:scaleX(0);transform-origin:center;
  transition:transform .38s var(--ease);
}
.nav-links a:not(.active):hover::after{transform:scaleX(1)}

/* ---- Botones: preparados para el efecto magnético (JS) ---- */
.btn-primary,.btn-ghost,.btn-dark,.btn-green{will-change:transform}

/* ---- Tarjeta del cheque: preparada para tilt 3D (JS) ---- */
.cheque-stage{perspective:1000px}
.cheque-svg{transform-style:preserve-3d;will-change:transform}

/* ---- Overlay de transición entre páginas ---- */
#pgt{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(160deg,var(--navy-deep),#04070f);
  transform:scaleY(1);transform-origin:top;
  pointer-events:none;
}
#pgt::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 50%,#000 30%,transparent 78%);
}
#pgt .pgt-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Sora',sans-serif;font-weight:800;font-size:15px;letter-spacing:.3em;
  color:rgba(255,255,255,.55);text-transform:uppercase;opacity:0;
}

@media(prefers-reduced-motion:reduce){
  #pgt{display:none}
}