@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
* {
    font-family: 'Nunito', sans-serif;
}
.gradient-bg {
    background: linear-gradient(135deg, #0066FF 0%, #00FF88 100%);
}
.tech-card {
    transition: all 0.3s ease;
}
.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.2);
}
.service-card {
    transition: all 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.15);
}
.scroll-up-btn {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.scroll-up-btn.show {
    opacity: 1;
    visibility: visible;
}
.testimonial {
    display: none;
}
.testimonial.active {
    display: block;
}
.hero-animation {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
.tech-icon {
    transition: all 0.3s ease;
}
.tech-icon:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #0066FF, #00FF88);
    color: white;
}
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}
.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Hero Background Styles */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}
.hero-bg.active {
    opacity: 1;
}
.hero-bg-1 {
    background: url('../images/alamedida.png') center no-repeat;
                /* linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);*/
}
.hero-bg-2 {
    background: url('../images/solucionesweb.png') center no-repeat;
                /*linear-gradient(135deg, rgba(240, 147, 251, 0.8) 0%, rgba(245, 87, 108, 0.8) 100%);*/
}
.hero-bg-3 {
    background: url('../images/rentasoluciones.png') center no-repeat; /*,linear-gradient(135deg, rgba(79, 172, 254, 0.8) 0%, rgba(0, 242, 254, 0.8) 100%);*/
                
}
.hero-bg-4 {
    background: url('../images/alamedida.png') center no-repeat;/*, linear-gradient(135deg, rgba(67, 233, 123, 0.8) 0%, rgba(56, 249, 215, 0.8) 100%);*/
                
}

/* Text Animation Styles */
.hero-text-slide {
    display: inline-block;
    transition: all 0.8s ease-in-out;
}
.ventaja-card {
    background: white;
    border-radius: 15px;
    padding: 30px 20px;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ventaja-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  .ventaja-card h3 {
    color: #0066cc;
    font-size: 1.3em;
    margin-top: 15px;
  }

  .ventaja-card p {
    font-size: 0.95em;
    color: #555;
    margin-top: 10px;
  }

  .ventaja-icon {
    width: 70px;
    height: 70px;
  }
  
  @media (max-width: 768px) {
    .ventaja-card {
      width: 80%;
    }
  }