.deco-hojita-slogan {
  position: absolute;
  top: 35px;     /* la hace sobresalir hacia arriba */
  right: 20%;      /* ajusta la posición horizontal */
  width: 100px;    /* tamaño de la hojita */
  z-index: 0;    /* encima del slogan-bar */
  transform: rotate(-10deg); /* inclinación leve */
  pointer-events: none;      /* no bloquea clics */
}



.main-section {
  position: relative;
  overflow: hidden; /* evita que salgan del contenedor */
}

/* Estilo general de las decoraciones */
.main-section .deco {
  position: absolute;
  z-index: -1;
  opacity: 0.9;
  pointer-events: none;
  max-width: 120px; /* tamaño base */
}

/* Posiciones individuales */
.aguacate {
  top: 30%;
  left: 5%;
  width: 80px;
}

.amarillo {
  top: 50%;
  right: 2%;
  width: 900px;
}
.hojaNaranja {
  bottom: 40%;
  left: 4%;
  width: 200px;
}
.hojita3 {
  top: 15%;
  right: 5%;
  width: 1000px;
}
.hojita4 {
  bottom: -10%;
  right: 70%;
  width: 120px;
}

.platano {
  bottom: 30%;
  left: 50%;
  width: 120px;
  transform: rotate(-15deg);
}
.puntitos {
  top: 50%;
  right: 40%;
  width: 60px;
}
.zigzag {
  bottom: 35%;
  left: 35%;
  width: 120px;
}

.main-section {
  position: relative;
  overflow: hidden;
  z-index: 0; /* base */
}

.main-section .features {
  position: relative;
  z-index: 1; /* contenido encima */
  background: transparent; /* importante para que deje ver las decoraciones */
}

.main-section .deco {
  position: absolute;
  z-index: -1; /* detrás del contenido */
  opacity: 0.9;
  pointer-events: none;
}
/*--------------------------about-section--------------------------*/

.about-section {
  position: relative;
  overflow: hidden; /* para que no sobresalgan */
  z-index: 0;
}

.about-section .decoraciones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* debajo del contenido */
}

.about-section .decoraciones .deco {
  position: absolute;
  opacity: 0.9;
  pointer-events: none;
  max-width: 120px;
  z-index: -1;
}

/* Posiciones personalizadas */
.about-section .hojita3 {
  top: 10%;
  left: 8%;
  width: 70px;
}
.about-section .hojita4 {
  bottom: 15%;
  right: 5%;
  width: 90px;
}

.about-section .amarillo {
  top: 5%;
  right: 12%;
  width: 85px;
}
.about-section .platano {
  bottom: 5%;
  left: 30%;
  width: 110px;
  transform: rotate(-12deg);
}

/*--------------------------products-section--------------------------*/

.products-section {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.products-section .decoraciones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.products-section .decoraciones .deco {
  position: absolute;
  opacity: 100%;
  pointer-events: none;
  max-width: 90px;
  z-index: -2;
}

/* Puntitos */
.products-section .puntitos1 {
  top: 15%;
  left: 2%;
  width: 60px;
}
.products-section .puntitos2 {
  top: 60%;
  right: 2%;
  width: 120px;
  opacity: 0.7;
}
.products-section .puntitos3 {
  bottom: 10%;
  left: 2%;
  width: 120px;
}

/* Hojitas */
.products-section .hojita1 {
  top: 25%;
  right: 5%;
  width: 80px;
  transform: rotate(20deg);
}
.products-section .hojita2 {
  bottom: 20%;
  left: 15%;
  width: 100px;
  transform: rotate(-15deg);
}
.products-section .hojita3 {
  bottom: 5%;
  right: 30%;
  width: 75px;
}



.mission-vision-container {
  position: relative;
  z-index: 1;
}

.mission-vision-container + .decoraciones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* detrás del contenido */
}

.mission-vision-container + .decoraciones .deco {
  position: absolute;
  opacity: 0.85;
  pointer-events: none;
  max-width: 100px;
  z-index: -1;
}

/* Posiciones */
.mission-vision-container + .decoraciones .hojita1 {
  top: 10%;
  left: 5%;
  width: 70px;
}

.mission-vision-container + .decoraciones .hojita2 {
  bottom: 15%;
  right: 8%;
  width: 90px;
}

.mission-vision-container + .decoraciones .puntitos {
  top: 50%;
  left: 45%;
  width: 80px;
  opacity: 0.6;
}

/* Estilos base (los que ya tienes) */
.decoraciones .deco {
  position: absolute;
  z-index: 0;
  opacity: 0.9;
}

.estrellita {
  top: 10%;
  right: 40%;
  width: 200px;
}

.passion {
  bottom: 15%;
  left: 5%;
  width: 300px;
}

.mamey {
  top: 40%;
  right: 10px;
  width: 100px;
}

/* Tablets (pantallas medianas) */
@media (max-width: 1024px) {
  .estrellita {
    width: 150px;
    right: 35%;
  }
  .passion {
    width: 220px;
    left: 3%;
  }
  .mamey {
    width: 80px;
    right: 5px;
  }
}

/* Celulares grandes */
@media (max-width: 768px) {
  .estrellita {
    width: 120px;
    right: 10%;
    top: 12%;
  }
  .passion {
    width: 180px;
    bottom: 5%;
    left: 2%;
  }
  .mamey {
    width: 70px;
    top: 50%;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  .estrellita {
    width: 100px;
    right: 5%;
    top: 15%;
  }
  .passion {
    width: 150px;
    bottom: 3%;
    left: 20%;
    transform: translateX(-50%); /* centrada abajo */
  }
  .mamey {
    width: 80px;
    top: 50%;
    right: 10%;
    transform: translateX(50%);
  }
}