body{
  overflow-x: hidden!important;
}


/* Header background gradients */

/* Dark mode header gradient */
.dark .header-bg {
  background: linear-gradient(
    135deg,
    hwb(220 40% 41%) 0%,
    #1a202c 40%,
    #111827 60%,
    #0f172a 80%
  );
}
/* ===============================
   Tarjeta con notch en borde
   =============================== */
.clip-card {
  position: relative;
  border-radius: 18px;
  background-clip: padding-box;
  overflow: hidden; /* Cambiado a hidden para contener el pseudo-elemento */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 12px 24px rgba(167, 139, 250, 0.4);
}

/* Borde completo con efecto hover */
.clip-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid hsl(255, 81%, 59%);
  border-radius: 18px;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1; /* Asegura que el borde esté sobre el contenido */
}

/* Efecto hover */
.clip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 20px rgba(167, 139, 250, 0.3);
}

.clip-card:hover::before {
  border-color: hsl(255, 81%, 70%);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.5);
}

/* Contenido de la tarjeta con posición relativa */
.card-content {
  position: relative;
  z-index: 2; /* Asegura que el contenido esté sobre el borde */
}

.clip-card:hover::before {
  box-shadow: 0 12px 24px rgba(167, 139, 250, 0.4);
  transform: scale(1.02);
  clip-path: polygon(
    28px 0,
    100% 0,
    100% 100%,
    0% 100%,
    0 28px
  );
}

/* ==== Animaciones de flotación para los blobs ==== */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(10px, -20px); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-15px, 15px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, 10px); }
}

@keyframes float4 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, -15px); }
}

@keyframes float5 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(15px, -10px); }
}

/* Asignamos la animación a cada clase */
.animate-float1 { animation: float1 8s ease-in-out infinite; }
.animate-float2 { animation: float2 10s ease-in-out infinite; }
.animate-float3 { animation: float3 12s ease-in-out infinite; }
.animate-float4 { animation: float4 9s ease-in-out infinite; }
.animate-float5 { animation: float5 11s ease-in-out infinite; }
  #scrollTopBtn {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease;
            background: transparent;
        }
        #scrollTopBtn.show {
            opacity: 1;
            transform: scale(1);
        }
        .progress-ring {
            stroke-dasharray: 138;
            stroke-dashoffset: 138;
            transition: stroke-dashoffset 0.2s ease;
        }

          /* Giro lento y reverso */
  @keyframes spin-slow   { to { transform: rotate(360deg); } }
  @keyframes spin-reverse{ to { transform: rotate(-360deg); } }
  /* Pulsado de puntos */
  @keyframes pulse-delay {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
  }
  /* Barra de progreso infinita */
  @keyframes progress {
    0%   { width: 0%; }
    100% { width: 100%; }
  }
  .animate-spin-slow    { animation: spin-slow 2s linear infinite; }
  .animate-spin-reverse { animation: spin-reverse 1s linear infinite; }
  .animate-pulse        { animation: pulse-delay 1.5s ease-in-out infinite; }
  .delay-100            { animation-delay: 0.1s; }
  .delay-200            { animation-delay: 0.2s; }
  .delay-300            { animation-delay: 0.3s; }
  .animate-progress     { animation: progress 3s ease-in-out infinite; }
  /* Fade in/out al mostrar/ocultar */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
  }
  
  .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
  }
  
  .animate-progress {
    animation: progress 2.5s ease-in-out infinite;
  }
  
  /* Efecto de brillo para el loader */
  #page-loader div:first-child::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
    border-radius: 50%;
    z-index: -1;
    animation: pulse-glow 4s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1.05); }
  }

    @keyframes rotate-bg {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes fade-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .animate-rotate { animation: rotate-bg 30s linear infinite; }
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in 0.8s ease-out forwards;
  }
 .active {
        color: #1D4ED8; /* Azul oscuro de Tailwind */
        font-weight: bold;
        border-bottom: 2px solid #1D4ED8;
    }

  /* Asegúrate de que .nav-link tenga posicionamiento relativo */
.nav-link {
  position: relative;
  padding-bottom: 4px; /* espacio para la línea */
  color: inherit;       /* hereda el color del texto */
  text-decoration: none; /* quitamos subrayado nativo */
}

/* Pseudo-elemento inicial */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;             /* grosor de la línea */
  background-color: #3b82f6; /* azul Tailwind (indigo-500) */
  transition: width 0.3s ease;
}

/* En hover / focus expandimos al 100% */
.nav-link:hover::after,
.nav-link:focus::after {
  width: 100%;
}

 @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
  }
  
  .animate-rotate {
    animation: rotate 20s linear infinite;
  }
  
  .typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2.5s steps(20) 1s 1 normal both;
  }
 .footer-link {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .footer-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background-color: #6366f1; /* indigo-500 */
    transition: width 0.3s ease;
  }

  .footer-link:hover::after,
  .footer-link:focus::after {
    width: 70%;
  }
  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    color: white;
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.whatsapp-float {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 74px;
  right: 24px;
  z-index: 1000;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-icon {
  width: 26px;
  height: 26px;
}