/* Asegurar que el hero no genere scroll horizontal por el desborde de la manguera */
.hero-section {
  overflow-hidden: hidden;
  position: relative;
}



/* Contenedor de la manguera */

.hero-manguera-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Estilos de la imagen de la manguera */

.hero-manguera-img {

  max-width: 120%; 
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease;
}



/* Z-index para asegurar que los textos queden arriba si llegan a colisionar en pantallas medianas */

.z-2 {
  z-index: 2;
}



/* --- Ajustes Responsivos para Pantallas Grandes (Desktop) --- */

@media (min-width: 992px) {

  .hero-manguera-wrapper {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 150%;
    justify-content: flex-start;

  }

  

  .hero-manguera-img {
    max-width: 100%;
    animation: floatManguera 6s ease-in-out infinite;
  }
}



/* Animación opcional para darle dinamismo a las mangueras */
@keyframes floatManguera {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}




.badge-ribbon {
  position: absolute;
  bottom: -40px;
  left: 20%;
  background-color: #00a86b; 
  color: #fff;
  padding: 15px;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border: 3px dashed #ffffff50;
  z-index: 3;

}