body { /*Fondo*/
    background: radial-gradient(circle, #c37bff, #f480ff, #ffffff, #7bc1ff, rgb(127, 255, 227)); /* Gradiente de 4 colores */
    min-height: 100vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.colorFondoBoton { /* color base del div boton home dimensionado*/
  border-radius: 20px; /* da borden redondo */
  background-color: magenta; /* da color base */
  width: 298px; /* ancho */
  box-shadow:0px 5px 20px rgb(105, 7, 171);
}

.btn-group .btn {
  border-radius: 20px; /* da borden redondo */
  background-color:transparent; /* fondo transparente */
  border: none; /* Sin borden */
  transition: border-radius 0.0s ease; /* Suaviza la transición */
  right: 13px;
}

#boton1:hover {
  border-radius: 50px; /* Aplica bordes redondeados al pasar el ratón */
  background-color: rgb(74, 165, 245); /* color de hover */
}

#boton2:hover {
  border-radius: 50px; /* Aplica bordes redondeados al pasar el ratón */
  background-color: rgb(74, 165, 245);/* color de hover */
}

#boton3:hover {
  border-radius: 50px; /* Aplica bordes redondeados al pasar el ratón */
  background-color: rgb(74, 165, 245);/* color de hover */
}


@media screen and (min-width: 768px) { /*Responsive*/
.colorFondoBoton { /* color base del div boton home dimensionado*/
  border-radius: 50px; /* da borden redondo */
  background-color: magenta; /* da color base */
  width: 597px; /* ancho */
  position: relative;

}

.btn-group .btn {
  border-radius: 20px; /* da borden redondo */
  background-color:transparent; /* fondo transparente */
  border: none; /* Sin borden */
  transition: border-radius 0.0s ease; /* Suaviza la transición */
  position: relative;
  right: 13px;
  font-size: 20px;
}

#boton1 {
  width: 200px;
}

#boton2 {
  width: 200px;
}

#boton3 {
    width: 200px;
}

}

#comienzoHome { /* estilo a mi tipo jumbotrom */
  border-radius: 30px; /* da borden redondo */
  background-color: rgb(253, 197, 242);
  color: black;

}

.imagenCarrusel { /*Imagenes carrusel*/
  width: 200px;
  height: 250px;
  border-radius: 15px;
  box-shadow: 8px 8px 8px rgb(82, 23, 137);
  margin-bottom: 18px;
}


#tipBelleza {/* estilo a mi tipo jumbotrom en tips belleza */
  border-radius: 30px; /* da borden redondo */
  background-color: rgb(170, 200, 255);
  color: black;

}

#tipSombra {/* estilo a mi tipo jumbotrom en tips belleza */
  border-radius: 30px; /* da borden redondo */
  background-color: rgb(217, 170, 255);
  color: black;

}

#tipSkingCare{/* estilo a mi tipo jumbotrom en tips belleza */
  border-radius: 30px; /* da borden redondo */
  background-color: rgb(164, 225, 208);
  color: black;

}

.imagenTips{ /*Imagenes de tips*/
  border-radius: 100px;

}

#infoEmpresa{ /*Empresa informacion*/
  border: none;
  border-radius: 30px;
  margin: 70px;
  padding-top: 50px;
  background-color: rgb(255, 242, 196);

}

#selloEmpresa { /*Imagenes empresa*/
  border: none;
  border-radius: 30px;
  margin: 70px;
  padding-top: 15px;
  background-color: bisque;

}

.empresaimg {
  width: 150px;
  height: 150px;
}

#anteFinal { /*Articulo antes de footer*/
  border: none;
  border-radius: 30px;
  margin: 70px;
  padding-top: 50px;
  background-color: rgb(253, 200, 235);
}

#btnSubir { /*Boton subir*/
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde el borde inferior */
  right: 20px;  /* Ajusta la distancia desde el borde derecho */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
 
}