/* Ajustes personalizados para que la landing sea idéntica al original */

/* 1. Carousel - Ocultar flechas de navegación */
#hero .carousel-control-prev,
#hero .carousel-control-next {
  display: none !important;
}

/* Carousel - Agregar sombra */
#hero .carousel-inner {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Carousel - Capa de opacidad para mejorar legibilidad del texto */
#hero .carousel-item::before {
  background-color: rgba(255, 255, 255, 0.55) !important; /* Capa blanca semi-transparente */
}

/* Reducir ligeramente el brillo de las imágenes */
#hero .carousel-background img {
  filter: brightness(0.5) !important;
}

/* Carousel - Asegurar que las imágenes cubran todo el ancho */
#hero .carousel-background {
  width: 100% !important;
}

#hero .carousel-background img {
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover !important;
}

/* 2. Prueba nuestras herramientas - Alinear textos a la izquierda */
.counts .count-box {
  text-align: left !important;
}

.counts .count-box img {
  float: none !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
}

.counts .count-box p {
  text-align: left !important;
}

/* 3. Estadísticas - Ocultar iconos */
.counts.section-bg .count-box i {
  display: none !important;
}

.counts.section-bg .count-box span {
  margin-left: 0 !important;
}

/* 4. Servicios - Alinear textos e iconos a la izquierda */
.services .icon-box {
  text-align: left !important;
}

.services .icon {
  margin: 0 0 20px 0 !important;
  display: block !important;
  float: none !important;
}

.services .title,
.services .description {
  text-align: left !important;
}

/* 5. CTA - Asegurar que la imagen de fondo se muestre */
.cta {
  background: linear-gradient(rgba(66, 84, 81, 0.5), rgba(43, 56, 54, 0.5)), url("/cta-bg.jpg") fixed center center !important;
  background-size: cover !important;
}