:root {
  --sap-bg: #121212;
  --sap-primary: #1a73e8;
  --sap-secondary: #ea8c2d;
}

#skills-preloader {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) * -1);
  right: calc(env(safe-area-inset-right, 0px) * -1);
  bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
  left: calc(env(safe-area-inset-left, 0px) * -1);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: constant(safe-area-inset-top);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  background: var(--sap-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

body.preloader-activo #skills-preloader {
  opacity: 1;
  pointer-events: auto;
}

body.sap-reduced-motion #skills-preloader *,
body.sap-reduced-motion #skills-preloader::before,
body.sap-reduced-motion #skills-preloader::after {
  animation: none !important;
  transition: none !important;
}

.sap-burst {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, var(--sap-primary) 0%, transparent 70%);
}

.sap-logo {
  width: 80px;
  height: auto;
  z-index: 3;
  opacity: 0;
  transform: scale(.86);
}

body.preloader-transicion .sap-logo {
  opacity: 1;
  transform: scale(1);
}

.sap-progress-track {
  position: absolute;
  inset: auto 0 50%;
  height: 2px;
  transform: translateY(-50%);
  overflow: hidden;
}

.sap-progress-track::before,
.sap-progress-track::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  width: 50vw;
  opacity: 0;
  pointer-events: none;
}

#skills-preloader.sap-hide-center-lines .sap-progress-track {
  display: none !important;
}

.sap-bar-left,
.sap-bar-right {
  position: absolute;
  top: 0;
  height: 2px;
  width: 0;
  transition: width .12s linear;
  opacity: .9;
}

#skills-preloader.sap-transition-indeterminate .sap-bar-left,
#skills-preloader.sap-transition-indeterminate .sap-bar-right {
  opacity: 0 !important;
  animation: none !important;
}

.sap-bar-left {
  right: 50%;
  background: linear-gradient(to left, var(--sap-secondary), var(--sap-primary));
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
}

.sap-bar-right {
  left: 50%;
  background: linear-gradient(to right, var(--sap-secondary), var(--sap-primary));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
}

#skills-preloader.sap-transition-indeterminate .sap-bar-left {
  transform-origin: right center;
}

#skills-preloader.sap-transition-indeterminate .sap-bar-right {
  transform-origin: left center;
}

#skills-preloader.sap-transition-indeterminate .sap-progress-track::before {
  right: 50%;
  opacity: .9;
  background: linear-gradient(to left, var(--sap-secondary), var(--sap-primary));
  transform-origin: right center;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  background-size: 220% 100%;
  animation:
    sapCenterExpand .45s cubic-bezier(.2,.7,.2,1) forwards,
    sapCenterFlow .75s linear .1s infinite;
}

#skills-preloader.sap-transition-indeterminate .sap-progress-track::after {
  left: 50%;
  opacity: .9;
  background: linear-gradient(to right, var(--sap-secondary), var(--sap-primary));
  transform-origin: left center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
  background-size: 220% 100%;
  animation:
    sapCenterExpand .45s cubic-bezier(.2,.7,.2,1) forwards,
    sapCenterFlow .75s linear .1s infinite;
}

.sap-transition-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(to right, transparent 0%, var(--sap-primary) 30%, var(--sap-secondary) 50%, var(--sap-primary) 70%, transparent 100%);
}

@keyframes sapBurst {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(6); opacity: 0; }
}

@keyframes sapLogoZoom {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: .92; transform: scale(1); }
}

@keyframes sapLogoPulse {
  0% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.08); opacity: .72; }
  100% { transform: scale(1); opacity: .92; }
}

@keyframes sapLine {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes sapCenterFlow {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@keyframes sapCenterExpand {
  from {
    transform: scaleX(0);
    opacity: .72;
  }
  to {
    transform: scaleX(1);
    opacity: .9;
  }
}

#skills-page-skeleton {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) * -1);
  right: calc(env(safe-area-inset-right, 0px) * -1);
  bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
  left: calc(env(safe-area-inset-left, 0px) * -1);
  z-index: 99990;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  background: rgba(8, 10, 14, .40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.sap-skeleton-activo #skills-page-skeleton {
  opacity: 1;
  visibility: visible;
}

.sap-page-shell {
  width: min(920px, 92vw);
  margin: 90px auto 0;
  display: grid;
  gap: 14px;
}

.sap-page-line {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.18), rgba(255,255,255,.10));
  background-size: 220% 100%;
  animation: sapPageSkel 1.1s linear infinite;
}

.sap-page-line-hero { height: 220px; }
.sap-page-line-sub { height: 16px; width: 62%; }
.sap-page-line-sub2 { height: 16px; width: 44%; }
.sap-page-line-card { height: 120px; }
.sap-page-line-card2 { height: 120px; width: 84%; }

@media (max-width: 767px) {
  .sap-page-shell {
    margin-top: 72px;
    gap: 10px;
  }
  .sap-page-line-hero { height: 170px; }
}

@keyframes sapPageSkel {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

body.sap-nav-pending::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100000;
  background: linear-gradient(90deg, transparent 0%, var(--sap-primary) 30%, var(--sap-secondary) 55%, var(--sap-primary) 80%, transparent 100%);
  background-size: 220% 100%;
  animation: sapPendingSweep .8s linear infinite;
}

body.sap-nav-pending a.sap-link-pending {
  opacity: .86;
  transform: translateZ(0);
}

@keyframes sapPendingSweep {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}