/* quita el margen default del body y corta overflow horizontal */
html, body { margin: 0; overflow-x: hidden; }

/* nada de 100vw en el hero/carrusel */
.hero, .carousel, .carousel-inner, .carousel-item { width: 100%; }

/* imágenes no empujan */
img, iframe, video { max-width: 100%; height: auto; }

/* ⚠️ Revertir lo que tocaste antes: NO toques .container-fluid ni .row globalmente */




.grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.grayscale:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.02);;
}

.grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background-color: white;
  padding: 5px;
}

.grayscale:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.02);
}

.grayscale img {
  height: 100px;
  max-width: 140px;
  object-fit: contain;
}

.cliente-logo-wrapper {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.cliente-logo-wrapper img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* assets/css/bss-overrides.css (o tu hoja principal) */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  z-index: 5;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* si usas tu propio ícono */
}


.form-contacto .form-field { margin-bottom: 12px; }
.form-contacto .buttons   { margin-top: 8px; }