/* ============================================
   CSS NO CRÍTICO - Se carga de forma asíncrona
   Animaciones y estilos que no bloquean el primer render
   ============================================ */

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes badgeEnter {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  
  60% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes iconGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 97, 158, 0);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(34, 97, 158, 0.35);
  }
}

@keyframes saberMas {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  40% {
    opacity: 1;
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes accordionFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@property --vps-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes vps-orbit {
  to {
    --vps-angle: 360deg;
  }
}

@keyframes vps-fade {
  to {
    opacity: 0;
  }
}

.vps-glow-button {
  position: relative;
}

.vps-glow-button.animate-vps-glow::before,
.vps-glow-button.animate-vps-glow::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--vps-angle),
    transparent 0deg,
    transparent 72deg,
    rgba(34, 97, 158, 0) 76deg,
    rgba(80, 145, 196, 0.45) 108deg,
    rgba(34, 97, 158, 0.9) 116deg,
    #e9f7ff 120deg,
    transparent 122deg,
    transparent 252deg,
    rgba(34, 97, 158, 0) 256deg,
    rgba(80, 145, 196, 0.45) 288deg,
    rgba(34, 97, 158, 0.9) 296deg,
    #e9f7ff 300deg,
    transparent 302deg,
    transparent 360deg
  );
  animation:
    vps-orbit 2s cubic-bezier(0.25, 0.25, 0.525, 1) 1 forwards,
    vps-fade 0.55s ease-out 0.55s 0.5 forwards;
}

.vps-glow-button.animate-vps-glow::after {
  inset: 0;
  padding: 3px;
  filter: blur(3px);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.vps-glow-button.animate-vps-glow::before {
  inset: -8px;
  padding: 14px;
  filter: blur(30px);
  opacity: 1;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@media (prefers-reduced-motion: reduce) {
  .vps-glow-button.animate-vps-glow::before,
  .vps-glow-button.animate-vps-glow::after {
    animation: none;
    opacity: 0;
  }
}

.hero-image-mask {
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.412) 50%, black 100%);
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.412) 50%, black 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  opacity: 1;
}

@media (max-width: 639px) {
  @keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .hero-image-mask {
    -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.505) 40%, rgba(0, 0, 0, 0.576) 100%);
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.505) 40%, rgba(0, 0, 0, 0.576) 100%);
    opacity: 0.9;
  }
}