/* ✅ Estilos personalizados para sección #servicios */
#servicios {
  background-color: #0f172a;
  color: white;
  padding-top: 96px;
  padding-bottom: 96px;
}

#servicios h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#servicios h2.in-view {
  opacity: 1;
  transform: translateY(0);
}

#servicios .scroll-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#servicios .scroll-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

#servicios .servicio-card,
#servicios .grid > div {
  background-color: #1e293b;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#servicios .servicio-card:hover,
#servicios .grid > div:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

#servicios .grid > div .p-5,
#servicios .grid > div .p-6 {
  padding: 20px;
}

#servicios .grid > div h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}

#servicios .grid > div p {
  font-size: 0.875rem;
  color: #d1d5db;
}



body { margin: 0; font-family: 'Segoe UI', sans-serif; }

    .card {
      background: linear-gradient(145deg, #F2F4F8, #E6ECF1);
      padding: 24px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .card small {
      display: block;
      margin-top: 8px;
      color: #3A4A5A;
      font-size: 14px;
    }

    h1.fade-slide, p.fade-slide, .fade-slide {
      opacity: 0;
      animation: fadeSlideUp 1s ease-in-out forwards;
    }

    @keyframes fadeSlideUp {
      0% { opacity: 0; transform: translateY(30px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .scroll-fade {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .scroll-fade.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    
/* Estilo base del header */
.nav-link {
  color: #0B1C2C;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.nav-link:hover {
  color: #00A9B5;
  transform: scale(1.05);
}