body { font-family: 'Rubik', sans-serif; background: #f9f9f9; }
    .topbar { background-color: #1e3c72; color: white; padding: 10px 0; }
    .topbar .btn-top { margin-left: 10px; }
    .topbar .navbar-toggler { background-color: white; border: none; }
    .hero { background: linear-gradient(to right, #1e3c72, #2a5298); color: white; padding: 80px 0; text-align: center; position: relative; }
    .hero h1 { font-size: 3rem; }
    .card-producto { transition: all 0.3s ease; }
    .card-producto:hover { transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    .btn-main { background-color: #ff5722; color: white; border: none; }
    .btn-main:hover { background-color: #e64a19; }
    .features-section h4 { color: #1e3c72; }
    .icon-box { font-size: 40px; color: #2a5298; }
    .testimonial { background-color: #fff; padding: 20px; border-left: 4px solid #ff5722; border-radius: 8px; margin-bottom: 20px; }
    .blog-post { background-color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .faq-section { background: #fff; padding: 50px 0; }
    .whatsapp-btn { position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: white; padding: 12px 18px; border-radius: 50%; font-size: 24px; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
 
  /* Puedes agregar en tu <style> o CSS externo para efecto gris */
    .grayscale {
      filter: grayscale(100%);
      transition: 0.3s ease-in-out;
    }
    .grayscale:hover {
      filter: grayscale(0%);
    }
    .logo-slider-wrapper {
  overflow: hidden;
  position: relative;
  height: 80px;
}

.logo-slider {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: scrollLeft 25s linear infinite;
}

.logo-item {
  height: 60px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s ease-in-out;
}

.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.logo-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 80px;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: scrollLogos 30s linear infinite;
}

.logo-item {
  height: 60px;
  margin: 0 40px;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: 0.3s ease-in-out;
}

.logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.animate {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
  will-change: transform, opacity;
}
.animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-left { transform: translateX(-50px); }
.fade-in-left.visible { transform: translateX(0); }

.fade-in-up { transform: translateY(50px); }
.fade-in-up.visible { transform: translateY(0); }

.zoom-in { transform: scale(0.8); }
.zoom-in.visible { transform: scale(1); }

.zoom-out { transform: scale(1.2); }
.zoom-out.visible { transform: scale(1); }

.fade-in-right {
  transform: translateX(50px);
}
.fade-in-right.visible {
  transform: translateX(0);
}

.slide-up {
  transform: translateY(80px);
}
.slide-up.visible {
  transform: translateY(0);
}

.btn-main {
  background-color: #ff5722;
  color: white;
  border: none;
}
.btn-main:hover {
  background-color: #dbc5bf;
}
body {
  padding-top: 60px; /* Ajusta al alto real de tu barra */
}