html {
  transition: font-size 0.3s ease;
}

.font-scale-lg {
  transition: font-size 0.3s ease;
}


/* Forzar mostrar el overlay en dispositivos sin hover */
.no-hover .group .group-hover\\:opacity-100 {
    opacity: 1 !important;
}

.no-hover .group .group-hover\\:scale-105 {
    transform: scale(1.05) !important;
}

.no-hover .group-hover\\:opacity-60 {
    opacity: 0.6 !important;
}

/* Transición suave del menú móvil */
#mobileMenu {
  transition: all 0.3s ease-in-out;
}

/* Efecto de subrayado animado */
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #3B82F6, #8b5cf6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hover-underline:hover::after {
  transform: scaleX(1);
}


@keyframes borderGlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.glow-frame {
  position: relative;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(270deg,
      #3b82f6,
      #06b6d4,
      #22c55e,
      #eab308,
      #f97316,
      #ec4899,
      #8b5cf6,
      #3b82f6
  );
  background-size: 600% 600%;
  animation: borderGlow 3.5s linear infinite;
  overflow: hidden;
  display: flex;
}

/* 🔵 Bola de luz que recorre el borde */
.glow-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 9999px;
  box-shadow:
    0 0 20px 6px rgba(255, 255, 255, 0.9),
    0 0 40px 12px rgba(96, 165, 250, 0.6),
    0 0 60px 24px rgba(139, 92, 246, 0.4);
  animation:
    travelLight 8s linear infinite,
    starPulse 3.6s ease-in-out infinite alternate;
  z-index: 5;
}

@keyframes travelLight {
  0%   { top: 0;   left: 0;   }
  25%  { top: 0;   left: 100%; }
  50%  { top: 100%; left: 100%; }
  75%  { top: 100%; left: 0;   }
  100% { top: 0;   left: 0;   }
}

@keyframes starPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
    box-shadow:
      0 0 25px 8px rgba(255, 255, 255, 0.7),
      0 0 50px 16px rgba(96, 165, 250, 0.5),
      0 0 90px 36px rgba(139, 92, 246, 0.3);
  }
  20% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow:
      0 0 35px 12px rgba(255, 255, 255, 0.95),
      0 0 80px 24px rgba(96, 165, 250, 0.8),
      0 0 150px 60px rgba(139, 92, 246, 0.6);
  }
  45% {
    transform: scale(0.75);
    opacity: 0.4;
    box-shadow:
      0 0 20px 6px rgba(255, 255, 255, 0.5),
      0 0 30px 12px rgba(96, 165, 250, 0.3),
      0 0 40px 20px rgba(139, 92, 246, 0.15);
  }
  65% {
    transform: scale(1.4);
    opacity: 0.9;
    box-shadow:
      0 0 45px 16px rgba(255, 255, 255, 1),
      0 0 100px 32px rgba(96, 165, 250, 0.9),
      0 0 180px 72px rgba(139, 92, 246, 0.7);
  }
  85% {
    transform: scale(0.95);
    opacity: 0.7;
    box-shadow:
      0 0 28px 10px rgba(255, 255, 255, 0.6),
      0 0 60px 20px rgba(96, 165, 250, 0.4),
      0 0 100px 40px rgba(139, 92, 246, 0.3);
  }
  100% {
    transform: scale(1.1);
    opacity: 0.85;
    box-shadow:
      0 0 38px 12px rgba(255, 255, 255, 0.9),
      0 0 90px 30px rgba(96, 165, 250, 0.6),
      0 0 140px 55px rgba(139, 92, 246, 0.5);
  }
}

.glow-inner {
  border-radius: 0.875rem;
  background-color: #0f172a;
  padding: 21vh 10vh;
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: relative;
}

.dark .glow-inner {
  background-color: transparent;
}

/* FORMULARIO CONTACTO + utilidades extendidas */
@layer utilities {
  .animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out both;
  }

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

  .pulse-shadow {
    animation: pulseGlow 2s ease-in-out infinite;
  }

  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 0px rgba(59, 130, 246, 0.3);
    }
    50% {
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
    }
  }

  /* 🔁 MODAL TRANSITIONS */
  .modal-open {
    opacity: 1 !important;
    pointer-events: auto;
  }

  .modal-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .scale-in {
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  .scale-out {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* === Animaciones personalizadas usadas por lookingFor.js === */

/* Intense Pulse */
@keyframes intensePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
}
.animate-intensePulse {
  animation: intensePulse 1.5s ease-in-out infinite;
}

/* Blinking cursor para el | del typing */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.animate-blink {
  animation: blink 1s step-start infinite;
}

/* Pulsado lento para CTA */
@keyframes pulseSlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.75;
  }
}
.animate-pulse-slow {
  animation: pulseSlow 2.5s ease-in-out infinite;
}

@layer utilities {
  .font-scale-lg {
    font-size: 1.125rem; /* escala base */
  }

  .font-scale-lg h1 {
    font-size: 2.75rem;
  }

  .font-scale-lg h2 {
    font-size: 2.25rem;
  }

  .font-scale-lg h3 {
    font-size: 1.75rem;
  }

  .font-scale-lg p,
  .font-scale-lg li,
  .font-scale-lg span,
  .font-scale-lg a,
  .font-scale-lg button {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .font-scale-lg small {
    font-size: 1rem;
  }
}


/* Animación hamburguesa -> X */
#burgerBtn.open .burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#burgerBtn.open .burger-line:nth-child(2) {
  opacity: 0;
}
#burgerBtn.open .burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}